论UI设计师的自我修养

一、认识 UE 设计

很多人都会将 UI 设计和 UE 设计搞混，其实这是两个概念，用户需要将它们区分开来。下面来认识什么是 UE 设计。

1. UE 设计和 UI 设计的区别

UE 设计师主要考虑的是逻辑设计，如 App 的流程，或者返回、菜单、下拉菜单等是否合理，整个流程能否更简单、更方便地操作。设计方面只占 UE 的 20%，更多的是逻辑思考方面。UI 设计师主要考虑的是用户界面设计，设计方面占 80%，逻辑方面占 20%，如下图所示。

2. UE 设计师必备逻辑

（1）操作前可预知。

在操作前可以预知执行步骤后的效果是怎样的。下图所示为系统解锁方式，有滑动解锁、上推解锁、指纹识别解锁，界面上的提示能很明确地告知用户解锁方式是什么，这就属于操作前可预知。

（2）操作中有反馈。

在操作中动态地实时反馈。例如，外卖订单会显示“骑手正赶往商家”，这就是告诉用户这份订单的实时信息。还有调节手机亮度、声音时的进度条显示，这些都是操作中有反馈的表现，如下图所示。

（3）操作后可撤销。

左下图是在微信聊天过程中，对方撤回消息，微信界面显示撤回信息，是为了让用户知道消息被对方撤回，而不会认为莫名其妙丢了一条信息。右下图是购买影片的过程中可取消操作的界面，有时候用户会在购买过程中因为一些原因而不想购买了，这时可直接点击【取消】按钮，即可放弃购买。如果没有这个界面，直接付款购买了，就会给用户造成不便。

二、五大设计原则

在设计时要尊重用户的使用习惯，因此需要遵循 5 个设计原则。设计师首先要抓住这 5 个设计原则，然后再考虑 UE 的交互设计。

1. 普遍适用

操作手势与其他 App 要大致相同。在一些社交软件中，刷新操作大部分为下拉界面即可刷新，如微博、UC 头条等，如下图所示。如果设计了一个不同的手势，则需要重新培养用户习惯，那是很难的，还会造成用户频繁地误操作。

2. 符合时代

设计不能过分守旧也不能过分超前，软件开发要符合当前硬件技术水平，如下图所示。

3. 直观

下图中的前两幅图所示为 QQ 音乐和网易云音乐界面，可以看到下载、分享按钮都是非常直观的。相比之下，以前的虾米音乐界面好看（如下图中的第三幅图所示），但是会发现有很多按钮被放到了子类目中，这就造成用户下载的不便。所以 UI 设计师应该首先考虑直观，其次考虑美感。

4. 便捷

在微信中发送图片的时候，可直接从最近拍摄的照片中选中并发送，而不需要通过点击【照片】按钮；在查找某些 App 的历史记录的时候，不需要重新输入，点击【搜索】按钮就可以找到近期的搜索历史，如下图所示。这些就是在做 App 开发的时候要遵循的便捷原则。

5. 多端同步

不管是在手机端、PC 端，还是在平板电脑上用视频软件看视频，只要是同一个账号，视频软件都会同步历史记录。还有百度网盘、微云等云盘软件，这些都是云同步的，如下图所示。

三、让用户拥有自主控制权

在设计系统时，需要让用户全程具有控制权，能够自主控制进度。本节讲解 UI 设计师在做 UE 设计的时候，需要遵循的几点关于自主控制的原则。

1. 操作后可撤销

例如，打开一个网页后，用户不小心给关闭了，此时按【Ctrl+Shift+T】组合键，即可重新打开关闭的网页，这种操作就是操作后可撤销，用户可根据需要选择是否恢复，如下图所示。

2. 版本更新迭代

如果是系统更新，一般是在【设置】→【软件更新】中选择是否更新系统版本。如果是更新 App 软件，可以打开软件商店进行软件更新，如下图所示。这都体现了用户的自主选择权。

3. 操作反馈

要告诉用户这一步执行下去结果是怎样的。例如，用 QQ 发送文件后提示对方已成功接收，邮件发送成功后反馈已发送，微信撤回消息会提示有消息被撤回，以及输入验证码的时候提示多少秒后重新发送，如下图所示。这些都是操作中的反馈，避免用户不明所以。如果用户在操作中产生疑问，那么用户体验、交互的逻辑感就比较差了。

4. 简化步骤

