细节成就卓越——浅析iPhone用户界面设计精粹

作为一款革命性产品,iPhone(这里泛指iPhone和iPod touch,当然还有iPad)为我们带来了许多意想不到的创意和惊喜。过去两个月多的时间里,我们认真地咀嚼《iPhone-Human-Interface-Guidelines》,感悟字里行间透露着的苹果的细致与智慧。兴奋、激动之余,有太多的惊喜想与大家分享。但无论从时间上还是精力上,130页的完整套餐肯定会让所有的人吃不消。我们收集了iPhone平台的专业设计师的意见,加上翻译过程的一点体会,整理出11条设计精粹。最后,希望这份130页浓缩而成的快餐不会让您觉得难吃,enjoy yourself!

1. 了解应用类型及各自特点

iPhone平台有三类型的应用:

● 效率型应用(Productivity Applications)

● 实用工具(Utility Applications)

● 沉浸型应用(Immersive Applications)

每一种都有各自不同的特点和应用场合。设计之前如果能够清楚产品的目标和特点,选择合适的应用类型可以更好地迎对。

效率型应用用于帮助完成日常的一些工作,如收发邮件、即时通信、照片管理与分享。用户快速查看、跳转、执行、完成,连贯的动作要求界面简单直接,让用户可以全神贯注于任务本身。这类应用一般都附带自然的层级结构。所以,表格视图(table view)可以在这类软件里大派用场。

图1.1 附带层级结构的效率型应用

实用工具用于执行一项简单的任务(如计算器,天气报告),简单,容易配置就可以了。

图1.2 实用工具之“天气报告”和“深度睡眠”

沉浸型应用可以为用户带来极致的娱乐和游戏体验,这类应用可以进一步细分为游戏和虚拟仿真类。这类应用和标准的系统界面不同,用户希望这类应用能够给他们带来最大的娱乐,因此,界面设计的自由发挥度比较高,仿真的、可爱的设计风格往往能恰到好处。

图1.3 沉浸型应用

2. 熟悉系统布局和控件特点

iPhone 操作系统提供了非常出色的UI库,这些标准的控件和视图都得到了大量的研究才得以真正派上用场。另一方面,iPhone 用户已经对这些软件非常熟悉,不管是出于什么理由,如果没有更好更实用的创意,我们应该遵循iPhone的控件规范。至少,在我们打破iPhone的规则之前,“You must understand the rules before you can break them.”(你必须了解规则然后才能打破他们)。

iPhone 提供的UI组件从大到小,大致可列举如下(具体每种控件和视图的细节,请参考《iPhone 用户界面设计指南》第二部分):

● 导航条,标签条,工具条和状态条

● 弹出对话框、操作面板和模式视图

● 表格视图(Table Views), 文本视图(Text Views), web视图(Web Views)

● 应用程序控件(如文本框、分页显示器、轮转选择器、进度条、更多按钮等)

3.  使用隐喻

隐喻为界面视觉提示和功能建立了直观的逻辑联系。将软件中涉及的元素和操作与真实世界关联起来能够更好地帮助用户理解。

iPhone内置的备忘录应用就是一个使用隐喻的典范。除了基本的删除和邮件这些图标隐喻,整个产品的外形:棕色的头部导航,米黄色的纸质背景,配合细致的行隔线和垂直的双细线,俨然就是一可爱的小小备忘本。将产品与实体对应起来,用户一看就知道软件的用途。

iPhone操作系统的隐喻不胜枚举,我们尚可尽量遵循,但如果有“更合适更贴切”的隐喻,你也可以放胆一试。

4.  一目了然,即看即点

用户在移动场景下不会长时间对着手机屏幕,他们可能“迅速打开音乐播放器随便播放一首就跳去其他应用程序或继续其他的事情”,不要以为用户有时间去研究怎样使用你的应用程序,这种注意力相对分散的情景要求你的应用程序界面必须尽量简洁,一目了然,用户看到就能马上理解。一般有三种方式可以简化界面:

● 删减软件功能:功能越少,界面越简洁。移动产品的设计,减法远比加法来得重要。请牢记移动产品设计里最重要的金科玉律: 为移动场景下的大多数用户设计最常用的少数几个功能特点(Pick the few features,most frequently used,by the majority of your users,most appropriate for the mobile context)。

● 减少输入:尽可能地减少输入,直接为用户提供选项。如索引列表,既方便用户记忆,也可以帮助用户快速扫描并直接选中;轮转选择器,划上划下即可选中,减少打字耗时的同时省去繁多的错误检测。

● 避免不必要的交互:用户也不是你想像中那么傻的,不要一味提醒他们如何操作(帮助越多说明你的软件越难用),设计时应该关注如何更有效地引导用户集中精力快速完成任务。

