整体架构

今天就带大家好好聊一聊可视化大屏设计中的字体、字号、字重、字体优化等一系类注意事项。字体篇主要分为四大模块：字体选择与字重、字号规范与应用、字体优化与交接、常用字体与推荐。

字体选择与字重

文字是界面中最核心的元素，是产品传达给用户的主要内容，它的承载体即是字体。从字体的最基本属性（字族、字类、字重、字号等）说起，熟悉字体的那些特征，了解字体在界面中的作用。

1、衬线体与无衬线体

衬线体

衬线又被称为“字脚”，衬线体就是有边角装饰的字体。我们常用的西文字体Times New Roman等；中文比较常见的比如宋体、明体等。

无衬线体

无衬线体则与衬线体相反，通常是机械和统一粗细的线条，没有边角的装饰。最具代表性的Arial、Helvetica的西文字体，中文比较常见的比如黑体，微软雅黑等。

总结

无衬线字体所具备的技术感和理性气质，更受科技型企业或品牌青睐，腾讯谷歌等互联网企业都是选用的无衬线体；衬线字体的优雅与复古，则常用于艺术性文字，时尚品牌等。

因此在具有浓厚技术的可视化氛围中，体现科技感和数字感，结合我们的观测体验，展示形式等，我们统一选用的字体是无衬线体。

2、中文字体

a、字体选择

在使用数字屏幕阅读时，字体的选择要选用无衬线体（比如黑体，微软雅黑）厚重一点，不可选用衬线体（比如宋体，书法体）比较单薄。

b、注意事项

标题可以用Bold，更厚重，更加醒目，且不需要长时间观看；正文由于需要长时间观看，因此采用Regular字重，观感以及体验更佳；

3、英文字体

a、字体选择

英文字体类型的使用，英文选择更明显的粗体，因为要展示数据，使得数据展示更加直观，依旧是选用无衬线体，比较推荐：D-DIN字体。

b、注意事项

字重用Regular，更加纤细精致，英文字体分为大小写，一般推荐使用纯大写模式，因为大写可以保证字体本身整齐，并且宽高都是一致的，对于排版以及展示会更加友好。

4、数字字体

a、字体选择

数字字体类型的使用，考虑画面的字体的种类不超过三种，并考虑到字体的统一性，数字的字体与英文字体保持统一，比较推荐：D-DIN字体。

b、注意事项

数字字体的字重尽量使用Bold，因为展示更加明显，数字的展示一般都为数据展示，在界面的展示中，一般数字字体会比同字号下中文小4-6px，因此展示是保证数据清晰显示，数字的字体大一点数据才能更清晰，更符合数据可视化展示。

数字字体尽量选用等距字体，比如数字“1”和“0”，有些字体的间距会相应的缩小，我们要选用的就是等距字体，这样在做一些列表数据对齐的时候，数据展示更加友好。

字号规范与应用

政府类客户对于文字大小粗细的追求可以说是非常的偏激，字体加大加粗几乎成了标配，这种需求下，我们能做的就是在原有规范的基础上尽量去提升字号和字重。

1、常规16:9屏

常规16：9指的是1920*1080的分辨率

在字体大小的选择上，参考了页面上常规大小，定义了一套关于不同尺寸下的标准字号，正常1080P页面，最小字号不小于16px。

此处字号并不是绝对，因为考虑到目标群体适老化的原因，我们主动提高了字体的大小，一切都是为了提高客户的观测体验，具体字号大小还需要参考设备清晰度，环境灯光，视距，人为原因等因素。

2、常规32:9屏

常规32：9指的是3840*1080的分辨率

在字体大小的选择上，其实是两块1080P的屏幕进行拼接，因此如果画面内容较多时，定义最小字号不小于16px。

如果画面内容较少时，具体字号大小还需要参考设备清晰度，环境灯光，视距等因素，对字体进行相应的放大，比例合适即可。

此处字号并不是绝对，因为考虑到目标群体适老化的原因，我们主动提高了字体的大小，一切都是为了提高客户的观测体验。

3、特殊尺寸屏

特殊尺寸指的是非主流的分辨率，比如2880*1920的分辨率

这块的字号大小比较难定义，因为需要考虑的因素很多，总体来说字号大小如果高度在1080px左右，那么就按16:9的字号规范来算。

如果高度高于1080且很多，则需要等比计算或者放大，具体实践出的准确数值还得需要根据大屏的实际情况来综合考虑，这里只是提供一些基础计算方式。

4、字号影响因素

字号的大小受到屏幕大小的影响；

字号的大小受到界面内容的影响；

字号的大小受到观测距离的影响；

字号的大小受到设备性能的影响；

字号的大小受到主观人为的影响；

字体优化与交接

给开发的字体太大怎么办？如何优化？开发采用默认字体去开发怎么办？开发用部署电脑没有这个字体去打发你又该怎么办？

1、优化字体

给开发的字体太大，占用内存该怎么办？

其实我们可以用一些特殊的方法对原有的字体包进行优化，比如英文字体，我们可以删除非必要的中文字体和数字，符号，只保留一些必要的英文字母。具体方法如下，我们可以用FontCreator软件去进行字体的优化与删减，并修改字体细节，重新命名发布。

同时如果有意向的同学，也可以用自己设计的字体去应用到开发，这样的操作不是一举两得吗？

优化字体教程：https://www.bilibili.com/video/av82311138

2、开发交接问题解析

a、开发采用默认字体去开发怎么办？

默认字体开发可能有时候会出现文字换行，或者文字放不下的情况，因为不同字体的字间距以及大小可能是不同的，因此在初期就需要跟开发协调好，跟设计效果图的字体保持同步，这样才能保证设计效果的还原。

b、本地部署电脑没有字体该怎么办？

字体的存放一般是有两种，一种是放到单独的服务器然后每次加载去服务器访问字体，另一种是跟代码放到一起。对于字体大小的要求。本地存储不需要考虑字体包的大小，云存储需要考虑字体包大小。

云存储一般字体包大小的话可以限制在2、3M左右，5、6M的字体包就已经非常大了，太大会影响我们字体的读取，画面加载很慢。

最优解就是在部署本地的电脑上安装你需要的字体，这样的话程序就自动读取，可以识别本地部署的字体；如果不支持本地化部署的，字体是存放在服务器或者是跟代码打包放一起的，可以要求开发在全局代码中多写几个备用的字体。

比如你是Windows系统，哪呢么自带的就是微软雅黑，IOS系统自带的就是苹方平台，会自动根据写出的代码按顺序筛选自带的系统字体。

常用字体与推荐

一些特别好用的字体，会在设计过程中提升画面视觉，因此给大家推荐并分享了一些可以做可视化大屏的商用中英文字体。

可视化商用免费字体链接: https://pan.baidu.com/s/1QCihCIs5OK0w-f0oFv8BQQ 提取码: owve

