移动客户端的设计

横竖都要给力——

浅谈移动客户端的横竖屏切换设计

2011级软件工程9班

目录

应用背景

如何设计

设计要点

应用背景

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

随着Android平台的大热，这种侧滑全键盘按键设计也迎来了再一次的迸发。重力感应器在移动设备中的应用，能够让用户自由灵活的实现横屏和竖屏的自动切换。这类技术更好得满足了用户的需求，除了由手持手机的方向决定屏幕切换的情况（如游戏、视频、拍照、上网）外，在不同的使用情景下，两种显示方式也都能带来更好的体验，比如竖向的屏幕有较高的滚屏效率，可以满足用户浏览长列表内容的需求；而横屏幕意味着获得一个更宽的可视空间，能够展示更多的内容。(里程碑系列)

如何设计

适配拉伸设计

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

调整设计布局

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

分割屏幕设计

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

合并隐藏设计

在难以调整结构框架布局，或者分割内容的情况下，横竖屏的切换要在必要时做减法设计。由于横屏时更适握持及合双手的操作，因而在应用到文字输入类产品中会较多的出现横竖屏切换的设计，例如Android平台百度输入法横屏状态的软键盘表现为独占式输入状态，即输入框以及键盘按钮会占满全屏来避免页面遮挡问题。

如何设计

展示差异化设计

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

设计要点

界面的一致性

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

交互与反馈的一致性

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

充分合理利用空间

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

聪明、有选择的限制

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

保证切换轻快、流畅和自然

使用动画可以帮助用

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

在横竖屏切换时使用Animation

Android 开发布局要点

尽可能使用LinearLayout ，结合RelativeLayout 和TableLayout ，坚决不用AbsoluteLayout ，方便横屏，其实我开发一般不允许应用横屏，比较麻烦，也可以选择优秀的Android 布局文件

学习，先该后创。

在横竖屏切换时使用规则

强制为横屏：

setRequestedOrientation(ActivityInfo.SCRE EN_ORIENTATION_LANDSCAPE);

强制为竖屏

setRequestedOrientation(ActivityInfo.SCR EEN_ORIENTATION_PORTRAIT);

谢谢观赏

THANKS “细节决定成败”