存档

文章标签 ‘设计’

设计道路多美好——UI设计秘诀之iPad篇

2011年6月2日 没有评论

null

iPad划时代地将我们带入了平板电脑时代,对于传统的移动终端的设计师而言,一个拥有更大的触摸屏幕,更大空间的舞台展现在大家面前,看上去一切都是那么的美好。然而如何在iPad上设计出优秀的用户界面?相信对于设计师们的挑战与忧愁远不止屏幕放大那么简单。

1.模拟真实,沉浸其中
大的屏幕、可以触摸的操作、支持多种手势…这一切条件都为让用户能沉浸于你的设计中提供了条件,那么如何将设计与用户生活的环境、习惯更好的结合,获得最佳的体验,就成为了一个挑战。

Flipboard是一个非常好的例子,他没有任何的导航,但是却在你打开使用他的第一时间,使你能马上沉浸其中。你不会因为没有导航而迷失,因为每一个界面所展示的内容会让你一直保持跟随的思路。
null

为什么这本非纸质的杂志,能吸引用户,让用户在打开它的那一刻就感觉自己像真正在阅读纸质杂志而投入其中呢?
打开这个应用后的第一个界面,让用户顿时感觉在看一本杂志的封面,情景很好的与用户传统的阅读习惯相结合。占满整个封面的背景图、杂志名、少数简介无一不是参考了传统的纸质杂志的方式。

null

翻开第一页,有序的排列着主要提供浏览的内容,让用户一目了然,不需要进行思考的就能选择自己喜欢阅读的内容。翻页的动画效果也真实的模拟了传统纸质的翻页方式,提供给了用户一个相当熟悉的生活环境和阅读环境。这样的沉浸感,用户如何会不爱呢?

2.激发探索,恰到好处
无可否认iPad给予了设计师们更多的创作灵感。那些各具设计感的界面不但在视觉上令人赏心悦目,交互体验上也多种多样。然而对于设计师来说内容的布局,信息的层次是难以把握的难题。并不是所有内容都需要逐一摆在界面上,那些适度隐藏了的某些内容,正是等待用户去发现的地方。

在 Cool Hunting 的应用中,一些聪明的用户在没有任何提示的情况下会发现:可以通过左右滑动上部的栏目来显示更多图片内容,这些设计的小细节会令迅速发现了这一项很cool的设计的用户,获得一丝探索的喜悦和成就感。
null

可还有一些用户却无法察觉到这些,他们可会花掉更长的时间,最后即使发现了也会抱怨:“连个提示都没有,让我找半天”。
好的设计要有一定的空间给予用户来探索,但如果藏得太深又容易陷入类似的体验困扰。在激发用户探索的同时,也应该注意必要时刻应给用户以提示,避免让用户陷入谜团中。
null

思考:探索之愁就在这个“度”的把握上。既要让用户获得一些探索的小喜悦,又要安抚用户的耐心并让应用保持良好的体验,是值得我们每一个设计师需要深思的问题。

3.大道至简,一目了然
优秀的iPad应用的用户界面共性是什么?简单的操作和优雅的用户体验,加上“少而精”的功能总是能吸引众多爱慕者。首先保持应用的操作简单,在设计中不要指望着用帮助按钮来解释说明如何操作,那些只是留给少数用户的耐性测试题。试问需要不断的一边阅读产品说明书,一边琢磨怎么进行操作的体验会让用户觉得流畅么?
此外,在iPad的界面设计中还有一个更大的误区:传统的小屏幕的iPhone设计师们来到iPad这块广阔的大舞台上,容易抵挡不住大屏幕的诱惑,在界面上设计出更多的UI。而事实上一个更大的屏幕并不意味着你需要全部将其显示出来。

这一点Pages就做的非常不错:
null

它看上去像一个阅读的app,但当你需要与它进行交互的时候,与编辑相关的界面就呈现出来了。

思考:选择性地保留或者隐藏掉一些界面,直到用户需要的时候及时被“呼唤”出来,让用户“所见即所得,所得则会用”,这种大道至简的设计思想正是让你应用保持魅力的关键所在。

