如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

今天我们来聊聊

从UI角度体验与分析美骑APP

---

体验环境

体验人：某UI设计师

体验时间：2016.11.1-12.15 (间歇)

体验产品：美骑APP

产品版本：v3.7.0.1

体验设备：iPhone6 Plus

系统版本：iOS10.1.1（14B100）

网络环境：无线wifi高速网络和4G

*本文属于基础体验，高手请忽略。

前言

(↑图-1来源于@Yjjj)

1、这是一个非大型团队合作的正确步骤，显然我们通常只能做到1、4、5，这样会导致产品缺乏客观性。

2、一个好的APP应该注意以下几点：

用户反馈（没有用户反馈的APP纯粹是自编自导自演自己观看）、刚需、人性化设计、取舍、产品识别度 、设计为使用者服务、以用户的角度去设计、层次关系要明确、操作时无需思考、简单自然、打算解决什么问题、沟通 协调、给用户制造惊喜、设计趋势、好用、易用、奠定盈利基础、痛点、体验、高频、清晰的商业模式……

目录

站在交互设计师(IXD)、视觉设计师(GUI)、用户体验师(UED/UXD)和动效设计师、用户(User) 的角度分析问题。

一、在Android与iOS系统上，美骑+交互和界面的设计区别

二、交互设计(IXD) Interaction design,区别于工业设计,加了个”X”。

三、界面(GUI)

四、动效的重要性

五、用户体验(UED/UXD) 我认为更多强调研究人与机器的关系的艺术。

完整的页面设计应该包含“内容设计”与“人机交互”两个部分。

一、在Android与iOS系统上，美骑+交互和界面的设计区别

在设计开始之前

●  了解另外一种系统 我3年前用Android，之后一直使用 iPhone，所以我现在对 iOS 上的 UI 样式有更多的了解。在进行跨平台设计的时候，我首先去做的一件事是了解另外一个系统（Android）

●  选择一个优先的平台 由于我们一次要对两个平台进行设计，在时间有限的情况下，必须有一个平台需要优先设计。如何选择优先的平台并不在于个人喜好，而是在于这款 app 的市场定位如何。产品的市场中有更多人使用 Android 设备吗？目标受众是谁等等。美骑+的UI选了iOS系统做优先设计。

●  了解设计规范 阅读 iOS 和 Android 的设计规范。

什么时候应当做出区别以及什么时候两个平台应当保持一致 （遵循这些步骤，美骑+就能同时在 iOS 和 Android 保持原生完美！）

●  衍生问题：什么是原生？（稍后会解答）

1、总体的样式

从 iOS7 以后，苹果就一直采用扁平化的设计模式，去除了所有不必要的纹理和阴影等效果。 Google 的新 MD 设计规范有了一些更加细节的规定，通过一种叫“纸片”的方法来创造更多的层级关系。

2、实体按钮 / 虚拟控制栏

Android 有一个返回按钮，点击它可以返回上一个屏幕。 Android还有一个虚拟的控制栏，如果再把菜单栏放下面的话，就会有双导航了，所以才做成抽屉导航栏。 iPhone 只能在屏幕的左上角放置一个返回键进行返回。 并且两个系统的返回按钮样式是不一样的。

3、导航

或许iOS 和 Android 平台之间最大的区别就在于他们的导航样式了。Android 上最主要的导航方式是抽屉菜单。而且在整个 App 中，这种体验是一贯的。Apple 的导航样式更倾向于 tab bar，它位于屏幕的底部，并且以一种很简单的方式实现上部内容的切换。

4、通用元素

不同平台上的导航栏有一定的差别。在 Android 上文本是左对齐的，然而 iOS 上是居中对齐的。在 iOS 上，很多企业都用它们的 logo 来替换首页标题栏中的文字，但是在 Android 设备上这不是一个好的主意。

5、排版

