横竖屏切换中的界面设计与体验提升

标签: 切换 界面 设计 | 发表时间:2012-08-19 19:43 | 作者:c7210
出处:http://ucdchina.com/rss/all
之前一周朦朦胧胧的过掉了,想来也没什么可回忆的。这是一种不坏的状态,就像每天早上莫名的空洞,它们都代表着生活和工作里至少还没有很坏很衰的事情让人焦虑。有吗?也许只是在哄骗和宽慰自己。

杂志一般的小译文一篇,适合这样的下午做一做,适合这样的周末读一读。走着。

眼下,智能移动设备内置的加速计的主要作用,就是根据设备的定向方式来决定屏幕的显示模式,也就是在横屏或竖屏模式之间进行切换。这种功能使用户通过简单的动作就可以得到额外的布局模式,期间不需要操作任何界面元素或实体按钮。对于我们来说,这是一个提升产品用户体验的契机,但其中也不乏挑战;我们要充分了解不同定向方式所涉及到的使用情境,并确保两种体验模式之间的差异不会给用户带来唐突的感觉。

几乎所有类型的移动应用都能从显示模式切换功能当中获益。本文将围绕着这一话题,为应用的设计师与开发者们介绍一些可以运用到实际工作中的基础概念,同时还会帮助大家了解那些在实践当中有可能遇到的挑战以及相应的解决方案

通过设备定向切换显示模式

Youtube的移动应用是一个很典型的案例。在竖屏模式中,视频窗口较小,但相关信息比较丰富;而在横屏模式下,视频展开为全屏,并向用户提供了更加全面的播放控制功能。当视频播放结束后,界面模式会自动切换到竖屏状态,籍此提示用户调转设备并通过更全面的导航和信息索引来浏览其他视频。

youtube-mobile-device-orientation-portrait-landscape-desing-user-experience

不过在有些时候,第二显示模式也会给用户带来迷惑。以 CardMunch为例(LinkedIn推出的名片扫描及浏览工具),其横屏模式会将之前整个列表形式的界面改变成为“旋转木马”视图。(相关阅读: iOS用户体验解析 - 空间模型与旋转木马视图)

cardmunch-carousel-list-business-card-mobile-device-orientation-portrait-landscape-desing-user-experience

这个横屏界面中缺少关于定向切换的视觉提示,而且其中几乎没有提供任何功能操作,用户无法添加或编辑名片,只能浏览并进入详情界面。特别是如果用户在一开始就以横屏方式打开的应用,那么在缺乏引导与提示的情况下,他们很有可能无法发现竖屏模式的界面及相应的内容与功能。

设计模式

设备的定向方式被改变之后,应该以怎样的方式呈现新的视图呢?我们总结出了四种常见的设计模式。

液态

类似网页设计中的液态布局方式。按照新的显示规格,对界面元素的位置及尺寸进行响应式的调整。具有代表性的产品案例包括Skype及 Pocket应用。

skype-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience

pocket-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience

扩展

在这种模式中,界面会根据屏幕定向方式的变化而增加或减少布局元素(通常是导航)。例如IMDb的iPad应用会在横评模式下增加一个左侧导航列表,而在竖屏状态时,用户可以点击界面当中的“全部作品”展开这个列表。

imdb-ipad-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience

对于这类应用,其自身的内容与功能不应该随着显示模式的切换而增减——需要调整的是一些关键界面元素的呈现方式。不要让用户必须保持某种定向方式才能获取特定的内容与功能。

互补

两种显示模式当中的内容形式可以是彼此互补和辅助的关系。以金融类的应用为例,在竖屏状态下,信息可以通过普通的数据列表形式呈现,而调转屏幕之后,可以充分利用新的界面宽度,以统计图表的形式展示数据。

s-bank-chart-iphone-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience

延伸

第二显示模式可以作为默认状态的功能延伸与强化。举个简单的例子,对于遥控器类的应用,竖屏状态的默认界面中可以包含一些最基本的功能与频道信息;而在横屏状态下,用户不仅能查看到各频道完整的节目排期,而且同样可以在这个视图当中执行频道切换、设定录像时间等操作。

remote-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience

确定默认的定向方式

Above & Beyond是iPad上的一款交互式电子书。它拥有横、竖两种显示模式,其中竖屏模式提供更大的、细节质量更高的作品视图,不过只有在横屏状态时才会默认显示“返回主菜单”、“评论”一类的互动功能。