4.方向适配,布局多变
相比而言,传统的UI设计就像是在一块指定大小的画布上进行绘画。而 “纵” 与 “横” 的转变 (portrait and landscape) 给设计师们带来了新的需求,他们需要关心的不仅仅是界面展现上的美感, 更要考虑界面如何适配这2种视图的改变以及如何优化这些变化对体验的影响。

iPad和iPhone最大的不同之处是屏幕大小。iPad有更多的空间来展示,所以在设计app时尽可能的减少页面层级,避免让用户打开一个又一个的页面来完成整个操作流程。
null

Mail利用气泡形式收纳起了导航部分,当用户需要时,点开一个按钮即可展示,同时可以在右侧进行相关其他操作。 由竖变横时,随着宽度的增加,设计师在设计时就将原本隐藏的导航部分,展示了出来。 在布局层次上保持了一致,用户对整个流程的体验也得到了优化。
很多应用在iPad上的展示都如此:
null

由此可见,在遭遇横竖屏转换时,应避免改变用户在横竖屏切换中的使用习惯。即使屏幕进行了横竖切换,在层级架构、页面布局、展示上保持基本原则上的一致,这样才能保证用户不会在使用过程中迷路。

思考:有时候即使是方向适配也需要考虑成本! 如何以最小的代价在 “纵”“横”之间保持游刃有余,而又要保持美观? 可能对于一些个人开发者更是需要深思的问题。

总结
“未雨绸缪方能事不愁”,美好的设计总是需要先为用户考虑更多。对于我们设计师们而言,iPad不仅仅是一个“放大”的iPhone那么简单,它“放大”的更是视觉上和体验上更多想象的空间,同时还有机遇和挑战。

 

分类: 3硬件学习 标签: , ,

移动界面隐喻设计

2011年5月26日 没有评论

界面是什么?

是的,有些时候,我就在想这个简单的问题,而那时我的答案还是:界面是对软件应用解决方案的显性,使用图形化符号,向使用者解释它的功能与任务。

但最近一些认知却让我对这个问题有了新的回答:界面就是软件应用它本身。它不是一份对软件应用功能的图形化说明书,不是对软件应用功能与任务的图形化翻译,它就是软件应用本身,并且与之浑然天成。

一个简单的问题,仅仅从展开的iPad文件夹时界面的呈现,你觉得,有多少种方法,可以收缩起这个文件夹?

Picture1

方法其实有三种:点击(Tap)文件夹图标或者点击其他区域;向上拖动(Flick)界面;双指在两侧向内滑动(pin close)。

第一种也许你早就知道,但后面两种,你也许会将信将疑地去尝试,相信我的说法。

所以,从我的角度上而言,这也许是人家常说iOS操作简单易懂的原因。在你点击文件夹后,文件夹展开的的这个动画,以及最终他的视觉样式,已经告诉你了,他应该怎么去关闭,你会不由自主的,就学会这些操作。

而这就是隐喻。《iOS Human Interface Guidelines》里面是这样解释隐喻对体验的影响的:当你应用中的可视化对象和操作按照现实世界中的对象与操作仿造,用户就能快速领会如何使用它。(When virtual objects and actions in an application are metaphors for objects and actions in the real world, users quickly grasp how to use the app.)

抽屉的隐喻

对我而言,iOS的文件夹更多的像一个抽屉的隐喻,并且,它的顶部还是玻璃材质的。从拉开的动画当中,他建立了一个类似抽屉的空间,你一看就明白了。

界面与界面之间,并不是简单的线性关系

我们不得不否认的一点是,界面与界面之间其实是应该纯在联系的,我指的这种联系是说,空间感。存在相互之间的层级和逻辑关系的,而且这种关系,越符合现实的,越好。越容易让别人理解,越来越不用让别人学习。

这就是我们需要做隐喻,我们需要通过它,去表现界面之间的关系。

界面环境

