手机界面设计

浅析iPhone用户界面设计精粹，从细节成就卓越！（看）（转

载）

pingzia收录于2010-10-08 阅读数：查看收藏数：7公众公开原文来源

tags：网站设计资源

修改以文找文推荐给好友

如何对文章标记，添加批注？

作为一款革命性产品，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. 提供指尖大小的点击区域