2019年9月设计圈超实用干货大合集

互联网行业走到今天，早已从增量时代转为存量时代，人口、流量、资本的红利都逐渐收紧。在存量时代，影响用户选择产品的很重要一个因素就是「品牌」，一个产品要想从同类产品中跳脱出来需要有个性。如何在用户心智中植入品牌成为产品整个生命周期很重要的一环，而面对互联网产品越来越趋于同质化的现象，UI 设计师已经不能局限于界面表现层，更要了解产品背后整个商业链路，知道产品想在用户心智中建立怎样的定位，以业务为依据设计品牌，以品牌为基准去设计产品。

为什么要立足于品牌做UI？

1. 对内：规范统一，高效协作

品牌本身就可以作为设计规范的一个重要指导原则，通过对配色、文字、图标、控件等建立设计规范，可以有效减少设计决策时间，传达一致的品牌调性。

韩国的 NEVER 公司（相当于国内的BAT），旗下有很多款 APP 渗透到韩国人民日常生活的衣食住行当中，由于一开始没有一个统一的品牌规范指导，各个 APP 由不同的设计师设计，导致每个 APP 的风格迥异，体验也不一致，后面通过引入 SQUARE（方形）的设计理念，统一了所有 APP 的设计语言。

△ 图片来自NAVER设计团队

2. 对外：提高认知，溢价增值

最近几年我们发现手机上的 APP 越来越同质化了，同时也在慢慢地失去了产品的个性，不看 logo，单纯看界面的话，很多时候根本分不清是谁家的产品。如果能够立足于品牌的高度去做设计，关注每一个设计细节对品牌的影响，在 UI 中适当融入品牌元素，无疑将能更好地提高用户对产品的认知，通过创造情感性价值实现产品的溢价增值，同时也能够为产品的营销推广提供立足点。

用户如何感知品牌？

品牌的根本目的，就是在目标用户群体的认知中构建品牌信念。所以想要做好品牌设计，首先要了解用户是如何感知品牌。在设计产品的时候常常会发现我们觉得理所当然的地方，用户往往没按我们预想的方式去使用。那是因为设计师通常有整体观，站在金字塔顶端去规划一个产品的设计，而用户恰恰相反，在金字塔底端往上爬，他们不知道这个金字塔多高，也不知道从哪一面开始最好爬，所以会遇到各种问题。同样，用户对品牌的感知也是由外向内，由低向高，用户通过各种场景接触到产品，再通过产品的视觉呈现、功能体验、信息内容等感知品牌，然后进一步了解品牌的特性与内核，最后在心智中形成印象，构建品牌信念，从而影响下次产生相应需求时对产品的选择。

因此，作为设计师，我们需要充分理解品牌内核，由内向外将抽象的品牌内核转化为具象的视觉符号，再延伸到用户与产品的各个接触点，从而将品牌理念打入用户心智。

如何将品牌融入UI？

1. 明确定位，提取关键词，建立情绪板

首先，需要明确品牌定位，美国的著名品牌学者马蒂·诺伊迈尔提出了一个品牌快速定位测试的方法：

△ 图片内容来自徐适《品牌设计法则》

通过品牌定位找到细分市场和目标用户，再将定位策略作用于品牌识别系统，以此确保每一个品牌触点都符合产品的品牌定位。

明确定位后，接着围绕品牌定位提取关键词，一开始可以通过脑暴写多个关键词，然后再一步步过滤剩下最核心最重要的几个。

通过上一步确定的关键词来建立品牌情绪板，品牌情绪板旨在营造产品对应的正确的情绪和符合预期的感觉，将比较抽象的概念转化为可感知的视觉（比如柔软、温暖、光滑的线条感、低饱和度色彩等），进而有效指导后面对品牌关键元素的提取与设计的融入。

2. 提取表现元素

基于前面的品牌情绪板，围绕品牌内核，进一步提取视觉表现元素，包括颜色、图形、纹理、字体、文案、声音等。

颜色

