设备的转向设计:从纵向到横向

虽然这篇文章并不是“时鲜”,但相信任何基础原理都是经典不过时的。任何更新其实都万变不离其中,抓牢要点,方能举一反三。另外,主页君觉着这篇内容超实用的,深入浅出是王道~

我们智能设备中的内嵌加速器通常根据设备的方向来对准屏幕,换言之,就是纵向与横向模式间的互相切换。这一特点为我们创造了机会,来制出更好的用户体验——只需轻轻转动设备,无需点任何按钮,就出现了一个新版面。

然而,设备不同方向的设计面临着各种挑战,要求思路缜密,确保用户不会感到唐突,转换于无形。要做到这些,就要理解与该功能相关的整体环境关系。

不同方向的设计对手机或平板电脑来说都是加分的。此文意在为设计师们和开发人员们提供一些有关设备方向的基础概念,希望有助大家的工作。我们也会呈现一些设备不同方向设计所面对的挑战以及解决方案。

视设备方向为二级显示画面

YouTube 的手机应用是一个有关设备方向设计的出色案例。纵向模式在界面中展现了丰富的功能,方便用户搜索视频以及管理账户。横向模式则提供了全屏观赏模式,并带有回放等控制,令用户的观看体验最优化。当视屏播放完毕后,自动转换为纵向模式,促使用户快速转回设备,浏览更多视频资源。

然而,方向转换所带来的第二界面也可能使用户感到迷惑。例如,CardMunch(领英的名片应用),用户可以通过手机自带相机拍下名片,转换成信息录入通讯录。当转为横向模式时,CardMunch界面忽然变为了所有已拍摄名片的转盘式相册。

这个界面在方向转换上缺乏视觉线索和控制度。用户无法编辑或添加名片,因此,转盘界面就更令人摸不着头脑了,尤其当用户是在横向模式的情况下打开应用的时候。横向模式缺乏视觉线索的另一弊端就是用户很可能放弃转动设备的念头,因而造成了他们无法发现应用的其它功能。

方向设计的分类

为了帮助UX专业人士和开发人员,我将设备方向设计总结为四大主要分类。

流畅类

界面设计单纯根据新方向的尺寸进行版面的相应变化。

延展类

这类界面根据选定方向的屏幕尺寸,添加或减去版面元素。例如,IMDb 的 iPad 界面利用横向模式更宽的屏幕尺寸,在左侧添加了全部影片目录。该列表在纵向模式中也可通过点击屏幕中部右侧的“所有影片目录”按钮显示。

在任何方向中提供视觉元素和功能都能为用户带来很大的便捷。当然,最重要的一点是,要避免强制用户在某一特定方向模式下使用,尤其当所需功能并未能在默认方向中出现时。

互补类

这类界面在转换方向时,可以触发含有相关补充信息的辅助屏幕。我们就以金融手机应用为例,它默认显示为纵向模式,在转换为横向模式时,会出现补充的视觉图表。通过方向的转换,可以补充另一界面中的同类或补充数据。

延续类

类似 YouTube,延续类设计可以让用户只需轻松转换设备方向,就能获得二级界面。譬如我们在使用智能手机来远程遥控智能电视时,将设备转动至横向界面时就能看到所有的节目预报,同时仍然保有频道转换、浏览节目以及预录剧集等功能。

慎重考虑默认方向

Above & Beyond是一款展示美国漫画家John Kascht生活和作品的iPad互动电子书应用。精美的画作有横向和纵向两种展示模式。然而,横向模式中显示的某些重要互动元素却不在纵向页面中显示,包括回到主菜单的方式。iPad 的默认方向是纵向,因此,只在横向模式中包含互动体验会令用户感到迷惑。

纵向模式展示了作品的细节,电子书的互动操作指示在应用启示时有显示,那么可以考虑在用户轻击屏幕的情况下出现菜单。大部分智能手机以及 iPad 的默认方向都是纵向,而安卓、Window 8 平板电脑和黑莓 Playbook 的默认方向则是横向。为避免混淆,要记住应用的首选方向应与设备的默认模式和功能相符,而不是相反。

理解前后关联

在为智能设备设计应用时,应考虑使用环境和前后关联,尤其是在设计设备的不同方向上。案例分析:互动菜谱越来越流行,硬件配件制造商已经配备在厨房中使用 iPad 的辅助设备,washable stylus 就是一款适合做菜时使用的产品。

我们完全可以利用菜谱应用的不同方向来创造更佳的用户体验。在iPad 的纵向模式中,用户可以翻页浏览书本,也可以阅读某一道菜的详细做法和所需材料。当设备旋转为横向时,界面就会呈现为做菜模式,包含大按钮以及分步说明。做菜模式会防止屏幕暗去,而且用户只需在镜头前挥手就可以进行翻页,完美解决了弄脏屏幕的问题。

理解用户在厨房中以及做菜时使用iPad菜谱的情况,可以令互动电子书的功能更贴切。加入设备转向的考量可以提高用户体验质量。

转向的视觉线索

通过设备转向而出现的辅助界面或额外功能有时候是违反直觉的。如果缺乏视觉线索,用户可能完全无法领会某一方向界面中的所有额外功能。有关此点的经典案例就是iPhone自带的计算器,Salon 曾发文“如何将 iPhone 的计算器变为一个科学计算器”,特别介绍许多用户都不知晓的功能。

在设备转向设计中,视觉线索可以增添“可查找性”,更符合用户的直觉体验,转换于无形。以下我们一起来看几个有关设备转向中视觉线索的案例。