内置的短信发送实在是太经典了,写信人和收信人左右区分,信息内容通过时间顺序排列下来,整个信息来回历史一目了然。呼叫程序同样出色,重新设计的数字键盘弱化了字母排列,突出数字,由此换来宽大容易点击的屏幕空间。

图4.1 一目了然的短信历史查看和拨号呼叫

5. 考虑屏幕上下

不论单手操作还是两只手配合操作,屏幕上部分的可见性是最好的。所以,在设计应用程序时,应该将最常使用的的信息——一般是高度概括的信息,如导航,或者一些常规操作如添加、完成、保存、取消——置于屏幕顶端。

屏幕的底部一般是辅助性的工具栏或切换视图使用的页签栏。一些影响较大的操作如果出现在屏幕下半区域,必须仔细考虑它们的排列设计。如图5.1,一般情况下,操作面板的取消按钮放在最后,这样可以鼓励用户阅读完所有的选项,暗蓝色的返回按钮可以和一般的按钮区分开来,即便用户没阅读完也知道这是返回按钮。对于一些影响较大的操作(如删除),将其放在面板的顶部是最好的,因为顶部更容易被看到,再加上红色的警告暗示,用户选择起来会更为慎重。

图5.1 操作面板上的按钮排列

6. 提供指尖大小的点击区域

如果按键布局过于拥挤,用户就要小心翼翼地花更多时间去操作,错误也会紧接而来。简洁易用的界面空间必须合理地控制按钮布局和交互元素,让用户更快更容易点击。

旧版内置计算器的按键是大号的,有效区域都为44*44px,非常容易点击。新版的计算器为了容下更多的按钮,按键大小做了一些调整,虽然高度上略有减小,但用户点击起来还算容易。对于经常使用的“=”号,整个目标区域都加大了,这种样式上的区分可以将主要操作和次要操作区分开来,以便更好地引导用户。

横屏的计算器完整模式可以容下更多的按键,按键大小相对竖屏的要小,尽管如此,用户点击起来还是得心应手。

图6.1 适合手指点击的计算器按键

7.  灵活运用手势支持

去到哪里,手指就跟到哪里,多种动作随时变换,直接感知与设备交互,如此自然直接的“输入”,如果能够灵活合适地运用,除了可以带来良好的用户体验,还能极大满足用户的控制欲望。

图7.1 手势操作:滚屏、长按、拖动、捏

当然,手指的一个最重要问题在于它比鼠标指针大得多,灵敏度和精确度会有所欠缺。一些同时使用鼠标和键盘的操作(如复制、粘贴、选择文字)是手指很难完成的。设计上应该考虑由此带来的影响,避免滥用。如果你的应用支持比较复杂的手势(长按、捏),确保用户能够理解他们的含义,并且为这些手势操作提供直接的响应反馈。

8. 考虑横竖屏方向变化

iPhone游戏里出现横竖屏设计比较正常,都是视具体的游戏类型来分。但一般的效率型应用或实用工具,也是横竖屏都有。林子大了,什么鸟都有,有些用户就是喜欢经常将屏幕旋转过来,而且还不在少数。他们或是喜欢横屏的浏览方式(如备忘录、音乐),或是希望打横可以看到更多的信息(如计算器)。设计的时候必须充分考虑用户的期望。有时将界面内容旋转就可以简单满足他们的需求,但有时也需要你重新去设计以展示更多的内容(如横屏的音乐会出现一个新的界面,展示所有的歌曲)。

图8.1 iPhoneQQ 横屏输入

竖屏情况下,输入键盘宽度只有320px,平均每个按键宽只有32px(320/10,这里忽略键与键的间隔);横屏时每个按键宽可以达到48px,多了整整16px。如果是在小屏幕上输入,你更倾向那种方式?

如果你的应用程序界面只支持单一方向的展示,最好的做法就是保持界面固定,不随着设备方向改变而改变。例如,当用户选择去看一个iPod视频时,不管屏幕打横打竖,这段视频都是横向展示的。有了这个暗示,用户就会很自然地旋转屏幕到水平横向观看。翻转按钮也没有存在的必要了。

9. 合理的反馈

纵观所有的内置应用,反馈可谓无处不在。由于大部分的操作都是通过手势(其实还有抖动、语音输入方式)完成的,通过一些明显的变化来响应用户做出的操作,能够给予用户极大的信心。

图9.1 iPhone版 QQ斗地主的音量大小调整

进入QQ斗地主的游戏设置页面调整音量大小时,手指的大小盖住了滑块,为了将选中的信息反馈给用户,两边的扩音器图标同时使用了外发光样式。

