从纵向到横向!给转向设备做设计基础知识全科普.pdfVIP

从纵向到横向 ！给转向设备做设计的基础知识全科普 编者按 ：本文译自以脱水 货知名的网站SMA SHING MA GZ INE ，聊聊当手机/平板旋转时该如何 设计 ，才能做到流畅无形 ，在交互和视觉上怎样创造更好的体验 ，全是基础知识 ，强烈建议学习哟 ！ 我们智能设备中的内嵌加速器通常根据设备的方向来对准屏幕 ，换言之 ，就是纵向与横向模式间的 互相切换。这一特点为我们创造了机会 ，来制出更好的用户体验——只需轻轻转动设备 ，无需点任 何按钮 ，就出现了一个新版面。 然而 ，设备不同方向的设计面临着各种挑战 ，要求思路缜密 ，确保用户不会感到唐突 ，转换于无形 。要做到这些 ，就要理解与该功能相关的整体环境关系。 不同方向的设计对手机或平板电脑来说都是加分的。此文意在为设计师们和开发人员们提供一些有 关设备方向的基础概念 ，希望有助大家的工作。我们也会呈现一些设备不同方向设计所面对的挑战 以及解决方案。 视设备方向为二级显示画面 Yo uT ube 的手机应用是一个有关设备方向设计的出色案例。纵向模式在界面中展现了丰富的功能 ， 方便用户搜索视频以及管理账户。横向模式则提供了全屏观赏模式 ，并带有回放等控制 ，令用户的 观看体验最优化。当视屏播放完毕后 ，自动转换为纵向模式 ，促使用户快速转回设备 ，浏览更多视 频资源。 然而 ，方向转换所带来的第二界面也可能使用户感到迷惑。例如 ，CardMunch （领英的名片应用 ） ，用户可以通过手机自带相机拍下名片 ，转换成信息录入通讯录。当转为横向模式时 ，CardMunch 界面忽然变为了所有已拍摄名片的转盘式相册。 Yo uT ube 纵向和横向手机界面 这个界面在方向转换上缺乏视觉线索和控制度。用户无法编辑或添加名片 ，因此 ，转盘界面就更令 人摸不着头脑了 ，尤其当用户是在横向模式的情况下打开应用的时候。横向模式缺乏视觉线索的另 一弊端就是用户很可能放弃转动设备的念头 ，因而造成了他们无法发现应用的其它功能。 领英的CardMunch在第二界面中缺乏视觉线索 方向设计的分类 为了帮助UX专业人士和开发人员 ，我将设备方向设计总结为四大主要分类。 流畅类 界面设计单纯根据新方向的尺寸进行版面的相应变化。 在 Skype 的手机应用中 ，在竖版转为横版时 ，图标在屏幕中的位置有了变化。 Pocke 的手机界面 ：相同版式 ，不同宽度。 延展类 这类界面根据选定方向的屏幕尺寸 ，添加或减去版面元素。例如 ，IMDb 的 iPad 界面利用横向模式 更宽的屏幕尺寸 ，在左侧添加了全部影片目录。该列表在纵向模式中也可通过点击屏幕中部右侧的“ 所有影片目录”按钮显示。 IMDb 的 iPad 应用 在任何方向中提供视觉元素和功能都能为用户带来很大的便捷。当然 ，最重要的一点是 ，要避免强 制用户在某一特定方向模式下使用 ，尤其当所需功能并未能在默认方向中出现时。 互补类 这类界面在转换方向时 ，可以触发含有相关补充信息的辅助屏幕。我们就以金融手机应用为例 ，它 默认显示为纵向模式 ，在转换为横向模式时 ，会出现补充的视觉图表。通过方向的转换 ，可以补充 另一界面中的同类或补充数据。 有关互补类的界面设计案例 延续类 类似 Yo uT ube ，延续类设计可以让用户只需轻松转换设备方向 ，就能获得二级界面。譬如我们在使 用智能手机来远程遥控智能电视时 ，将设备转动至横向界面时就能看到所有的节目预报 ，同时仍然 保有频道转换、浏览节目以及预录剧集等功能。 智能遥控和节目预告案例 慎重考虑默认方向 A bove Beyo nd是一款展示美国漫画家Jo hn Kasch 生活和作品的iPad互动电子书应用。精美的画 作有横向和纵向两种展示模式。然而 ，横向模式中显示的某些重要互动元素却不在纵向页面中显示 ，包括回到主菜单的方式。iPad 的默认方向是纵向 ，因此 ，只在横向模式中包含互动体验会令用户 感到迷惑。 A bove Beyo nd 的一个页面。默认纵向模式中没有互动元素。 纵向模式展示了作品的细节 ，电子书的互动操作指示在应用启示时有显示 ，那么可以考虑在用户轻 击屏幕的情况下出现菜单。大部分智能手机以及 iPad 的默认方向都是纵向 ，而安卓、W indow 8 平 板电脑和黑莓 Playboo k 的默认方向则是横向。为避免混淆 ，要记住应用的首选方向应与设备的默 认模式和功能相符 ，而不是相反。 理解 后关联 在为智能设备设计应用时 ，应考虑使用环境和前后关联 ，尤其是在设计设备的不同方向上。案例 分析 ：互动菜谱越来越流行 ，硬件配件制造商