1. 避免输入
2. 便于点击
3. 简洁
4. 按方向键进入翻页程序时，第一个控件是“下一页”
5. 显示总条数或者总页数
6. 页面可以跳着翻

方案草图

方案解释

方案1：满足原则2/3/4/5/6

方案2：满足原则1/2/5/6

方案3：满足原则1/2/4/5/6

方案4：淘宝wap的方案，满足原则1/2/3/4/5，另外还可以更改每屏幕显示的条数

收集需求→分析需求→提出设计方案→修改代码→测试

需求处理共需要三个周期。

产品组

第N周期中收集需求、分析需求和提出设计方案。

第N+2周期中跟踪需求完成情况。

收集需求

产品组负责将这些需求来源和需求内容，需求主要来源于：

• 功能开发需求。
• CCB会议中用户体验修改建议。
• 用户建议（主要通过客服获得）。
• 运营部和市场部的需求。
• 产品组用户体验修改建议。

分析需求

提出设计方案

第N周期的最后一天同时提交设计方案给开发组和测试组。

跟踪需求

判断需求的完成情况。

开发组

第N+1周期中根据设计方案修改代码。开发组对于零碎的需求不处理，此周期中收到的需求安排在下一个周期中修改。

测试组

第N+1周期中根据设计方案修改测试用例，判断代码的修改是否涉及主干流程，安排第N+2周期中的测试内容。

需求规范化目的

• 保证每项需求都得到处理。
• 需求可跟踪，每项需求记录在案。
• 产品组提高设计质量，避免重复设计。
• 开发组避免重复修改代码，减轻开发组压力。
• 利用测试组，保证设计的执行力。
• 有序地迭代。

• 操作简单
• 预置了多种界面元素，如iPhone和Android
• 导出多种格式，如png、pdf
• 基于Adobe air
• 支持中文，设置方法：view>use system fonts

桌面软件

网页设计

iPhone界面设计

Balsamiq Mockup并非免费软件，没有key只能试用并不能保存，但官方网站上也提供了获取key的各种方法，比如写篇这样的博文。

昨天小试一把，绘制了iPhone界面概念设计图，效果真的很好。

简单易用

简单易用是所有类型软件的基本准则，但在iPhone程序设计中尤其重要。iPhone用户在使用手机时可能还在做其他事情，如果用户无法轻松地使用程序，他们可能回到电脑前再也不使用iPhone程序了。

简单易用的方法：

• 操作方式一目了然。优化控件的数目，使程序的主功能显然易见，引导用户操作。
• 使用频率高的信息放置在屏幕顶部。无论用户是单手操作，还是一只手拿着手机而另一只手的拇指点击屏幕，屏幕的顶部最显眼并且最易于点击。
• 最少的文本输入。过多的文本输入是在浪费用户的时间和精力，如非要输入，请保证“物有所值”，用户会感觉到并没有因为输入而耽误了任务完成。
• 简洁的信息。突出重要信息，便于用户快速浏览。
• 便于点击。44×44像素及其以上的按钮尺寸便于用户的拇指点击。

关注首要任务

关注首要任务是用户对于程序满意度的重要因素。所以在设计时，要保证界面上的每一个元素的设计都取决于当前首要任务，用户完成任务是否需要这些元素。举个具体的例子，这些信息或者功能对于用户购物是否有帮助呢？如果不是，这些信息或者功能是否在另外的使用情境中至关重要吗？

如上图，日程中有当前日期和事务安排，最重要的是显示这两者之间的联系。

有效沟通

程序需要让用户知道任务是否正在运行中和操作导致的数据丢失等问题，有效的沟通和反馈对于程序非常重要。应用动画就是有效沟通的一种重要方法，可以提供有用的反馈信息，直观地显示用户操作结果。

如上图，程序中的文本要以用户为中心，避免在界面中出现技术性的语言。

译自《IPhone Human Interface Guidelines》

iPhone中图标和图片的标准位深度为24位（红绿蓝各8位），加上8位的alpha通道，推荐使用PNG格式。

程序图标

程序图标放置在手机程序主界面上，点击之后可以启动程序。如上图，iPhone可以将图片自动加上阴影、发光和圆角效果。

程序图标的设计：

• 57×57像素，直角。
• 无发光效果。
• 无透明度。

小图标

小图标显示在Spotlight搜索结果和手机设置中。

小图标的设计：

• PNG格式。
• 29×29像素。

启动图片

启动图片类似于开机画面，是用户点击程序图标之后看到的图片，几秒之后才会显示应用程序的主界面。

启动图片的设计：