1、可视化常用中文字体

中文字体包含了一些可以做标题的一些造型比较好看的字体，比如优设标题黑，站酷高端黑体，卢帅正锐黑体，胡晓波男神体等等。可做正文字体的比如，苹方简体，思源黑体等等。

2、可视化常用英文/数字字体

英文字体和数字字体主要是分享了一些数据展示比较奇特的造型字体，比如：DS-digital、Furore、以及正常数据展示的D-DIN字体家族等。

全篇总结

1、字体的最基本属性：字族、字类、字重、字号，通过四种基本属性为切入点，精准的去讲述大屏可视化的字体规范和样式。

2、在可视化大屏设计中，字体更加偏向于无衬线体，无衬线字体所具备的技术感和理性气质，更受科技型企业或品牌青睐；

3、在可视化大屏中，展示数据的重要性不言而喻，因此要注意中文、英文、数字字体的选择以及注意事项，一切以数据展示更加明显为前提；

4、在不同屏幕中，可视化大屏的字号大小规范是有区别的，并且需要结合影响字号的五大因素：屏幕大小、界面内容、观测距离、设备性能、主观人为去制定字体规范；

5、通过FontCreator软件去对字体进行优化，掌握字体的删减发布以及交付开发的方法；

6、了解开发存储字体的两种形式，一种是本地化部署，一种是与代码打包服务器云存储，以及了解两种方式的优缺点；

7、了解可视化开发关于字体交接时的注意事项，可以通过自己的理解去解决工作中的关于字体的问题；

8、推荐了常用的可视化大屏的字体：中文字体、英文字体；

9、如果画面内容较少时，可以适当提高字号，反之亦然，比例合适即可。

10、可视化大屏设计字体规范不存在绝对字体规范。

整体架构

色彩篇主要分为：色彩三要素、配色方法、可视化中的颜色扩展、色彩选用原则、行业配色
主要想通过色彩的原理，配色的多种方法，以及如何拓展可视化界面中的元素颜色（文字，装饰，背景，弹框等），最后总结了颜色的记忆属性（行业配色）。

一、色彩三要素

色相

色相是色彩的首要特征，是区别各种不同色彩的最准确的标准。比如红色、黄色、蓝色等。色相可以具体到各个行业所代表的不同颜色，比如公安为蓝色，党建为红色，金融为橘色等。
色相只是颜色的另一种说法。

明度

明度可以简单理解为颜色的亮度，不同的颜色具有不同的明度，例如天蓝色就比红色的明度高，如绿色中由浅到深有粉绿、淡绿、翠绿等明度变化。
明度定义了颜色的明亮程度，从黑色到白色。

饱和度

饱和度也叫纯度，通常是指色彩的鲜艳度。
色彩的纯度强弱，是指色相感觉明确或含糊、鲜艳或混浊的程度。色彩的纯度变化，可以产生丰富的强弱不同的色相，而且使色彩产生韵味与美感。
是指颜色从纯度（100%）到灰度（0%）的取值范围。

二、配色方法

图片配色法

图片配色法可以运用PS工具，选择你钟意的一张图，拖进PS里，执行：滤镜-像素化-马赛克，就可以得到基于图片的马赛克像素点，然后吸取颜色即可。

插件配色法

插件配色法可以通过Eagle、美叶等软件直接获取图片色，非常之方便，此种方法相比较于图片配色法，更具科学性和准确性。

色环配色法

利用色环配色大家可能都知道，但是我们需要做到的是如何灵活的配色以及进行适量的处理。

1、邻近色配色法
三种颜色组成，观感更加舒适，色系搭配更舒服。

2、补色配色法
补色是指色环中两个对称的色块，他们是色环中相隔最远的两个颜色，因此两种颜色的对比也是最大的。

3、补色分割配色法
补色分割与补色配色相似。首先选定一个颜色，然后使用它一个邻近色，最后找出它的补色。（也叫等腰三角形配色）

4、三角配色法
三角色由三种颜色组成，是色环上平均分布的三种颜色，共同在色环上连接成三角形。这种方法更适合色彩鲜艳。

5、四角配色法
这种方法由两对补色组成，共4种颜色，其中只有一个是主色，另外三个颜色是辅助色。

三、可视化中的颜色扩展

通过对主色的叠加不同透明的黑色与白色（扩展白度和扩展黑度），可以扩展出背景、弹框、装饰、文字等颜色。

扩展白度

扩展白度就是为所有颜色创建出更多较浅的颜色（增加白色透明）。比如我们通过大幅提升主色的白度，可以作为项目的文本色，那么我们该如何增加白度呢？

扩展黑度

扩展黑度就是为所有颜色创建出更多较深的颜色（增加黑色透明）。比如我们通过大幅提升主色的黑度，可以作为项目的背景色和卡片底色，那么我们该如何增加黑度呢？

扩展背景

我们通过将主色增加黑度的方式，去定义背景色。具体数值：主色增加90%-95%黑色，作为背景色。

扩展弹框

我们通过将主色增加黑度的方式，去定义弹框色以及模块背景色。具体数值：主色增加75%-85%黑色，作为弹框色和模块背景色。

扩展装饰线

我们通过将主色增加黑度的方式，去定义装饰线色。具体数值：主色增加50%-70%黑色，作为装饰线的颜色。

扩展装饰点

我们通过将主色增加黑度的方式，去定义装饰点色。具体数值：主色增加30%-50%黑色，作为装饰点的颜色。

扩展文字

我们通过将主色增加白度的方式，去定义正文文字色。具体数值：主色增加90%-95%白色，作为正文的颜色（辅助文字可以减少一半透明度）。

扩展辅助色

饼图中可以会用到很多的颜色去配置，那我们应该如何去配置呢？

四、大屏色彩原则

遵守“631”“三不”“两多”这几个原则，可以让你在可视化中的色彩搭配能力更加自如。

“631”原则

运用配色631法则，将配色定义为主色60%，辅助色30%，对比色10%去贯穿整套界面。文字的颜色通过重要，普通，次要去分配，带有色彩倾向丰富页面视觉。

“三不”原则

1、不选用同一色系

同色系会使画面看起来对比度非常弱，色彩指代感弱，色彩之间不好拉开层级。

2、不选用颜色接近

邻近色会使画面感觉偏弱，没有强对比，画面层次感不足。

3、不选用同色透明

同色透明会让画面非常的灰，是可视化中的大忌，切勿使用。

“两多”原则

1、多选用对比色

强对比可以拉开视觉层级，突出画面，视觉至上。

2、多选用黑白灰

黑白灰可以使画面变的非常高级，并且画面细节度拉满。

五、行业大屏配色总结