标题栏

将顶部标题栏在任一方向中都锁定于默认位置,这个微妙的线索会让用户转动脖子(或设备)来看看标题栏上写的是什么。这是转向模式作为第二显示界面的必要手段,它有助提醒用户查看额外功能。

注解:此法并未让默认方向(纵向)的附加界面富有自释性。有关此点,大家可以一下 coach marks,它是一个介绍应用通过方向转换出现第二界面的教程。

转换开关

一如全球通用的或苹果广为人知的分享按钮,以下也展示了一个设备方向转换的标准按钮。

这个图标应长期在界面中显示,并用作设备方向间转换的开关。有了这个开关,用户无需转动设备即可看见第二界面,但它的功能其实是逐渐引导用户通过旋转设备来查看第二界面,从而不再使用开关按钮。当设备转回默认方向时,界面也会自动调整。简而言之,这个图标起到的是一个视觉提醒作用,让用户知道还有更多功能。最终达到的效果是用户无需这个开关,而是通过旋转设备来转换界面方向。

以下是一些开关按钮案例:

开关按钮在标题栏

如果方向图标被标准化,它将具有自释性,并起到视觉线索的功能。下方是一个开关图标出现在三角形角落的案例。

方向开关在三角形角落

注解:这个设备转向图标并不是一个成熟的想法,它在 UI 控制上是否过剩仍受争议。然而,在我看来,这个想法简单有效,可以让设计师们更放开手去运用设备方向转换来延伸应用的功能性。(主页君案:当然,现在大家已经不用再过分烦恼这个方面了,转动设备已经成为大家的习惯,不过该解决问题的思考模式仍然值得参考。)

抽屉式

这个想法是指用户可以通过轻击活滑动屏幕来查看第二界面,就好比打开抽屉的感觉。转动设备会自动打开抽屉,好像拉开窗帘一般。如果设计师们使用动画来模拟打开或关上抽屉,可以令用户对方向转换所显示的新数据印象更深刻。

抽屉式控制

结论

设备方向转换的设计已不新鲜。例如,当手机转换到横向模式时,会有更大的键盘,平板电脑的邮箱应用的管理界面也会出现更多细节。然而,设备的转向设计仍多被视为主要界面的次级模式,用户常常不知道转换的可能,而只停留在主界面,二级界面从而不为人所知。如果添加一些简单的视觉线索,UX 专业人士可以利用设备转向界面来提升产品功能,更重要的,是提升用户体验。

SMASHING MAGZINE

译文地址:站酷

译者:dooplus

(0)

相关推荐

  • excel表格如何把纵向变横向

    excel纵向变横向步骤如下: 01在第一个数据格里输入1,下面依次按顺序输入. 02在框选的整列数字上方点击鼠标右键,复制数据. 03首个格子里点击鼠标左键,则这个格子是转置后的行的第一个数据. 0 ...

  • Word文档中如何同时存在纵向和横向的纸张设置

    在日常生活.工作中,使用Word编辑时文档时,可能会碰到在同一个文档下,并且同时存在纵向和横向的纸张设置时怎么办,有的人会编辑两个Word文档,一个是纵向,一个是横向,这样做操作起来非常不便利,同时也 ...

  • excel2016表格中的数据怎么纵向变横向?

    excel2016的使用中,我们肯定碰到过这样的问题.需要把纵向的数据变为横向.那么我们今天就来看一下,怎样将纵向数据变为横向. 1.首先,我们打开一个Excel表格.方便起见,我们用一个数列. 2. ...

  • 提升移动设备响应式设计的8个建议

    现在,对于任何种类的网站开发来说,响应式Web设计都不能再局限于纸上谈兵,其是开发阶段的一个关键步骤.作为UI设计师和开发人员,我们必须要了解有效响应式设计的重要性以及其在保证优秀终端用户体验方面的作 ...

  • word里有的纵向有的横向怎么设置

    下面介绍在WORD文档中设置有纵向页面也有横向页面的方法.希望本指南能帮到大家. 操作方法 01 我们打WORD文档,鼠标点击页面布局选项卡,弹出菜单再点:分隔符:再点:下一页 02 这时,光标会自动 ...

  • excel怎么横向变纵向和纵向转横向

    excel中的列表数据怎么样从横向变为纵向,纵向又怎么变成横向,让小编教给你指南. 操作方法 01 首先打开一个工作样表作为例子. 02 选择需要转列的行数据. 03 切换到开始标签下,点击复制按钮. ...

  • 在不同屏幕和设备上创建用户体验设计的8个步骤

    从具有微型屏幕的智能手表到最广泛的电视屏幕,其中所开发的内容,应以便在各种屏幕尺寸之间进行查看和交互.但针对不同设备的设计更多的只是调整在不同的屏幕上显示的内容大小.它涉及到很多复杂性:设计师需要把每 ...

  • Word 2013中如何把纸张方向由纵向改为横向

    在用word写作中,因为某些特殊需要有时候会希望在横向的纸张上写字,而word默认的都是纵向的纸张,这个时候需要用到的就是纸张方向功能,现在就来看一看这个功能在哪里吧. 操作方法 01 首先打开wor ...

  • Android手机应用UI设计的10个建议

    操作方法 01 每个开发循环迟早到会走到应用几近完成这个点.接下来要做什么呢?你可曾听说过"用户体验"这个词?以下这10个技巧能够使新手机应用在发布前提升质量,最大化发掘该应用的潜 ...