会员注册 | 登录|微信快捷登录 QQ登录 微博登录 |帮助中心 精品学习网 专业在线学习考试资料文档分享平台

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

收 藏 此文档一共:10页 本文档一共被下载: 本文档被收藏:

显示该文档阅读器需要flash player的版本为10.0.124或更高!

关 键 词:
  文库屋所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
文档介绍
浅析 iPhone 用户界面设计精粹,从细节成就卓越! 作为一款革命性产品,iPhone(这里泛指 iPhone 和 iPod touch,当然还有 iPad)为我们带来了许多意想不到的创意和惊喜。过去两个月多的时间里,我们 认真地咀嚼《iPhone Hu****n Inte****ce 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 ****jority 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 应用程序设计指南》。
关于本文
本文标题:浅析iPhone用户界面设计精粹,从细节成就卓越 链接地址:http://www.topstudy.com.cn/zhuanye/it/309.html
上一篇:代码之美中文版
下一篇:需求开发与需求管理

当前资源信息

高级会员

爱学习共有文档571 篇

编号:WENKUWU309

类型: IT/计算机

格式: pdf

大小: 0.59 MB

上传时间:2018-02-07

相关搜索

关于我们-联系我们-网站声明-文档下载-网站公告-版权申诉-网站客服

文库屋  www.wenkuwu.com (精品学习网 专业在线学习考试资料文档分享平台)

本站部分文档来自互联网收集和整理和网友分享,如果有侵犯了您的版权,请及时联系我们.
© www.topstudy.com.cn 2016-2012 精品学习网 版权所有 并保留所有权  ICP备案号:  粤ICP备14083021号-8              

收起
展开