解析移动手机客户端的横竖屏切换

【 tulaoshi.com - 平面设计 】

对于交互设计而言，移动手机客户端的横竖屏切换时，怎么切换就成了 一个普遍存在的问题。

课程内容

随着技术与用户体验的发展，移动客户端产品中越来越多的需要横竖屏切换的设计。横竖屏旋转切换的设计在理想的情况下保持不变就能满足用户的需求。但也有很多时候，横竖屏切换时用户操作行为和屏幕比例的改变决定了客户端产品在设计时必须做出适当的针对性变化，于是对于交互设计而言，变不变、怎么变就成了一个普遍存在的问题。

_应用背景

先从横竖屏切换需要的产生的背景说开。

横竖屏切换策略最早应用于QWERTY侧滑全键盘按键设计的手机上(早期塞班S60与Windows Mobile等智能操作平台)，用户在使用键盘输入时须把手机转90度来使用，因而屏幕内容也要随之切换。这样的设计在操作性方面有着独特的优势，尤其在输入文字以及其他操控方面，能够拥有比单纯触屏更高的效率与更佳的输入体验。而随着Android平台的大热，这种侧滑全键盘按键设计也迎来了再一次的迸发。 yixieshi

重力感应器在移动设备中的应用，能够让用户自由灵活的实现横屏和竖屏的自动切换。这类技术更好得满足了用户的需求，除了由手持手机的方向决定屏幕切换的情况(如游戏、视频、拍照、浏览网页等)外，在不同的使用情景下，两种显示方式也都能带来更好的体验，比如竖向的屏幕有较高的滚屏效率，可以满足用户浏览长列表内容的需求;而横屏幕意味着获得一个更宽的可视空间，能够展示更多的内容。

综上所述，横竖屏切换设计的应用情况包括：QWERTY键盘输入文字、用户手持的方向及移动客户端内容呈现的特殊性。为达到提供更好的交互体验的目的，交互设计当然也要与时俱进，将横竖屏的切换作为交互整体的一部分融入设计中。

?如何设计

适配拉伸设计

在横竖屏的匹配时照优先设计的样式，旋转后尽可能保留相似的UI布局、信息和文本的格式基础上，适当拉伸填满屏幕。例如下图：IOS平台的某应用在旋转屏幕后的设计，内容与结构都保持高度一致与相似性，上下标签栏在宽度上拉伸同时的适当降低了高度。

调整设计布局

当页面中元素较多不能够依靠简单的旋转拉伸满足设计时，常用的方法是调整原有页面布局，按照需要重新排版。例如：某S60平台通讯录产品的联系人列表的处理，原本位于屏幕上下的标签工具栏的形式不变，但位置随屏幕一致而成左右分布，左侧工具栏与状态栏合并，只是图标与文字掉转了方向;搜索框则被置于屏幕下边。

分割屏幕设计 互联网的一些事

由于横竖屏时比例改变的限制，部分情况下可以做到将内容分割排列的方法。例如下图，横屏时将屏幕区域分为左右两部分，把竖屏时处于上下两层级的拨号盘与列表同时展开同，在做到解决页面遮挡问题的同时，也很好避免了设计上UI被迫过度拉伸的情况。

合并隐藏设计

在难以调整结构框架布局，或者分割内容的情况下，横竖屏的切换要在必要时做减法设计。 yixieshi

由于横屏时更适握持及合双手的操作，因而在应用到文字输入类产品中会较多的出现横竖屏切换的设计，例如Android平台横屏状态的软键盘表现为独占式输入状态，即输入框以及键盘按钮会占满全屏来避免页面遮挡问题。

在IOS系统中，Talking Status Bar 在横屏形式中会与Status Bar合并，呈绿色状态。(如下图) 一些事

一些事

展示差异化设计

由于移动设备屏幕大小的原因，无法塞在一个界面里。横竖屏的切换时，允许用户对于同一个界面有不同的展示方式，不一定在横屏时也和竖屏保持显示内容的一致，这时横屏可以有更好的适应横屏的展示方式，使用户更好的操作。例如：iPhone的iPod应用横屏时展示Cover Flow模式，竖屏时则展示List或单曲播放模式。

!设计要点

保证界面的一致性

横竖屏切换后，过大的跳跃性改变会造成用户不知道之前操作跑哪儿了的情况，或者感觉对程序失去控制，由此产生迷茫和不解，也会增加学习时间。同样，如果应用程序界面只支持单一方向的展示(如视频播放)，最好的做法就是保持界面固定，不随着设备方向改变而改变。即使一定需要调整结构布局或是改变显示内容，也应该延续交互的上下文关联性，避免变化过大或者无缘由地改变。

保证交互与反馈的一致性

设计时应注意横竖屏时交互反馈自相矛盾的情况，例如：机身音量加减按钮与横竖屏时+-命令的对应关系，应当符合一致的逻辑。

充分合理利用空间

在移动设备狭小的屏幕上，空间是极为宝贵的，需要做到合理安排布局，也要极力避免浪费空间。例如虚拟键盘在由竖转横时，将隐藏次要内容所获得的空间分配给每个按键，增加了按键面积，从而优化体验。

互联网的一些事

聪明、有选择的限制

由于用户在使用手机的过程中，经常会无意中调整位置，从而导致手机误认为是要进行横竖屏的转化，从而更容易导致操作上的失误，引起用户的反感。因而需要给予用户选择，根据需要来开关横竖屏切换或是手动切换。 互联网的一些事

保证切换轻快、流畅和自然 互联网的一些事

使用动画可以帮助用户理解当前页面的变化与切换前的关联，强化体验的流畅度，同时不会让用户觉得横竖屏切换的时候太单调，优化用户体验。当然前提是在系统性能和开发成本允许的前提下尽量做到自然流、畅富有情趣。

上文提到的这些要点，对于手机客户端横竖屏切换设计尤为重要，而其中大部分也是普遍性交互设计原则的体现，比如一致性、易于理解等等。此外，设计中还应当遵循各平台设计的交互规范，以及人机交互可用性工程原则，如左右手操作的习惯，以确保体验得到尊重。

此处也需说明，虽然横屏与竖屏下对于操作体验的影响是显而易见的，一般的效率型应用或实用工具，也是横竖屏都有，但不同功能的应用，都有其特定的展现形式，因而不应盲目对任何应用不加选择的都去做横竖屏适配。在用户需求的基础上，如果让用户觉得切来切去更麻烦，或者没必要切换，就不需要进行适配设计。

此外，试想如果能在手机客户端产品中加入由用户来自己定制横竖屏切换后的UI布局，在遵循各平台UI规范的前提下，甚至是动作、功能和内容也可以根据个人喜好自由调整，这样的设计想必会加强用户在产品使用中的参与感，优化体验。

有尾巴

关于横竖屏切换的设计的浅谈只是UCD思想众多体现的细小一面，但细节决定成败，当中的方法、要点也还有很大空间值得思考推敲。无论如何，能够让用户更轻松、高效地完成主要任务和进行关键体验，真正以用户为中心，使设计更加友好、易用，让用户得到愉悦感受才是设计师付出纠结和辛劳的终极目标，也是最大鼓励。~~~ 互联网的一些事