色彩具有很强的记忆属性，因此用户会将他们感受到的内容与色彩联系起来。
可以从大量资源池中去寻找灵感，比如金融行业，我们可以从已知的金融元素都是红黄搭配的，因此我们在配色时肯定需要注意这一特征的。

交通行业

交通一般以蓝色为主调，配合红黄绿（红绿灯颜色）三种代表着道路拥挤程度，蓝色是大多数人最喜欢的颜色。由于蓝色自带的亲和力，它是数字产品设计中最常用的颜色（除了黑色和白色）。
含义： 平静、和平、安全、宁静、信任。
适用： 交通，公安，监控，政府机关。
缺点： 由于其流行性与适用性，作为品牌主色很难脱颖而出。

文旅行业

文化旅游代表着健康，和谐，自然，户外，绿色是大自然的颜色，人们对绿色的喜爱程度仅次于蓝色，绿色具有绝佳的亲和力。
含义： 健康、自然、平静、放松、成长。
适用： 医疗康复、生态、旅游。
缺点： 当绿色作为主色时，你可能需要再找一个颜色表示成功消息了。

公安行业

蓝色是大多数人最喜欢的颜色。由于蓝色自带的亲和力，它是数字产品设计中最常用的颜色（除了黑色和白色）。
含义： 平静、和平、安全、宁静、信任。
适用： 公安，监控，交通，政府机关。
缺点： 由于其流行性与适用性，作为品牌主色很难脱颖而出。

电力行业

电力行业一般以国家电网的绿色系为主，给人一种安全可靠，绿色环保的电力行业。
含义： 安全、可靠、绿色、环保。
适用： 电力，电网，网络安全。
缺点： 当绿色作为主色时，你可能需要再找一个颜色表示成功消息了。

生态行业

生态代表着健康，和谐，自然，绿色是大自然的颜色，人们对绿色的喜爱程度仅次于蓝色，绿色具有绝佳的亲和力。
含义： 健康、自然、平静、放松、成长。
适用： 医疗康复、生态、旅游。
缺点： 当绿色作为主色时，你可能需要再找一个颜色表示成功消息了。

金融行业

金融行业非常注重属性搭配，暖色系可以增加购买欲望，使人有温暖的感觉。橙色被认为是一种非常有活力和热情的颜色， 它促进活动和创造性思维。
含义： 创意、能量、热情、活跃、烦躁。
适用： 金融，证券，货币，党建。
缺点： 当橙色作为主色时，你可能需要另一种颜色作为警告色。

六、知识点总结

1、加强对色彩三要素：色相、明度、饱和度的认知；
2、掌握三种配色方法：图片配色法、插件配色法、色环配色法，以及了解配色的原理；
3、可视化界面中如何扩展颜色（白度，黑度，背景，弹框，装饰，文字，辅助色等）；
4、配色631原则，主色、辅助色、对比色应用原则；
5、“三不”原则：不选用同一色系、不选用颜色接近、不选用同色透明；
6、“两多”原则：多选用对比色、多选用黑白灰；
7、不同行业配色注意事项，通过元素搜集以及情绪版，配置不同行业可视化配色；
8、颜色的含义以及适用的地点；

什么是Resdesign

Redesign并不是一个简单的美化过程，视觉只是Redesign的一部分而不是全部。如果你做产品重构只是为了视觉更美观，从各种网站获取灵感用样机包装，没有任何产品架构以及交互逻辑，那么你的改版必定不会很完美。

但同时也会有很多人陷入这种误区，产品中过时的设计规范会使你的用户会流失到设计体系更好的竞品那里。重构你的产品设计语言，让他看起来更美观，这当然很好，但是也不能盲目的跟随设计趋势，没有任何逻辑做改版，这样会导致交互逻辑的紊乱以及产品架构不清晰。

今天阿勇就从网上任意摘选了一个产品功能需求有问题的一个页面来进行一个页面改版，一起来看看吧！

产品逻辑分析

1、产品主视觉指意不明，贵州省地质灾害防治指挥平台，地图处资源应集中于贵州省，且全国视角下可以下钻贵州省市区。

2、地质灾害防治主视觉应该着重展现崩塌、滑坡、泥石流、地裂缝、等地质现象的展示，并展示预警信息，以及现场地质现象视频反馈，以便于指定指挥方针。

3、此平台信息展示包含人员调度，现场指挥，设备数量，数据资源统计，覆盖区域，预警告警，各地区地质灾害排行，综合防治等信息的内容。

4、产品布局不合理，各区域所占比重需要重新估量，并且主视觉数据资源匮乏，内容单一。

5、业务逻辑没有很好的展现，各区域所要展现的数据信息不明确，业务紊乱。

6、画面中对于业务的理解不够深，导致画面空洞，数据展现量不够，产品失职。

如何进行页面分析

根据颜色：颜色不宜太多，对于特殊行业，固定的颜色是有固定的含义的，比如红橙黄蓝四色预警。

对于画面不合理的地方需要记录下来，对当前板块的内容进行正确的导向，比如你发现这个字体不合适，你的脑海中一定会有正确的用在此处的字体；比如间距，换行，字号等方面也是如此，心中得有一杆秤，去衡量设计的美感。

了解功能，分析数据之间的关系：

了解本产品的应用领域，以及产品功能，分析画面需要展示的数据有哪些，合理的通过设计展示数据之间的关系。

构思主题，围绕主题设计其他元素：

对原来的主题进行产品功能重构，设计新的配色方案，画面内容布局，标题以及主视觉的重新设计，围绕主题进行设计元素的制作。

分析数据，合理选用不同样式图表：

对各个数据进行分析，对内容进行编排，选择合适的图表去展示数据，合理的同时，又具有美感。

提取共性，结合需求做产品规划：

提取各个模块的设计形式的共性，并结合产品需求进行合理的规划，重构页面。

加强技法，了解可视化设计规范：

通过不同的设计技巧来表现画面的美感，制定属于产品的设计规范，并运用这些规范去规范页面布局以及设计，这是要在深度了解可视化设计的前提下。

优化-01

优化-02

将原本的区域设备数量排行，换成了各地区地质灾害数量排行，更能反映出地质灾害集中在哪些地域，事发频率以及爆发率进行排序，颜色上通过红橙黄来进行前三的强调，更有层次感。 

优化-03

将原本的区域在线设备，换成了数据资源统计，是为了更清晰的去表达具体日期下的设备数量情况同时可以避免数据表达不清晰的问题。 

更多组件样式

新增告警列表，设备数量，资源调度信息，展示历史告警记录，合计设备数量，总结资源调度数量，真正掌握自动化地质防治指挥。

最终修改成品

设计师应该跳脱出自己狭义的视角重新来审视“设计趋势”，为自己带来更多的可能性。

视觉只是表现层，理解业务，理解数据，合理表述才是核心。道理大家都懂，但真正的理解数据却是很多设计师迈不过去的门槛。

