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

应用背景

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

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

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

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

如何设计

适配拉伸设计

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

调整设计布局

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