在进入一个新的应用的时候，尽可能快地让用户得到想要的信息。下面以 3 款天气预报软件为例，第一款为 iOS 系统自带的天气软件，能告诉用户未来 24 小时及未来一周的天气情况，包括当前的温度、空气质量，能够基本满足用户需求。第二款为墨迹天气，这款软件比较符合中国人的习惯，界面中显示了很多信息，除了天气外，还包括湿度、气压、空气质量等，当有天气预警时也会显示在界面中，用户可以一目了然地了解当前天气状况。并且它还能直接定位到当前的地址，使天气预报更加准确。第三款为国外较常用的 YAHOO 天气软件，此款软件的默认城市比较少，如果要定位到当前地址需要手动输入，而不能直接定位，如下图所示。总体来讲，墨迹天气比较能够满足中国人的需求，并且能够自动定位到当前地址，使用户快速得到想要的信息。

5. 适度开放权限

一个应用要适度开放权限，虽然功能越多越好，但是也要考虑用户的接受程度。右图所示的是用美拍拍摄的照片，直接修图就可以，没有什么权限给用户，自定义的功能基本没有，直接应用默认的一些功能，如磨皮、调色等。下图所示的是 Photoshop 软件，所有的功能都需要用户自己去编辑，比较难上手，所以要适度开放用户权限，这样能让软件的运行更流畅，同时用户也更容易上手。

四、状态跟踪

本节讲解状态跟踪，就是 UE 设计师在做设计的时候，一定要考虑操作步骤目前进行到了什么状态，要反馈给用户。状态追踪的作用就是排除差异化的干扰内容，不给用户带来困扰。例如，这一步到底有没有执行，结果能不能反馈等。下面来进行详细讲解。

1. 进度显示

下图所示分别为饿了么订单、QQ 邮箱、某视频软件缓存界面，可以明确看到订单状态、邮件发送状态、视频缓存状态，这种进度显示可以让用户明确地知道任务目前执行到哪里了。

2. 加载刷新

下图所示为 UC 头条和爱奇艺视频界面，下拉页面的时候都有刷新提示，可以明确告诉用户目前执行的是什么操作。

3. 前后对比

在访问网站的时候，当我们把鼠标指针放到标题上时，即将进入的链接会变成与其他链接不一样的颜色，这就告诉用户目前正在操作哪里。在手机 App 中，阅读过的文章会变为灰色，没有阅读过的还是黑色的，这就是状态的前后对比，如下图所示。

4. 空状态返回

如果遇到空状态应该怎么解决？以站酷网为例，在网页最后有两个按钮，分别为【进入我的首页】和【返回站酷网首页】，如下图所示。这样即使页面不存在了，也能够让用户找到对应的出口，而不是只有一个空页面。因为用户不清楚出了什么问题，这里给一个空状态的返回，用户就会知道原来这篇文章正在被审核，或是直接被删掉了，这就明确告诉了用户这篇文章的状态。

5. 不可逆操作

当用户遇到不可逆的操作时，要反复警示，提醒用户斟酌。例如，用户要删除照片，点击【删除】按钮后还会再提示一次是否删除，如下图所示。如果点击【删除】按钮后直接就删除了，很容易引起误操作。这也是在追踪目前操作的状态。

6. 层级区分

利用不同颜色的字体、字号或其他方式来区分模块。例如，支付宝用空隙把模块分隔出来，较好地区分出了层级，如下图所示。

7. 定位导航

传统地图与手机地图的区别是，传统地图虽然知道起点和终点，但是没有实时定位，不能准确知道方向对不对，以及目前的位置在哪里、距离目的地还有多远。而手机地图可以直观地告诉用户所走的方向是否正确，以及距离终点还有多远等直观的信息，让用户明确知道目前所处的状态，如下图所示。

8. 表单逻辑

下图所示为芒果 TV 和优酷的注册表单，两个界面基本相似，但是芒果 TV（左下图）有一个验证码，可以看出这个图片验证码很难输入，容易造成用户的困扰，并且如果没有及时刷新图片验证码，输入的时候经常会出错，这样会造成用户的反感。右下图的注册界面是比较推荐的注册方式，直接通过手机短信或邮件获取验证码，这种方法既简单又方便。

五、设计规范

本节讲解字体、颜色、图标、控件等的设计规范，并列举一些设计规范及参数。

1. 颜色规范

UI 设计用的是 16 位的颜色。在标准色中，比较重要的两种颜色分别是“红”和“黑”，对于渐变色，渐变的场景、左端的、右端的、高光的、阴影的颜色是什么都需要标记出来，如下图所示。

2. 字体规范

标题或需要重点突出的内容可以用大号字体表现，权重较低的可以用小一点的字号表现，如下图所示。在 iOS 版本中，设计稿中的中文字体为华文细黑体，样式为浑厚；英文、数字、字符的字体为 Helvetica Neue。

3. 图标规范