送给大家一句忠告，永远不要迷信产品原型，设计也不应该被原型所制约，要勇于用自己的设计思维去验证产品的合理性，要用商业眼光去对产品进行查漏补缺，要站在用户的立场上去试想产品的可能性。

一. SaaS的本质是什么

SaaS，英文全称 Software as a Service，意思为软件即服务。是通过网络提供软件服务，可以理解为一种软件交付模式，因为交付模式的不同也决定了和传统软件的差别。

在Saas之前传统软件需要购买后本地化部署，两者最大的区别在于，卖软件是将软件作为一个软件实体卖给客户了；而卖SaaS 软件的所有权还在厂商所有，提供的是“软件服务”。

Saas模式的提出者是Salesforce创始人——马克·贝尼奥夫(Marc Benioff) 在98年的时候提出。有两个原因促使马克·贝尼奥夫思考并提出Saas：

1. 传统软件部署实施交付的失败率非常高；

2. 软件的售卖价格非常高，很多中型、中小企业有需求但无法承担高昂的费用。

基于以上两个痛点及当时的现状卖软件给企业造成的影响，已经形成了恶性循环，市场受到严重的阻碍（据Gartner 高德纳公司（美国咨询公司）的调查研究曾表明：在所有CRM项目中大约55%没有达到软件用户的完整交付和预期目的，通俗的说是实施失败。）

从卖软件变成卖服务，其中的技术方式的改变、交易模式的改变，促成了软件时代的变革，对于传统软件公司来说，是一次大革命。原来卖软件给客户，一次性（或者分几次）收到钱了；改为卖服务后，这笔钱就不能在短周期内一次性收了，现行的SaaS模式通常是按照用户的使用年费来收取。

两者差别在于，软件商需要先主动改变可以短期的一次性高收入，从短期收入向长期收入的转变；

所以SaaS是长期主义的事情。

失败的Saas生意会出现一个问题：把长期生意做成了短期不可持续的生意；而短期生意带来的就是经营成本的剧增，导致生意不可持续。

所以，Saas模式决定了需要客户长期使用你的产品，才可以长期可持续赚钱，也就是通常意义上的客户终身价值（LTV）。

那如何做到客户长期使用，其实只有一种方式：长期为客户创造价值，做到帮客户成功（帮助客户的业务成功），从而持续续约。

吴昊老师，在《SaaS创业路线图》中的讲到：SaaS的本质是续费。这个观点我比较赞同，SaaS的经营本质在于可持续。

二.从新认识B端用户体验

那么，决定SaaS的成功因素是什么呢？

我认为决定性因素有三个方面：产品强大且灵活、用户体验优质、服务的有效支持。产品强大和服务的有效支持不言而喻，具体我们来聊聊用户体验的价值。

传统软件在一次交付实施后，客户付80%的钱，剩下的20%能不能收回来就不那么重要。但SaaS模式，客户每年进行续费，若产品使用及用户体验满意度低，带来的影响和后果可能是客户终止续费。

因此，和传统软件相比SaaS的用户体验的价值就更为重要，它直接影响SaaS的续费和流失。

相信“用户体验”这个词大家应该非常熟悉，接下来我们从新认识什么是用户体验？

官方的定义是：用户在使用产品过程中建立起来的一种主观感受。“用户体验”这一概念是唐纳德·诺曼（Donald Norman）在20世纪90年代中期提出的。产品大神俞军老师说过用户体验的本质是“ 用户最小成本满足需求 ”。

基于俞军老师的定义、我的理解和思考，我认为是帮助产品和用户：最小成本满足需求，同时创造「美·好」体验。

怎么理解，因为用户体验是满足商业目标的一种行为手段，我们来看下用户体验的需要考虑的双边关系，就比较好理解了。

如下图：左边是用户最小成本满足需求，右边是我们企业最高效的服务用户。

企业的本质就是创造商业价值，商业价值来源于用户价值，同时考虑实现商业价值的效果和效率。我们常常会听到“投入产出比”或者叫“投资回报率”；对于商业行为中的一环用户体验也如此。

所以，用户体验的核心的就是：平衡用户最小成本满足需求，及企业最小成本服务用户。完成价值交换同时，满足持续性。

由此，可以看出在SaaS的产品设计中，用户体验其实承担着一个比较重要的责任，因为它关系到成本的边际和规模化的影响，一头是产品一头是用户。

那么作为产品体验设计师，我们需要具备一定成本意识，做好“成本管控的设计”，更本质来说设计过程中我们应该：把复杂留给自己，把简单留给用户。

因为我们在设计的过程中把握产品的交互方式、使用流程，在用户认知和效率层面有较强的把控空间，充分做到的以“用户体验”出发；那后续销售、交付、客户成功的全链路服务过程的学习效率和服务效率会呈指数级上升。

产品设计，应该把复杂留给自己、把简单留给用户。

关于用户体验，就不得不介绍一下“ 用户体验要素”模型，个人认为这是所有产品经理和设计师可以贯穿整个职业生涯中都需要经常性、反复对照思考的设计模型。

用户体验设计的价值远不止于让产品的视觉、颜值提升，设计更大的价值在于深入业务、洞察用户，帮助业务梳理产品信息架构、任务流程、交互体验。

构建系统的用户使用方式和工作模式，从而达成用户目标；通过达成用户目标完成价值交换、以此完成商业交易达成商业目标。

三. SaaS如何进行用户体验设计

回顾Saas的商业模式，Saas的商业模式决定我们提供的这个服务不是靠人海战术，因为Saas软件即服务的含义是所提供的软件就等于提供自助化的服务，应该提供的是自助服务、开箱即用、开箱易用的服务。

那么Saas服务设计策略上，应该从降低系统使用门槛和提升用户的自主化服务两维度出发，根据这两个核心维度，我们构建了每刻SaaS产品体验的设计策略模型。

第一，设计“系统服务自动化”，这里的服务是功能使用的操作，符合“低认知、易上手”，那么从设计整个体系 需要遵守“易发现、低认知、高效率、有温度”的设计原则展开，以用户使用行为出发设计符合用户心智认知的功能形态和交互流程。

第二，设计“系统帮助自助化”，什么意思在全系统中构建帮助引导的自助化体系，用户需要帮助的时候提供人性化的引导帮助，我们从发现的维度、认知的维度，系统认知的维度，综合考虑用户系统的帮助引导。

设计原则，是指导我们做正确设计的方针。

设计原则的建立基于对用户使用体验全流程的基础上，以每刻报销的设计原则，围绕用户旅程、认知及行为出发构建。

1. 当用户接触系统从看出发，看见系统界面、发现操作入口；（发现）

2. 带着操作任务用户进入系统、看见导航、看见文字、看见按钮，都需要理解认知；（认知）

