横竖屏切换中的界面设计与体验提升.pdf

横竖屏切换中的界面设计与体验提升 之前一周朦朦胧胧的过掉了 ，想来也没什 可回忆的。这是一种不坏的状态 ，就像每天早上莫名的 空洞 ，它们都代表着生活和工作里至少还没有很坏很衰的事情让人焦虑。有吗 ？也许只是在哄骗和 宽慰自己。 杂志一般的小译文一篇 ，适合这样的下午做一做 ，适合这样的周末读一读。走着。 眼下 ，智能移动设备内置的加速计的主要作用 ，就是根据设备的定向方式来决定屏幕的显示模式 ， 也就是在横屏或竖屏模式之间进行切换。这种功能使用户通过简单的动作就可以得到额外的布局 模式 ，期间不需要操作任何界面元素或实体按钮。对于我们来说 ，这是一个提升产品用户体验的 契机 ，但其中也不乏挑战 ；我们要充分了解不同定向方式所涉及到的使用情境 ，并确保两种体验模 式之间的差异不会给用户带来唐突的感觉。 几乎所有类型的移动应用都能从显示模式切换功能当中获益。本文将围绕着这一话题 ，为应用的设 计师与开发者们介绍一些可以运用到实际工作中的基础概念 ，同时还会帮助大家了解那些在实践当 中有可能遇到的挑战以及相应的解决方案。 通过设备定向切换显示模式 Yo ut ube的移动应用是一个很典型的案例。在竖屏模式中 ，视频窗口较小 ，但相关信息比较丰富 ； 而在横屏模式下 ，视频展开为全屏 ，并向用户提供了更加全面的播放控制功能。当视频播放结束后 ，界面模式会自动切换到竖屏状态 ，籍此提示用户调转设备并通过更全面的导航和信息索引来浏览 其他视频。 不过在有些时候 ，第二显示模式也会给用户带来迷惑。以 CardMunch为例(LinkedIn推出的名片扫描 及浏览工具) ，其横屏模式会将之前整个列表形式的界面改变成为“旋转木马”视图。(相关阅读 ：iO S 用户体验解析 – 空间模型与旋转木马视图) 这个横屏界面中缺少关于定向切换的视觉提示 ，而且其中几乎没有提供任何功能操作 ，用户无法添 加或编辑名片 ，只能浏览并进入详情界面。特别是如果用户在一开始就以横屏方式打开的应用 ，那 在缺乏引导与提示的情况下 ，他们很有可能无法发现竖屏模式的界面及相应的内容与功能。 设计模式 设备的定向方式被改变之后 ，应该以怎样的方式呈现新的视图呢 ？我们总结出了四种常见的设计 模式。 液态 类似网页设计中的液态布局方式。按照新的显示规格 ，对界面元素的位置及尺寸进行响应式的调整 。具有代表性的产品案例包括Skype及Pocket应用。 扩展 在这种模式中 ，界面会根据屏幕定向方式的变化而增加或减少布局元素(通常是导航)。例如IMDb 的iPad应用会在横评模式下增加一个左侧导航列表 ，而在竖屏状态时 ，用户可以点击界面当中的“全 部作品”展开这个列表。 对于这类应用 ，其自身的内容与功能不应该随着显示模式的切换而增减——需要调整的是一些关键 界面元素的呈现方式。不要让用户必须保持某种定向方式才能获取特定的内容与功能。 互补 两种显示模式当中的内容形式可以是彼此互补和辅助的关系。以金融类的应用为例 ，在竖屏状态下 ，信息可以通过普通的数据列表形式呈现 ，而调转屏幕之后 ，可以充分利用新的界面宽度 ，以统计 图表的形式展示数据。 延伸 第二显示模式可以作为默认状态的功能延伸与强化。举个简单的例子 ，对于遥控器类的应用 ，竖屏 状态的默认界面中可以包含一些最基本的功能与频道信息 ；而在横屏状态下 ，用户不仅能查看到各 频道完整的节目排期 ，而且同样可以在这个视图当中执行频道切换、设定录像时间等操作。 确定默认的定向方式 bove & Beyo nd是iPad上的一款交互式电子书。它拥有横、竖两种显示模式 ，其中竖屏模式提供 更大的、细节质量更高的作品视图 ，不过只有在横屏状态时才会默认显示“返回主菜单”、“评论”一类 的互动功能。 然而对于iPad来说 ，竖屏才是其的默认定向方式。所以当用户第一次在竖屏状态下打开应用时 ，系 统会提示用户通过点击屏幕来调出相关的功能——设计师在这一点上考虑的非常周全。 不过对于 ndo rid以及W indows 8的平板 ，以及BlackBerry的Playboo k来说 ，它们的默认定向方式 是横屏。那 在这些设备中 ，界面显示模式的策略及相关引导提示就需要发生相应的变化了——我 们要确保默认显示模式当中的内容与功能符合目标设备自身默认定向方式的特点。 理解应用的上下文环境 上下文使用环境是移动应用用户体验设计当中的关键组成要素(相关阅读 ：iO S用户体验要素解 析 ，为应用的上下文环境而设计) ，在考虑屏幕定向及显示模式切换的相关问题时 ，这方面的因素也 会起到重要的影响作用。 以目前日渐流