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

之前一周朦朦胧胧的过掉了，想来也没什么可回忆的。这是一种不坏的状态，就像每天早上莫名的空洞，它们都代表着生活和工作里至少还没有很坏很衰的事情让人焦虑。有吗？也许只是在哄骗和宽慰自己。

杂志一般的小译文一篇，适合这样的下午做一做，适合这样的周末读一读。走着。

眼下，智能移动设备内置的加速计的主要作用，就是根据设备的定向方式来决定屏幕的显示模式，也就是在横屏或竖屏模式之间进行切换。这种功能使用户通过简单的动作就可以得到额外的布局模式，期间不需要操作任何界面元素或实体按钮。对于我们来说，这是一个提升产品用户体验的契机，但其中也不乏挑战；我们要充分了解不同定向方式所涉及到的使用情境，并确保两种体验模式之间的差异不会给用户带来唐突的感觉。

几乎所有类型的移动应用都能从显示模式切换功能当中获益。本文将围绕着这一话题，为应用的设计师与开发者们介绍一些可以运用到实际工作中的基础概念，同时还会帮助大家了解那些在实践当中有可能遇到的挑战以及相应的解决方案 。

通过设备定向切换显示模式

Youtube的移动应用是一个很典型的案例。在竖屏模式中，视频窗口较小，但相关信息比较丰富；而在横屏模式下，视频展开为全屏，并向用户提供了更加全面的播放控制功能。当视频播放结束后，界面模式会自动切换到竖屏状态，籍此提示用户调转设备并通过更全面的导航和信息索引来浏览其他视频。

不过在有些时候，第二显示模式也会给用户带来迷惑。以 CardMunch为例(LinkedIn推出的名片扫描及浏览工具)，其横屏模式会将之前整个列表形式的界面改变成为“旋转木马”视图。(相关阅读： iOS用户体验解析 - 空间模型与旋转木马视图)

这个横屏界面中缺少关于定向切换的视觉提示，而且其中几乎没有提供任何功能操作，用户无法添加或编辑名片，只能浏览并进入详情界面。特别是如果用户在一开始就以横屏方式打开的应用，那么在缺乏引导与提示的情况下，他们很有可能无法发现竖屏模式的界面及相应的内容与功能。

设计模式

设备的定向方式被改变之后，应该以怎样的方式呈现新的视图呢？我们总结出了四种常见的设计模式。

液态

类似网页设计中的液态布局方式。按照新的显示规格，对界面元素的位置及尺寸进行响应式的调整。具有代表性的产品案例包括Skype及 Pocket应用。

扩展

在这种模式中，界面会根据屏幕定向方式的变化而增加或减少布局元素(通常是导航)。例如IMDb的iPad应用会在横评模式下增加一个左侧导航列表，而在竖屏状态时，用户可以点击界面当中的“全部作品”展开这个列表。

对于这类应用，其自身的内容与功能不应该随着显示模式的切换而增减——需要调整的是一些关键界面元素的呈现方式。不要让用户必须保持某种定向方式才能获取特定的内容与功能。

互补

两种显示模式当中的内容形式可以是彼此互补和辅助的关系。以金融类的应用为例，在竖屏状态下，信息可以通过普通的数据列表形式呈现，而调转屏幕之后，可以充分利用新的界面宽度，以统计图表的形式展示数据。

延伸

第二显示模式可以作为默认状态的功能延伸与强化。举个简单的例子，对于遥控器类的应用，竖屏状态的默认界面中可以包含一些最基本的功能与频道信息；而在横屏状态下，用户不仅能查看到各频道完整的节目排期，而且同样可以在这个视图当中执行频道切换、设定录像时间等操作。

确定默认的定向方式

Above & Beyond是iPad上的一款交互式电子书。它拥有横、竖两种显示模式，其中竖屏模式提供更大的、细节质量更高的作品视图，不过只有在横屏状态时才会默认显示“返回主菜单”、“评论”一类的互动功能。

然而对于iPad来说，竖屏才是其的默认定向方式。所以当用户第一次在竖屏状态下打开应用时，系统会提示用户通过点击屏幕来调出相关的功能——设计师在这一点上考虑的非常周全。