Android 的 MD 设计中字体大小的变化会更加多样。 在 iOS 上，字体没那么多大小差异，但是在字体重量上有更多的变化。 两个平台都使用比较细的字体来现实正文内容，然而，在右边的例子中，Android 使用了轻（Light）和常规（Regular）字体，而 iOS 使用了粗体（Bold）和常规字体。 这个例子向你展示了排版方面的一些细微的不同可以导致印象上的巨大差异——你能很快分辨你是在用 Android 手机还是在用 iPhone。

6、按钮样式

Android的浮动动作按钮（Floating action buttons）：最传统的有边框的按钮，阴影厚重明显，将它们从页面上分离出来，它会创建一层视觉深度。这种按钮的填充颜色一般使用 App 的主色。 iOS App 在外观上是完全扁平化的，没有层级深度和阴影。主要按钮有填充颜色，次级按钮反转颜色。

7、动作表单

(1) iOS 和 Android 原生设计的动作表单都是出现在屏幕的底部，然后在主要内容上罩上一层阴影。然而，它们的不同在于阴影深度和其他细节。 Android 在动作表单上加了一层厚重的阴影，表明它是脱离于原先的内容的。 iOS 的动作表单没有阴影，仅仅是在原先的背景上防止了一个有一定透明度的灰色图案。 下拉按钮只存在于Android 上，它允许用户快速选择功能。 而美骑+在Android上的部分动作表单已经灵活地变为居中显示。

(2) 像特定的一些数据的输入，比如日期和时间，Android 的原生对话框像警告弹出框。iOS会在屏幕的底部弹出一个转轮让用户进行选择。 美骑+文章的翻页功能很灵活地运用了这个动作。

(3) 话题页面“更多”与“分享”动作的区别。 Android把所有子功能并集到“更多”里，增加了一层交互关系。 iOS则把分享和“更多”分开，减少了一层交互关系。

淘宝APP 会根据上下滑动而变化的按钮（在花哨的背景下会叠加一个半透明圆形）

8、分类控制

在不同的平台上，该控件的交互方式是相同的， 但是在视觉上有着显著差异。 在 iOS 上，分类控制控件的外观像按钮。 而在 Android 上，通过间距来展现它们的分离关系，同时用下划线来标明目前所处的位置。

9、弹出框

美骑+正确地处理了弹出框控件，他们也许会涉及到一些很重要的操作，例如注册，确认条款，甚至是确认支付。我们需要让他们看起来是原生的，以便产生一种安全感和信任感。

10、icon

不同的平台上对 icon 都有特别的样式要求。 iOS 平台更偏好线形 icon，Android 上的 icon 的描边则更加地粗壮，或者干脆就用填充的 icon。

【建议】iOS底部导航栏改成实心

1. 线条的图标会导致用户花费更多的时间来分析图标信息（图1）

2. 细条图标风格偏向于女性化、文艺小清新、可爱类型。（图1） 而美骑+图文量大，倘若icon是细线，辨识度降低。

3. 我们可以做成normal时空心， Active时实心。（图3.图4.图5）

11、通用 UI 控制

复选框，单选框和输入框，以及开关都是应该有着原生感觉。这样能够给用户带来熟悉感,自然知道如何使用美骑+，并且在涉及到敏感信息的时候能够更信任美骑+。

（在右面的例子中，我们可以看到两个平台上的差异其实是很小的，小到你在设计的时候可以忽略这些差异，用其中一种形式设计，但是不要忽略细节上的差异所带来的原生的感觉。）

12、原生APP设计的优点

按照原生的不容易出现bug

增加熟悉感

不言而喻

无需思考就能操作

增加信任度

规范

实用性强 ……

13、Android的收藏流程比iOS复杂

在安卓上收藏这件商品需要2步。 实际上可以简化为1步。（iOS） 且安卓还是旧开关按钮形式，没有动效反馈。

14、Android的点赞流程比iOS复杂

1、在安卓上点赞这条评论需要2步。 实际上可以简化为1步。(iOS) 安卓和iOS均没有动效反馈。