3.用户从何开始、如何操作，在完成整个业务事项的过程需要进行填写、选择、交互过程就产生了生产效率问题；（操作）

4. 当出现误操作或系统出错时，需要系统纠错提醒、容错的设计、帮助及引导，当完成整个业务事项后，用户产生一种的情绪感受，这个感受即是印象、评价、口碑。（感受）

紧紧围绕产品业务、用户处理特性业务的基础上，以终为始，回归到用户、业务、系统进行思考归纳的产物。

设计策略，是指导我们如何进行做正确的设计。

在SaaS产品分类上，常见的SaaS产品主要分为3类，行业SaaS、职能SaaS和通用SaaS。

每刻报销产品从核心业务来说是职能类Saas，从提升财务人员报销的发票审批、费用审核等效率展开，但报销的来源又源于普通员工的业务报销，业务报销发生又和所在行业的费用发生行为特征有一定相关性，所以是结合职能和行业Saas的属性，从用户体验的设计上需要考虑不同角色用户对于系统的业务理解、功能交织使用的不同诉求，这个设计过程探索研究是相对比较有难度的，以后有机会可以展开聊。

下图是每刻系统经过6年过程中统计的问题分布，分布比率呈现：认知问题 60%，效率问题 30%、情感问题10%。

关于帮助引导

我们在访谈客户调研发现，企业服务虽然客户已经用了好几年我们的系统，但财务部门还是经常性会碰到新入职员工的系统使用问题，甚至财务部门来新人时 以前系统发生的使用问题会从新出现一遍，所以企业服务有一个现象，客户是老客户，但新用户不断增加，新人一旦增加第一个遇到的问题就是认知问题，也辅证了我们对于Saas系统认知问题是用户体验的第一大问题。

帮助体系建立可以从系统层面体系化有效降低用户使用的认知成本，围绕用户角色的核心业务操作使用流程、洞察用户旅程上的疑惑和障碍点。用户首次进入系统要建立介绍和引导，足够简单、降低陌生感，来减少人力咨询回复的投入。

相比人，系统的自助化和自动化的服务，更具有复用性和规模效应。

本文小结

SaaS的商业模式，按年使用账号来收费和传统软件的付费模式区别非常大，因为需要先主动放弃自己本来可以唾手可得的收入，从短期收入向长期收入的转变。

在SaaS模式的时代，商业模式决定其必须关注客户成功、客户持续续费、LTV客户长期价值。

SaaS的产品更需要重视用户体验，用户体验的优劣决定其产品的长期发展，SaaS的用户体验设计则关注用户使用认知和行为效率，以及系统服务自主化设计和系统帮助自动化设计，用户体验将在产品成长期后半程，逐渐成为SaaS商业模式不可或缺的产品竞争力。

一、图标是什么

图标在界面设计中，虽然很小，但是却是界面中重要组成部分之一。通过将显示物体图形化的形式，将功能本意高度浓缩成一个图标，再通过视觉隐喻更快地让用户理解功能，同时图形与文字相比，图形更加生动形象，视觉能力更强、更便于记忆，用户可以根据图形快速定位功能位置。而顺着时代的发展，图标不再仅仅以工具的形式出现，更多的起到装饰页面，也不断延伸出不同的图标类型与图标设计风格。

1. 工具层面

1.1 降低用户理解成本

图形与复杂的文字相比，更加简洁，相应的识别效率也会更高。图标可以将复杂的文字描述高度浓缩成一个图标，通过视觉隐喻的方式让用户联想到现实生活中的物体，更直观地呈现图标代表的功能，更快理解功能的意义

1.2 减轻页面负担

像一些通用常见的图标，如搜索、播放按钮、更多等，仅需要一个图标就能清晰地传递功能意义给用户，省文字的描述，节省更多的页面空间与阅读压力。

1.3 更快定位功能位置

图标与文字相比有更丰富的表现形式与颜色，所以视觉冲击也就更强，也能更快地被识别出来，当用户熟悉了产品后，只需要通过图标就能快速找到想要的功能，当功能位置发生变化时，不需再重新阅读枯燥的文字找到对应的功能，只需从图标形状、颜色上区别，找到对应的功能。

2.装饰层面

2.1 传递品牌调性

随着互联网的发展，同类型的产品越来越多，要在各个产品中突围，除好用的功能外还要有特色的外观。在图标中融入能代表产品品牌的符号，强化品牌调性，保持图标的独特性，给用户留下深刻的印象，一看图标就知道是哪个产品。

2.2 增强产品吸引力

如今用户对产品的要求除了要有好用、有用的功能外，还希望有更好的视觉享受。一组好看、有趣的图标可以带给用户更好的第一印象，增强产品对用户的吸引力。

2.3 渲染气氛

根据不同的节日或运营活动，设计相应氛围的图标，帮助产品渲染节日氛围或加强用户对产品主题运营活动的感知力度

二、图标绘制的基本原则

1.  可识别性

图标与文字在一定程度上起到相同的作用，都是通过特定的表现形式来传达某种信息给用户。顺着时代发展，图标的设计更精细化，产生了更多的设计风格，但图标的本质还是没变的，是用户进入功能的入口。因此，一个能被用户快速识别、快速理解的图标相当重要，是图标设计的基本要求。我们绘制图标时要尽量去掉辅助、无用的元素，保留最清晰、直接、有代表性的元素。

2. 风格统一

设计师在设计图标时，除了会根据产品类型、用户群体、品牌调性等因素决定使用哪种图标风格外，还要根据图标的具体使用位置，因此在一个产品中，常常会出现多种风格类型的图标，而风格统一指的是在某个特定功能模块内的图标风格要保持一致，是面性的图标就是面性，是毛玻璃效果就是毛玻璃效果。

3. 大小统一

圆形、正方形、三角形，在这三个图形虽然高度相同，但是整体上三个图形的视觉重量并不相同。在实际的操作中，界面图标不会由单一的形状组合，所以形状各异导致每一个图标的视觉体积都会有所区别，因此不能单纯地利用统一的宽高或线去界别图标的大小，要根据图标的的特征去判断。在平常的设计中，我通常会利用正方形来辅助图标绘制，在保持形状特征下，让正方形内的区域占满，哪个方向缺得越多，就往那个方向移动一点。

4. 色彩统一

色彩的统一指的是图标色彩在饱和度与明度上保持特征统一，数值在一定的范围内发生改变；而在色相的选择上保持匹配度，像一些单色系的图标，通常使用的都是产品的主题色，而多彩图标，常会以主题色为主，拓展出临近色、相似色、对比色，目前市面上大多数的图标颜色会使用同类色与邻近色。对于饱和度与明度的调节，我通过利用灰度模式进行辅助，使图标视觉更统一柔和，不会出现其中一个亮眼或暗沉。

5. 占比统一

5.1 正负形占比统一

