按照移动设备的方向设计app：从纵向到横向

按照设备的方向对app进行设计将会使开发者和设计人员获益匪浅，同时也可以创造更好的用户体验。用户只需要简单地旋转设备，不用点击按钮就能展现一个新的app布局。虽然这在一定程度上面临着挑战，但我们也有一些解决方案。

通过调整app显示方向向用户展示第二屏

在app方向控制方面，YouTube的移动app就是一个很好的例子，YouTubeapp有两种界面显示方式：横向和纵向。纵向显示界面有着更丰富的功能，用户可以在纵向显示界面查找更多视频。

横向显示可以给用户带来身临其境的视觉体验，而当视频播放完后，app会调整为纵向显示模式方便用户浏览其他视频内容。

YouTube移动app两个不同方向的界面

但是向用户展示不同方向界面会让用户有点迷糊，比如社交网站LinkedIn推出的名片整理应用CardMunch，这个应用可以方便地转录和整理商业名片上的信息。

这个用户界面在方向上缺少一些视觉线索，并且用户不能编辑或者添加名片，屏幕旋转会让用户有点沮丧和混乱，尤其在你启动了横向模式的时候。另外，横屏缺少视觉线索会降低用户翻转至设备发现app的其他功能。

CardMunch第二屏缺少视觉线索

按照设备方向进行设计的方法

为帮助UX专业人员和开发者，我把app方向设计进行了归类，主要有以下四种设计模式：

按比例转换模式
这个方法比较简单和直接。

在Skype的界面，当app由纵向显示变为横向展示的时候，界面上的图标大小也随之发生改变。

Pocket的界面，横向纵向一样的布局，只是变宽了。

延伸扩展模式
这个方法主要靠增加或者删除布局元素来实现，比如下边的IMDB，iPad用户看到的是一个更宽的横屏模式，左侧增加了电影作品年表。而竖屏模式展现的是一个更为简洁的界面，不过，用户可以通过点击屏幕中间的"所有电影列表"来查看同样的内容。

IMDbiPad版本

不管是横屏还是竖屏模式，目的都是为了给用户提供方便。不过，这并不是强迫用户使用某种特定的方式，尤其是在主要功能还没有完全展示的情况下。

互补模式
比如下边这个移动理财类app，默认的竖屏模式展示了相关数据，但横屏模式提供了更为直观的可视图表。

总的来说，横屏和竖屏显示类似信息还是互补信息，这主要看个人喜好了。

互补型界面设计

连续性
还拿YouTube来说吧，它连续性的设计可以让用户通过简单的屏幕旋转就能接触到第二屏。未来还有种可能就是用智能手机控制智能电视，智能手机旋转为横屏模式可以显示节目指南，同时实现频道切换、节目浏览以及录制视频等功能。

智能遥控和节目指南

考虑默认方向

Above&Beyond是一个iPad电子书应用，内容主要是关于漫画家JohnKascht的工作和生活。不过，横屏展现了更多竖屏没有的互动元素，比如返回主菜单功能。纵向排列是iPad的默认方向，所以这个这个电子书的横屏模式可能会迷惑很多用户。

Above&Beyond

Above&Beyond的纵向模式更多体现了艺术的细节，不过，这款app在开始的时候已经做了说明，用户可以点击屏幕显示菜单。大部分智能手机和iPad的默认方向是纵向，但Android、Windows8平板以及BlackBerryPlaybook默认方向却是横向。所以，为了避免让用户困惑，你要记住自己app的主要功能以及移动设备的默认方向，而不是其他。

考虑app使用环境
除了一些基本的设计要求外，开发者还要考虑app的使用环境，尤其是要注意app的展示方向。目前，交互的烹饪类app比较受欢迎，硬件生产商以及配件生产商正开发相关设备帮助用户在厨房内使用iPad，比如烹饪时会用到的可清洗手写笔。

我们可以通过充分利用app展示方向开发出更具有交互作用的烹饪类app，用户可以在iPad默认方向模式下浏览食谱和配料清单，而用户在横屏模式下可以看到一步步详细操作说明。

厨师友好界面也会防止平板电脑自动调光，用户在内置摄像头前挥手就能翻阅页面，而不用在忙不开交的时候还要用油乎乎的手触摸屏幕。

厨师友好型appTheBettyCrockerCookbook

方向的视觉提示作用

辅助屏幕或增加的功能依赖于方向有时是违反直觉的。在一个特定的方向，如果没有任何视觉线索，那么用户可能会完全错过附加功能。一个典型例子是iPhone内置的计算器，很多用户并没有充分利用计算器的其他功能。

依照设备的方向进行设计，视觉线索可提高应用其他功能的曝光度，同时使用户体验更为直观和透明。下面是几个依照设备方向进行设计的例子。

标题栏

追究标题栏的默认位置在任一方向的顶部是一个微妙的线索，为用户倾斜他们的头（或设备）读取文本在酒吧。要想通过变换方向来展示应用的附加功能，该技术是必不可少的，但不管怎么说，你的提醒应该是温和的，对用户友好的。

在任意默认的方向添加标题栏是对用户微妙的、小心翼翼的提醒，为的是用户可以稍微抬头看看文本信息。

注意：在默认方向（纵向）的情况下，这种方法可见性可见性不大。

开关切换

一般而言，分享类图标大同小异（包括苹果熟悉的分享图标/按钮），我在一片文章中放了一些标准的图标来代替设备的方向，download。

这类按钮时时出现，也可用作屏幕旋转的按钮，虽然这为用户提供了另一种选择，但用户更多倾向于旋转手机调整方向。

标题栏的开关按钮

三角形方向切换按钮

注：设备的方向图标还不是一个成熟的想法，，加入这有些多余UI控制的价值仍值得商榷。然而，在我看来，这个想法是简单而有效的，使设计人员能够更充分地依赖于设备的方向，以加强和扩大其应用程序。希望这里的建议将在设计界引发一场谈话，并找出一个解决办法，只需简单地旋转设备，就能在任何应用中添加额外功能。

抽屉原理

这个想法是类似抽屉一样的控制，使用者可以点击或刷新才能看到应用二次显示，旋转设备会自动打开抽屉，像拉开窗帘一样。通过使用动画打开和关闭抽屉，设计人员可以创建基于方向显示的数据，令人一见难忘。

 抽屉式控制

总结

为设备手持方向进行设计还是比较新的一个概念，比如智能手机的横屏模式有更大虚拟键盘，平板电脑的电子邮件app可以切换至master-detail界面。但是相比较主界面而言，设备手持方向设计一直被放在第二位，很多坚持默认方向的开发者和用户似乎忽略了这一点，原因是没有发现它的有用性。开发者在界面上增加视觉提示/线索可以更好地增强app的功能，最终为用户带来友好型的体验。