（就像我问小明：“我想再给你一百块！”或者“我想拿回刚给你的一百块。” 而小明却像木头一样毫无反应，害得我尴尬癌都要犯了。）

2、点击用户头像是进入评论区，而不是他的资料。

15、Android的菜单层级关系流程比iOS复杂

Android的菜单对于初级使用者来说层级不明显。 很难迅速分清哪个是父级哪个是子级。 这就好比，IOS一张图就能说清楚的事情， Android要用三张图才能“摸索”清楚， 增添了用户学习与理解的时间成本。

解决办法1：

去除用户不再需要的元素 随着用户的操作，有的内容已经是用户不再关注的。这时候可以将他们隐藏起来，实现半沉浸式体验。

解决办法2：

把二级和三级菜单合并到一起，内容一目了然。

简化层级关系，让用户选择自己关心的话题。 可自行排序菜单。

举个例子: 原来超市里有7排货架，每排货架只有一层商品，你要绕七圈才能看完。 （APP没有爱好预设，分类繁琐） 改革后，大家都网购，所有商品根据你的爱好预设全部展示出来。并且可以收藏自己喜欢的商品（APP导航自定义排序），以后方便查看和购买。爱好还可以添加和删除。 （这种“普遍的导航设计”有一个优点，就是方便，实用性高，用户不用思考就知道怎么操作。交互可以向主流靠拢，但树立产品识别度可以在风格、人性化或动效上体现。）

16、Android的退出流程比iOS复杂

先看看美骑+退出账号的交互设计。

大多数APP的”退出登录”功能都在设置里，会形成用户使用习惯。 而在iOS上的美骑+则没有这个问题。 之所以造成这样的“变异”，是因为iOS和Android的菜单栏功能不一样。 在Android上，社区被拆分成“话题”和“论坛”，删减了“我的”。 在安卓上“我的”功能的重要性已经被忽略了。 这里就需要安卓用户使用“论坛”“话题”和“我的”数据分析，来辩证这样安排是否合理。

17、私信页

Android私信页有时间显示，iOS没有。 并且Android的输入框和iOS的输入框也不一样。 但是，在安卓上很多APP都没有按安卓规范去设计。

18、方便用户的操作 / 仿iOS延伸

美骑+在Android上点击状态栏返回到顶部，方便快捷。 但是iOS和Android底部Tab Bar是隐藏的，要向上拉↑才会显示评论区和“分享” 优点是增强沉浸式阅读体验，缺点是，随着我上下滑动，tab bar不断隐藏/显示，让人烦躁。

京东APP更完善此功能，底部导航栏一直显示，有利于提高点赞量与诱导评论。 单击底部的“评论”icon到达评论区。 不动比动（看得见比看不见）更具可控性。 另外“分享”按钮也是显而易见。

美骑+iOS顶部导航栏是“字体大小”按钮。我很少用到这个功能。为何不换成“分享”按钮？

美骑+安卓版

 

 

京东安卓版

 

结论：原生设计不是唯一标准

虽然原生的设计有很多优点。但是，Android和iOS的原生规范并不是绝对唯一的标准，还是需要结合实际界面内容来判断设计。

为什么大多数UI都不遵循设计规范？

1. 在 4.0 之前，Android 标准风格的 UI 非常糟糕，大家只能直接从 iOS 上学习借鉴。

2. 进入 Android 4.X 时代后，大家需要考虑继承性问题。很多原先就采用 iOS UI 的应用干脆就直接继续采用 iOS UI 了。

3. 想要树立品牌，采用与标准风格不同的 UI 是很抢眼的。

4. 认为自己的 UI 风格能够 “ 超越规范 ”。诸如 Facebook 、Flipboard和 Pinterest 的确使用了一种略微偏离视觉规范的设计风格。

为什么QQ和微信的UI设计都不遵循Material Design（安卓）规范？