正负形的合理使用是图标能否传达准确意思的关键，因此也是常会出现的组成元素。在绘制图标的正负形，注意保持占比统一，其中某个图形正负形太大或太小，会显得突兀、别扭，失去统一性，界面整体质感会大大降低。

5.2 颜色占比统一

在绘制图标时，确定图标中的主色和辅色，绘制时尽量保证主色和辅色占比相同，保持图标的统一性。

6. 疏密统一

有规律地将线条组织在一起，利于形成统一的视觉风格。同时，线条间可以保持一定的留白，不需要太密集，太密集的线性图标，缩小后反而会影响识别。同时，给图标留出一些空间，使线与线之间不会太挤，增强图标的呼吸感。

安利一个国外的图标大神Myicons✨，简单的线性图标一样可以很精致。

三、不同风格的图标

目前市面上的图标主要有四种类型，分别是：线性图标、面性图标、写实拟物图标和三维立体图标。而不同的图标中组合的元素都会有一些差异，相同类型的图标中也会有不同的图标风格。

1. 线性图标

线性图标主要还是由线性组成，设计师可以通过改变线的粗细、线的端点、圆角大小或加入一些面性元素在里面来使线性图标更加丰富、有趣，但整体来说纯线性图标更纤细、简洁，使得视觉冲击力稍微弱了些。

1.1.1 单色

单色是线性最基础的表达方式，这种设计风格单调、视觉冲击较差，但是制作难度低，设计所耗费的时间页更断，因此常常会出现在个人中心页中，仅需要有图标显示功能入口，设计要求并不高的功能模块中。

1.1.2 双色

双色图标与单色图标相比，视觉冲击力更强，应用范围更广，通常会融入品牌主色，是除了线面图标外出现在首页中的线性图标。因为双色图标可以加入品牌色，增强品牌感的同时，使图标增加了设计感，不会像单色图标那么单调乏味，因此双色图标也会以“次要功能”的形式出现在首页当中。

像在“去哪儿旅行App”和“平安银行App”中，页面已经存在一组视觉冲击、视觉层级更高的一组面性图标，但是因为业务需求露出更多功能入口，因此就可以使用线性图标这种视觉冲击力弱一点的图标搭配，既不会抢走主视觉，也能满足业务需求。

1.1.3 断点图标

断点图标在目前的app图标设计上较少使用。虽然断点风格图标在表达上有一定的局限性，但是图标设计感更强，图标更有趣味性。

断点图标并不是随便删除某个描点，在断点的位置选择上和断点的大小都是要注意的地方。断点位置的选择要注意两点：

1 ) 保持相同角度，能更好地增强图标的协调性，避免造成图标的视觉混乱降低用户的视觉体验。

2 ) 选择在线的拐角处，利用连续性原理，在一定的路径下使这种线的断裂保持视觉连贯性，保持图形整体性。

1.1.4 线面结合

在原本的线性图标上加入色块，就会产生新的设计风格--线面图标。线面图标比较特殊，图标的视觉层级会随着图标中包含的色块大小而变化，色块越大，视觉冲击力也越强。因此在设计线面结合图标时，要先确定图标在该页面中的重要程度，如果是主要功能则将色块的占比加大。

1.2 线的影响

图标中的线主要由两个元素组成，一个是线的粗细，一个是线的端点，而这两个元素也是主要控制线性图标的性格。以常用的48px图标盒子为例，常用线的粗细有2px、3px、4px，图标的线越粗图标越有力量感反之图标越纤细；而图标的圆角越小时图标越稳重、专业，像一些办公软件、金融产品，图标的圆角就比较小。圆角越大图标越饱满亲和力更强，像一些儿童学习类软件就会使用大圆角的图标设计。

因此，图标的线粗细与圆角大小，都根据不同产品类型与目标用户确定。而大多数线性图标主要有四种基础造型：纤细+小圆角、纤细+大圆角、粗描边+小圆角/无圆角、粗描边+大圆角。

1.2.1 纤细+小圆角

精致、严谨，多用在银行、新闻类APP。没有圆角，会使图标更加尖锐，对于银行类APP会给人一种威胁，但是太大的圆角，显得有点轻浮、可爱，不符合银行庄严的感觉，所以稍微添加一些圆角，使图标更有亲和力的同时，也保留一些庄严的感觉。

1.2.2 纤细+大圆角

更加精致、有亲和力，这种风格是目前市面上软件使用得最多的一种线性图标风格。

1.2.3 粗描边+无圆角/小圆角

粗旷、个性、有很强的力量感。更多的用在运动、汽车这类主要用户倾向男性的软件，同时也会在一些潮流类电商软件中出现，凸显更有个性的设计风格。

1.2.4 粗描边+大圆角

圆润、可爱、亲和力强，常用在偏向儿童的产品

2. 面性图标

面性图标时软件使用的最多的一种图标类型，设计师通过改变色块、图形圆角、正负形和底托等元素，让面性图标呈现不同的设计风格，但无论是哪种设计风格，面性图标设计冲击力相比面性图标更强，因此市面上大多数核心功能都会用到面性图标来提高功能的设计层级，让功能在页面中更加突出。

2.1 扁平风格扁平风格的图标常为单色图标，图标整体没有渐变、高光、阴影等装饰性设计效果，因此更加简洁，更突出功能本身，图标功能性更强，图标制作成本低，曾经也是风靡一时。但扁平风格的图标缺少亮点与制作成本的原因，导致图标同质化严重，缺少特点，很难被人记住，因此现在很少被使用。

2.2 渐变色块

在扁平风的基础上，在色块上添加渐变色，在保留了扁平图标的功能性外，使图标色彩更加丰富，在不同类型的软件中都可以使用这种风格，算是一个比较百搭的图标风格。同时渐变色块也是很多面性图标的组合基础，在渐变色块这个基础上还可以添加不同的效果形成不同设计风格。

在设计渐变色块风格的图标时要注意两点：

1 ) 市面上的app都会选择同类色作为渐变色，然后通过改变颜色的饱和度，使渐变色的明亮对比更加明显的同时，颜色过渡也更加柔和舒服，使图标更有通透感，增加视觉冲击力。

2 ) 在设计这种有白色色块在顶部的图标时，可以给色块添加一个浅浅的透明渐变，让色块过渡自然一些，同时也可以添加一层浅浅的阴影，增加层次感。

2.3 图层叠加

图层叠加风格的图标看上去像两个透明图层叠加在一起的感觉，图标层次感强，细节也更加丰富，图标风格更新颖、更年轻化，因此如果在设计一个年轻人使用或者希望打造年轻化页面感受的时候，可以尝试使用图层叠加风格。

绘制图层叠加风格的图标时要注意：

