优秀的UI设计细节你知多少？

不可否认，被我们经常挂在嘴边的设计规范、方法及一致性对我们日常工作很重要。它可以提升操作一致性、提高工作效率、延续品牌定位等等...

但是，不知道你们有没有发现，之所以有了这些方法和规范，导致很多设计师习惯性处于舒适区，从而放弃独立思考。每天做着重复性的工作，复用着前辈制定下来的模版，套用着别人的方法论，抱怨着工作没有挑战。

我最近也在思考，一个遵从设计规范，按照所谓的系统设计方法，步步推导而来的解决方案，是否真的就是一个好的设计？

规范，方法，一致性，重要的一面。

a.规范

当我们刚从事UI设计时，自身对于用户体验设计的积淀还不够厚实的时候，遵循设计规范是最保守但也是最合理的做法，因为这种解决方案更加成熟和通用，也有了一定的用户认知。同时像公司内部的设计规范，有利于版本迭代的开发及设计效率，包括新人入职后更快上手工作，避免出错。

所以了解ios设计规范，安卓设计规范，或者是公司内部的设计规范等等，成为设计师必备的技能...

b.方法

这里说的方法是指设计工作中的方法论。运用方法论，能够帮助设计师明确如何一步步的进行整个项目，更高效的推导设计，达成目标。从而说服合作的同学，而且看起来非常的有理有据。下面是我们常见到的一些导图例子：

c.一致性

为了减少用户学习成本，不管从视觉还是交互层面我们都要遵循一致性。

包括同一个产品不同终端，要保持视觉统一性，才能加深用户对产品品牌的认知，这些也都没毛病。

下面是咸鱼，顶导航颜色采用黄色，为了各端一致性。

微云各端引导页面，采用线性插画的处理手法，来确保品牌一致。

以上说的都是规范、方法、一致性重要的一方面。

但是，我们会看到更多优秀的创新的设计正在一步步脱离这些条条框框，从而做出让人眼前一亮的设计。所以我在思考在接下来的设计中，需要做的几点来帮助自己成长：

1.跳出规范

工作的前一两年，研读并遵循着平台设计规范，从而帮助我们在工作中做出不会出错的设计，同时提升工作效率和说服力。但是随着自身经验的累积和成长，需要对此产生警惕，如果我们一直局限在别人制定的规范里，不去思辨，很容易陷入十年如一日的工作状态中，很难做出创新的设计。

同时也可以看出很多优秀的设计作品，陆续跳出规范，不局限于规范制定的像“最大字号多少px”，“导航条多少px”，“上下间距多少px”等等... 而是设计出符合自己产品气质的界面。下面有几个例子：

下面是蜗牛装修APP的设计，可以看出，a.顶部区域并没有明确的模块区分导航区域，而只有滑动时，导航的分隔才出现。b.字号和间距的大小，也让人浏览起来更加放松。

像VUE的处理，没有严格遵循平台设计规范所谓的列表的的高度，而是用红的线条区分模块，间距来区分列表的内容，反而更符合产品本身的气质。

下面是大家所熟知的Airbnb，它大胆的体验设计被设计师们追崇模仿，这里想说的是它对底导航和按钮大小的处理，也是跳出规范，更符合功能本身的重要层级。

2.弱化方法

上面有讲到设计方法论如何帮助到我们的设计，使用过程当中，我们知道每一步应该怎么分解和运用。例如：市场调研、头脑风暴、梳理线上流程、研究了信息架构，并且还通过体验地图分析了行为路径等等...

但是往往最后的设计方案和前期的调研没有什么关系，而且复用到任何产品设计的前期都适用。所以，我认为这属于自我感动式的设计。感觉自己做了很多，但是真的往深入去问why why why的时候，很多设计师都会被卡住。

因此一定程度上我们要弱化已知的设计方法，少一些套路和形式主义，多一些深度解析的方式做设计。

比如，下面是facebook的总监讲述LIKE的设计方案：

他是这么阐述LIKE的设计方案的：这个设计的目的是优化LIKE的按钮，增强用户的互动意愿，以及提升LIKE的表现力。而他做的第一件事情就是理解什么叫增强互动，什么叫表现力，背后的产品目标是什么？是用户可以更多的表达。然后开始找如何让这个目标具体化。接下来寻找什么是被普通认知和广泛接受的reactions。

它通过各种途径去找用户最常用的表情是什么，最常搜索的表情是什么，最多的短评论是什么。设计师们希望可以从侧面寻找大家在表达过程中喜欢用什么reaction，然后找到他，并通过之前定义号的原则进行筛选，完成设计方案。

所以可以看出，这种解决方式不是方法论的堆砌和强调，无需逐步check的线性设计过程，而是以产品目标为起点，然后紧密围绕目标进行提问回答，这种方式才能让我们深入去思考，给出的解决方案才更有道理，经得起挑战。

3.不局限统一

在设计工作中，我们考虑着界面与界面的统一，端与端的统一，这样当然没错。但是我发现很多同学，都会过度的陷入所谓的统一，生怕做任何一个东西与统一相违背。

比如产品里面是线性的图标，那么就绝不允许有面状的出现；线性的图标如果是2px，那么全局各端都必须是2x；如果web端功能引导页面是真实照片的，那么别的端必须统一用真实照片等等...

这些问题我也遇到过，但是我发现是自己太局限里面了，其实我们应该考虑的是针对不同终端的使用场景，用户群体，在局部统一的基础上，可以做差异化处理，是没有问题的。包括icon的处理，也可以根据功能的强弱，出现的时机，做差异化处理。而不是固执的坚信只要不统一那就是错的，设计决策并不是非黑即白的。