首先我们要承认微信安卓版并没有自己的一套UI。腾讯会优先在iOS上先做新功能，做的过程中会有很多的UI上的反复修改，很耗时。 而android版本只需要移植，使得跟进速度非常快。

“微信的头几个android版本，是单独做了一套符合android规范的UI的。但是几个版本下来，很难让我们自己觉得满意。android的UI规范， 确实稍嫌混乱，各种app也都是大胆自己发挥。我们自认为以我们现有的UI人手，专门针对android做一套令我们自己满意的UI，而且还要跟上iOS 版本的快速迭代节奏，很困难，所以才决定直接移植iOS的微信UI。”－－ allenzhang（现任腾讯副总裁，腾讯广州研发部总经理，微信、QQ邮箱产品经理）

二、补充2个系统相同的交互设计

1.目标驱动设计

在交互设计里，用户本身是个制约因素。将用户研究增加到这个方程式中，设定清晰的用户目标，以使形式和功能完美结合。

2.“神奇的界面”

理想状态下界面UI设计：它们不会花很长时间来加载或回应；它们不会让用户去思考；它们不会给用户增加烦恼。就像Jason Fried，37 Signal的CEO说的：“少就是少。”只给用户他们需要的，不要设计过多无谓的东西，也不要在交互设计里做更多无聊的步骤。

3.实用性

实用性是指人们用一个工具来完成一个特定目标的难易程度。

4.启示性

剪刀的设计让不熟悉剪刀的人马上就明白哪里是手持的，哪里是剪切的。最佳交互设计是不言自明的。换句话说，链接就应该像是链接，按钮就应该像是按钮，搜索框就应该……你懂的。

5.可学习性

大量用来组织用户界面UI设计的都是熟悉的组件。如果用户习惯按按钮提交表格，在这种情况下，他们就会去寻找按钮。优秀的交互设计师不会重新发明一些东西。相反，他们会利用已有的设计增加熟悉感。网上很多交互设计都记录在Yahoo!的设计库中。

总而言之，如果手上的设计问题确实需要特殊处理，交互设计师应该花大力气让这个界面UI设计易于掌握，或者易于学习。 （这一点需要对当下的设计惯例、启示性及网络整体的实用性都非常熟悉。）

话题点赞的流程复杂 当我点击用户头像的时候，我是希望进入他的资料页面， 结果出来了点赞和评论功能按钮。

A.点赞过后不会自动消失。 要手动点空白处。

B.可以重复点赞（刷赞）

C.不可取消赞

D.没有动效，略显呆滞

tumblr 不喜欢我 心都碎了呢~

 

第一次赞，显示+1 ；第二次赞，显示已赞过

 

 

原生与H5的交互

比如说：从原生页面的一个按钮，点击之后跳转到了一个H5的页面A，A页面中又有一个按钮，点击之后，又加载了一个新的H5页面B，从B点击一个按钮，又加载一个新的H5页面C，如果此时我们点击左上角的返回按钮，会直接返回到我们的原生页面或者只返回上一级页面；是不是给用户的体验很不好？

此时我们想要重新定制返回按钮，先判断当前的H5页面是否可以返回。我觉得看图更容易说清楚。

三、界面

配色

1. 配色小清新(饱和度低)，不符合用户群体和公司品牌调性。 （骑行用户中97.26%为男性,配色应当年轻化并且充满男性荷尔蒙）

2. 对比下图的APP，风格强烈，辨识度高。 (但这种适合功能和内容较简洁的APP，而资讯类APP都大同小异)

注册页

配色风格不一致 违反一致性原则

登陆页

简单粗暴的“跳过”?! 家具定制、服装定制、电商定制……在这个人人都要【定制】的时代，我们也需要在设计上体现人性化。

注册页门槛

1.美骑+启动后直接显示首页，要点击“我的”才能注册或登录。

2.对比花椒直播和网易云音乐，启动APP后第一个页面是提示用户登录，这种方式可以增加新用户。

品牌形象的植入

占位符和缺省页可以统一风格.加入骑行元素.强化美骑品牌效果