1 ) 重叠在一起的那个色块是通过布尔运算得到的，并不是通过简单的透明图层得到的。而重叠在一起的那个色块也不宜过于显眼，毕竟看的是图标的整体。因此可以参考一下“智行火车票”，通过改变饱和度5%到10%和使用15%左右的同类色，就可以让用户看得清图标的变化，同时也不会是色块太突兀影响观感。

2 ) 尽量统一叠加部分图形与图标之间的占比。

2.4 毛玻璃

毛玻璃是近年最火的一种设计风格，不仅设计风格新颖、特别，而且还有很强的质感表现，因此不仅在金融产品，还是生鲜产品或票务产品，都有毛玻璃风格的图标。

而在设计毛玻璃图标时，里面也有很多细节需要注意：

1 ) 背景模糊效果不需要太大，有一种若隐若现的感觉就可以。如果调太大，可能就看不出是毛玻璃效果了。

2 ) 添加背景模糊效果的图层不需要用纯白色。像百度这种同类色配色的毛玻璃图标，只需要将图标的主色调低饱和度后，就可以使用。这样的好处是不仅让图标颜色过渡更加自然，同时有更多的组合方式、更多的层次。

3 ) 使用边缘光。毛玻璃图标有很多相互重叠的图形，如果重叠的图形颜色相近的话，图形边缘就会被弱化，使用边缘光可以明确图形边界，增加层次感。同时使用边缘光，还可以为图形塑造类似玻璃的厚度，细节更加丰富。

2.5 晶白风格

晶白类图标利用圆角正方形或圆形作为底托再在上面添加一个主色为白色的图标，然后通过调节透明度、投影、渐变给图标添加一些质感，是常见的图标风格，也是使用了很久的一种设计风格。

后面也延伸出了另一种设计风格图标主题通常不会是统一的造型，像喜马拉雅这种图标，图标本身元素复杂、细节较多，形状也更加不可控，因此用一个浅色圆形底托，将他们统一起来。不仅可以将复杂的图形统一起来，还可以添加吸引人眼球的渐变色更好地增加图标的视觉占比，有更强的视觉冲击感。

在绘制晶白风格时，注意两点：

1 ) 可以适当改变底托图形的形状，增强差异化。

2 ) 统一光源，越白的地方越亮，注意控制好透明度的变化与角度。

2.6 实物展示

这类图标会出现在生鲜类、药品类、潮流电商类产品中，因为使用图标很难将这些类型概括起来，直接使用图片展示更加直观，但因为图片细节、元素更多更复杂，如果使用太多会使图标看起来很杂乱。

3. 写实向图标

写实向图标模拟现实中的物体，更贴近生活，用户对这类图标理解能力也更强，绘制难度也更高，绘制时间也更长。写实向图标除了基本的色块组合、颜色搭配外，还有更多的透视与光影来增强实感。常常用在运营设计上，或用在一些特殊界面模块从而增强视觉层级。

3.1 轻拟物图标

轻拟物图标是最近很好的的设计风格，但是轻拟物图标出现在界面设计上还是比较少的。因为轻拟物图标元素比较复杂，视觉冲击力强，放在界面上有可能抢走用户对核心内容的关注度，通常会运用在运营设计长图、弹窗、核心功能等。

而绘制轻拟物图标，主要注意的是光影的打造。光影主要由这几个元素组成：亮面、暗面、明暗交接线、反光。在绘制轻拟物图标时，主要注意以下几点：

1 ) 在绘制轻拟物图标时，不一定需要使用统一色相中的颜色，可以通过改变颜色的饱和度明度的对比和冷暖色的对比来营造光影，使图标色彩更丰富、对比更明显。

2 ) 反光可以使用图标主色的对比色，降低饱和度，提高明度，运用在轻拟物图标边缘，使边缘更更清晰，不会糊在一起，图标整体立体感更强。

3 ) 明暗对比越明显，轻拟物图标越显通透、立体。

3.2 2.5D图标

2.5D曾经是很火的一种设计风格，但是现在已经逐渐被轻拟物与建模替代。2.5D图标固定展示了三个面，有很强的立体感，常常运用在科技类的网站设计中。

在绘制2.5D风格图标时，要注意：

1)统一好图标的厚度。

3.3 3D图标

随着时代进步，3D逐渐成为一个主流的设计风格。通过专业软件给予了图形材质质感、真实的光影，更加贴近生活真实物件，同时还可以配合动效的设计，有很强的视觉冲击力和新鲜感。常常出现在网页设计中、运营设计中。目前绘制3D图标主要用blender和C4D，C4D在渲染方面有oc的加持，渲染效果直接拉满；Blender则是完全免费的软件，目前热度也是疯狂涨，在渲染方面虽然没有oc好，但是还是可以满足日常工作。

而在绘制3D图标需要注意以下几点：

1 ) 统一主光源方向。建模里面会出现很多打光类型，如主光、辅光（有时不止一个）、边缘光等。

2 ) 统一摄像机位置。摄像机与物体的距离、角度影响渲染的最终效果。

3 ) 用数值定义物体大小。建模软件不像绘图软件那样强调物体的数值大小，拉远看物体就是小，拉近看就是大，做一个物体时还好，但是要做一组3D图标时，就要定义好物体的大小，使图标更加统一。

四、如何确定使用哪种类型的图标

不同风格的图标有着不同的特点，设计师要根据图标放置位置和功能选择图标类型。其中最有决定性的因素就是图标的重量，而影响图标重量的因素有：占比、颜色、细节元素。线性图标在界面中占比较少，因此看起来会更加简洁，视觉冲击力弱，常用在重要程度低，不需要突出展示的功能上；面性图标占比更高，视觉上会更加饱满，同时颜色色块使图标更加显眼，视觉冲击力得到力增强，使用户对图标的感知力更高，是最常用的图标类型，用在各个重要功能入口上；轻拟物和3D图标除了占比高、颜色丰富，还有各种光影、材质的细节，图标元素更多，视觉冲击力也更强了，也因为图标复杂、视觉冲击力强，因此很少出现在界面上，通常运用在一些特殊运营入口或需要吸引用户的大模块中。

不同的类型在界面中也会搭配出现。

五、图标的绘制

1. 图标盒子

图标盒子是辅助绘制图标的一个工具，帮助设计师在设计图标时更好地规范好各个图标的尺寸大小。而图标盒子也有很多种，我最常用的是48*48px，这个尺寸对于线条的控制比较方便，通常用1px、2px、3px。

工具始终都是工具，界面图标不会由单一的形状组合，所以形状各异导致每一个图标的视觉体积都会有所区别，因此不能单纯地利用统一的宽高或线去界别图标的大小，要根据图标的的特征去判断。在平常的设计中，我通常会利用正方形来辅助图标绘制，在保持形状特征下，让正方形内的区域占满，哪个地方缺得越多，哪个地方就拉伸一点。

2. 图标的绘制方法