• PNG格式
• 320×480像素，可以临时改变状态栏的颜色。
• 启动图片和应用程序的主界面的背景相似。

导航栏、工具栏和标签栏上的图标

自定义图标要和系统自带的图标有明显的区别，其设计：

• PNG格式。
• 纯白色的alpha。
• 无阴影。
• 抗锯齿。
• 如增加斜角，必须为90度。
• 工具栏和导航栏上的图标大小为20×20像素；标签栏图标大小30×30像素。

iPhone会在自定义的图标加上装饰效果，比如按下或者选中的效果，所以也不必创建一个全彩色的图标。

译自《IPhone Human Interface Guidelines》

• 缩短开发时间。
• 增加界面的稳定性。当系统升级时，即使程序外观改变，这些标准按钮和图标依旧可用。

工具栏和导航栏上的标准按钮

有两种类型按钮：

• 边框型。可以在导航栏和工具栏上使用。
• 普通型。适用于工具栏，如非要使用在导航栏上，会被转换成边框型。

边框型

普通型

标签栏上的标准图标

译自《IPhone Human Interface Guidelines》

运行指示

运行指示表示后台有程序正在运行，但任务完成时不会提醒用户。当程序无法立即完成联网时，状态栏上会显示运行指示。当程序执行的任务无法立即完成时，工具栏上会显示稍大点的运行指示。运行指示提供了很好的反馈机制，明确地告知用户程序正在运行比告诉用户任务已经完成更为重要。

运行指示的颜色默认为白色，当然颜色和尺寸也可以自定义。

日期和时间选择器

日期和时间选择器可以同时显示四个独立的转轮，每个都可以表示单独的种类，例如月份或者小时。预先将值限定在一定范围内，可以避免用户多次输入。日期和时间选择器有以下模式：

• 时间。显示小时和分钟，AM/PM选项。
• 日期。显示月、日和年。
• 日期和时间。默认显示日历、小时和分钟。
• 倒数计时器。显示小时和分钟，最大值23小时59秒。

分钟的值默认是0-59分钟，共60个值，也可以将60个值均分为四个值：0、15、30和45。

细节扩展按钮

点击细节扩展按钮，可以浏览到关于信息的更多细节。

信息按钮

信息按钮用于设置程序，例如上图天气程序的右下角。在iPhone OS 中点击此按钮，会有发光的视觉效果。

标签

标签适用于显示少量的文本，可以对部分界面命名或者提供有限的辅助信息。标签的字体、颜色和间距都可以自定义。

页面指示

页面指示以圆点代表每个已打开的视图，发光的圆点代表当前视图，从左到右的圆点表示了视图被打开的先后顺序，但不能像面包屑一样显示视图的路径。如上图的天气程序，界面指示位于视图底部和屏幕底部的中间，在竖屏幕的情况下最多可以显示20个圆点。

选择器

选择器是日期和时间选择器的通用版本，可以显示任意的值。这是，部分值会被转轮掩藏，如果值数量较少或者用户知道被掩藏值是什么，就像月份选择器，只有1-12月的值，可以考虑使用选择器。但是如果用户并不能预先知道被掩藏的值是什么，那使用选择器就不合理了。如果数量过大，使用表视图更能便于用户快速选择。

进度视图

进度视图用于显示任务的进度，和运行指标的区别在于：任务完成的时间可以预计时，使用进度视图，否则使用运行指标。进度视图有高度不同的两种类型：

• 默认类型适用于程序的主要界面
• 条型比默认类型更细，可以应用在工具栏上。

圆角的矩形按钮

圆角的矩形按钮是用于执行命令的通用按钮，如上图中的“TextMessage”和“Add to Favorites”按钮。

搜索栏

搜索栏用于内容搜索，点击之后会显示虚拟键盘，除了左边默认的搜索图标之外，搜索栏还包含其他元素：

• 占位符文本。可以提醒用户搜索栏的功能（例如“Search”）或者搜索的内容（如Google或YouTube）。
• 书签按钮。记住用户的搜索内容，如在地图搜索中，书签按钮可以快速地查到已标记位置、最新搜索的内容和联系人。默认在搜索栏上用户没有输入文本或者占位符文本时，书签按钮才可能显示。
• 清除按钮。可以快速地删除搜索栏中内容，默认在用户在搜索栏中输入文本时，才会显示清除按钮。
• 描述性标题。搜索栏上的文字说明。

分段控件

点击分段控件显示不同功能视图，如上图，使用分段控件修改邮箱协议。分段控件的宽度是固定的，长度取决于控件的数目和最大部分的尺寸，因为控件的最小像素推荐值为44×44，分段控件的数目最好不超过五个。分段控件中可以放置文本或者图片，最好避免在控件中同时放置文本和图片。