让用户一看到骑行元素，第一时间想起美骑。

保持一致性，包括内部一致性（在不同地方设计是相同的）和外部一致性（在同一个企业的其他产品中，反映类似的设计）。 配色方案和排版，这是品牌目标达成的常用途径。

在这一层，内容、功能和美学汇集到一起来，满足其他四个层面的目标。 我们没有达到内部和外部的一致性，即模板化、统一的品牌识别形象、跨媒体的一致性， 没有形成自己的特色和给用户一个积极明确的企业印象。 建议运用兔子的形象。（骑友还是挺喜欢美骑兔的）

按钮

顶部按钮会不会太挤？

考虑一下粗手指的用户 （例如经常打篮球的人手指普通肥大） 稍加创意，“我的”按钮也能妙趣横生。

话题页 – 时间

1.页面信息缺日期? 到底需不需要日期? 对于有时间需求的用户来说会显得产品不够体贴，信息传达不够。

2. 或者可以参照iOS原生的信息界面设计，向左推会显示时间。平常则隐藏。

展示页

完整的页面设计应该包含内容设计与人机交互两个部分

展示页的设计目的是提高信息被用户自然吸收的概率，需要个用户一个信号，暗示他接下来可以做哪些事。 “你看这个姑娘这么美，要不要加个关注啊？或者看看她的动态？” “你看这里好像在搞活动啊，要不要戳进去看看？” “你看这些自行车在搞特价啊，要不要看看价钱？”

需要展示：

1.用户喜欢的

2.主要任务的

3.可以赚钱的

这部分是吸引用户的重点，需要优秀的内容+恰当的设计。

展示页 – 用户喜欢的

图1 在推荐的文章后加“屏蔽”功能，并得知用户屏蔽的理由，可以帮助我们改进内容推送的方式。

图2 用户选择自己喜欢的话题。

图3 用户自行排序、添加、删减内容。

图4 用户主动提出反馈。（并且要把反馈的功能极简化。APP默认打开反馈功能，用户不经意间摇动手机，就会弹出反馈页面，相当于我们主动引导用户去反馈。用户可自行关闭此功能。） 这样可以更精准地筛选出用户喜欢的内容，从而提高留存率。

为什么用户要用美骑APP?

访问张先生为什么偏好美骑网PC端：看图主要就是浏览资讯，移动端图不够大。…

所以我们就要通过其他方式来弥补

1. 拍照搜车

2. 建立游戏机制（拍照拿红包、做任务拿奖励、解锁更多功能、签到有积分奖励）

3. 拍照话题 （摔车大合集）

4. 关联通讯录，看哪个朋友也在玩

5. 模拟朋友圈，增强社交功能（让用户把骑行社交建立在美骑APP上）

列表页

重点是搞清楚用户找寻的目的

找寻的方法：

1.排序

①按时间排序(更新/时间排序)

②高关注度信息排序(收藏量/点赞量)

③决策依据信息排序(价格/距离)

2.分类与标签/筛选

3.搜索

√①关键字搜索

②辅助搜索(搜索的历史记录/近义词,比如你可能想找…)

√③多维度搜索(款、热度高、价格)

√④告诉用户有终点（提示没有搜索内容）

√表示美骑+ 已具备的功能

列表页 – 搜索

直接点击搜索 / 默认按提示搜索 (智能推荐)

图1：美骑+搜索框是一个耿直boy 搜索就是搜索，哪有那么多话。

图2：KEEP的搜索框会提醒你可以搜索什么 (辅助搜索)。

图3：淘宝搜索框还能一键搜索，交互极简化。 （虽然你可能不想搜榨汁机，但偶尔还是会被带偏的，起码商品点击率上去了）。

正文页

标题高度概括整篇文章的内容（前提），突出标题与图片并弱化其他元素，这是非常的信息传达方式。 但是……

布局排版

正文页

↑ 美骑+ 文章标题