iPhone 操作系统提供了许多自动反馈的机制。动画就是其中一种。不过切记一点,动画的目的在于提升用户体验,而不是成为盲目追求酷炫的焦点。

10. 优化启动过程

iPhone OS4.0以前的应用都属于单任务的,用户会经常在多个应用程序之间切换,一个电话来了,用户不得不退出正在进行的应用程序。要确保用户回来时启动足够快速,以减少用户的等待,而且,为了将影响降到最低,应尽可能保存上次关闭之前的操作结果。这似乎都是工程师的职责,但作为一个优秀的设计师,你还可以为此做很多的事情。

开启时第一屏显示一个背景图或者简短的loading动画。即使是普通的效率型应用或者简单的实用小工具,启动时如果能够预先显示一个背景图,背景图与程序启动后首界面平稳自然地过渡,这种方式既可以带给用户即时的反馈,也可以“缩短”用户等待的时间。

图 10.1 启动时的预加载背景

运行天气应用和iPhone QQ时,即使是很短的启动时间,预加载背景还是能够让人感觉启动等待的时间缩短了。

虽然iPhone OS4.0开始支持多任务,但不要天真地以为这种背景预加载的细节可以忽视了,应用程序应该一如既往地为用户提供这种流畅的体验,毕竟,用户启动的时候还是期望软件可以“快一点”。

启动时要切记一点:不要弹出一个说明性窗口,或一个刺眼的闪屏,或其它类似的启动体验(网络wifi提示这些是例外)。这种方式很突兀,让用户立即使用你的应用程序就好了。

11. 为应用程序设计图标

应用程序图标是指放在iPhone屏幕上用来启动程序的图标。iPhone的屏幕大小只有480*320px,在这狭小的屏幕里,用户希望放下尽可能多的图标,这些图标必须具有突出的视觉效果才能方便用户辨认。要做到这一点,可以从以下两方面着手:

● 美观:确保图标简单美观,富有吸引力,这样用户才愿意让这些图标长久占据有限的屏幕空间。

● 可识别特点:要让用户在大量图标中轻松找到该应用程序,图标必须要有自己的特点,对于关联的产品,可以结合品牌进行设计。

图11.1 “企鹅”图标,一看就知道是QQ产品

为了与内置图标保持协调一致,iPhone操作系统一般会自动给图标增加一些视觉效果:

● 圆角

● 阴影效果

● 反光效果

图11.2 未添加视觉效果的的普通图标

图11.3 iPhone操作系统自动添加效果后的图标

为了确保你的图标可以利用这些视觉效果,你应该遵照以下图标设计规范:

● 图片格式:PNG

● 大小:57X57像素,90°直角(如果图像不符合标准,iPhone系统将自动按比例调整)

● 不要有任何发亮或有光泽的部分

● 不使用alpha透明

最后,将图标文件命名为Icon.png,放在程序的资源包中即可。

注:需要的话,可以要求iPhone操作系统不添加反光效果,详情请阅读《iPhone 应用程序设计指南》。

写在最后:感谢您耐心的阅读,进一步交流可以follow:http://t.qq.com/Listyluo。
(本文出自Tencent CDC Blog,转载时请注明出处)

时间: 2024-10-24 18:15:34

细节成就卓越——浅析iPhone用户界面设计精粹的相关文章

设计参考:突出细节的用户界面设计实例

简单有效的设计是很多设计师崇尚的目标!这次是20个简单但细节突出的用户界面设计,这些优秀的布局,包括颜色的简单调整,细节设计让我学到很多东西. I constantly find my self studying good user interfaces to find out what makes them work so well. I think understanding good user interface design can help you create website des

学习产品设计策略:iPhone游戏设计体验

文章描述:从优秀的iPhone游戏中学习设计策略. 几乎所有iPhone用户都曾使用过游戏应用,这是一个"全民游戏"的时代.iPhone应用程序中,游戏不但在下载量方面首屈一指,在设计质量上也不乏可圈可点之处.本人从大量的游戏应用中大浪淘沙,试图从中汲取营养,探索好的设计策略为我所用. 基本思路是: 步骤一,提出小问题或小测试,请跟随我思考一下: 步骤二,引出其中的深层原理: 步骤三,此原理在iPhone游戏中的体现: 步骤四,给我们哪些启示? 通过以上步骤,简单地介绍肌肉记忆.长期记

触屏设备用户界面设计中 要注意的几个问题