滑杆

用户可以使用滑杆调整值整合进度，例如上图使用滑杆改变图片的明度。

输入框

在输入框中输入文本，输入框中左边或者右边显示自定义图片或者iPhone OS 自带的控件（如书签控件），也可以显示占位符文本帮助用户理解输入框的作用。

译自《IPhone Human Interface Guidelines》

通用元素表视图、文本视图和网页视图在程序中经常应用。例如表视图用于显示简短的列表选项、分组的详细信息表或者项目索引列表，文本视图和网页视图可以不受限制地接收和显示内容。

表视图

表视图以栏列表的形式显示数据，栏可以拆分成项或者组，每栏可包含文本、图片或者控件。

使用方法和行为

不论是多少数量的信息，表视图都可以提供有效的管理方式，因而在iPhone界面设计中非常有用。表视图内置的元素容可供用户浏览和处理信息：

• 项或者组列表的上下显示页眉和页脚。
• 用户可以增加、移除或者重新编排列表，也可以对多个列表同时操作。

当用户选中一个列表项目时，应该提供适当的反馈：要么显示新视图，要么栏被标记为已选中。另外，表应该无间断地显示内容，如果表内容多或者复杂，数据可以逐步显示，避免在调取所有数据前不显示任何内容。如果数据变化不太频繁，可以先显示“过期”的数据直到更新新数据。这些设计都是期望使用户立即就看到有用的数据。如无法立即更新数据，为了避免出现死机的假象，可以在屏幕中显示进度条和文字说明，如“加载中…”，让用户知道程序仍在运行中。

表视图类型

iPhone OS 定义了两种外观不同的表视图类型：

• 普通型。如上图，用边框将表拆分成背景为白色的栏，可以使用界面右边的标签搜索。

• 编组型。编组型的栏从屏幕的边际插入，背景为垂直的条纹背景，而栏本身用白色填充。表视图内的组数量不受限制，组中的栏数量也不受限制，但不提供索引功能。

表视图元素

iPhone OS 中带有少量只能在表视图应用的功能性元素：

• 扩展图标。当显示扩展图标时，用户直到点击栏上的任何位置就会显示下一级列表或者选项。
• 细节扩展按钮。点击此按钮可以获得关于列表项的细节信息。
• 删除按钮。用于删除列表项，当用户用力点击栏或者在编辑中点击删除控件按钮。
• 删除控件按钮。点击删除控件按钮，显示或者隐藏删除按钮，为了增加反馈，删除按钮显示时，左边的水平负号旋转了90度。
• 插入栏按钮。用于在列表项中增加栏，栏重新排序按钮。
• 选中标记。显示在已选中的列表项右边。

开关控件

开关控件用于互斥的选项，例如是/否或者开/关，每次只显示其中一个选择。

表视图使用户操作更容易

表视图在iPhone界面设计中很常见，因为它能适应用户多种操作方式，比如：

• 选项。iPhone OS 不包括类似于菜单那样的多项选择式控件，但表视图也有可供用户选项的列表项。
• 信息分级导航。表视图可以显示多级信息，用户也易于通过扩展图标发现信息的层级关系。
• 浏览分组信息。可以将通讯录分组，如同事、家庭或者学校，信息在视觉上清晰可辨。
• 查找索引信息。如果使用普通表视图，可以通过界面右边的索引信息（如字母表）帮助用户快速查找。

文本视图

顾名思义，文本视图就是用于显示文本，例如写邮件的正文，可以设置整个文本的字体、颜色、边距或者特定的输入法。

网页视图

网页视图可以显示富内容和HTML，适用于网页或者web程序。

译自《IPhone Human Interface Guidelines》

警示框、控件列表和模态视图迫使用户点击按钮之后才能继续使用程序，尽管它们时常警告用户潜在的危险或者提供额外的选择，也要避免过度使用，原因在于：

• 所有类型的模态视图都会打断用户的工作流。
• 需求确认或者承认视图的频繁出现更让用户厌烦。

尤其是当警示框出现太频繁时，用户会直接关闭它们，而不是阅读警示框上的文字并在考虑之后点击按钮。

• 警示框提示程序的重要信息。警示框的出现通常很意外，因为它们一般告知用户需要当前程序上出现的问题或者改变采用行动。
• 控件列表提供用户更多可选择的控件。当点击工具栏上的按钮即不是破坏性操作（如删除已拨电话），也不是完成多步骤操作时（如发邮件），用户期待界面上会出现控件列表。
• 模态视图在当前任务情境中提供更多的功能，也可以直接执行和用户工作流有关系的子任务。