隐喻给人以可预测性,用户能够轻易的理解你设计的软件应用。这是一种掌握的感觉,是一种控制的感觉。当用户操作时,他们知道下一步即将出现什么、怎么回去——即使是在第一次操作。

为什么需要在移动界面中注意隐喻设计?

1.导航缺失

一个触摸屏手机的物理尺寸在3.7寸左右,与一张信用卡相当。在这么狭窄的空间内,我们则不能秉着PC客户端“在一个主界面内完成大部分的任务”的思想,去设计移动客户端。我们必须把界面分拆。

与之而来的问题是,分拆后的界面是有逻辑的,但我们并不能照搬PC客户端中的方法:使用任务栏,层叠的模态对话框去表现这种逻辑。

Transform Mail from Mac to iPhone

因为我们根本就没有空间,所以我们得另辟蹊径。

所以,我们把界面拆分得更多独立化,让界面变成卡片式,一个界面只完成一项任务,保证界面之间联系的单一化,避免界面之间逻辑,或者跳转的混乱。

2.缺乏物理力学反馈

传统的手机上,用户使用键盘,去操作屏幕上的视觉对象,键盘在这个阶段中,扮演的其实是用户操作行为的翻译器。而iPhone的出现砍掉了这种操作行为的翻译,变成直接触摸,这是一项伟大的进步。

操作与反馈对比

iPhone虽然缩短了操作行为的执行阶段,但却给操作行为的反馈阶段带来了麻烦:只有视觉反馈,手指触摸的物理力学反馈消失了。

你的手指不再能够感受到键盘按下的物理力学压力,甚至,假设你手指粗壮一点,你就几乎没法看见按钮是否被按下。而在输入时,这种情况尤甚,键盘手机上有着悠久历史的高效的“盲打”输入方式只能进入历史的存档中。

因此,我们更多的需要利用用户的视觉和听觉,去提供反馈。

隐喻设计内容

对于一个产品来说,隐喻设计不仅仅是动画,各种即时状态细节的设计,更多情况下,我们需要按步骤的去完成整个隐喻的系统性与结构化设计。他包含以下几项内容:

1.拟物化视觉外观与听觉反馈

隐喻设计的第一步,从应用的外观着手,如果可以的话,你应该考虑应用的外观表现出真实物理的肌理材质,以及合理的光影效果,并且,得正确的显示界面的元素的相互之间的空间层次感。

拟物化外观

Untitled-3

另外我们不能忽视的一种拟物化设计:音效。它不仅是对缺乏物理力学反馈的一种弥补的手段,在某些情况下,也是一种有效的反馈机制,如当屏幕处于关闭状态下时(这是经常的事情),拟物化的音效更能让用户了解当前用户的状态。iOS解锁屏幕的声音你还记得吗?还有敲击键盘的声音,以及照片拍摄的声音。这都很好的拟物化音效。

拟物化的外观很大程度上降低了用户的认知成本,无需阅读额外的文字,用户只要看到软件的样子,就知道它的用途。

2.即时反馈

假设,你在触摸屏的设备上,使用手势执行某项操作,但界面上没有任何的反馈。你就不得不去猜测一下,你遇到的是下面的那种情况:

  1. 你的操作手势有误,软件无法响应
  2. 程序当机了,暂时没有响应

对于情况二,很抱歉,我们也许实在无能为力。但是对于情况一,我们得有必要讨论一下,如果反馈用户操作手势有误,并指引或者帮助用户到正确的操作中了。

坑爹的错误反馈

由此看来,传统网页上使用的反馈方式,移植到触摸屏设备上,实在是水土不服。移动设备最好的错误反馈,应该是即时跟随用户的手势操作的。

Google Map for iPad

如上图示意,这才是一个触摸屏上,应该具备的一种反馈,它即时响应了用户的手势动作(即使可能是错误的),而当用户释放操作时,又自动回归到正确的操作结果中来。