颜色给人感官带来的刺激是最直接的，而且颜色不止于视觉，而是与我们全部的感知都相关，人对颜色的感受是一个综合体。一只打破的蛋壳中溅出来的深黄色的极度新鲜的蛋液，或是一杯美式咖啡的深褐色都不只是颜色，还有材料性的质感，苦涩的味道与气味都透过颜色被感知。

有时甚至不需要任何图形，单凭颜色就能产生对某一事物的联想。

由此可见，颜色对于品牌的体现至关重要，不容忽视。颜色在 UI 中的体现有 logo、导航栏底色、图标、文字、可视化图表、插图、按钮等。

近几年 UI 设计圈掀起了一股极简风，界面设计强调内容本身，加大留白，去除不必要的颜色和 UI 元素，品牌颜色在界面中被大大弱化，个人觉得这种设计并不适用于所有产品。像 Facebook、Twitter、Instagram、Airbnb 本身就是体量很大的产品，早已在用户心智中建立品牌信念，所以对于他们来说或许主要的任务在于商业和体验层面。即便如此，我们也会发现这些应用采用极简化设计的同时，应用图标也变得更鲜艳，更引人注目，说明他们也在寻求一个平衡，想在 UI 设计变得极简趋同的同时，仍然能保留核心的品牌基因。

图形

图形对于品牌表现的重要性不亚于颜色，不同于颜色的抽象感知，图形是一种相对具象的表现方式。

一旦某个特有的图形在用户心智中形成深刻印象，用户见到相似的图形组合都能往该图形联想，从而关系到图形背后所代表的品牌，这也是很多企业做品牌升级的时候 logo 都越来越简洁的原因，因为这样能有效降低用户的认知负担，提高品牌认知。

图形通常从 logo 本身提取，并在 UI 中延伸应用。比如马蜂窝、百度网盘、京东做品牌升级的时候都不约而同地从 logo 中提取了一个代表微笑的弧度，传递友好、温暖的品牌形象。

还有飞猪提取了 logo 中「猪的发型」用于搜索框，韩国的电商品牌11街也将 logo 延长作为界面中的搜索框。

纹理

通过提取品牌图形元素，再运用分形、排列、重复、平铺等设计手法形成品牌纹理，在 UI 设计或者运营推广设计方面都能有很好的运用。如下图所示，京东的启动页用了 Joy 的外形轮廓做旋转复制形成的纹理为背景；国外著名的聊天应用 WhatsApp，在聊天页的背景使用平铺的涂鸦插图纹理做为聊天背景，并在应用市场的截图中也得以应用；还有腾讯文档的启动页、登录页也都用了渐变的小菱形作为纹理，辅助品牌视觉表现。

UBER 之前在做品牌升级的时候，设计师将每个国家富有代表性的图形提炼出来， 然后重复运⽤平铺，形成⼀种时尚的⼏何纹理，运⽤到闪屏和线上线下的产品当中。

△ 图片来自UBER设计团队

字体

字体常常是很容易被忽略的设计要素，通常都会认为 UI 中的字体用系统默认的就行。其实字体对于品牌和产品气质的体现同样起着很大的作用，越来越多的品牌都把字体设计当成品牌基因中必不可少的一部分。

字体的选择需要契合产品功能特点与品牌调性。微信读书阅读时用的字体不是常见的黑体，而使用了方正宋三，文本秀丽、阅读醒目；每日故宫则使用了方正清刻悦宋体，字里行间隐含着历史古韵，渗透着文化气息；澎湃新闻使用方正准雅宋体，体现其作为新闻产品「专注时政与思想」的严肃一面。

英文字体的字体包比较小，能够很方便地嵌入应用当中，所以可以大胆地抛弃系统默认字体，而使用契合产品气质的英文字体。比如经常被用作数字字体的 Din、优雅经典的衬线字体 Playfair Display、⾕歌御用的 Roboto 同样非常简洁实用。

IP形象