警示框的应用

突然在界面中间弹出并浮在界面上的警示框能明显地提示用户一些关键信息。警示框的外观强调其出现是由于程序和设备的改变而引起的，但不一定归咎于用户最新的操作，警示框上文字解释当前的状况并引导用户完成操作。

使用警示框告知用户任务被阻止是很重要的，而且要提供可选择的方法去处理警示框。警示框可以给予用户两个按钮，接受或者拒绝潜在的危险，也就是关闭警示框并执行命令或者关闭警示框并不执行命令（通常为“取消”按钮）。请谨慎使用警示框，并保证每个警示框提供关键信息和有效的选项。一般而言，避免创建以下形式的警示框：

• 更新用户的正常进度的任务。而应该使用进度条或者活动指标来提供进度上的反馈给用户。
• 对于用户启动的行为进行询问确认，应该使用控件列表去确认用户启动的命令，甚至是潜在的危险命令，如删除联系地址。
• 告知让用户束手无策的错误或者问题。尽管告知用户无法处理的关键性问题是有必要的，但如可能，最好将信息合并在界面上。例如，与其告诉用户链接服务器每次都失败了，不如显示最后一次链接成功的时间。

警示框的设计

警示框的文字、按钮的数目和按钮上的内容都可以自定义，但其背景不可以改变。对于用户而言，在两者之间做出选择是最容易的，警示框上的按钮数目最好也是两个，如使用单个按钮，用户将没有选择的余地。因为用户有时并不仔细阅读警示框上文字就进行操作，所以要高亮右边的按钮作为默认选项。比如点击“取消”按钮可以避免无意操作而执行危险的命令，如果不是破坏性的操作，可以执行最普遍的操作。

设置警示框上的按钮的方法：

• 警示框上有两个按钮时，左边的按钮通常使用深色，而右边的按钮从不使用深色。如操作有潜在危险时，“取消”按钮应该在右边并使用浅色；如操作没危险时，“取消”按钮应该在左边并使用深色。
• 警示框上有一个按钮时，按钮使用浅色。

上文提到用户有时不会仔细越多警示框上的文字，所以文本内容和标题必须简明扼要，有时，描述状况或者事件的标题就足够了。但也不要创建无法传达有效信息的单词类标题，比如“错误”，作为标题无法告知用户为什么会出现警示框。事实上，在任何界面上都尽量避免出现“错误”字样并描述实际情况。如果使用了同样的标题，而警示框是由不同原因触发时，就需要增加句子或者信息去提示用户更为详细的信息。如果标题对于信息的传达并没有任何帮助时，可以将标题去掉。

控件列表的应用

控件列表集合了通过点击而启动任务的选择性按钮，通常应用在：

• 提供完成任务的多个可选方式。例如在拍照功能中，控件列表提供发送照片的三个目的地。
• 在完成具有潜在危险的任务之前获取确认。例如，根据邮件设置，点击工具栏上的垃圾箱按钮，通过控件列表删除邮件或者取消删除。

控件列表的设计

控件列表的背景须和程序界面相协调，按钮的数目可以自定义，作为用户操作（如点击删除或者发送按钮）的的结果，所以无需像警示框一样加上文字说明。

如果操作具有潜在的危险，比如删除所有的购物列表，应该使用红色的按钮提醒用户，而且要将这样的按钮放在控件列表的顶部：

• 顶部的按钮，视觉更明显。
• 有时用户在试图点击“Home”按钮时，意外地触发了控件列表，将有危险性的按钮放在底部会增加误操作的概率。

可以在控件列表上设置多个按钮，但要确保每个按钮都容易辨认。

模态视图的应用

模态视图默认从界面底部滑出并占据整个界面，并短暂地显示与之前不同的界面，直到用户完成某项操作。

模态视图完成和程序主功能有关系的独立任务，尤其适合于主功能界面中欠缺的多级子任务。例如撰写新邮件时的模态视图，包含了地址和消息文本、输入光标、取消和发送按钮。

模态视图的设计

标题通常定义了模态视图的类别，也可以加上和任务或者导向有关的文字描述。比如短信程序包括了导航栏、标题“新短信”、取消按钮和文本输入区域。

为了让用户意识到模态视图是过渡性的操作，可以指定以下切换方式：

• 竖向移动。模态视图从屏幕的底部滑进滑出。
• 翻转。当前界面切换到模态视图时从右到左翻转，视觉上看起来模态视图好像在当前界面的背面。

为了让用户易于发现和记住，最好使用风格统一的翻转方式。

译自《IPhone Human Interface Guidelines》