↑ 对比知乎APP文章标题

 

图片页的导航栏

在这种大图浏览的模式下， 导航栏自动隐藏，界面更简洁。 节约空间展示内容。 参照淘宝导航栏与知乎导航栏。

↑ 美骑+图片导航栏

左-知乎APP 导航栏，右-淘宝APP 导航栏

 

欢迎页

1.功能/服务介绍（最常见，展示自己的优点，产品比较被动）

2.气氛营造（引导用户情绪转换，产品比较主动）

3.操作手册（介绍如何操作） 在打开后通过播放动画的方式来介绍产品或传递一种理念，这种方式适用于运动类应用，给人传达青春活力、积极乐观的生活态度。优点：直观，动感，生活化。 缺点：应用较大，视频播放会出现卡顿的情况。

美骑APP引导页

↑ 自动轮播（自动翻页）

↑ 可拖动的长图片

↑ 视频

引导页还有很多种例如创意提示插画、摄影图、互动图等。

 

加载页

用动效来优化加载页是很好的办法， 并且植入美骑品牌形象。

四、动效

动效也是交互设计的一部分 动态设计就像一个人的肢体语言，少了显得这个人死板，多了则像神经病。 而如何恰到好处地拿捏产品中什么地方需要设计动效、怎么设计动效，这需要从用户的角度进行感性的认知。例如：需要让用户等待的、需要让用户快速通过的、需要让用户感觉感受的等等。 合理的划分使产品的“节奏感”更好。 优点：更适合人体动力学，更好互动，形成真正人机交流，主流趋势！ 缺点：增加工作量，甚至会被程序员打。》>.

加强体验舒适度

嗯，就是让用户更加爽更加爽的用你的产品。 具体表现在：

1、表现层级关系 为了展现层与层的关系，是抽屉，是打开，还是平级切换等等，让用户知道这个界面和上一个、下一个的关系。这已经是非常最常见的运用了。

2、与用户手势结合，更自然的动画表现 当用户手势操作的时候，让界面的动态走向更符合手指的运动，从而让用户感觉到是自己控制了界面的动向，而不是机械化的跳转。

3、愉快的提示功能

4、额外增加界面的活力 在用户预期之外增加的惊喜，可以是帅气的，可以是卖萌，总之让用户感知到产品的生命力。

减弱不可避免的不适感

1.让等待变得更愉快 常出现在加载、刷新、发送等界面中，让等待变得可视化，甚至不再那么无聊。

2.失败界面的动效 比如刷新失败、页面错误、未联网提示这些。

3.增加界面与界面衔接的延续感 界面的跳转不可以避免，但是如果让本来分别独立的2个界面或者事件拥有了某种特定的联系，可以显得更加好玩，不再是生硬的跳转。

网易，按下流行元素主题来变化的，比如欧洲杯的时候，加载就变成了射门的动画游戏。 ——美骑某iOS攻城狮 小罗

美骑+ 加载页

 

不易被察觉的动效

特意把这一类单独说一下，由于不容易被发现，普通用户通常会忽略它们的存在，但很多时候这些小细节让交互变得更加有趣。

1.默默增加反

馈感 为用户的操作提供有趣的反馈。

2.去除用户不再需要的元素 随着用户的操作，有的内容已经是用户不再关注的。这时候可以将他们隐藏起来。

总的来说动效还是为用户体验而服务的，动效设计师尤其要注意交互逻辑，才能让作品看起来不但动效帅气逼人而且真正发挥了实际的作用。        

最后，千万不要牺牲了用户宝贵的时间用来看毫无目的的动效。

豆瓣刷新动画

（后来发现支付宝也做了一样的动画）

其实美骑APP第一版的时候，是有做动效的，后来由于没写JS脚本，就没有了动画效果。

（为此我还特地对比了美骑APP v1.0、美骑APP当前版本以及今日头条APP的动效，由于网站不能上传视频，这个部分省略）

动效和UI的完美结合 Facebook