above-and-beyond-ebook-ipad-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience

然而对于iPad来说,竖屏才是其的默认定向方式。所以当用户第一次在竖屏状态下打开应用时,系统会提示用户通过点击屏幕来调出相关的功能——设计师在这一点上考虑的非常周全。

不过对于Andorid以及Windows 8的平板,以及BlackBerry的Playbook来说,它们的默认定向方式是横屏。那么在这些设备中,界面显示模式的策略及相关引导提示就需要发生相应的变化了——我们要确保默认显示模式当中的内容与功能符合目标设备自身默认定向方式的特点。

理解应用的上下文环境

上下文使用环境是移动应用用户体验设计当中的关键组成要素(相关阅读: iOS用户体验要素解析为应用的上下文环境而设计),在考虑屏幕定向及显示模式切换的相关问题时,这方面的因素也会起到重要的影响作用。

以目前日渐流行的食谱类应用为例,很多硬件厂商甚至为这些应用打造了相关的壁挂或桌面支架,使用户能够更方便的在厨房当中使用。

s-cookbook-ipad-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience

而我们也可以根据这类应用在不同的使用情景中的需求用例来创建具有差异性的显示模式。以 The Betty Crocker Cookbook为例,当用户在相对安定的状态下希望阅读和学习食谱时,他可以使用竖屏模式;此时界面中会展示完整的烹饪及食谱信息,同时还包括最终效果图以及相关的功能元素。如果用户希望在厨房一边烹饪一边进行参考,那么横屏模式就更加适用了。在这种状态下,每一步的操作指导都会占据一屏的篇幅,字号更大,便于在短时间内识别;利用内置摄像头,应用还可以识别特定的肢体动作,用户无需触摸屏幕,只要在摄像头前挥挥手,操作指导就会自动翻页。

betty-cookbook-ipad-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience

引导用户在不同的显示模式之间切换

通过调转屏幕来切换显示模式,从某种程度上讲这种交互方式并不符合直觉。如果界面中没有任何视觉引导和提示,用户很有可能错过另外一种显示模式及相应的功能体验。以iPhone自带的计算器应用为例,如果用户不知道它还能提供横屏模式,那就会错失掉那些高级计算功能。

通过视觉元素对用户进行提示与引导,这可以使产品的体验更加符合直觉(相关阅读: 具有引导性的移动应用界面设计模式)。我们来看一些可以用来提示用户进行显示模式切换的设计思路。

标题栏

通过标题栏作为提示,这种方式主要运用在第二显示模式当中。仍使用之前的遥控器应用作为例子,如果用户以横屏状态打开了应用,他将看到一个固定显示在左侧的标题栏,其中的标题文字方向会暗示他将屏幕调转过来进行阅读,从而发现竖屏模式。

切换按钮

与标准的分享按钮类似,我们也可以使用能够被普遍认知的图标按钮提示用户手动切换横竖屏显示模式。

icons-button-share-google-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience

两种显示模式当中都要包含这个切换按钮。用户点击之后,显示模式自动切换,虽然接下来用户未必会真正调转设备进行查看,但他们通过这种方式了解了应用所提供的两种显示模式,将来会逐渐的在需要的时候自行调转设备,不再需要按钮的辅助。所以该按钮即可以触发切换功能,同时也可以作为视觉提示。

toggle-switch-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience

切换图标也未必要以标准按钮的形式出现:

toggle-switch-22-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience

需要注意的是,这种方式有它自身的风险,在界面中添加某种非标准的、持续存在的辅助性元素,这本身是具有一定争议的。不过这种方式的简单有效也是显而易见的。所以也希望各位设计师们能够从这点出发,扩展思路,结合产品的实际情况进行实践

拖拽把手

使用把手形式的控件来提示用户通过拖拽展开第二视图模式,如果用户直接调转设备的话,第二视图模式也会自动展开,类似卷帘的效果。带有方向的动画过渡效果可以使用户对两种视图模式的层叠关系产生深刻的印象。

drawer-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience

总结

我们习惯于将这些“额外”的显示模式作为应用主要界面模式的附属物,其主要原因也许就在于很多用户根本不了解它们的存在。通过一定的视觉提示,引导用户发现这些同样是经过精心考虑和打造的界面模式,我们就能使应用针对不同的使用情境发挥更大的价值,从而有效提升产品的友好性及体验满意度。