越来越多的互联网产品喜欢直接用 IP 形象来作为产品的品牌符号，比如阿里动物园、京东、考拉海淘等。相较于图形或文字 logo，IP 形象更具象，更讨喜，在情感传递层面有着很大的优势，同时 IP 形象的可拓展性也很高，在线上运营、线下活动、周边物料等方面都可以很好运用。

在界面当中适当融入 IP 形象，能够提高产品趣味，愉悦用户，比如站酷的安卓版刷新时，骑着竹马的小Z，就很讨喜。

文案（语气）

很多人可能认为文案是产品或运营的事，不应该设计师来负责，其实只要影响到用户对产品品牌的感知就与设计有关。每个人有不同的性格，不同的性格有不同的说话方式，产品也是如此，文案所传递出来的语气是高冷、亲切、文艺、俏皮或严肃全取决于产品的性格。

除了上面说的这些，品牌的体现还有声音、动效、质感、栅格等，就不一一举例说明了。

3. 融入品牌触点

品牌触点是指用户有机会面对一个品牌信息的情景，这些接触点是品牌信息的主要来源，是决定用户对产品品牌印象好坏的关键。对于互联网产品而言，我们可以把品牌触点理解为用户从产生一个需求，然后通过某一个产品完成需求的过程中品牌信息得以展示的情境。

如何寻找品牌触点？

为了寻找品牌触点，我们参照用户体验地图，引入「品牌体验地图」的概念。和用户体验地图一样，品牌体验地图需要明确用户目标，提炼用户行为，找到用户完成目标的完整使用流程，不同的是品牌体验地图侧重点在于各个阶段用户对品牌的感知程度和融入品牌信念的机会点。

如果是线上线下或软硬件结合的产品还需要进一步把品牌体验地图延伸，以确保不遗漏每一个品牌融入的机会点。

互联网产品常见的品牌触点

启动页：知乎的启动页采用 slogan 加 logo 的方式来体现品牌，这也是绝大多数应用的做法；每日故宫启动的时候伴随着一声钟声，页面会有一个光线流动的动画，非常惊艳且极具仪式感，一下子就把用户带入故宫庄严的氛围当中。

图标：东家的每一个图标都融入了汉字印刷术字体的元素，体现其匠人的品牌基因；mono 则直接把产品名称「 M O N O」用于导航栏。

插图：Dropbox 的儿童风格的插画与 bilibili 的二次元插画都非常契合产品品牌特征。

除此之外，还有应用于商店截图介绍、预加载图、loading、动效、新手引导等。

总结

最近常有听到 UI 设计工作不好找的声音。的确，一方面市场对 UI 设计师的需求确实没那么高了，互联网行业已经过了拓荒时代，行业沉淀下了许多有价值的知识，也有许多非常好的 UI 组件和规范文档可以直接使用；另一方面，很多公司对于 UI 设计在整个产品生命周期中的价值普遍觉得不是非常重要，UI 设计部门只是一个业务支持部门，起不到主导作用。而如果 UI 设计师做的工作仅仅是把产品的原型文档变漂亮，肯定是不被稀罕了。但是，行业的发展从来都是优胜劣汰，为了不被市场淘汰，我们需要走出舒适圈，主动去挖掘更深层次的设计价值，提升自我价值。

之前看到过一篇文章里面提到的一个比喻很有意思，大概就是设计师和理发师一样。理发师分三种：一种是只会搞基础发型的，比如寸头、长发、老太太卷头等；一种是只会剪流行发型的（告诉你应该改变，剪目前最流行的某款发型，但实际上可能是他只擅长这款发型）；还有一种是最可遇不可求的，他根据你的脸型、性格等，用最简单的手法量身设计发型，让顾客的气质度立刻得到提升。设计师大体也分这几种：只会做基础设计的初级设计师（工）；技艺精湛，能搞定所有流行风格的高级设计师（匠）；能根据产品性格、特征量身打造设计风格的设计大师（师）。而要成为最后一种设计师不仅需要对产品业务和商业有深入了解，更重要的是对于品牌在整个产品链路中的应用与把控。

想要了解更多设计体验相关的知识可以关注我们部门的微信公众号：「极光用户体验中心」