功能型图标代表可操作的某些功能，包含默认、触摸和选中 3 种状态。

图标分为 3 种尺寸，大一点的尺寸为 56×56px，中等尺寸为 40×40px，小一点的尺寸为30×30px，如下图所示。

4. 按钮 / 控件

按钮 / 控件包含的种类非常多，重要按钮是用于执行重要操作时固定在屏幕底部的按钮，如下单、确认、搜索等，一般的尺寸是 320×98px，包含默认状态、触摸状态、不可点击状态 3种。

公共控件多用于选择时，如在购物车中选择商品，包含选中和未选中 2 种状态，尺寸是30×30px，如下图所示。

5. 尺寸规范

尺寸规范没有固定的标准，有些应用是针对手机端的，有些是针对网页端的，有些是需要全屏显示的，还有些是要保留有效区域的，不同的情况有不同的尺寸。下图是网页端的尺寸，左下图中间的有效区域的宽度是 980px，如果要做全屏的话，宽度是 1920px，如右下图所示。

6. 分页规范

根据内容的多少进行分页，若内容太多，需要分很多页，那么把起始页和结束页标记出来就可以了，如下图所示。

7. 命名规范

一个产品，从项目立项到用户体验、交互、设计、开发，每个环节都要有一个标准化的命名，需要所有人员都能看懂名称代表的意思，以提升设计与前端的工作效率，如下图所示。

六、简化元素

设计师要尽量简化设计方案，避免不必要的元素出现在设计中。简化界面的同时，更重要的是做到使用上的简便。

1. 轻化设计

左下图是旧版 QQ，右下图是新版 QQ。在旧版 QQ 中，有很多有质感的设计，如高光、线条、纹理、渐变等，这是较早的 UI 设计师的风格，现如今的设计风格更偏向于右下图这种。像这样轻化的设计风格有什么好处呢？轻化设计可以让类目区分得更加明显，把一些干扰元素去掉了，相比以前，颜色和提示信息都变少了，纹理、标签等也都有简化。

2. 量体裁衣

在设计中，也不是越简单越好。左下图所示的是淘宝界面，右下图是亚马逊界面。亚马逊界面类目非常多，分类也比较细；而淘宝界面的设计看上去比较复杂、凌乱。到底哪个更好，这个还要以国情来决定。国内比较喜欢用的就是淘宝这种风格，在淘宝上买东西的用户比较享受促销的氛围，所以一般用暖色调，一些具有吸引力的图标让用户更加想点击进去。界面中还有很多生活化入口，如充值中心等，更加方便用户的生活。设计的目的是让用户更加方便地使用，所以在设计时应该更注意方便还是更注重美感，这就需要设计师来衡量。

3. 排除干扰项

下图所示为 PC 端的知乎和微博的注册界面。知乎注册界面大量留白，界面上有这样一句 话：“与世界分享你的知识、经验和见解”，这就告诉了用户这个平台主要是进行知识分享的，注册步骤也简单明了。相对于知乎界面，微博界面中的干扰信息就比较多。

七、面试技巧

面试是以面谈的形式来考察一个人的工作能力，通过面试可以初步判断应聘者是否可以融入自己的团队，面试是公司挑选员工的一种重要方法。本节来讲解一些关于 UI 设计师面试的注意事项。

1. 借鉴

左下图所示为百度页面，右下图所示为谷歌页面，这两个页面没什么不同，布局上几乎是一模一样的。同行中布局相似的非常多，如淘宝与其他购物 App 、旧版 QQ 与 MSN。学习的过程是需要借鉴的，如果借鉴了体系性的东西，就要把好的设计理念保留下来，丢弃糟粕，这就是借鉴。做设计并不是凭空想象，否则就脱离了创意本身，创意是在前期有的基础上做出新的东西，而不是凭空捏造的。但也不能从布局到元素全都借鉴，如果借鉴得太多就成了抄袭。设计师在借鉴时要把握好这个度。

2. 面试

在面试 UI 设计师一职时，应注意以下几点。

（1）具备用户体验意识。

在面试时，要具有用户体验意识，想象自己就是产品，面试方是用户，从设计师的角度出发，考虑如何最快、最好地将自己的产品展示给用户。另外，作品最好放在手机上，可以直接给考官看，这样用户体验会更好。

（2）做好充足的准备。

在面试时，要对公司有详细的了解，这是应聘任何一个岗位都需要做的准备，可以通过下载公司的 App、查看公司的简介等方法来了解。

（3）展现出成熟稳重的一面。

面试时要给面试官成熟稳重的感觉，而不是今天很高兴，明天要离职的性格，这个也是用人单位录用员工时的重要衡量指标。