源地址: http://beforweb.com/node/104

相关 [切换 界面 设计] 推荐:

横竖屏切换中的界面设计与体验提升

- - 所有文章 - UCD大社区
之前一周朦朦胧胧的过掉了,想来也没什么可回忆的. 这是一种不坏的状态,就像每天早上莫名的空洞,它们都代表着生活和工作里至少还没有很坏很衰的事情让人焦虑. 杂志一般的小译文一篇,适合这样的下午做一做,适合这样的周末读一读. 眼下,智能移动设备内置的加速计的主要作用,就是根据设备的定向方式来决定屏幕的显示模式,也就是在横屏或竖屏模式之间进行切换.

自然而流畅——聊聊界面的切换动画

- - 腾讯CDC
  在使用一些移动端的 App 或 PC 端的软件的时候,我们常常会有一些界面之间切换的操作,尤其是在移动端的设备上,因为屏幕尺寸和交互方式的特性,就更多的会出现这些切换的操作,而很突然地从一个界面切换到另一个界面会给用户带来困扰,所以在触发这些操作的同时,往往需要过渡形式的动画来引导用户是如何从一个界面切换到另一个界面的,我们来看看一些常见的界面切换的过渡方式吧.

命令行界面设计

- 海洋 - 笨兔兔
虽然已存在大量关于图形用户界面(GUIs)设计的文章,可是介绍命令行界面(CLIs)设计的却很少. 本文尝试介绍几个关于CLI设计最重要的准则. 本文假设该命令行工具用语 *nix 系统(例如 GUN/Linux、BSD、Mac OS X,UNIX),并且会频繁地参考这些系统中的常用工具. 非交互式程序在调用后不再需要任何用户干预.

Android 应用界面设计

- - 互联网的那点事...
与 iOS 相比,Android 系统界面存在各种不协调,应用界面本身缺乏统一的规范. 虽然 Android 的开放性为应用的自主发挥带来了最大的可能性,但如果系统本身能够提供标准的范例,也未必是一件坏事,毕竟许多应用并不一定需要独创的界面. 从 Android 4.0 开始,系统界面在一致性上有了许多改善,那么 Android 应用的界面应该如何设计.

界面设计中的结构设计

- - 博客 - 伯乐在线
构建界面视觉层级的元素有颜色的显著程度,图片、文字的尺寸大小,还有最基础的,内容的组织结构. 结构设计是指对界面内容进行分组,对界面中的信息、数据进行设计使之结构化呈现的过程. 好的结构设计能使界面信息传达更加清晰、快捷. 这是最常见的分组方式,在UI设计中历史悠久. 不管是线、框,还是背景色,都是可见的边界,本来引入这些可见边界的目的就是为了使信息的呈现更加清晰,但是这些视觉元素的加入也在一定程度上增加了界面的凌乱感.

移动界面隐喻设计

- 星空无语 - 优涩控
是的,有些时候,我就在想这个简单的问题,而那时我的答案还是:界面是对软件应用解决方案的显性,使用图形化符号,向使用者解释它的功能与任务. 但最近一些认知却让我对这个问题有了新的回答:界面就是软件应用它本身. 它不是一份对软件应用功能的图形化说明书,不是对软件应用功能与任务的图形化翻译,它就是软件应用本身,并且与之浑然天成.

浅析网页界面设计-首页

- 多二度 - 所有文章 - UCD大社区
开宗明义,无论是对于一篇文章、一场会议或一部专题片,还是对于一个网站 来说,都是必不可少的. 那么能为一个网站开宗明义的地方(标签)就是Title(标题)和Description(描述、副标题),而能够为Title和 Description提供进一步诠释的就是网站的首页. 页面的重要性是建立在它所呈现信息的基础之上,反过来说,页面要向用户展示哪些信息是决定其重要与否的首要指标.

界面设计中的小细节

- - IconMoon
来自知乎上的一个问题: 界面设计包括哪些细节、如何深入. ,以一个苦逼死美工的角度补充了一些小细节:. 界面元素的对齐,我见过很多同学对齐是永远靠眼睛的. 确实在布局的时候经常需要做到视觉上的对齐,而不是机械的对齐,但这不是界面元素可以随意拜访的借口,该对齐的内容需要对齐,有时候只是举手之劳,养成好习惯很重要,有点强迫症也不是坏事情.