涉及到公司机密，就不放大图了。

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》