动效辅助交互 隐藏、翻页、力量、层级意识…

https://www.youtube.com/watch?v=-uNyXqC0Mpo

https://www.youtube.com/watch?v=Zq6-b9_V9lA

里面很多动画都很酷炫还有各种不同的交互方式。

五、用户体验

产品设计/用户体验 五层构架

1、战略层对应产品目标，用户需求。

2、范围层对应产品的信息和功能点，涉及到产品的侧重点和取舍。

3、结构层对应产品的实际落地，产品在这个层面开始具体化。

4、框架层对应产品具体内容的呈现，产品进一步具体化，落实到界面。

5、表现层对应产品的视觉传达，是产品的美化。

我们暂且仅从“框架层 & 表现层 ”开始分析

【框架层】

界面设计——提供给用户做某事

导航设计——提供用户去某个地方的能力

信息设计——把想法传递给用户

【表现层】

视觉设计——不仅是美术，重点是关注用户的注意力； 不能只考虑个人喜好，要支持各个模块的区别，要使用户清楚可用； 与战略定位保持一致。（用户需求和目标）

目标人群分析

抓住目标用户的特性（男性，也可以理解为直男，爱好骑行的直男） 功能上放大社交功能 – 完善直播功能(hot point)

用户画像

这就是为什么导航需要分类， 为什么需要让用户选择自己喜好的分类。

设计师最常忽略的UI页面状态：空白状态（empty state） 页面

设计师必须让用戶在 “首次使用" 就有好的体验！ 大多 app 平均会失去 77% 的用户（用户下载后三天）。更糟的是，在 30 天内， 将近 80% 的用户不再使用。造成如此低的用户留存率是因为 app 制作或概念不良吗？恐怕有其他原因。基本上，使用者会下载许多 app 试用，并在几天内就会决定该删除那几个。这代表怎么在这个期间内让使用者上瘾，是迈向成功的关键。而你的任务就是确保用户要经常使用你的app，且能心满意足。但在达到这个目标之前，你必须让他们在 “首次使用" 就有好的体验！

第一眼印象太重要了！

什么时候使用者会遭遇 “空白状态" ?

1、首次使用： 首次开启 App

2、发生错误：触发某事件

3、使用者主动清除：当使用者把内容都清空时

设计空白页面的效益并不仅是美学的提升，它能让用户预期接受可能要呈现的内容，也可增加使用者的黏着度，并告知使用者进行某些动作会发生甚么事情。设计 “空白状态" 页面，可达到下述三大效益：

1.教学与帮助

2.让使用者开心

3.激励使用者行动

上图只有结果，没有引导下一步操作，就相当于老板问你：今天的比赛谁拿冠军？ 你直接说：不知道。 但其实可以说：我不知道哦，我去问问别人。 我们不但提供结果，还要努力提供解决方法。 此页面的设计需在 “友善的程度" 与 “帮助的效益" 中取得平衡。

“你就像身处荒岛，感到迷失方向且失去联系吗？跟随我们的建议，保持冷静，点把取暖的火，并且按下重整试试。”既有结果，又有引导，相比之下比较友好。

1、提供教学与帮助

在 “空白状态” 页面上可达成的第一个效益就是：指导使用者如何使用美骑+。如果他们不懂 如何操作，app 可能就会被打入冷宫。所以，我应该要协助他们理解下一步要干嘛？或让他们可期待会有种事件发生。

适当的提示，协助用户操作。

2、让使用者开心

若要给使用者好的第一印象，使用性是关键但非为一，产品所呈现的 “品牌个性” 更是重要。假使我能让 “空白状态” 的页面看起来与其它竞争对手不同，其实也代表着我向用户证明 “产品体验同样也具独特性"！ 而我们的目标就是设计出令人愉悦惊喜的界面。

3.激励使用者行动

