APP UI设计规范(可公开版)1.3

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，方便开发人员直接使用。