不过对于Andorid以及Windows 8的平板，以及BlackBerry的Playbook来说，它们的默认定向方式是横屏。那么在这些设备中，界面显示模式的策略及相关引导提示就需要发生相应的变化了——我们要确保默认显示模式当中的内容与功能符合目标设备自身默认定向方式的特点。

理解应用的上下文环境

上下文使用环境是移动应用用户体验设计当中的关键组成要素(相关阅读： iOS用户体验要素解析， 为应用的上下文环境而设计)，在考虑屏幕定向及显示模式切换的相关问题时，这方面的因素也会起到重要的影响作用。

以目前日渐流行的食谱类应用为例，很多硬件厂商甚至为这些应用打造了相关的壁挂或桌面支架，使用户能够更方便的在厨房当中使用。

而我们也可以根据这类应用在不同的使用情景中的需求用例来创建具有差异性的显示模式。以 The Betty Crocker Cookbook为例，当用户在相对安定的状态下希望阅读和学习食谱时，他可以使用竖屏模式；此时界面中会展示完整的烹饪及食谱信息，同时还包括最终效果图以及相关的功能元素。如果用户希望在厨房一边烹饪一边进行参考，那么横屏模式就更加适用了。在这种状态下，每一步的操作指导都会占据一屏的篇幅，字号更大，便于在短时间内识别；利用内置摄像头，应用还可以识别特定的肢体动作，用户无需触摸屏幕，只要在摄像头前挥挥手，操作指导就会自动翻页。

引导用户在不同的显示模式之间切换

通过调转屏幕来切换显示模式，从某种程度上讲这种交互方式并不符合直觉。如果界面中没有任何视觉引导和提示，用户很有可能错过另外一种显示模式及相应的功能体验。以iPhone自带的计算器应用为例，如果用户不知道它还能提供横屏模式，那就会错失掉那些高级计算功能。

通过视觉元素对用户进行提示与引导，这可以使产品的体验更加符合直觉(相关阅读： 具有引导性的移动应用界面设计模式)。我们来看一些可以用来提示用户进行显示模式切换的设计思路。

标题栏

通过标题栏作为提示，这种方式主要运用在第二显示模式当中。仍使用之前的遥控器应用作为例子，如果用户以横屏状态打开了应用，他将看到一个固定显示在左侧的标题栏，其中的标题文字方向会暗示他将屏幕调转过来进行阅读，从而发现竖屏模式。

切换按钮

与标准的分享按钮类似，我们也可以使用能够被普遍认知的图标按钮提示用户手动切换横竖屏显示模式。

两种显示模式当中都要包含这个切换按钮。用户点击之后，显示模式自动切换，虽然接下来用户未必会真正调转设备进行查看，但他们通过这种方式了解了应用所提供的两种显示模式，将来会逐渐的在需要的时候自行调转设备，不再需要按钮的辅助。所以该按钮即可以触发切换功能，同时也可以作为视觉提示。

切换图标也未必要以标准按钮的形式出现：

需要注意的是，这种方式有它自身的风险，在界面中添加某种非标准的、持续存在的辅助性元素，这本身是具有一定争议的。不过这种方式的简单有效也是显而易见的。所以也希望各位设计师们能够从这点出发，扩展思路，结合产品的实际情况进行实践 。

拖拽把手

使用把手形式的控件来提示用户通过拖拽展开第二视图模式，如果用户直接调转设备的话，第二视图模式也会自动展开，类似卷帘的效果。带有方向的动画过渡效果可以使用户对两种视图模式的层叠关系产生深刻的印象。

总结

我们习惯于将这些“额外”的显示模式作为应用主要界面模式的附属物，其主要原因也许就在于很多用户根本不了解它们的存在。通过一定的视觉提示，引导用户发现这些同样是经过精心考虑和打造的界面模式，我们就能使应用针对不同的使用情境发挥更大的价值，从而有效提升产品的友好性及体验满意度。

源地址： http://beforweb.com/node/104