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

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

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

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

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

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

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

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

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

设计模式

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

液态

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

扩展

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

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

互补

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

延伸

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

标签： 横竖屏切换 界面设计 用户体验 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。