下载文档原格式
app界面设计尺寸规范大全原型设计尺寸1、 iPhone6的界面布局是：屏幕是4.7英寸的，设计稿的大小为375x667px☆ 状态栏(status bar)：就是电量条，其高度为：20px；☆ 导航栏(navigation)：就是顶部导航，有线其高度为：45px；没有线高度就是44px；☆ 主菜单栏(submenu，tab)：就是标签栏，底部导航，其高度为：46px；2、状态栏每一项尺寸☆ 信号格：5*5☆ wifi图片：11*9☆ 锁：11*11☆ 导航：8*8☆ 电量：22*9☆ 闪电：5*8☆ 状态栏中的文字：10px3、关于iPhone6的图标的尺寸：☆ 顶部导航栏的图标尺寸为16x16px左右，底部标签栏的图标尺寸为23 x 23px左右。
4、关于iPhone6的文字的尺寸：☆ 导航栏的文字大小最大值是14px，底部标签栏的图标下方的文字大小为10px。
☆ 内容区域的文字大小是：10px, 12px，14px，16px。
5、关于颜色① 文字黑色：#282828② 文字深灰色：#656565③ 文字浅灰色：#989898④ 边框浅灰色：#C3C3C3⑤ 背景淡灰色：#f2f2f2⑥ 按钮背景纯白色：#ffffff6、在iPhone6设计稿中，界面元素之间的常用距离，亲密距离：10px；疏远距离：15px。
A、疏远距离：比如，所有元素距离手机屏幕最左边的距离。
B、亲密距离：比如，左边图标与右边文字之间的距离。
【综上所述】iPhone6的原型规范如下：1、iPhone6手机模型尺寸：429x881px2、界面尺寸布局：满屏尺寸375x667px3、高度电量条高度20px，导航栏高度44px，标签栏高度46px；4、各区域图标大小导航栏图标16px，底部标签栏图标23px；5、各区域文字大小电量条-文字10px，导航栏-文字14px，标签栏-文字10px；6、常用的文字大小：16px，14px，12px，10px；7、常用的颜色：背景浅灰色：#f2f2f2, 文字深黑色：#323232，边框色深灰：#CCCCCC；8、常用可点击区域的高度（比如搜索区域）：28px；9、单行文字的背景框的高度：44px，双行则为：88px，三行则为：132px；10、常用间距：亲密距离：10px；疏远距离：15px，其它距离：5px，22px等；。
APP UI设计规范（可公开版）前言APP UI设计，有何规律？从抽象到具体，前后台并行，大概要经过几个阶段，每个阶段，都有一些明确的阶段输出doc，具体：（上图是在著名的《用户体验要素》原图上进行改编）KPA#1：第一痛点创意首先，要确定你的“第一痛点”（first-item）还没有人做过，最好的调查方式是到APP Store上搜索已有的APP程序。
如果你发现已经有某个APP包含类似的痛点，那你需要比它做的“更好”，“更好”可以体现在体验（exp）创新上，也可以体现在功能（func）革命上。
中国的法律环境缺乏对APP痛点相关智识产权的严格保护，但并不意味着可以随心所欲地clone或“山寨”别人的痛点创意。
为什么呢？任何APP都不是孤立存在的，受到APP 的资源、APP用户培育的节奏、社会大环境对APP生命周期的影响，简单clone成功可能性很小。
另一方面，第一痛点创意风险很大，所谓失之毫厘，谬以千里，推荐采用smc的《顾客需求确认表》做第一人称检验故事场景挖掘，最好能输出类似下面的脚本化体验故事/片段：1.1）体验片段#1。
比如定机票应用中，有头等舱和经济舱。
经济舱是一个普通的人，而头等舱是一个戴着帽子，系着领结，胸前别着手帕的这么一个人，很酷的老板角色，体现出了头等舱和经济舱之间的区别。
要做头等舱的人，一般都愿意自己看到自己这么一个形象。
1.2）体验片段#2。
比如微信4.0，刚打开的时候有一张图片，非常文艺非常在都市的感觉的一张图片，配文字“如你所见，微信，是一个生活方式”。
其实它在干嘛呢？它是在提示用户，新增了自己相册功能。
它虽然是给用户介绍新功能，但是它把整个情绪融在里面。
1.3）体验片段#3：比如安心停车，该APP具备查找附近有剩余车位的停车场位置，以及根据收费情况进行优先显示的基本功能，而当附近没有停车位时该APP应该按照“违章停车罚款概率”由低往高推荐免费停车地点，“违章停车罚款概率”来自违章停车处罚数据库中的地点数据，必须得到交警部门的支持。
UI设计规范两篇第1条用户界面设计流程/界面规范——用户界面设计的基本概念和流程1.1目的规范公司的用户界面设计流程，使用户界面设计人员能够参与产品设计的全过程，对产品可用性的全过程负责，规范用户界面设计流程，确保用户界面设计流程的可操作性。
1.2范围接口设计本文件用于接口设计。
本文档的读者是项目管理人员、售前服务人员、用户界面设计人员、界面审核人员和配置测试人员。
1.3概述用户界面设计包括交互设计、用户研究和界面设计。
基于这三个部分的用户界面设计流程从产品项目启动开始，用户界面设计人员应根据流程规范，通过参与需求阶段、分析和设计阶段、研究和验证阶段、方案改进阶段、用户验证和反馈阶段等方式，履行相应的工作职责。
用户界面设计者应该全面负责以用户体验为中心的产品用户界面设计，并根据客户(市场)需求不断提高产品可用性。
本规范明确规定了各环节用户界面设计的职责和要求，以保证各环节的工作质量。
1.4基本介绍A、软件产品仍属于需求阶段的工业产品类别。
它仍然离不开3W考虑(谁、在哪里、为什么.)，即用户需求分析、使用环境和使用模式。
因此，在设计软件产品之前，我们应该弄清楚谁使用了用户的年龄、性别、爱好、收入、教育水平等。
在哪里使用它(在办公室/家庭/车间/公共场所)。
如何使用(鼠标、键盘/遥控器/触摸屏)。
上面的任何元素都会相应地改变结果。
此外，我们还必须了解处于需求阶段的类似竞争产品。
类似的产品比我们更早出现，我们必须比他做得更好才能有价值。
因此，仅仅从界面美学的角度来说，并没有一个客观的评价标准来判断好坏。
我们只能说哪个更合适，哪个更适合我们的最终用户是最好的。
通过分析上述需求，我们进入了设计阶段。
也就是计划的形成阶段。
我们设计了几套不同风格的界面供选择。
C、在调查和验证阶段，必须保证在相同的设计和生产水平上有多套款式，并且看不到明显的差异，以获得用户客观、真实的反馈。
在测试阶段开始之前，我们应该清楚地分析和描述测试的具体细节。
软件UI设计规范标准一、设计原则1.1 用户导向UI设计应以用户为中心，关注用户需求，提供简洁、直观的操作界面，提升用户体验。
1.2 一致性保持界面元素的一致性，包括图标、按钮、颜色、字体等，有助于用户快速熟悉和上手。
1.3 美观性界面设计应美观大方，符合审美潮流，为用户带来愉悦的视觉体验。
1.4 可用性确保界面布局合理，操作便捷，提高软件的易用性。
二、布局规范2.1 分栏布局采用固定分栏布局，如一栏、两栏、三栏等，使内容分布更加清晰。
2.2 模块划分将功能模块进行合理划分，便于用户快速找到所需操作。
2.3 留白处理适当留白，避免界面过于拥挤，提高阅读体验。
2.4 对齐方式保持元素对齐，使界面看起来更加整洁。
三、色彩搭配3.1 色彩选择根据品牌调性选择主色调，搭配辅助色，形成和谐统一的视觉感受。
3.2 色彩对比保证文字与背景色的对比度，提高可读性。
3.3 色彩情感运用色彩传达情感，如蓝色代表稳重、红色代表热情等。
四、图标设计4.1 形状规范图标形状应简洁明了，易于识别。
4.2 尺寸规范保持图标尺寸一致，便于用户快速理解。
4.3 风格统一图标风格应与整体界面风格保持一致，形成统一的视觉语言。
五、字体规范5.1 字体选择选择易读性强的字体，如微软雅黑、Arial等。
5.2 字号规范根据内容重要性和阅读场景，设置合适的字号。
5.3 字体颜色确保字体颜色与背景色对比明显，提高可读性。
六、交互设计6.1 反馈机制为用户提供明确的操作反馈，如按钮、输入框等。
6.2 动效设计合理运用动效，提升用户体验，但不过度装饰。
6.3 逻辑流程设计简洁明了的操作流程，降低用户学习成本。
七、界面元素设计7.1 按钮设计按钮形状：采用圆形、方形或长方形，确保形状一致性；按钮大小：根据功能重要性和操作频率设置合适的大小；按钮间距：保持适当的间距，避免按钮过于紧凑或稀疏；按钮颜色：主按钮采用品牌色，次按钮采用辅助色，区分不同功能。
Android应用UI设计规范近年来，Android应用的用户体验设计越来越成为了应用开发者所注重的问题。
随着移动互联网的发展，用户的使用习惯和需求不断地发生改变，必须采用更加高效的设计方法，才能达到提升用户体验的效果。
在移动应用设计中，UI设计是至关重要的一环。
此篇文章会探讨一些在Android应用UI设计中常见的规范。
1. 颜色选择首先要明确的是，应用的颜色应该与应用的主题一致。
这个主题可能是品牌色或应用的主要功能与目标相关的色彩。
在颜色选择时要注意一下两点:1. 首先避免色彩的过渡，尽量保持清晰整洁，不同的主要色彩分别用不同的配色搭配。
2. 其次注意不同的颜色应用的场景，比如强化按钮，导航栏等功能件，选用颜色较为鲜明的色彩；而普通的文字，以及普通按钮等使用较为淡化的颜色，以做到区分明显效果。
2. 字体使用关于在UI设计中字体使用的规范,我们可以从以下方面来探讨。
2.1 字体大小在设定字体大小时，常用的标准是：普通的正文字体大小是16sp；而标题字体大小略大于正文字体大小，通常为18sp。
具体的字体大小可以根据实际情况进行适当调整，以达到更好的视觉效果。
2.2 字重和字体样式字重过轻的文字不利于提升用户的阅读体验，反之也是如此。
选用合适的字体样式，则可以让用户的阅读体验得到优化。
在选择字体样式时，要注意：1.避免使用过多的字体：字体家族过多会让应用看起来杂乱；2.尽量选择简明并且充满活力的字体；3.选用合适的字体，既有利于提升用户的阅读体验，也有利于提升应用的信息表现能力。
3. 图标设计图标设计对于Android应用的UI设计极为重要。
在图标设计时，要注意以下几点：1. 需要有良好的视觉效果：图标的设计应该良好的融入应用界面，并且视觉效果出色，让用户在不同的语境下进行视觉传达。
2. 需要符合人类认知模式，比如：购物车图标通常使用精美的形状，而音量却喜欢简单的表格，等等。
3. 图标要有意义，并且说明该图标所代表功能的用途，能够帮助用户快速推测出图标代表的意义与功能。
U I界面设计规范(总12页)--本页仅作为文档封面，使用时请直接删除即可----内页可以根据需求调整合适字体及大小--UI设计(流程/界面)规范一：UI设计基本概念与流程目的规范公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证UI设计流程的可操作性。
范围l 界面设计l 此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。
概述UI设计包括交互设计，用户研究，与界面设计三个部分。
基于这三部分的UI设计流程是从一个产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。
UI设计师应全面负责产品以用户体验为中心的UI设计，并根据客户（市场）要求不断提升产品可用性。
本规范明确规定了UI设计在各个环节的职责和要求，以保证每个环节的工作质量。
基本介绍A、需求阶段软件产品依然属于工业产品的范畴。
依然离不开3W的考虑（Who,where,why.）也就是使用者，使用环境，使用方式的需求分析。
所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄，性别，爱好，收入，教育程度等)。
什么地方用（在办公室/家庭/厂房车间/公共场所）。
如何用（鼠标键盘/遥控器/触摸屏）。
上面的任何一个元素改变结果都会有相应的改变。
除此之外在需求阶段同类竞争产品也是我们必须了解的。
同类产品比我们提前问世，我们要比他作的更好才有存在的价值。
那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。
我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。
B、分析设计阶段通过分析上面的需求，我们进入设计阶段。
也就是方案形成阶段。
我们设计出几套不同风格的界面用于被选。
C、调研验证阶段几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。
UI开发标准规范设计1概念和定义A.主要界面定义主要窗体包含了一个应用程序的大部分功能，大多时候它是一个单独的窗体，但在一个MDI(Multiple Document Interface)风格的应用程序中，父窗体和子窗体都被认为是主要窗体。
B.次要界面定义一个次要窗体通常用于为主要窗体提供补充信息和交互作用，界面比较简单。
C.用户界面又称人机界面，实现用户与计算机之间的通信，以控制计算机或进行用户和计算机之间得数据传送的系统部件。
D.GUI即图形用户界面，一种可视化得用户界面，它使用图形界面代替文本界面。
2界面设计原则2.1易用性按钮名称应该易懂，用词准确，摒弃模棱两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好。
理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。
易用性细则：1):完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。
2):完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。
3):按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。
4):界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。
5):界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。
6):同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。
7):分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab8):默认按钮要支持Enter及选操作，即按Enter后自动执行默认按钮对应操作。
9):可写控件检测到非法输入后应给出说明并能自动获得焦点。
10):Tab键的顺序与控件排列顺序要一直，目前流行总体从上到下，同时行间从左到右的方式。
11):复选框和选项框按选择几率的高底而先后排列。
12):复选框和选项框要有默认选项，并支持Tab选择。
13):选项数相同时多用选项框而不用下拉列表框。
网站及APP界面设计规范1. 引言在当今数字时代，网站和移动应用程序（APP）的界面设计对于用户体验至关重要。
一个优秀的界面设计可以提升用户的满意度，使其更轻松地使用产品或服务。
为了确保界面设计的一致性和效果，制定一套规范是必要的。
本文将介绍网站和APP界面设计的几个方面，包括布局、色彩、字体、图标和交互等。
2. 布局（1）容器宽度：在网页设计中，为了提供更好的可读性和视觉效果，常用的容器宽度是960像素或1200像素。
对于APP设计，可以根据屏幕尺寸自适应调整容器宽度。
（2）栅格系统：网页和APP的布局通常采用栅格系统，以保持一致性和美观性。
建议使用12栅格系统，便于布局元素的平衡和调整。
（3）内容呈现：在网页和APP中，内容应该按照逻辑顺序呈现，以确保用户能够轻松地获取所需信息。
重要的内容应置于页面或屏幕上部，次要内容可以放置在下部。
3. 色彩选择（1）品牌色彩：根据品牌形象和定位，选择一到三种主要颜色作为品牌色彩，并在整个网站和APP中保持一致使用。
（2）辅助色彩：辅助色彩用于突出重要信息，例如按钮、标签等。
建议选择与品牌色彩相搭配的颜色，并在整体设计中使用相对较少，以免过于花哨。
（3）背景色彩：背景色彩应该选择以增加整体网站和APP的可读性。
一般情况下，使用浅色背景和深色文字是较为安全的选择。
4. 字体选择（1）品牌字体：根据品牌形象和定位，选择一种或两种字体作为品牌字体，并在整个网站和APP中保持一致使用。
品牌字体应具备良好的可读性。
（2）内容字体：内容字体应具备良好的可读性，建议选择无衬线字体，例如Arial、Helvetica或Roboto等。
字号大小应根据不同设备的屏幕尺寸进行适当调整。
5. 图标设计（1）图标风格：图标设计应简洁清晰，符合整体界面风格。
常见的图标风格包括扁平化风格、线条风格和立体风格等。
根据品牌形象和界面需要，选择适合的图标风格。
（2）图标一致性：相似功能的图标应保持一致，以避免用户的混淆和困惑。
软件UI设计规范目录UI规范 (1)1用户界面设计理念 (5)1.1美观 (5)1.2易理解 (8)1.3鼓励 (8)1.4一致 (8)1.5交互 (11)1.6效率 (14)1.7熟悉 (15)1.8灵活 (16)1.9容错 (17)1.10可预测 (18)1.11简洁 (18)1.12透明 (18)1.13权衡 (18)2通用设计原则 (19)2.1字体使用原则 (19)2.1.1中文字体 (19)2.1.2英文字体 (19)2.2文字对齐原则 (19)2.3界面配色原则 (21)2.4按钮设计原则 (22)2.5文本校验原则 (24)2.6兼容性和个性化原则 (27)2.7键盘响应 (28)2.7.1TAB键 (28)2.7.2Enter键 (29)2.7.3导航键（上下左右） (29)2.7.4DEL键 (29)2.8鼠标 (29)3各模块设计原则 (30)3.1启动/登录界面 (30)3.2主界面 (31)3.3导航 (31)3.4窗体布局 (33)3.5提示信息 (34)3.6文本框 (36)3.7弹出框/弹出窗口 (38)3.8下拉框/单选框/复选框 (39)3.9列表页面 (41)3.10报表规范 (43)3.11附件 (43)3.12各类控件的标准大小 (44)建立UI规范的目的将阳春白雪式的用户体验细化到具体的可执行的要求，建立各行业线关于界面元素设计及界面布局的通用规则及要求，提升公用组件复用度及用户体验，从而增加浪潮软件的产品竞争力。
1用户界面设计理念1.1美观●使用可视元素图1.1.1●对元素进行分组图1.1.2对齐图1.1.3图1.1.4（反例）1.2易理解●一个系统应该很容易被用户学会和理解，用户应该知道：1、看什么2、做什么3、何时做4、在哪做5、为何做6、如何做●信息的放置顺序应该经过深思熟虑，最小化用户记忆和寻找的成本●必要的时候，一步步引导用户进行操作图1.2.11.3鼓励●一旦用户完成了某个关键操作，要及时告知用户，提升用户的信心图1.3.11.4一致●一个系统从头到尾的外观，行为，操作应该是一致的图1.4.1（反例）图1.4.2（反例）●同样的行为，应该总是产生同样的结果图1.4.3（反例）图1.4.4（反例）●相同功能的按钮视觉上保持一致，不同功能的按钮视觉上有所区别图1.4.5（反例）1.5交互用户在交互过程中占有绝对主动权1、动作必须是用户请求的结果2、耗时较长的动作必须可以被打断图1.5.1从用户的需求出发呈现上下文图1.5.2图1.5.3（反例）●系统能够对用户的请求快速地作出响应●对用户的所有动作提供可视化的反馈信息●达成目标的方式应该是灵活的，并和用户的技能，习惯，经验，偏好相适应图1.5.4图1.5.5●提供反悔或取消的机会（undo cancel）图1.5.61.6效率●最小化用户眼和手的移动幅度图1.6.1●简化用户操作的步骤图1.6.2（反例）图1.6.3●尽可能预料用户的想法和需求图1.6.41.7熟悉●尽可能使用用户熟悉的概念和语言●尽可能使界面自然，模仿用户的行为模式●完美地兼容老产品1.8灵活●系统必须对不同用户的需求很敏锐，并且提供不同层次类型的功能，基于：1、用户的知识和技能2、用户经验3、用户的个人偏好4、用户的习惯5、当时的条件图1.8.11.9容错●对于常见的人为失误有妥善的应对措施图1.9.1●当错误发生时，提供建设性的提示图1.9.2●无论发生什么错误，尽最大努力确保用户不丢失工作成果图1.9.31.10可预测●用户能够预测到每个任务的正常进度图1.10.1●所有用户希望达成的目标都应该完成1.11简洁●尽可能简洁的用户界面：突出重要的功能，隐藏复杂的，不常用的功能图1.11.11.12透明●让用户关注他的任务而不是实现机制●计算机内部的工作内容应该是不可见1.13权衡●最后的设计应该是基于一系列设计原则相互权衡的结果●人们的需求总是凌驾于技术之上2通用设计原则2.1字体使用原则2.1.1中文字体●同级菜单，字体大小格式统一。
APP UI设计规范（可公开版）前言APP UI设计，有何规律？从抽象到具体，前后台并行，大概要经过几个阶段，每个阶段，都有一些明确的阶段输出doc，具体：（上图是在著名的《用户体验要素》原图上进行改编）KPA#1：第一痛点创意首先，要确定你的“第一痛点”（first-item）还没有人做过，最好的调查方式是到APP Store上搜索已有的APP程序。
如果你发现已经有某个APP包含类似的痛点，那你需要比它做的“更好”，“更好”可以体现在体验（exp）创新上，也可以体现在功能（func）革命上。
中国的法律环境缺乏对APP痛点相关智识产权的严格保护，但并不意味着可以随心所欲地clone或“山寨”别人的痛点创意。
为什么呢？任何APP都不是孤立存在的，受到APP 的资源、APP用户培育的节奏、社会大环境对APP生命周期的影响，简单clone成功可能性很小。
另一方面，第一痛点创意风险很大，所谓失之毫厘，谬以千里，推荐采用smc的《顾客需求确认表》做第一人称检验故事场景挖掘，最好能输出类似下面的脚本化体验故事/片段：1.1）体验片段#1。
比如定机票应用中，有头等舱和经济舱。
经济舱是一个普通的人，而头等舱是一个戴着帽子，系着领结，胸前别着手帕的这么一个人，很酷的老板角色，体现出了头等舱和经济舱之间的区别。
要做头等舱的人，一般都愿意自己看到自己这么一个形象。
1.2）体验片段#2。
比如微信4.0，刚打开的时候有一张图片，非常文艺非常在都市的感觉的一张图片，配文字“如你所见，微信，是一个生活方式”。
其实它在干嘛呢？它是在提示用户，新增了自己相册功能。
它虽然是给用户介绍新功能，但是它把整个情绪融在里面。
1.3）体验片段#3：比如安心停车，该APP具备查找附近有剩余车位的停车场位置，以及根据收费情况进行优先显示的基本功能，而当附近没有停车位时该APP应该按照“违章停车罚款概率”由低往高推荐免费停车地点，“违章停车罚款概率”来自违章停车处罚数据库中的地点数据，必须得到交警部门的支持。
KPA#2：‘交互界面’exp/func思维导图‘交互界面’（简称exp/func）是比草图还简单的交互界面，往往用一句话描述,包含必要的交互信息，比如点、选、录入等输入和文字、图片、动画、特效等输出。
从“第一痛点创意”相关的1~3个exp/func出发，利用“思维导图”（简称mind-map）的发散思维模式，延伸、细化、穷举、关联一切‘交互界面’，就有可能将“第一痛点创意”真正落地，成为货真价实的“第一痛点”。
‘思维导图’一般的呈现方式是“发散图形”，一般如下：也可以从一个已发布APP—以“印象笔记”APP为例—进行反解，如下：在具体实践中，笔者更习惯于模仿“IO表”（下面会提到）的分层推进的方法，用excel 做‘交互界面’的树型分解（如下图），一直分解到发现隐藏在很深层次的1个或多个符合“视觉鲜明、导航随心、呈现精美、操作简易”标准的“巨痛交互界面”（如下图黄底色的部分），然后，选择1个最重要的“巨痛交互界面”作为APP首页的“UI原点”，开始重新“剪裁”所有已经被分解过的‘交互界面’树，这里的“剪裁”其实是一种“逆向交互思维过程”，从本来最深的层次出发，首先横向关联其他“巨痛交互界面”，尽量完整地设计好“UI原点”，然后，将所有剩下的‘交互界面’一体化考虑，可以打乱之前的层级顺序，也可以不打乱。
KPA#3：‘IO表’串‘IO表’是对‘交互界面’的穷举。
‘IO表’将所有可能的输入和输出的类型、组合、顺序用表格方式呈现出来，在团队合作设计时，通过对每个IO表内容的反复PK以及所有IO表串逐一模拟，可以避免进入coding阶段后的大部分返工纠纷和版本争论，特别适合UI和coding独立性很高的开发组织模式。
一般情况下，上一层呈现和下一个呈现只有一个触发点（点、选、输入等），可以并列排列，举例如下（下表的“呈现”，就是上面的“交互界面”的最终程序实现）：当上一层呈现和下一个呈现不只有一个触发点时，可以用思维导图的方式呈现，如下：KPA#4：界面草图-FWE走到这一步，很多人会认为对APP的UI已经想的很清楚，可以直接开始图形界面甚至coding了，错了！实际上，前面的KPAs，仅仅UI的导入阶段。
UI设计师接下来要做的，是界面草图设计（如果时间不允许，至少要把从第一痛点出发的最长IO表串对应的界面草图做完），重点在屏幕布局上，有一些原则如下：4.1）手机屏幕是从上往下布局的，重要的信息会放在上方。
但是在操作上，大部分人都是单手拿手机，常用的操作，要放在界面的下方。
4.2）最小的触摸单位，一般是44个像素。
如果再小，你的拇指难以触碰，或者容易引发误操作。
同时，也不要让界面太拥挤。
4.3）最主要的操作是在最下面，常用的四个钮，上面的内容可以来回滑动去选择。
微信的操作也是在下面，重要的信息——我们的聊天内容放在上方。
在这一步，另外一个关键问题是消除界面切换“预期”的不平滑。
界面切换“预期”，有一个专门名词叫Functionality-Walkthrough-Emulation（FWE）--功能穿越模拟，只有一些国际级团队做的明星APP才能把握FEW，对一般设计师来说，建立这种意识还是必要的，具体如下：4.4) 勇敢隐藏或者干掉不太重要，但是必要的东西，可以把它隐藏起来；无关紧要的东西，能干掉的就干掉，不要把什么东西都塞给用户。
比如邮件应用中，已发邮件、草稿、已删除这些功能，对一般用户来说，在最常用的场景里面，这些是不重要的，但是不可能把它去掉，就可以隐藏在下面。
而签名、外出自动回复等，这些功能是更加不太使用的，可以把它藏得更深。
再比如Path，它把五个常用的按钮，集成到“+”里。
点击加号以后，有拍照，音乐等功能。
而界面上，打开这个应用，最直观的就是最主要的信息，没有其他的干扰。
比如之前有多少人看过我的图片，它把这个信息直接集成在图片右上角，没有占据太多地方，点击之后，可以发表情、评论、直接删除等，做到了隐藏，是个非常干净、漂亮的页面。
4.5）果断分区。
以‘酒店管家’APP为例，酒店图片，酒店提供的服务设施，价格，这个是最主要的内容，放在首要位置；点评放在了其次；然后是交通状况，周边的设施等，有一个明确的分区。
用户一旦知道了这种分区方式，他下次再点开这个应用，想看哪个，他的眼睛会直接落在那儿。
4.6）帮用户决策。
用户其实希望看到的是开发者直接给他们一个东西，非常简单，不用去记，不用去选择。
那么怎样帮用户做决策呢？以‘酒店管家’APP为例，当用户需要订酒店时，很多应用都是需要用户输入条件，比如城市、日期、价格区间、房型等，之后得到酒店列表。
快捷酒店管家中，用户打开应用，看到就是酒店页面，没有任何选择。
这并不是简单粗暴，而是对用户研究之后提供的功能。
‘快捷酒店管家’APP的核心用户，是本地化的，要在本地找一个快捷酒店，住一晚上。
比如说我在通州住，公司在石景山，这两个地方有60公里，晚上加班加到12点，我是打车回通州，还是说直接就在当地找一个快捷酒店，住一晚上，第二天洗个澡再慢慢悠悠上班。
我们要做的，先给用户定位，然后提供附近的快捷酒店。
KPA#5：低保真原型现在，开始APP的低保真原型设计。
重点是不要陷入过多的细节，低保真只是把你纸面上的界面草图数字化，便于在电脑上持续的改进。
所以，尽量使用黑白，粗糙的线条和图形来制作低保真。
注意：一个成熟的UI设计师，需要积累自己的低保真原型数据库，把自己接触到的，未来有可能重复使用的优秀设计分门别类地存档，比如下图：KPA#6：高保真原型低保真原型完成后，开始设计注重细节和精度的高保真原型，使用PhotoShop，设计师可以选用自己熟悉的其他工具。
一般，设计师会为Android设置尺寸为800*480的画布，然后根据低保真原型进行细节设计。
KPA#7：视觉设计UI视觉效果的设计，理念是“爽快感和新奇感”，下面是一些原则：7.1）视觉反馈。
用户在操作应用的时候，要给他提供时时的视觉上的反馈。
在‘快捷酒店管家’APP中，选择了某个酒店某个房间后，可能会去选择日期。
如果是订之后的日期，就有一个拖动的操作。
从开始日期往后面拖，拖动的同时，会出现一个比较大的日期显示。
为什么呢？这并不是一个标准控件。
之所以这么做，是因为这里的动作是拖动，不是点，拖的时候用户并不知道现在拖的是哪，所以需要一个提示。
这个是视觉反馈，这种操作在一般的日历里头是看不到的。
拖动本身是一种更好的交互方式，而明确的设置也让用户感到更舒服，很有意思。
7.2）隐喻。
比如iOS6里面的Passbook，它的界面上就明显的用了隐喻。
它本身算是一张数字化的贵宾卡或者说消费卡，界面做的也非常像一个消费券，这个界面非常精美，光泽、整个颜色的搭配等等都非常像真实的，而且就用了条形码。
大家对苹果的界面都感觉比Windows要好，就是因为苹果做的图标，界面都非常精美非常逼真，这也是苹果能够快速超越Windows的一个非常重要的地方。
7.3）操作方式革命。
比方说，我现在在这个位置，想知道某一些位置有什么好吃的，一种方式是定位了以后，直接就把附近所有东西显示出来。
还有一种方式，我的手在上面滑动，它会记录下轨迹，我只滑动这么一个区域，那就只会现显示这个区域内的商户。
这种方式特别直观，而且用户想怎么样就怎么样，想画一个五角星就画一个五角星，想画一条线也可以，它只给你想要的地方的那些内容，这就是一种创新。
KPA#8：设计交付物8.1)ICON现在可以开始考虑icon的设计，这将决定APP在应用商店上的辨识度。
UI设计师可以从简单的轮廓设计开始设计，先把核心创意表现出来。
除非有必要，Icon采用尽量少的文字，尽量使用跟你的APP图形界面一致的材质和渐变。
你如果想给用户呈现高质量的UI设计，由于发布在不同的应用商店，比如91助手、机锋网、中国电信等，ICON 在发布时间，除了考虑APP上的ICON外，还需要考虑不同应用商店对ICON尺寸发布的要求。
注意：ICON本身也是体现UI设计师的设计风格的主要着力点。
8.2）‘最简交互界面’思维导图、‘IO表’串如果是UI设计外独立包开发模式，还需要把清晰的UI设计指南交付给开发人员，一般UI设计师需要界面和描述集中到一张大图，并尽可能的把所有可遇见的情况都给开发人员描述清楚。
8.3）低保真原型、高保真原型、切片图UI设计师低保真原型，所有的图形界面设计图（一般是PSD）和图标打包在一起，做上清楚的标注，发送给开发人员；还需要对PSD进行切图，存成PNG，方便开发人员直接使用。