对于任何一个软件应用来说,他都是有学习成本的。有的成本高到离谱,比如Office,Photoshop之类的生产力软件,但也有低成本的,如计算器,记事本等。当软件应用而行拟物化设计之后,其实这已经降低了一些学习的成本。但如何继续降低学习成本?让用户犯错,并从错误中学习。

即时反馈缩减了操作与反馈之间的距离,有效降低了用户纠正错误的修复成本,也提高了用户学习的效率。

3.流动式动画

传统的软件界面之间的切换表现得较为粗暴,大部分情况下,他只显示命令执行前和执行后两个界面,而忽略了他们之间的那段过程。而在真实世界中,倘若没有这个过程,你甚至很难理解过程两端的界面,是如何联系起来的。

向上推的界面组合

动画有一种无法比拟的表现力,它是与用户的最有效的沟通方式,一个精致,微细的动画,能够友好的衔接两个界面之间的切换,同时他还有以下的作用:

  1. 表现软件当前状态
  2. 提供对用户有用的反馈信息
  3. 加强用户直接操作的控制感
  4. 通过视觉表现用户的操作的结果

流动式的动画贯穿在整个iPhone操作系统中,也包括在非沉浸式应用程序中。但作为隐喻设计的一种手段,我们需要留意的是:动画只是常用于提高用户体验,它本身并不是用户体验的焦点。

隐喻设计的评判标准

1.符合现实逻辑的界面空间

流动式的动画成为隐喻设计的最后一块拼图,但是我们仅仅把拼图拼起来是不够的,我们还需要检验,这样的拼图是否符合真实世界的逻辑。

Picture1

Flipboard始终如一地采用翻页的动画效果,无论是从首页进入,抑或是从某个订阅源中返回。他甚至还精细的制作了三种翻页动画效果:只翻动一页,翻动两页,翻动三页和以上;他给以用户这样一种感觉:

  • 我订阅的所有内容,是一本杂志
  • 任何页面都没有互相从属的关系,只有先后秩序的关系
  • 在首页上的方块型的东西,等于杂志的目录

杂客的界面空间

而国内的同类产品杂客,他所呈现的界面空间却稍有不同,整体上,他像是一个时刻变换封面的杂志柜。

但个人感觉,从杂志柜进入杂志的过程动画,有点粗暴且难以在现实生活中找到相关性。个人观点,若此过程动画能与iBooks打开书籍的动画类似或相同。也许更加符合现实逻辑。

2.自圆其说

简单来说,你的界面是如何进入用户的视眼,也应该以相反的方式,从界面中消失,并且,这个过程,是能够自圆其说的,且符合真实生活的隐喻的。

新开网页流程

关闭网页流程

 

3.响应用户的直觉手势

移动设备最大的特点是:直接操作。如果你设置了你的界面是从下方推入,那用户可能会直觉性的认为,我把新界面向下拉,这个界面即可消失。

腾讯爱看直觉性手势

从图可以看到腾讯爱看成功的照顾到了用户从隐喻设计中所得到的直觉性手势,只需向下拉,用户就可以关闭此界面。

直觉手势

从外观上看,评论界面都处于主界面之下,而动画效果都属于主界面向下拉伸,评论界面向上推至界面顶部。但是杂客的同样响应了用户的直觉性手势,只需在正文界面中,向下拖动,即可激活评论界面,这不得不算是在twitter客户端上的一种进步和超越。

总结

其实理解移动界面的隐喻设计,并不是一件非常困难的事情,因为这是一个化繁为简过程后的结果。而困难的是:设计师应该跳出传统的按钮,点击等交互操作的局限中来,更多了考虑到和现实生活的逻辑结合和用户的直觉手势的响应。

对于移动的软件应用来说,隐喻设计的初衷是为了解决导航缺失和物理力学反馈缺失的问题,但同样,这也是移动产品的竞争力的核心体现。如何帮助用户更快的理解你的软件应用,如何帮助用户更顺畅的使用你的软件应用。这是我们每个设计师,都应该去真实生活中去寻找的答案。

 

分类: 6如何设计 标签: , ,

无觅相关文章插件,快速提升流量