11.06日音讯,剖析横竖两屏切换设计要点

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

　　应用背景

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

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

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

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

　　适配拉伸设计

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

　　调整设计布局

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

　　分割屏幕设计

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

　　合并隐藏设计

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

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

　　在IOS系统中，TalkingStatusBar在横屏形式中会与StatusBar合并，呈绿色状态。

　　展示差异化设计

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