图标中会存在标准化图标，像删除就是一个垃圾桶、像首页通常是一个家的图标、还有搜索则是放大镜的图，照片是两个山一个太阳，这些图标都习惯以这种表达方式出现，用户已经习惯了这种表现形式，因此对于标准化图标，尽量维持以往的变现形式，让用户更好地理解图标意思。

非标准化图标可以细分为具象与抽象，对于具象类图标，现实中有实物可以参照。这类图标的设计较为简单，可以在某度上寻找相关照片，根据实物的造型进行提炼和简化。

抽象图标则较为复杂，通常是某些特定行为的名词，没有具体直接的参照物。因此在设计前，我们要先充分理解功能本身，这个功能是什么、用户怎么用，然后提炼关键词，接着根据关键词发散思维，寻找相关联的图形来表示含义。例如“社区”功能，功能目的是提供一个让用户互相交流的环境，同时吸引无目的的用户逛起来发现感兴趣的话题，让更多的信息流得到曝光从功能目的中提炼一下关键词：聚在一起、发现、交流。接着发散思维进行脑暴，聚在一起：一群人-圈子-同一个世界的人-星球，发现：看-眼睛；寻找-望远镜-雷达-指南针，交流：聊天-聊天气泡-声波。

六、图标的使用场景

图标运用在功能入口上是最基础的使用场景之一，如首页中的金刚区、个人中心都会用到很多图标作为功能入口。

1. 金刚区

目前国内的APP包含的功能有很多，而金刚区的作用就整合产品功能并放置在首页中，提高这些功能的曝光量，给其他功能引流，让更多用户知道或使用上产品功能，增强用户对产品的粘性。像美团，很多人对他的了解是一个外卖工具，但它里面还有很多其他功能，使用金刚区展示它多元化的服务。

金刚区图标通常会有1～3行，根据业务具体需求做调整，在每行中会有4～5个图标。尺寸范围一般在40px～48px左右（@1x），同时会根据具体的业务需求，调整大小，最终都是一预览效果为准。

2. 个人中心

个人中心是个人类型功能、运营活动入口和工具的集合地，是除了金刚区外，含图标最多的一个地方。个人中心中包含很多不同类型的功能，可以使用卡片式的设计，将功能图标更好地分类。在图标风格的选择上，个人类型功能是最重要的功能，通常会以面性风格放置在顶部，如果个人中心中需要展示运营入口时，需要减弱个人类型功能图标的视觉冲击，会使用线性风格图标。

3. 运营入口

运营入口主要作用是让用户点击后跳转到产品活动页，因此具有强视觉冲击力的图标，会更吸引用户眼球，从而提高点击运营入口的机会。

因此运营入口上，通常会使用面性图标、写实向图标或3d图标。因为写实向图标或3D图标可以提高视觉层级，因此经常运用在主要运营板块上，而面性图标相比下较弱，当页面已存在一个主视觉或主要功能时，运用在运营板块上。

4. 主题板块

在软件中会有很多不同主题的信息板块，同时信息板块间有较大的差异，如果全部展示出来会使页面样式不同统一、信息混乱导致降低用户的阅读体验。因此使用主题板块，将不同主题信息集中在一起，然后露出部分关键信息在页面中，保证视觉统一的同时，还可以起到流量分发的作用，让用户在茫茫信息流中快速找到自己感兴趣的方向，提供用户阅读体验。

纯文字的排版在信息流中略显枯燥，而图标在主题板块中起到润色主题的作用，渲染主题气氛，提高不同主题板块的识别度与差异化。对于一些长标题的主题板块，只需要记住图标就能快速定位主题板块位置。

5. 底部tab栏

底部tab栏功能数量通常在2～5个，在设计时，要设计点击前和点击后两个图标状态，同时帮助两个状态是有明显的变化。底部tab栏图标大小通常在22px（@1x）左右，而图标底下的文字时10px（@1x）。底部tab栏作为最常出现的区域，是传达产品品牌感、提升产品辨识度、记忆点的重要区域，很多产品都会在底部tab栏的图标设计上加入品牌元素，增强辨识度。

七、如何提高图标设计能力

1. 阶段一：临摹

临摹是人类学习一个新技能开始，就像婴儿学习父母说话一样。但是一开始很多都不会临摹，或者照着画也不会，那我们应该如何去做？

1.1 临摹效果不佳

1 ) 提高审美能力，多看一些主流的图标，可以上追波看看目前流行的设计风格，不行的话就去看看大厂都在画怎样的图标。

2 ) 明确自己的能力，对自己目前的设计水平有一个客观的评价，到一个怎样的水平。很多人都急于求成，最基础的线性图标都不会就上来搞轻拟物，画来画去都不好看，最后就放弃了。

3 ) 敢于支出自己的不足，许多人画了许多时间去画一组图标，就很容易被自己催眠，以为自己已经画得很好了，其实还会有很多不足。所以我们要敢于指出自己的不足，在前期临摹阶段，画完后多去对比原作，自 己有哪些地方没有原作做得好的

1.2 会了，但没完全会

什么是会了，指的是可以绘制出于优秀原作一样的图标；什么是没完全会，指的是不知道原作是怎么达到这个好看的效果的。而且很重要的一点是，你临摹的作品可能也有一些不好，需要改进的地方，以此在这个阶段我们要做的是：

1 ) 多看别人总结的知识点，知道如何去判断一个图标是否还有可以改进的地方，这样绘制是不是正确的

2 ) 懂得总结与思考，原作是用来什么样的手法让我觉得它是好看的，这些技法怎么用，还可以用在哪

2. 阶段二：半原创

临摹是一个提升自己的手法，但不代表可以直接用到自己的作品中，直接复制别人的设计，并不叫设计师，复制粘贴谁不会啊，所以在懂得如何临摹后，我们要敢于尝试半原创。这里说的半原创不是指在别人图标的基础上加上两笔就是半原创，而是要吸取了优秀图标的优点后，重新设计出一个有相同特点的图标。那我们应该如何半原创呢？

1 ) 还是多看，但是不同于临摹阶段，我们在临摹的时候还要多想，这个图标的特点是什么、怎么做、还能怎么用，积累图标不同的表现形式2 ) 多练，这个建立在多临摹上，目的知道别人的技法是什么做的，练习了不同的技法后，将它们再融合在一起

3. 阶段三：原创

第三个阶段，也是最难得阶段。目前很多情况都是只能成为融图设计师，将不同作品优秀的点组合起来。但如果要建立自己的风格也是要做融图设计师的基础上，多想、多尝试，敢于突破，在一次次的融图后，发现出自己的特点，为自己的作品打上自己标签，输出具有差异化特点的设计。最有印象的就是夸克的设计，品牌特色很明显，其实我们每个人也可以成为一个品牌，只要我们足够努力