印象当中,最近这些年的春天总是会带来让人觉得真心别扭的气候体验,雨和冷风就像催化剂一样,让生活和工作当中的人和事也变得异常凌乱,仿佛一团被咀嚼到完全失去味道的槟榔.November Rain前奏当中的钢琴旋律多少可以让心安然一些,一旦摘下耳机便又是个令人想要把自己的脑袋拧下来吃掉的世界. 可脑袋一旦被拧下来,就什么也无法吃的样子了,不是吗.说正事儿吧.Designing for touch,关于这个话题及相关的文章,最近貌似已然铺到大街上了,不过我还是做我的吧.在标题里加了个不伦不类的"又是&q

用户界面设计文档:手指友好型设计

文章描述:手指友好型设计-为了更好的点击而设计. 玩飞镖的时候,靶心是最难射中的位置,因为靶心是整个靶面上面积最小的部分.越是小的目标,就越是难以达到.这个准则在移动设备的触摸屏幕上同样适用. 众所周知,对于触屏设备用户来说,面积小的目标比面积大的目标更难操纵.所以,在设计移动设备界面的时候,触控目标一定要充分的大,足以让用户操作自如.但是多大才算充分呢?多大才是对于大多数用户最合适的尺寸呢?各大移动设备开发者已经认识到这个问题,最常见的做法是在各大厂商的用户界面设计文档中寻找答案. 那么,设计

Android用户界面设计:线性​​布局

理解布局对于良好的Android程序设计来说很重要.在这个教程中,你将学习到所有关于线性布局的东西,它在屏幕上垂直地或水平地组织用户界面控件或者小工具.使用得当,线性布局可以作为基本的布局,基于这个布局来可以设计出许多有趣的Android程序用户界面. 什么是线性布局 线性布局是最简单,Android开发者使用得最多的布局类型之一,开发者用它来组织你们的用户界面上的控件.线性布局的作用就像它的名字一样:它将控件组织在一个垂直或水平的形式.当布局方向设置为垂直时,它里面的所有子控件被组织在同一列中

《众妙之门——网站UI设计之道(修订版)》一第1章 现代网络应用中的用户界面设计1.1 什么是用户界面(UI)?

第1章 现代网络应用中的用户界面设计 众妙之门--网站UI设计之道(修订版)Dmitry Fadeyev 什么是用户界面设计?什么是有效的用户界面设计?你打算如何把用户界面设计得更好?这一章,我们就来了解一下现代互联网应用程序中可视用户界面设计的理论演化和技术更新. 1.1 什么是用户界面(UI)? "在你使用工具完成任务的过程中,你所做的操作以及工具的响应,这些结合起来就构成了界面."-Jef Raskin 用户在第一次使用一个界面时,仍然能发现某些元素是他们所熟知的.用户界面设计并

《需求设计:构建用户想要和需要的产品》——2.5 用户界面设计

2.5 用户界面设计 用户界面设计指的是对应用程序的终端用户界面和服务的编程接口所做的设计.对于在线应用程序来说,用户界面由应用程序所要显示的各种画面组成.在设计用户界面的时候,笔者不会详细地设计这些画面的布局或风格,因为这些内容可以稍后再做,而且最好是有专业的图形设计师帮着做.笔者在该阶段要做的是逻辑画面设计(logical screen design),这种设计用来确定每个画面上应该显示哪些数据.用户可以在画面中执行什么操作,以及这些画面之间如何切换,也就是说,用户是怎样从一个画面转到另一个

企业观察:细节成就品牌

文/李光斗 企业想要培养起消费者对自己品牌的喜爱就需要做很多的事情,通过自己的服务和产品,还有与消费者的一次次沟通之后才能够建立起彼此的信赖关系.但是,想要毁掉品牌却是件相当容易的事,一次细小的差错,就会让你的消费者远离.细节成就品牌,优秀的品牌就是注重细节的品牌. 从细微处入手是强化品牌的重要方法和手段.品牌的塑造是一项系统工程,它不是靠某一次宣传,也不是靠某一个人就可以完成的,它需要企业上下所有人的共同努力.这也就是全员品牌管理思想的由来. 品牌的关键是人,优秀的企业要想尽一切办法让员工具有

谷歌通过一款字体颠覆用户界面设计

在很早的时候,苹果联合创始人史蒂夫-乔布斯(Steve Jobs)就希望将个人电脑界面设计的尽可能具有美感一些,而文字字体则一直是他极为看重的一个方面.乔布斯希望,在电脑屏幕中显示的字体能够看起来和印刷字体一样美观,而他也的确带领苹果做到了这一点.然而,虽然目前大多数厂商都已经意识到了文字字体的重要性,但这些字体在实际显示时的效果却依旧没有达到我们的理想效果.因此,谷歌界面设计师克里斯蒂安- 罗伯特森(Christian Robertson)带领自己的团队花费了整整一年半的时间开发出了全新用户界