比如，google drive的引导页面，在移动端用的是矢量插画的处理，在web端更强调的是产品官方形象，用的是真实照片，贴近生活。只是通过logo主色来延续品牌的DNA。

还有印象笔记各端引导页的处理，同样是针对不同的使用场景和用户的习惯，采用不同元素，来特殊处理。

像Web和Mac端，一般较长停留时间，因此会采用一些结合场景的真实图片，诠释功能特色，让用户更全面的了解产品能为他们做什么；而移动端，以碎片化场景为主，因此采用的是简洁插画处理，干净利索，利于get到重点。统一的部分，只是它们的绿色。

所以即便要统一、要一致，也不能特别轴，保持好度很重要。单纯的为了统一而统一，也是一种思维懒惰。

同时，能用、好用、爱用，这三个层次往往被用来形容互联网产品。能用是基础，说明用户可以通过该产品来解决实际问题；好用是每个互联网从业者都在追求的，让用户在使用产品过程中更省心省力，不会出现焦虑或不耐烦；而能做到第三个阶段爱用的公司和产品屈指可数。

一些打动人心的APP设计，很小的设计点，但是走心，希望对你有所启发。

1.把发邮件变成一次纸飞机的飞行

QQ邮箱，每次发送邮件时，会在右上角出现一个纸飞机的图标和进度条。把发邮件给的过程暗喻成一次纸飞机的飞行，增添了不少童趣，加上配套的音效。让我每次用QQ邮箱发送邮件时，都多了那么一点期待。

我们看看常规的设计：把发送邮件的等待过程，换成不停转动的小菊花（加载图标），并配上文案：邮件正在发送中，请稍后。这样一对比，是不是觉得qq邮箱的这个小设计更加打动人心？

QQ邮箱

2.点击底部标签栏，就可以回到顶部

用iPhone的人都知道，iPhone有个很贴心的功能，即点击通知栏，就可以将页面的内容回到第一屏，我是这个功能的重度用户。但是这里有个痛点，因为通知栏位置太高，单手操作很困难，操作成本偏高。

毒物，一个导购类的APP，产品以内容为主。当用户在首页向下浏览太多屏之后，它的标签栏第一个图标会变成倒三角，文案变成了回顶部，单击后即可回到第一屏。妈妈再也不用担心我点击通知栏回第一屏了。回到首页常用的做法还有在页面右下角出现一个悬浮icon，单击可回顶部。

毒物APP

3.为用户下一步操作的做设计

iPhone有个功能是下滑调用全局搜索功能，因为下载的APP太多，所以我经常使用这个功能来搜索定位APP。如下图，当你唤起搜索时，系统会帮你保存上次搜索的内容，并默认全选中。细想一下这个设计真是太贴心了，因为用户启动搜索，存在两种可能，①继续上次的搜索内容；②输入进行新的搜索。这个设计很好的兼顾了这两种情况。

同样为用户着想的设计还有，当G-sensor开启时，用户旋转手机屏幕会跟着旋转；滴滴打车时，滴滴会为你智能推荐终点位置。这种设计方式是很重要的一条设计原则，我把它称为“智能化”原则，让设计更智能，真正的为用户着想

iPhone全局搜索

4.解救强迫症的滑动去除小红点

APP都在用小红点来刺激用户点击，这让很多强迫症患者很苦恼。QQ提供了一种折中方案，依然用小红点提醒有未读消息，但是允许你轻轻一滑去除小红点，再也不用一条一条去打开未读消息列表来清除小红点了。大笑三声：哈哈哈哈~

QQ

5.在不打扰用户的前提下，提示用户

手机验证码登录和第三方一键登录，简化了注册登录流程，减低了用户的操作成本。但是新的问题来了，有些APP我是用微信一键登录的、有些是用微博、QQ、豆瓣、等等。怎么办？

有道云笔记，通过悬浮框提示你上次的登录账号，轻松解决了这个问题。

有道云笔记

6.将反馈变得有趣

当页面内容加载完后，再上滑也滑不出什么。一般的APP做法是允许用户将页面上滑，松手后页面恢复。

来看看same是怎么做的。same在页面底部设计了一个尖叫鸡，你上滑的越多，鸡尖叫的越大声。仿佛在说，神经病别往上拉了，没内容了。而且线性的图标设计也与same整体视觉风格保持了一致。

7.用滑动代替点击

给朋友发信息，发现中间少打了个字，常规做法是用手指选中漏打的区域，再打上缺少的字。但是由于手指与屏幕接触区域过大，而且手指会部分挡住文字，所以经常点了好几次都不能点准。这个时候很多人会删掉重新打一行。

搜狗输入法通过左划和右划来移动光标的位置，亲测成功率百分之百。具体做法是，在搜狗输入法界面上，左右滑动，来调节光标的位置。

搜狗输入法

8.随机奖励

2016年被称为知识付费元年，得到APP率先一步抢占了用户心智，产品定位为知识服务。用了半年的得到，专栏内容很专业，实实在在的干货。虽然有很多产品设计的细节有待优化，但是随即奖励这个设计真是值得表扬。这其实是借鉴了游戏的做法，因为游戏产品为了抢夺你的注意力，费尽心思，随即奖励就是其中一招。

因为奖励是随即的，用户不知道什么时候会获得奖励，让人有种莫名其妙得了好处的感觉。会加深对产品的影响，并提高好感。

得到

总结：打造用户喜欢的产品，让产品从能用、好用到爱用，是每个互联网从业者的使命，为你的APP增添一些打动人心的小设计，不失为一个好办法。当然前提是该设计能为用户带来价值，千万不要为了设计而设计。