一个成功的设计会把 “特殊功能" 或 “特色" 的信息，在此页面告知给使用者，并且导引他们去做出我们预期的动作。 鼓励使用者使用：利用适当并带激励作用的用词或设计，如 “学习更多" 或 “让我们开始吧！“ 说服使用者使用：提醒用户他们使用你的产品能带来的效益。

引导使用者脱离“空白状态”，进行有意义的行为。

比如我是一个销售员，顾客在逛我的店时，我必须微笑，制造愉快活跃的气氛，真心地推荐适合顾客的商品，给顾客建议，例如说“这是新款，我觉得很适合你，你要试下吗？”而不是一声不吭地站一旁，任由顾客自己摸索，最后离开。 假如我是顾客，面对两家餐馆，我一定会选有服务员在门口热情地招呼我进去的那家，这是潜意识决定的。 所以做好这些细节是提高用户留存率的办法。

情感化设计

看用户对网易云音乐的评价。

感人吗？ 我们喜欢和人交流，而不是机器。网易云音乐成功抓住了用户注意、诱发情绪反应以提高执行特定行为（*执行特定行为：例如一个有着明亮色彩的按钮能够无意识地抓住用户的注意。而随后的行为可以是任何动作，比如点击按钮、注册内部通讯、或进行网上购买。 ）的可能性的设计。情感化设计是增强用户体验的一种思路。

我觉网易云音乐是情感化路线的高手，最近他家的评论就超级火，他们把赞数最高的评论做成海报，在公共场所铺天盖地进行宣传，总有一条评论会打动你，总有人会情不自禁地拍下发到朋友圈，这就起到一个病毒式传播效应。 

还记得之前App Store有个很火的游戏叫“lifeline”吗，所表达的目的也是大同小异的。

加入人性化设计，让产品释放正能量，页面不再冷冰冰。 “在互联网产品设计中一定会涉及到两个词：‘用户价值’和‘用户体验’。一个产品，首先是能用，然后是好用，最后还能带来身心愉悦的感觉。用户价值意味着满足了“能用”的需求，而用户体验则由后面两个环节决定，带给用户“好用”和“还想用”的体验。” ——产品经理Nairo

核心：一见钟情。 如果用户想要传播你的产品，他想用一句话去跟他身边的亲朋好友安利你的产品，你觉得他应该说哪句话才对？你希望用户说的那句话，就是产品的属性和价值认知在用户心中是怎样的。

表现手法

1、挑逗本能。 简而言之就是好看。 “我觉得它看上去不错。”这是一个非理性的心理状态，也说明了赏心悦目和感官层面愉悦的设计非常重要。 关键字：漂亮

在用户的角度看： 外观的美能够提升用户内心的愉悦度，并且增加对它出错的包容度，整体来说它会让我们的体验得到提升。 如果一个团队在产品的设计层面很用心打磨，说明这是一个用心的团队。一个用心的团队的其他方面，比如说技术质量等等就觉得也不会太差。

2、社会互动。 比如现在的直播，包括评论、点赞、分享等等，都是有关社会化互动的一些情感需求的体现。我们适当地强化美骑+中这样的功能，会提升用户对这种社交需求上的一些感受。 关键字：表达与倾诉、交流与互动、群体归属、关注/粉丝、跟风（热门）

聊天的表情之所以受到大家的追捧，是因为它能够表达出语言、文字所难以传达的那些微妙的情感(图1) 这些家具像不像人？我们觉得它很萌，我们的人脑会优先识别拟人符号并激发感情，这个是在我们进化中留下来的本能。(图2) 欢乐脑洞大开的弹幕互动。(图3) 几年前很火的小黄鸡对话APP。(图4)

3、本我意识。 为什么海底捞、哈根达斯、星巴克这么火？为什么那么多老人被保健品公司诈骗，因为我们会被产品背后的服务满足本我意识的心理需要。这种需要也许是虚荣心、空虚、渴望被关心等。关键字：VIP、定制化/个性化、虚拟身份/头衔、标签、粉丝、专属纪念日

除此之外，还有很多方法去成就一个更好的产品。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务