思维导图，英文名叫 The Mind Map，是一种用来开展、记录发散性思维的图形工具。可以说是目前职业办公中使用最广泛最基础的图形工具，无论是做故事大纲、头脑风暴、任务拆解，都会进行应用。
通常，思维导图会有一个到两个中心主题，然后中心会扩展出不同的子节点，并使用连线进行关联。每个子节点，都可以继续建立更下级的节点，依次类推。
通过这种方法，我们可以建立出比较结构化的信息层级，中心主题是宏观内核，越往下级拓展的，就是越细节的信息。
而随着思维导图软件的发展和完善，除中心主题、连线、节点外，我们还可以在这个图形中添加关联、备注、图标、待办、图片和附件等内容。创建思维导图的工具在今天随手可得，无论是桌面端还是网页端，想要创建思维导图，从下方选择一个即可。
思维导图存在的价值，并不仅仅是我们要做一个方便别人理解的架构图形，而是通过它本身包含的结构层级属性，来帮助我们梳理自己的思路、想法、灵感。比如你要搞清楚进阶设计师应该具备哪些能力，如何进行学习，那就可以通过思考，查找资料，以树状图的形式记录和整理。
它最大的价值，就是帮助我们在绘制的过程规范我们的思维形式，能针对不同节点实现聚焦和深入探索与思考。而不让想法特别离散一会儿插画，一会儿体验，过一会儿又是平面四要素般毫无章法。
在互联网团队中，使用思维导图输出除了日常工作内容计划外，最多应用于和产品需求相关的表述上，有一些专用的思维导图类型需要我们认识，包含下面三种：
- 产品功能结构图
- 产品页面结构图
- 产品信息结构图
下面我们将从这三个思维导图入手，了解如何实现它们的输出，以及如果应用思维导图工具来提升日常工作的效率，以及规划自己的职业技能发展。
功能、页面、信息结构图，都是产品经理输出的内容产物，通常会置入到 PRD 中供团队成员查看和理解。但是，这三种思维导图不仅看起来差别不大，而且很容易搞混。
我们首先介绍的第一个结构图类型，叫产品功能结构图，用来解释产品本身功能的树状图。如果学习过用户体验五要素的同学，就可以把它理解成它决定的就是范围层的内容。
通常，产品再开始进行一个新产品功能规划的时候，第一件事就是启动思维导图工具，开始整理该产品会包含的具体功能，和对应的功能层级，这应该非常好理解。
比如我们用潮汐这个 APP 举例，如果我要规划一个这样的产品，我会先考虑它包含的核心功能白噪音，然后向后思考白噪音包含哪些种类，如专注、睡眠、小憩、呼吸。每个白噪音类型里，我再根据对应场景提供更细节的功能出来。
然后，我再想到，白噪音不是只有固定一种的，而是包含非常多种，是不是就该提供一个放不同白噪音的地方，于是就增加了探索的模块。在这个模块里，包含搜索、广告位推荐、分类推荐功能。每个独立的白噪音，还可以对它进行收藏、分享等功能。
再然后，就还有添加用户系统，增加会员功能，统计功能，个性化定制等，就可以进一步完善这个图表将所有想到的功能多罗列出来。
虽然产品需求的推导前面还有别的专业分析步骤，但落实到具体包含功能的制定上，过程和结果都如上方的一致。通过思维导图逐个模块添加和细化，明确它们的类型、层级。
一个修订完整的功能结构图，就能清晰的表示这款产品包含了哪些功能和服务。
产品页面结构图，是一个和功能结构图非常容易搞混的图形。很多产品经理在 PRD 中会在做完功能结构图以后紧跟页面结构图，两张图形中会包含大量重复的名称和相似的结构，让新手一头雾水。
页面结构图等同于体验五要素中的结构层，用来诠释产品包含的页面、层级、分支。
首先明确一个概念，就是功能并不等于页面。
一个页面中可能包含多个功能，比如专注页面中，就包含了时间、开始、暂停、停止、模式、标签、场景设置的功能。
而一个功能模块，也可能包含多个页面，比如我们在功能结构图中可能会简单表示添加声音的功能，但这个管理需要比较多的操作步骤和页面来完成。
既然我们知道功能和页面不是一回事，那么页面的类型、结构有没有必要表现呢？答案必然是肯定的，页面也需要通过树状图做完整的梳理并展示。
一个产品有什么样的页面，层级如何制定，都是基于功能分析出来的，合理的情况，是先把功能定好，再想怎么做页面。功能是产品的内核，而页面涉及到具体的表现形式。
所以，外行在规划一个产品的时候，往往是从页面入手，告诉你整个产品包含了哪些页面，大概的层级，但对功能的具体规划却往往语焉不详。
页面结构图对于设计师来说至关重要，因为它决定了我们应该设计哪些页面，可以说是决定了我们的版本设计任务和工作量。不管产品有没有提供这个图形，我们都要自己梳理出来。
功能和页面的问题解决了，就所有结构性问题都解决了嘛？显然还没有。
五要素中还包含一个框架层和视觉层，视觉层指具体页面的样式，那得用设计图来表示，显然不是思维导图工具能实现的。那么，就剩下框架层一个还需要我们注意了。
框架层的表现无外乎就是单个页面包含的内容、交互、布局。交互和布局都是由原型图来呈现的，但不管你有什么跨时代的交互思路还是殿堂级的排版能力，都要面对一个严肃的问题 —— 界面里要摆啥？
虽说功能地图有一定的描述，但显然还是比较宽泛模糊的，设计师是需要更具体的字段内容的。这就是信息结构图存在的价值，描述每个功能模块或页面下方，包含哪些信息字段内容。
比如在白噪音的详情页中，要放哪些信息？就一个音频文件，我们要往里塞什么好。如果作为产品我的出发点就会是丰富这个页面的一些信息，让用户更有欲望使用，或者进行识别。
仔细整理这些信息，你会发现不少页面虽然看起来简单，但是实际信息量一点都不少。而这些信息，不是设计师还是开发随手做的，都是经过产品规划才落地的。
每个具体的信息，类似开发环境中常说的 “字段”，它也确实是产品经理工作中后续和开发梳理字段表的雏形。
所以，到这里我们也就基本了解了项目中最常用的三个具体思维导图。它们包含一定的先后顺序，“功能 —— 页面 —— 信息” 依次推导，从核心到细节。
梳理这些内容，对后续我们展示、理解项目会起到非常积极的作用，也是 PRD 文档中必备的图形元素之一。即使项目环境中不需要设计师自己上手，你也要保证可以明白它们各自的作用，以及看懂它们在实际文档中表述的内容。
除了在产品说明中使用思维导图，它还可以应用在我们工作和学习领域中的方方面面。我们就分别从这两个领域切入来讲一下设计师如何利用思维导图，提升自身能效。
在工作上，设计师可能也需要在竞品分析里输出上面这3种图形，但还有很多别的工作场景需要我们应用，最常见的莫过于工作待办事项的整理了。
比如我们对一整个项目的工作内容进行梳理和评估，那我们就可以根据时间线或者内容类型，将所有要做的事情梳理成树状图。
或者，做用户现场访谈这种调研，一个跨度接近一周的工作，我们也可以用思维导图将前后需要完成的工作和顺序解构记录下来。
任何复杂的工作流程，只要经过结构化的拆解，就可以细化成更容易理解和执行的步骤。也更能帮助我们判断工作量和制定时间计划。
在学习领域上，思维导图最常用的在我看来有两个方向，一个是对自己知识体系的整理，另一个是对于学科、书本的知识点整理。
虽然我们可能在各个干货或者公开课里，看到很多有关职业技能树的说明，并伴随不同的通行类型。但它们都只是对内容讲解和输出的一种抽象图形解释，用来辅助作者意图的表达。
比如我们 B 端课程中使用的 B 端设计师技能掌握图形，采取圆的形式，这样讲解起来更方便，也更好展现流程（树状图会太长根本放不下去）。
但对于个人的实际学习来说，这种图形是没办法直接进行记忆的，而且显然可以整理得更细致，所以我们就可以通过思维导图的形式，对自己职业需要掌握的技能整理下来，作为自己的学习目标。
一个灵活的思维导图，会随着你对职业的认识加深和计划的调整始终处于一个更新的状态，辅助你对当前已经掌握的，和准备掌握的技能有更全面的认识。强烈建议所有同学都培养这种习惯。
再者，就是进入到更细节的领域，比如一个简单的技能，还是一本书，通过思维导图完成知识点的拆解和整理。这在网上是最常见的思维导图，就不在这里多做介绍了。
最后一点，就要简单解释思维导图的输出了。如果我们做的思维导图仅仅是给自己看的，那么就没有输出的需求，但如果思维导图是要展示给别人的呢？
对于一般的评审还是方案说明，我们只需要在导出思维导图前，根据展示的画布，调节方向、类型，以及精简展示内容的数量，让文字能被正常看见即可。
但如果我们要在作品集中展示呢？相信大家已经看过不少作品集中包含思维导图展示页面结构的案例了。
见过非常多新人在问这类思维导图要用什么软件制作，答案是本文罗列的那些工具都做不到上方案例的效果。要想在作品集的展示中获得良好的观感，就只能自己手动绘制。
也就是说，你们要自己用 PS/AI/Sketh/XD/Figma 等软件画一遍。你可以根据当前的场景和氛围去设计合适的树状图样式，我就不慢慢做怎么画树状图的软件教学了，只强调一个细节，就是连接的弧线应该要怎么画才准确。
不管你使用上下还是左右的布局，如果应用到弧线，就不能每个弧线全用肉眼预估来拖拽贝塞尔。最简单的做法，先确定出包含几个二级节点，画出等距离的横线，然后先拖出最上或者最下的弧线，确保控制端点都处于水平方向。然后复制这个弧线，将对应一侧的端点移动到对应横线上去即可。
切记要保证弧线的一致和稳定，而不是歪歪扭扭的。再之后，想要设计成什么样的风格，增加什么样式，就根据你们自己的想法决定了。
强烈建议大家日常多使用思维导图，因为它能很好的锻炼我们结构化思维能力。用的越多，你就会发现在你生活困扰你的问题就会越来越少。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
这两年互联网行业在 C 端市场上的增长已经不足以吸引大众和投资者的视线，B 端作为一个新的热点开始被追捧。
但 B 端是一个泛指，它是由若干面向商业场景的不同细分行业组成。包括云服务、SAAS、PAAS、定制系统、数据可视化、智慧平台、商用 HMI 等等。
不同 B 端细分行业差距是非常大的，就像游戏 APP UI 和一般软件 APP UI 完全是两种职业一样。每当我们讨论 B 端行业前景，就一定要聚焦到具体的行业类型，否则就没有讨论下去的基础。
而我们今天重点聚焦的，就是目前声势极大的数据可视化行业。
这是最近很多同学咨询和关注的领域，也是各大显卡厂商、3D 引擎发布会上的常客。
各种让人眼花缭乱的图例和技术应用解说，很容易让我们产生未来已经加速向我们走来的 “幻觉”，此时不抓紧时代的机遇投身数字化界面的设计，更待何时？
但我还是要劝大家别光顾着鸡冻，冷静下来好好分析这些行业和市场状况，当你了解的越多，你就越会发现，这个职业方向和你们想的不太一样……
首先，数字可视化领域也是一个比较笼统的行业，它依旧可以拆分出若干细分领域。但我先简单根据视觉展示类型把它们分成两大类，平面展示型和3D展示型。为什么根据这个分而不是商业场景，下面会做进一步解释。
首先，数据可视化不是用了花哨的 3D 视觉才叫可视化，平面展示类型是绝对不能忽视的一个方向。它的主要应用场景集中在商业 BI ，统计分析工具等。
比如统计并查看网站、应用、店铺数据的平台。
这类产品有非常广泛的使用场景和需求，是现代企业和产品运营的基石，它存在的价值是毋庸置疑的。
而另一类 3D 展示型的细分发展方向，包含展示大屏、数字孪生、智慧项目、商用 HMI 等类型。
这类项目更多是由技术发展催生而来的 “新需求”，和 5G 的发展是高度相似的。我对这个行业的发展潜力是认可的，但对设计师从事这个行业的总体前景持悲观态度。
下面，针对真正的数据可视化设计师，我会从下面几个维度展开讨论（唱起反调）：
- 知识门槛
- 行业特征
- 团队价值
数据可视化是对数据信息进行图形化设计的过程，这个行业不是这两年才出现的，而是由来已久。
从世界上第一个图表的诞生之后，就有无数统计学家和设计师投身到这个领域中，发明和设计出各种精妙绝伦的图形。
数据可视化的重要性不会比任何其它设计行业低，但是，数据可视化重要性的来源，是由数据本身的价值赋予的。因为诠释数据的方式精彩，所以有价值，而不是仅仅是因为你做得好看且花哨。
更进一步说，就是数据可视化的价值是被统计学赋予的，而统计学是被这个世界真实需要的。
但很可惜，极少有 B 端设计师会投入精力到统计学的基础知识和应用，这就导致很多设计稿中，连对数据的展示应该用折线还是柱状都分不清。
或许你依靠经验可以提升对一些基本图表使用的心得，但是，进阶的可视化设计需求就靠几个简单的折线、柱状、饼图就能解决嘛？那下面这些图形应用需要掌握什么？
复杂的可视化应用场景，不仅需要设计师对统计内容和数据应用有主动地分析，还需要对计算机图形学有一定的掌握。先不说门槛极高的 R 语言应用，但凡涉及到区级以上的地理信息可视化，就一定需要应用 GIS 工具的应用，导出并转化数据包。
除了 2D 以外，3D 可视化的项目，所需的知识储备就更进一大步。很多新人的认知以为设计师的工作只要用 3D 软件建模并输出就可以，学会 C4D 就可以做可视化项目。
这和以为掌握烤箱的功能就可以做出美味的蛋糕性质是一样的……
前面说过，3D 可视化是由技术发展催生出的行业，它的应用受到技术的影响非常大。因为 3D 应用实在是太复杂了，比 2D 图形复杂好几个量级，这就导致设计可以落地的限制远远超出新手的认知。
常规的 3D 项目，必然要借助相关的图形协议或者引擎。比如新手刚开始都以为的 3D 可视化就是网页中运行 3D 效果，而网页运行 3D 就是借助 WebGL 图形协议实现的。
由于各种技术和硬件限制，WebGL 的性能是奇差无比的，因为它的图形绘制渲染主要依靠 CPU 来完成，只要项目稍微复杂一点，多边形和图元数量一多，立马就会让电脑变卡（CPU占用量暴涨）。同时，它可以使用的渲染效果、着色器也必然不等同于 3D 软件的高阶渲染插件 OC 或 Redshift。
因为 WebGL 太弱，目前封闭的可视化项目就转而使用其它的技术解决方案，即虚幻 Unreal 和 Unity。没错，就是你们玩游戏启动画面中显示的那俩引擎。
换句话说，现在的高端 3D 可视化项目，就是用做游戏的方式做可视化应用，只要在指定设备里安装，就可以调用 GPU 资源，实现更高级复杂的效果。
但是，只要应用了对应的引擎，就必须使用配套软件来完成渲染、动画、交互事件。即通过 C4D 或者 Blender、犀牛等软件完成建模（不同可视化项目应该用的建模软件也不一样），再导入到虚幻或者 Unity 编辑器中进行下一步的操作，然后再和开发进行交付。
因为 3D 的复杂性，导致独立 3D 可视化项目的开发流程被大幅度拉长，从而让设计师需要掌握的知识面也大大增加。中间每个步骤都充斥着各种屎尿屁的限制，我就不继续展开了。
3D 可视化设计师，几乎就等同于游戏行业中的技术美术(Technical Artist)，因为游戏开发更复杂，分工更明确，技术美术作为设计师和开发之间的桥梁，帮助项目的美术能尽量在技术上被实现。
而因为可视化项目的建模精度与视觉效果要求不高（对比游戏），这些工作就要由同一个岗位包揽，设计师就没办法回避这些让人绝望的知识信息。
还有一点对比游戏行业更让人绝望的，就是 3D 可视化实际应用的技术方案是高度碎片化、没有体系的，而且技术迭代周期远比游戏行业短（WebGPU已经在路上了），这在客观上增加了设计师的从业压力（欢迎体验前端开发的压力？）。
一个专业的可视化设计师知识门槛，是远远高于一般 UI 设计师的。
当我们研究一个行业的前景时，就是研究它未来的趋势和潜力。数据可视化严格意义来讲并不是完全独立的一个行业或市场，而是其它多个大市场中的某个组成部分。
如前面提到的数字分析、物联网、工业物联，都是层次更高的商业化市场。这些都是近年来高速发展的热门行业，是带动可视化行业发展的客观依据，我就不一一找公开统计数据佐证了。
而可视化除了商业场景外，还有个在国内做可视化绕不开的话题 —— 政策。
如果具体关注过地产、5G、电动车产业的发展历程，就应该明白国家意志的贯彻可以怎样在短时间内催生出市场的高度繁荣（或者泡沫）。
而政策对于可视化的利好，就在于 “数字政府” 概念的规划中。从几年前开始就兴起的政务数字化转型，到最近国务院发布的 《关于加强数字政府建设的指导意见》，都是中央直接 “指导” 地方发展数字化的指标，是行政意志与力量的体现。
说更具体点，下面是指导意见中的目标说明，非常直白，大家可以自己体会：
到2025年，与政府治理能力现代化相适应的数字政府顶层设计更加完善、统筹协调机制更加健全，政府数字化履职能力、安全保障、制度规则、数据资源、平台支撑等数字政府体系框架基本形成，政府履职数字化、智能化水平显著提升，政府决策科学化、社会治理精准化、公共服务高效化取得重要进展，数字政府建设在服务党和国家重大战略、促进经济社会高质量发展、建设人民满意的服务型政府等方面发挥重要作用。
到2035年，与国家治理体系和治理能力现代化相适应的数字政府体系框架更加成熟完备，整体协同、敏捷高效、智能精准、开放透明、公平普惠的数字政府基本建成，为基本实现社会主义现代化提供有力支撑。
原文链接： http://www.gov.cn/zhengce/content/2022-06/23/content_5697299.htm
正因国情在此，所以这些年 G 可视化项目才如雨后春笋一般涌现。智慧城市、智慧农村、智慧水利、智慧交通、智慧民政等等，都是借助这股东风蓬勃发展。
所以，商业和政务的迫切需求，催生出一大批可视化服务公司，如 EasyV、ThingJS、观远等。即使头部大厂也生怕错过这个机会，纷纷组建团队进行行业布局。如腾讯云的 Raya Data、阿里云的 DataV、网易的数帆等等，都已经小成气候，初现锋芒。
市场需求旺盛，规模快速增长，前景理应一片大好！但是……
市场总规模的扩张，带给个体的收益却不一定有表面看起来那么理想，尤其是设计师岗位。
这要先从常规 UI 设计行业说起，UI 设计师工资已经是国内设计行业工资最高的类型之一，从10年前的屌丝行业到今天能和老牌贵族建筑设计叫板，是非常了不起的成就。
而之所以有这种收入，除了移动互联网爆发以外，最重要的原因就是互联网产品的 “利润率”，可以用非常少量的职员撬动上亿甚至上百亿的利润。
如王者荣耀 2021 年全年盈利 28 亿美元，接近 200 亿人民币的利润。一款游戏的利润直接达到万科（2021年利润225亿）和中国人保（2021年利润216亿）的水平，他们都是在册员工超过 10W 人的大型企业，也是国内各自行业里的巨头，而王者的员工只是他们的几百近千份之一。
再如蚂蚁金服、微信、抖音之类的国民级互联网应用，都是用极少的员工达到让人难以置信的估值和利润，这在传统行业是无法想象的。
所以能盈利的公司会给员工开出满是行业红利的待遇，拔高行业上限的同时，也迫使那些有志于挑战巨头的新公司愿意抬高工资价码，吸引人才。
总结起来，UI 之所以平均收入远超平面、服装、工业、室内等老牌设计行业，并不是因为 UI 专业门槛更高，而是以行业规模、项目规模、利润率三个核心指标的共同作用形成。
其中，项目规模和利润率的重要性，其实远远大于行业规模，这是很多职场新人最想不通的地方。
例如广告行业已经是一个万亿市场了，除了分众这家互联网独角兽外，其它老牌广告营销公司每年财报的营收和利润大家感兴趣的可以去搜搜（下图为 21 年财报）。
看看他们的营收总额和净利润比例，以及员工总数，你自己就会得出，作为普通平面设计师的待遇，是绝对不可能超过头部互联网企业的，甚至能达到中游水平都是超常发挥的结论。
行业规模大，但是头部企业规模和利润却不高，除了行业本身的平均利润率因素外，还有一个原因就是业务是高度分散的，没有被集中在少数头部企业，供应商数量庞大，不像多数 C 端市场都由少数几家公司或者产品把持或直接垄断。
在可预见的未来，可视化行业也会处于这样的情况，竞争激烈，利润率低。而且作为 B 端服务商，不要看各家企业需求旺盛，政府各级单位招标不断，实际上每个项目的规模都不大，百万内的项目才占行业的绝大多数，这是不太符合满足我们收入期待的项目规模。
而单个项目规模在未来高速扩大在我看来也不太现实，有两个原因，一个是项目使用人数极少（通常也就几十上百人…），另一个就是对可视化项目实用性的质疑。
如果看过航天相关的报道，就会看到指挥室数据大屏相比我们网上看过的案例比起来，简陋得发指。这会是因为总局没有预算，请不起设计师和团队开发嘛？
为什么航天指挥中心没有用下面这种 “科技感” 满满，复杂的我坐下面保证除了标题一个字也看不见的 “高端设计”？
原因说出来让人沮丧，因为他们 —— 真的要看上面的信息啊！
真正能发挥可视化价值的场景并不多，很多项目出发的意义，就是为了表面工程（各级ZF单位需求，自行体会），装饰属性大于实用性。既然实用性不够高，很多甲方心里也清楚，是花钱装裱门面的，那么投入的预算就更不可能太高。
所以，我对可视化行业的整体的发展是认可的，但对单家公司或项目的预期，却是悲观的，它们没法达到我们已经习惯的 C 端和 SAAS 行业的高度。
最后，还要探讨下数据可视化中设计师的团队价值。
我们知道，一个完整的可视化项目设计与开发门槛都是非常高的，但因为高，创造的价值就高嘛？项目营收的成本占比就高吗？
答案依然是否定的！因为可视化行业的绝大多数项目都是 “传统” 的外包项目。
不管是商业是政务领域，外包最重要的任务，都是找到业务（中标）。朴素的价值观会认为，只要技术和服务够好，业务自然源源不断，其实不然。技术服务都是后验的，客户没有合作过之前是不知道的，在市场上挑选服务商，可不是打开淘宝买家评论查看分数和具体评价筛选。
所以，外行了解服务商的窗口，更多是通过熟悉的中间人介绍，或者销售的嘴。谁能拿到项目，谁就为公司创造了最大的价值。后面怎么做那是后面的事，换谁做不是做……
这就是最常见的外包企业思路，所以技术人员或者设计往往都是消耗品，没有那么强的依赖性。而在具体外包实践环节中，项目的执行决策也和一般 B 端、G 端项目不同。
我以前一直强调，B 端项目的存在价值，是用来解决业务问题，为企业 —— 降本增效。但是可视化项目往往不是用来解决问题，而是用来 —— 解决产生问题的人！
尤其是面向政务的项目，在领导的需求面前，是没有体验这一说的，首先考虑的应该是 ”科技感“（结合前文理解），不然怎么展示自己贯彻上层指导意见……
这种环境对于创意类职业是非常不利的，一方面创造的价值并不显著，另一方面是由别人 “教你” 怎么做设计。长此以往，你会越来越缺失职业竞争力和发展可能。
问题二，则是因为可视化项目独立开发成本太高昂，做的视觉内容又非常固定。于是有实力的团队就纷纷投入可视化编辑工具的研发，解决最麻烦的底层图形方案。
这和 B 端的前端开源框架非常类似，把底层的代码、交互、动画、性能优化都帮你做好了，设计师和程序员可以用非常省事的完成项目的视觉内容落地。
但是，常规 B 端管理项目中，界面样式一直就不是最重要的事情，而是解决复杂页面流程和组件交互的问题。所以资深的 B 端设计师乐于应用第三方的框架来完成复杂的项目。
而在可视化领域中，多数项目并没有那么多和复杂的交互需要考虑，视觉展示效果才是第一位，绝大多数团队应用第三方框架是大势所趋。核心工作内容被影响，那才叫触及灵魂的打击。
所以，在我看来可视化设计师可以创造高价值的场景，只会出现在两种团队中。
第一种，是给其它可视化团队提供图形服务的 SAAS 工具，比如 Raydata、EasyV 这类。都需要团队有非常优秀的前端程序员和技术积累，换句话说，就是既要有技术实力又要有资金保障的团队。
第二种，则是走优质项目输出路线的小团队或公司。会有一些优秀的开发人员坐镇，再由设计师主导来推动业务发展，不会什么项目都做，会选有价值的用心交付。例如早年的 UI 外包团队 ARK、Eico、TangUX 等都是这种路线。
这两种对比目前海量的服务商来说都是凤毛麟角，第一种类型是可视化设计师发展最好的归宿，因为设计产出和图形技术发展高度捆绑，只有这样的团队才会最早最快接触新的专业技术方案。
除了这两类，不要对其它外包类公司有太多的期待。在整个互联网行业中，成熟产品团队非常不喜欢招外包设计师不是没有原因的。
至于未来是不是可视化内容会在 C 端领域打开局面，发展出一些新的应用场景，我就不过早下定论了。
最后，做个总结，给目前还没有进入可视化设计行业，或者是误打误撞进入这个行业的设计师一些职业方向的建议。
可视化设计行业和广告业非常类似，就是从业人员收入构成是沙漏状，而不是像 UI 这样呈金字塔状的，缺乏健康的增长梯度和充足的腰部岗位。
可视化设计师从菜鸟进入专业阶段所需的知识量更大，准备周期更长，技能门槛更高。在初中级阶段和一般 UI 行业对比起来 —— 毫无性价比。
如果本身热爱可视化，想将 FUI 那些东西搬进真实的世界和项目里，也做好了艰苦学习的准备（说不定是你乐在其中的），那么这个的行业的头部岗位就是为你这种人准备的。
毕竟行业体量大，当然就会有真正优质的岗位出现，只是它的门槛高，没有那么多水分能挤。
如果不是异常热爱这个行业，具备较强的自学能力，或有一定的 3D 和图形技术知识积累，那么不太建议往这个职业深入发展，一般的 B 端和 SAAS 项目才会是更好的选择。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
“做图”的人大致会有两种称呼，一种叫做美工，一种叫做设计师。
用着差不多的软件，在外人甚至很多设计从业者看来工作内容差别不大岗位，有人被称作设计师，有人却天天只能自嘲自己是个美工。
那么，都是做图的，美工和设计师的差别究竟在哪儿？
在电商，纸媒或是印刷领域里，上下游的工作内容相对固化和流程化，对设计而言可发挥的空间本身就不大。时间久了，美工可以用模块化的方式在固定的时间里产出固定的设计工作。在印刷企业中，很多设计工作者除了需要排版还需要负责打样甚至印刷器械的操控。所以设计在整个产品生产过程中的比重不大，自然就从“创作”变成了“工作”。“工”也就寓意成手工或是劳动工作的意思。
为什么很多人会吐槽，朋友找自己可以“随便”做个LOGO呢？因为在他们眼中，你的工作不是创作产生的，而是像其他非灵感类工作一样，“生产”出来的。既然生产出来的，最后出来的又不是“实物”就不存在什么成本，那当然应该是免费的。
自嘲美工的设计从业者，大多关注的是好看与不好看。
“这个好，因为这个好看。”
“那个不好，因为它很丑。”
“为什么领导选了那个不好看的，而没选我这个好看的…”
在其眼中，评判设计优劣很重要的一条标准就是好看与不好看。与别人提出自己设计方案的时候，也用好看与否的方式让别人做出选择。但审美本身就没有一条共识性的标准，所以很容易被领导挑战你的设计，很容易被客户“指点”你的作品。
设计师在设计过程中追求的不仅仅是好看这一层面。通过设计，对目标和结果有什么影响、合理性、易用性和可延续性都是在“好看”之外设计师该去思考和要去凝结在作品中的工作。
哪怕日常设计一个最基本按钮的位置、圆角的弧度、颜色，都会在设计确认之前反复的自我询问，这样做有什么理由？为何圆角的弧度是4而不是8？宽度和高度为何是目前这个尺寸？哪一个更符合大产品体系下的设计原则？
即便没有一个是与非的标准，“这样是否合理”都应该是设计师挂在嘴边最长自检的问题。
设计的初衷是解决问题。都是设计从业者，一类人在定义规则，一类人在执行规则。广告有调性的定义，产品有规范的定义，设计师会时刻的思考和优化什么样的定义，能够提升效率、能通统一识别性、能协同合作、能保证最小概率的出现错误。
在这样的规则下，另一类人在执行规则，即便是一些banner的设计，他们只做着规则之内的工作，至于为何这样规范，没有思考过，也不知道为何要这样。还有人会说，我做的banner没有规则都是自己说的算啊~但在建立这个banner的尺寸之初就是规则本身呀。
有些人喜欢积累素材，认为这样做可以为设计提升效率。很多人依靠素材来寻找设计方向，素材品质的好坏决定了他最后出品的好坏。没了网络，没了素材库也就没了思路和灵感，更没有什么创作可言。
设计师在接到需求之初考虑的不是在哪查找素材，而是在思考这个需求需要解决什么样的问题，这个设计如何执行才能满足这个需求。有些设计师喜欢整理，而且整理是设计师剥离表层干扰的一个基本能力，通过拨开表象，发现问题的本质，再去寻找解决之道。
很多设计从业者，尤其是新手，做设计都是凭着感觉，凭感觉做设计最大的问题是没有一个有效之道来保证每次设计的品质。运气好了，或是找到一个好素材，那么能做出80、90分的设计，运气不好，那就不知如何下手。
留心观察下身边的“大神”，看看他们在接到设计之后的思考路径是怎样。是忙着翻素材、找参考还是静下来画画草图，做做需求整理，这可能是美工和设计师遇到问题之后最大的行动差异。
同是看到一件惊艳的作品，美工考虑的是：
“卧槽，这么牛逼，这是用什么软件做出来的？”
设计师考虑的是：
“卧槽，这么牛逼的想法作者是怎样想到的”
思考的初衷不同，行动的路径也就不同。美工会觉得软件至上，努力学好软件之后就会成为大神。而设计师会尽可能多的去了解优秀作品背后的故事，去了解一切设计和设计之外的临界知识。积累好足够的“思维素材”再去运用到设计工作中去。
我经常听到一些年轻的设计师问我，你会哪些软件，这是个好奇且好学的问题。但软件真不是高阶或是低阶的区分壁垒。如果真是这样，那么大师们都应该是设计软件的熟练驾驭着。而恰恰相反，软件用的666的大多都是培训机构的培训老师，可能连设计师都算不上。摒弃软件思维吧，产生真正距离的一定是脑，不是手。
看到这里，有人会觉得这篇文章写的有些许的“激烈”，有些不是美工的问题，可能是年轻的问题，是新人必须经历的问题。跨越了年轻和初级，有些人的思维和眼界进阶了，但有些人还停留在上面说到的部分层面里，新手可能从美工进阶到设计，但美工却不一定都是新手。
有句话说的不是很好么：
“我有十年工作经验”
“不，你只是用一年的经验工作了十年而已。”
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：大宝频道 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在 UI 的设计体系中，图标是最重要的组成部分之一，是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念，以及正确绘制的方法，是入门 UI 设计的必备条件。
网上现存不少关于图标绘制的文章和教学，但不是太笼统，就是太片面。即使看了很多这种碎片化的知识，也很难在我们的认知中对它有比较全面、系统的认识，所以大多数初级的 UI 设计师，始终画不好图标。
针对这个问题，我希望用一篇长文来讲清楚图标设计的所有要点和具体的设计方法，让所有设计新人更快的上手图标设计。
本文共分为以下5个部分：
1. 图标设计详解：先对图标有个整体的认识，了解图标总共有哪些类型和应用场景。
2. 工具图标设计：最常见的工具型图标的相关规范，以及对应的设计案例演示。
3. 装饰图标设计：近年来使用越来越广泛的视觉型图标设计认识，以及对应的讲解。
4. 启动图标设计：讲解启图标的相关规范，如何高效的进行设计。
5. 图标应用详解：介绍在一个UI项目中，要应用多少种图标规格，并如何设计出正确的图标
图标，是一种图形化的标识，它有广义和狭义两种概念，广义指的是所有现实中有明确指向含义的图形符号，狭义主要指在计算机设备界面中的图形符号，有非常大的覆盖范围。
对于 UI 设计师而言，我们主要针对的就是狭义的概念，它是 UI 界面视觉组成的关键元素之一。
在当下最常见的扁平化设计风格中，界面的实际视觉组成只有 4 种元素，图片、文字、几何图形、图标。
可以说，图片、文字、几何图形的运用，都只用到排版的技巧，而图标，是 UI 设计中除了插画元素以外唯一需要我们 “绘制”、“创作” 的元素，一涉及到这两件事，难度就直线上升了。
本来往界面里丢一些方方圆圆、贴几张图、填一些字，就可以把界面做出来了，比如下图中的 Clear APP，不仅工作量少，而且还符合极简原则，为什么还要吃力不讨好地设计图标？
这就涉及对图标作用的探讨了，为了节约篇幅，更快进入大家最想看的重点干货，我就不长篇大论从上古时期人类与图形符号的纠葛开始写了！就谈对于图形界面本身，为什么图标有这么重要的地位，没它不行。有两个原因，第一就是，文字虽然也是一种图形符号，但相对于图标而言，文字实在太复杂了，在识别效率上有先天的劣势！再者，不同的语言，文字的长度也不同，如果换成阿拉伯语或者俄罗斯语，或许一行还装不下所有文字。图标可以以一种更高效的方式，将我们想要传递的信息进行浓缩，不仅易于识别，也能让界面更简洁，利于排版，比如下方案例。
第二点， 就是关于视觉的观赏性上。有些页面中，如果把图标去掉了，也丝毫不会影响我们的操作效率，以及对内容的理解。但没有图标，缺少这些点缀，我们就会觉得这个页面看起来总感觉太枯燥了，不得劲，最好的例子就是应用的设置页了，见下方案例。
既然知道了图标的作用和重要性，那么接下来，就要进一步了解在工作中我们要设计哪些图标。
可以先划分成三种大类：
• 工具图标
• 装饰图标
• 启动图标
下面，我们将为对它们分别进行介绍，以及展示相关的设计类型，方便读者在开始学习具体设计前，对 UI 设计会创作的图标有更全面的认识。
1.1 工具图标
首先，我们要说的是工具图标。这是我们在日常讨论中提及最频繁的图标类型，即应用内有明确功能、提示含义的标识。作为最常见的图标类型，我们就不需要做太多的说明了。
虽然理解起来容易，但是它所包含的设计样式却并不少，可以把它们归纳成线性、面性两个大类，再分别进行细分。
风格1：线性风格
线性图标，即图形是通过线条的描边轮廓勾勒出来的！多数人对它样式认识的第一反应应该是使用纯色的闭合轮廓，比如上图案例，线性图标的创作空间看似不多，但实际上有非常多的调整空间。
下面我们把它们统一罗列出来。
风格2：面性风格
面性图标，即使用对内容区域进行色彩填充的图标样式。同样，在这类图标中，也不是只能应用纯色的方式进行填充，还有非常多的视觉表现类型。
风格3：混合风格
当然，在设计图标类型的时候，也不一定非线性和面性不可，有一些热衷创造和尝试的设计师，还创作出了混合型的图标，既有线性描边的轮廓，又有色彩填充的区域。常见的样式类型如下。
1.2 装饰图标
和工具图标比起来，装饰图标的视觉性作用更多。对于一些比较复杂的应用来说，过分的简约并不能弥补信息过多的信噪问题，我们要通过丰富视觉体验的方法来增加内容的观赏性，减少一屏内显示内容的数量。
比如在分类列表里，是可以只使用线框和文字把大量内容浓缩到一屏以内，但实际浏览效率并不会增加，而且并不美观。
还有，就是国内的界面设计环境，会根据运营的设计需求进行特殊化处理，尤其在电商领域，首屏的图标都会改成首页风格的样式，增加活动氛围。
装饰性的图标设计，虽然没有明确的规范该怎么做，效果怎么好怎么来，但最常见的类型有四种，下面分别进行介绍。
扁平风格
扁平风格的装饰图标，通常可以理解成是用扁平插画的方式画出来的图标，除了继承扁平的纯色填充特性以外，也相对于普通图标有更丰富的细节与趣味性。
拟物风格
拟物风格的图标现在出现的频率越来越高，集中在大型的运营活动中，通常这些活动会通过拟物的方式将头部设计成有故事性的场景，所以自然顶部的相关图标使用拟物的设计形式会更贴合。
2.5D 风格
2.5D是一种偏卡通、像素画风格的扁平设计类型，在一些非必要的设计环境中，使用 2.5D 会比较容易搭配主流的界面设计风格，有更强的趣味性和层次感。
炫彩渐变
这是一个拗口的原创名词，找不到更合适的，还是觉得浮夸点符合它的气质。这种图标，就是通过一系列非常激进的渐变和撞色实现，通常还会使用彩色的阴影。
使用这样图标的区域，通常都会呈现出一副五彩斑斓的景象，只有在内容非常丰富且用户偏向年轻化的产品中可以使用，是一种非常难驾驭的设计风格。
实物贴图
最后一种，就是采用了真实摄影物体的设计风格。虽然它不属于完全依靠我们创作和绘制出来的，但想想还是放进来合适。因为这种图标的出现频率非常高，有必要再后面掌握它的做法。
1.3 启动图标
最后，就要说说启动图标了！启动图标的设计比前面两种类型的图标说起来更难，因为它实际上就是把 “LOGO嵌套进系统图标模版” 的图标。
除了必要的规范掌握以外，启动图标的主体物设计就是 LOGO 的设计，已经超出了图标绘制本身的知识点。所以，在后面我会针对这个问题讲解一些比较套路易懂的设计方案供新手学习，这里我们先来了解一下它有哪几种设计形式。
文字形式
适用了文字作为图标主体物的类型，通常是这类应用本身的品牌 LOGO 就使用了文字，所以这里就把字体照搬过来。
图标形式
对于一些偏工具，适合用简单图形传达应用功能的启动图标，就会采取使用工具图标的方式设计。
图形形式
图形形式看起来和图标形式很接近，但实际上完全不属于同一类型，之所以它不是图标，是因为这类图标的主体图形是一种经过高度抽象化的标识，传达的是品牌性，而不是图形的含义。
插画形式
对于一些比较纯粹的应用，如读本、漫画、幼儿类应用，就热衷于采用卡通形象作为图标的主体进行设计。
拟物形式
虽然现在扁平化的设计占据主导地位，但依旧有很多应用的启动图标是通过拟物的方式设计的。因为对于这些应用来说，拟物设计所传递的信息往往更直观和准确。
当然，还有其它的数之不尽的启动图标设计方式，比如明星大头照、摄影图、游戏原画等，但理解上面这些类型就够了！
前面介绍的三种图标，就是今后在进入 UI 行业设计的内容。虽然图标看起来简单，但可以玩出的花样不少。除了正确设计出图标以外，高低阶的 UI 设计师之间的区别也包含图标设计类型掌握的多寡。
所以，在开始学习前，不要将设计图标的目标局限在最简单的图形绘制上，还有很多有趣的设计形式等待你们去尝试。
了解了图标的类型，就要开始了解做出这些图标应该使用哪些软件了！通常，UI 主要使用的设计软件包含 PS、AI、Sketch、XD 四款，理论上，它们都包含了图标绘制的功能，如果我直接告诉大家去精通这 4 款软件那么画图标就一点难度都没有了，这是非常不负责任的，所以为了对新人更友好一点（如果已经全部精通了，就直接略过），我会分析一遍这四款软件对于图标设计的优劣，以及需要掌握的部分。
Sketch/XD
这两款软件是我们设计 UI 界面的主力。但大家一定要记得，它们主要的功能是用来完成 UI 界面元素的排版，而不是创作和绘图。
虽然它们都包含路径、钢笔、布尔、等功能（Sketch 相对 XD 更完善一点点），想要绘制一些非常基础的线性或面性图标时没有问题，但只要涉及到比较复杂的图形，往往就束手无策。
所以，我建议所有学习 UI 的新人，都不要从这两个软件中入手，而是先掌握 PS 和 AI，后面想要快速实现一些简单的图标时，自然懂得如何使用 Sketch 和 XD。
可以说，PS 和 AI 的应用决定了我们图标设计的上限，而 Sketch 和 XD 是下限，所以，把上限拓展得越高越好。
Adobe Photoshop
PS 是一款无论什么东西都设计得出来的设计软件，但是，它本质上是一款 “位图软件”。后续的文章中会提及，在界面中采用矢量格式的图标是最理想的，而 PS 针对矢量的操作并不便捷，比如将矢量图层复制到其它软件中。
实际项目中，我们会用 PS 设计一些视觉表现相对复杂的图标，例如启动图标、拟物图标、实物图标等等。
绘制图标需要用到的 PS 功能并不太多，需要在前期学习这个软件的过程中加以筛选，重点是以下知识点：
• 路径创建和调整
• 钢笔工具和锚点
• 路径图层
• 布尔运算
• 图层属性
虽然 PS 在实际项目中是用来画复杂的图标，但并不妨碍我们使用 PS 从最基础的图标开始画起，因为想要熟练掌握上方的知识点，简易的工具图标是最好的磨刀石，之后再学习 AI 的操作，就可以更快的上手。
PS：最近在准备一套 PS 教学，就会比较完整的讲解一遍这些功能和对应操作。
Adobe Illustrator
AI 也是 UI 设计必学的一款软件，它的功能异常丰富，主要用来设计矢量图形。对比 PS，它有更好的矢量操作支持，对于路径细节的调整上，是最全面最细腻的软件，并且 AI 中的图形还可以直接复制黏贴到其它应用的画布中。
如果掌握了上方提及的 PS 基础，那么学习 AI 也就轻松了不少，其中，AI 设计图标中有三个特殊的功能是需要重点掌握和学习的：
• 形状生成器
• 轮廓化描边
• 路径查找器
花几个晚上，掌握了 PS 和 AI 的相关知识点以后，就可以为我们后续的学习提供良好的支持！
但是现在还不要迫不及待地打开软件，在实际上手操作绘制图标之前，我想先讲讲规范。
是的，现在还不到实操的时候，规范之于画图标，就好像音标之于学英语，都是基础中的基础，也都是大家最容易忽略的东西。
如果对规范没有一个清晰的认知，那也是无法独立画好一套图标的！希望读者千万不要跳过这部分的讲解直接去看演示了。
3.1 表意的准确性
在第一部分中，我们知道图标的主要作用之一就是作为文字的替代品，具有明确的寓意。比如看见一个放大镜，我们会当成那是搜索，看见钥匙或者锁，我们就会理解成是密码，比如下面这些图标，每一个指代的功能和寓意都是非常直白、清晰的。
表达的寓意清晰，是工具图标最基本的要求，否则它只会传递错误的信息，造成用户的困惑。
在常见的图标类型里，如通知、设置、用户、分享之类的图标，对于任何手机用户来说都没有认知和选择压力。但表意准确麻烦的地方在于，一些非常规的寓意，极难用图标表现出来，这才是我们使用工具图标的首要麻烦。
比如下方这些图标，如果我不加上文字信息，大家能理解它们是什么吗？
https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=12507
那么，我们再把文字信息补充进去，是不是就会觉得图形挺贴合内容的。
在这种案例中，我们要关注的就是，面对这样不常见的内容，设计师是怎么把图形的创意和样式想出来的！如果自己遇到一样的问题怎么办？
所以，除了知道每个工具图标都要表意准确这样 “正确的废话” 以后，我们该看看如何通过合适的创意将图标样式确定出来。
一般抽象的图标，难点在于寓意信息是非实体的，所以我们很难直接构建对图形样式的联想，所以首先我们得想办法将抽象的内容 “实体化”。也就是说，我们可以先把这个词写到纸上，然后把和这个抽象信息相关的所有实体物写下来。
然后，我们可以挑选出某个合适的实物，以它作为原型开始绘制。如果对这些挑选出来的实物要以什么图形表现还是没概念，那就可以借助网上的图标素材网站，比如 iconfont、iconfinder 等，在搜索框中输入这些词语，通过别人的设计收获灵感。
如果本身拥有比较好的手绘基础或是平面基础，也可以直接通过对照片进行提炼的方式，设计出图形内容。
所以，在设计图标时符合表意准确的概念，需要设计师不断收集图形，并提升对词汇联想的能力。很多图标图形优秀的创意，就是在这些基础的积累之上逐渐形成的，而不是一撮而就。
3.2 图标的一致性
第二个规范，叫图标的一致性。即一个或一套图标中，应该保持一致的细节。首先看看下面的反面案例。
在上面的案例中，不同图标间有很大的割裂感，完全不像处于同一套设计体系之下，这就是缺乏一致性的表现。这也是新手在设计一整套图标最大的难点，要让所有图标保持视觉细节上的一致。
下面对工具图标要保持视觉一致性有哪些细节进行详细的说明。
类型一致
前面说过，工具图标有线性的、填充的类型，在正常的情况中，同一套图标应该在类型中保持相同，如果使用了线性图标那么后续就不要设计填充以及混合的类型。
风格一致
每一套图标都有自己的设计风格，不同风格在细节中都有不同的表现，需要让这些风格特征保持高度的统一，看看下面这些案例。
第一，为图标添加缺口的设计风格，我们要保证这个缺口的大小是一致的，并且每一个图标中有且只有一个缺口，而不是靠感觉随意添加。
第二，在设计一套偏圆润可爱的设计风格中，外轮廓使用了较大的圆角，那么我们尽可能保证圆角的大小是一致的，而不是有的用 4pt，有的用 2pt 或者直接使用直角。
第三，采用了填充色偏移的设计风格中，首先要保证填充色的一致，并且偏移的距离和方向也要保持固定的规律，不能随喜好任意制定。
透视一致
透视关系是在平面中对物体空间性质的表现方式，当我们应用了透视时，物体就有了一定的 “立体感”。
透视的表现不是绘制图标时必须使用的风格，但是如果我们在图标中应用了透视，就要确保我们使用的视角是一致的。要极力避免同一套图标中既用了正视图又包含了斜视图。
粗细一致
在图标中我们会应用到矩形线段或是描边，我们要尽可能保证它们的粗细是一致的。
比如，在线性的设计中，路径的描边尺寸要保持一致，不能这个图标用 2pt，那个图标用 1pt。
在填充图标中，我们会在一个矩形或是圆形中增加矩形的镂空，比如下图的几个图标，在这种情况下也要保证它们的粗细是一致的，而不是各不相同。
大小一致
大小一致，就是让图标的视觉大小保持一致，而不是它们字面上的长宽属性保持一致。
因为这是一个比较复杂的知识点，需要我们对几何图形的视觉差有比较完整的认识，我会在下一部分做出介绍。这些和一致性有关的特征，是一套图标看起来专业、有整体感的必要条件。但是，在真实的设计场景中需要灵活变通。
如果有一些特定的图标，在保证了一致性的所有要求后却极难被人理解，且找不到更好的设计方式，就可以差别对待。比如在一套线性的图标中，播放、快进等图标往往都是填充类型的，这并不会造成视觉或是使用上的困扰。
3.3 几何图形的视觉差
几何图形的视觉差，是对于工具图标来说最重要的细节，在上一节图标一致性中已经提及，它也是平面基础理论中不可忽视的内容，这个理论要解决一个核心的问题，即
怎么让不同的图形看上去一样大？
可能有的读者看到这里会轻蔑一笑，这有什么难的，通过软件的参考线或者属性设置，把它们的长宽设置成一样不就完事了，比如下图这样。
嗯，画起来轻轻松松，参数上完美无缺。但等等，怎么看上去这些图形大小有点不一样，为什么正方形看起来这么大，三角形看起来这么小？
恭喜你们，发现了这个问题的根源，不同几何图形带给我们的视觉大小是不同的。而要解决这样的问题，就要对它们的尺寸做出额外的调整，比如下图这样。
适当调整完圆形和三角形以后，是不是觉得大小的感觉一致了？这就要牵扯一个更基础的视觉规律，占据面积越大的图形，给视觉的感受就越大，所以给我们感受越小的元素，就要放的越大。
并且，这个问题在一个图形的内部也会产生影响，比如知乎 APP 下面的点赞、反对按钮，都有三角形图标对吧，但图形其实对于外部举行是非居中的，我们看看下面的演示。
如果一个图形其中一部分面积远大于另一部分，那么就会让这个图形的重心产生偏移，必须要往较小的部分的方向移动才能产生平衡。
所以，在设计一整套的应用中，如果没有对这个理论的理解，只定义一个矩形出来，把所有图形的尺寸于矩形对齐，那么最终看到的图标效果一定是极度不平衡的。
3.4 工具图标的栅格
其实，针对图标的规范，新人第一个想到的应该就是参考线了，也就是所谓的栅格模版。但之所以放第二个，是因为工具图标的栅格规范，是根据几何的视觉差特性衍生出来的，而不像后面会提到的应用图标由官方提供出来。
我们先简单看看，常见的工具图标栅格是什么样的。
里面包含了正方形、长方形、圆形对不对，那我们把它们分别罗列出来看看。是不是就发现这些图形的视觉尺寸是非常接近的？然后再通过这样的尺寸设计对应的图形，也就看起来都一样大。
所以，应用图标的栅格系统对于图标的设计来说，是一个用来应对几何图形视觉差的“参照物”。
之所以要说参照物，原因在于，一套图标，不会只存在这几种图形的样式，还有很多千奇百怪的形状，但大体上我们可以识别出来它的类似轮廓或者重心方向，于是就可以通过参照图形来判断我们设计出来的图形尺寸是否符合标准。
如果设计图形和参照图形的类似，那么尺寸就不能大于参照图形，如果设计图形的宽大于参照图，那么高就要小于参照图，反之亦然。如果图形的重心有偏移，那就要往重心偏移的反方向移动，比如搜索按钮，Wifi 图标等。
最后，说说栅格系统的画法，和大家想象的不一样，想要画一套图标，栅格系统是我们自己画出来的，不是到网上下载下来的，所以怎么画也是这个知识的重点。
如何绘制图标栅格系统
如果我们定义一套 28pt（如果看不懂可以当成 28px） 的图标，那么我们首先要画一个 28pt 的正方形，然后确定一个 2-4pt 的内边距，正所谓四边留一线，日后好相见。
然后就要开始绘制其中正方形和圆形，正方形通常在整个图标尺寸 1/2 的比例，可以使用 14 或 16 的偶数 （为了可以居中）。然后再确定圆形的尺寸，圆肯定比正方形大 2-4 pt，于是就得到下方的图形。
之后，我们再确定横竖长方形的尺寸，可以直接顶到内边距的边缘。它的尺寸不是通过数值计算的，而是要我们先画出来，把它们和前面的圆、正方形置于一条水平线上，调整出一个平衡的视觉尺寸，再和并进栅格系统中，就完成了栅格系统的绘制，如下图的案例。
这一步也旨在检查我们的参考线系统是否在基础结构上经得起考验，是非常关键的一步。因为不同尺寸的图标中，参考线系统都是有区别的，我们不能直接按一个固定的比例来设置，要根据实际场景做判断。
当然，为了进一步方便大家的学习，我特意准备了一套现成的栅格素材，包含 16、24、28、32、36、48 等六个尺寸。大家可以进入我的主页关注公众号并回复 “图标素材” 获取。
3.5 像素对齐
在栅格的绘制中，细心的读者肯定发现了几个关键字，“对齐”、“偶数”，这就是在这一部分要提及的内容。关于显示器的倍率问题是 UI 基础知识点之一，可能有的同学不太了解，不过没关系，直接看下面的内容即可。
我们都知道像素是屏幕显示中的最小单位，一个像素只能显示一种颜色。小时候玩过的 GBA、FC 游戏机，都是通过像素画的形式呈现，人物锯齿是无法避免的。
而随着技术发展，像素密度是降低了，但如果依旧是按过去这种一个萝卜一个坑的方式显示内容，那锯齿感无论如何是无法消除的。于是，开发了次像素渲染（Subpixel Rendering）的技术。一个在显示器中让我们觉得平滑的圆，一直放大，就可以发现它的周边充满了饱和度较低的其它方块色彩。
这项技术，让像素可以用特有的方式来显示非完整的色块，即尽可能还原我们对元素定义的小数点。但为什么我们还要提这个概念呢？
因为工具的图标太小了，而且 UI 的元素对精细和准确度的要求都不低，如果我们没有尽可能满足像素对齐的要求，那么就可能导致元素边缘的模糊。
所以要满足像素对齐的要求，就要符合元素本身的尺寸为整数、描边为整数、XY 轴坐标为整数的特性。
AI 中的像素对齐设置
在 AI 中，我们可以通过两个设定来查看和保证像素对齐，即网格的设置显示，以及对齐到点的设置。
像素的对齐主要表现在横线和竖线上，虽然现在手机显示精度越来越高，但并不意味着我们可以无视像素对齐的规律！在线性图标中，类似对于 1pt 或者 2pt 描边的应用，觉得不是太细就是太粗，可以用 1.5pt 的数值（1.5 pt 在 2x 中就是 3px），但切记不要出现类似 1.23、2.16、3.46 这种小数。
像素对齐是一个专业 UI 设计师对于极致追求的表现之一，是每一个一线大厂 UI 设计师的基本职能，所以，想要冲刺更高的段位，就不要忽视这个规范的使用。
这是图标系列文章的第一篇，信息量不算少！所以我们在结尾再总结一次，方便大家记忆。
• 知识点1：在 UI 的界面中，图标的主要作用是用来高效的传递信息，以及起到美化界面的作用。
• 知识点2：UI 会涉及的图标类型主要有三种，工具图标、装饰图标、应用图标。
• 知识点3：工具图标，是界面中用来传递信息的图形符号，主要包含线性、面性、混合三种设计风格。
• 知识点4：装饰图标，是界面中用来提升视觉体验的图形，主要包含扁平、拟物、2.5D、炫彩渐变等风格。
• 知识点5：应用图标，是用来启动应用的图标，主要包含文字、图标、图形、插画、拟物等设计形式。
• 知识点6：学习绘制图标，优先学习 PS、AI 的路径相关功能，而不是 Sketch 和 XD。
• 知识点7：图标首先要表意准确，能被用户识别并契合想要表达的寓意。
• 知识点8：设计整套图标的时候要符合一致性原则，包含类型、风格、粗细、透视、大小等特征。
• 知识点9：不同的几何图形会打给我们不同的大小视感，不能只看元素的参数。
• 知识点10：我们根据视觉差的方式定义出栅格系统，作为图标尺寸设定的重要参考。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
用户体验（用户使用产品，系统或服务过程中的主观感受）
用户在使用产品过程中建立起来的一种纯主观感受。用户体验这个词最早被广泛认知是在上世纪90年代中期，由用户体验设计师唐纳德.诺曼（Donald Norman）所提出和推广。对于一个界定明确的用户群体来讲，用户体验的共性是能够经由良好设计实验来认识到。用户体验并不是指一件产品本身如何工作的，更明确的是指“产品如何与外界发生联系并发生作用”，也就是人们如何‘接触’和‘使用’。无论什么产品，用户体验总是在细微之处，往往细节最能打动人心。用户体验通常要解决的是用户具体的使用场景，要兼顾视觉和功能两方面的因素，同时解决产品所面临的其他问题。
产品的逻辑简易程度对于用户体验是一个反向指标，产品越复杂用户体验会越发困难。往往产品后期更新迭代中，每新增一个特性，功能或者步骤，都会增加导致用户体验不顺畅或者失败的机会。用户体验的每一个流程，对开发者而言都要经过慎重的考虑和验证。实际上设计出一个最优的解决方案需要更多的时间和精力，往往不得不在各个方面作出妥协。但是一个以用户为中心的设计流程保证来这些妥协不是随机决定的。
为什么每个产品都在强调‘站在用户的角度，提升产品的用户体验’，因为优秀的用户体验就是商机，良好顺畅的用户体验会极大的提升用户转化率，增加用户的留存率。好的的用户体验主要体现在两种形式：“帮助人们工作更快”和“减少他们犯错几率”。牢记“以用户为中心的设计”在开发产品的每个流程都要把用户列入考虑的范围，每一个流程步骤都要代入用户的使用场景中体验，想用户所想。提供优质的用户体验是一个重要的，可持续，良性的竞争优势，用户体验形成用户对企业的整体形象，并以此来界定来与竞品的差异。
在产品的整个开发流程中都要考虑用户有可能采取每个步骤的可能性，并且理解整个流程中每一个步骤用户的期望值。
表现层：视觉设计，我们使用无论任何设备的产品最先看到的就是表现层，内容、功能和美学汇集到一起来产生一个最终设计呈现；
框架层：界面设计、导航设计和信息设计，框架层用于优化设计布局，以达到界面中元素的最大效果和效率；
结构层：交互设计和信息架构，相对于框架层更加抽象，框架是结构的具体表达方式，明确来元素应该出现在哪里；
范围层：功能规格和内容需求，结构层明确了产品的各种特性和功能最优的展示组合方式，这些内容构成了产品的范围层；
战略层：产品目标和用户需求，成功的用户体验，其基础是一个被明确表达的“战略”。知道企业与用户双方对产品期许和目标，有助于确立用户体验各方面战略的制定；
在五个层面应该是自下而上的建设，战略 — 范围 — 结构 — 框架 — 表现；不同的层面位置考虑的方向和侧重点是不一样的，随着层面的上升我们考虑的决策变得更加具体，并且涉及越来越精细的细节表现。每一个层面都是根据下面层面来决定的，每一个层面的决定都会影响上层的可用选择，表现层由框架层决定，框架层是建立在结构层的基础上，结构层是具有范围层，范围层是根据战略层制定的。
按照产品不同属性分为两大类：功能性产品/信息型产品；针对不同的类型将五要素细分展示，功能型产品更加关注的是任务，去思考用户如何完成这个过程，用户使用该产品完成一个或多个任务的工具；信息型产品关注的则为信息，产品应该提供哪些信息，并且方便用户快速寻找，理解，创建一个富信息的用户体验；这种把用户体验划分为各个模块和层面的模式，更有利于我们去考虑用户体验中可能出现的麻烦。所有处在同一层面的要素都会决定最终的用户体验效果。
优秀的用户体验基础是要有明确的“战略”立意，知道企业和用户对产品的期许和目标，才能更好的促进用户体验各方面的完善和优化。我们要用过产品获得什么？用户通过产品可用得到什么？回答这两个问题有助于我们更好的明确产品目标和用户需求，结合两者我们组成战略层。
产品目标：目标的制定切记不要太过具体或太宽泛我们需要在这之间找出一个平衡点，为了更好的用户体验我们需要保证所作出的决策都不是头脑发热拍脑门定出来的，每一个决策，都应该建立在我们确切了解他所带来的联动影响效果。明确的定义出成功的条件而不是定义成功的路径，有时候跑的慢一定不一定就是落后者。既然是赛跑肯定会有终点有结果的产出，我们要明确“成功的标准”制定可追踪的指标，成功的标准不仅仅影响各阶段的决策，也是衡量用户体验工作的具体依据，埋点数据采集，上线后的客户流存率，转化率，新用户的增长率，老客户的使用反馈等等。对驱动用户体验的决策而言有意义的成功标准，一定是可用明确与用户行为绑定的标准，而这些用户行为一定是可以通过设计来影响的。
用户需求：明确正确的用户需求是复杂不易的，因为用户群体存在很大差异性，确定大致目标用户后我们还需要精细化的区分，将用户分成较小的，有共同特性的以此来助力我们更好的明确用户需求，通过不同的角色群体使用产品来分析他们的需求。在针对用户需求研究时我们还可以使用一些市场调研（将你想要的信息通过具体，有效的公式化问题，让用户提交你正确的答案）；现场调查（完整的，有效且全面的方法，了解与产品使用生活场景最匹配的用户行为）；创建人物角色（模拟真实用户使用场景更加贴近用户，再产品思考中和用户更感同身受）。战略应该是用户体验中的起点，但并不意味着项目开始之前战略就完全确定下来，它是可以在整个工作中演变和改进的。
当我们明确了解战略层后，我们就知道产品应该为用户提供什么功能和服务，这些也就逐步演变为范围层。我们要做两个事情来定义范围层 —过程和产品。过程的意义在于当产品还在一个雏形时，可以带动我们去思考流程中可能存在的问题，功能实现的优先级；产品的意义在于明确最终产出的结果，团队有明确的目标。在这其中文档的输出是必不可少的，有计划性说明性的文档输出可以让我们的工作更加有条不紊的推进下去。我们可以从战略层抽象出来 — “我们为什么要开发这个产品？”转而到范围层变为 — “我们要开发的是什么？”在软件开发过程中，范围层确定的是全部功能需求和功能规格。
功能规格：功能规格说明不需要包含产品的每个细节，只需要包含在设计或开发过程中可能出现混淆的功能定义。同时功能规格说明也不需要展望产品未来理想状态，只需要记录在创建产品时确定下来的决议。换句话说，文档不能解决问题，但是定义可以，我们需要不是文档多么详细厚重，而是要足够的清晰和准确。功能说明要明确具体避免主观语气，避免出现歧义，尽可能用量化的可检验的标准来定义功能有助于我们的验收。
内容需求：很多时候我们说到的内容指的是文本。但是图像，音频和视频有时候比文字还要重要。这些不同类型的内容结合到一起，相互协作去满足某一个需求。内容特性想要达到的规模，将对你所做的用户体验产生极大的影响，内容需求应该提供每一种特性规模的大致预估，以便在设计过程中作出最为明智的决策。尽可能早的确定某个人来负责每一个内容元素也是非常重要的，避免后期开发实现达不到我们预期的效果。内容清单的输出也是重要的，究其原因这样团队中的每个人都会清楚知道自己负责的哪些部分，明确责任，提高协同效率。
学会确定需求优先级，了解“不需要做什么”也就意味的我们知道哪些是必须要“马上去做的”，把那些需求点梳理出来，找到一种适宜的方式，让它们符合你长期的规划，这才是真正的价值所在。确定具体，系统的发展要求，并将任何不符合这些要求的想法作为潜在未来功能的囤积，只有通过这种更慎重的途径，才可以真正的管理起整个项目过程。
在罗列出项目需求优先级，梳理出大致的流程，我们对于产品将会包括什么主要内容已经有了清晰的构想。然而，这些需求没有进行全面的整合还是碎片化的存在。而结构层要做的就是整合这些创建一个概念性的结构。结构层适当的将我们关注点从抽象的决策和范围问题，转移到更能影响最后的用户体验具体因素。但是这里的交互设计和信息架构所产出的东西大部分还是概念性的内容。这两项内容并不完全是技术，它要求开发者要有共情能力去理解用户，理解用户行为操作习惯，使用场景，思考方式等。将了解的这些知识代入我们开发过程中，这样会使那些不得不使用我们产品的用户带来更好的用户体验。
交互设计：关注于影响用户执行和完成任务的元素，即关注用户所有操作，同时定义“系统如何配合与响应”这些用户行为。任何一个交互设计的项目都有很大部分牵涉处理“用户错误”当用户发生错误时产品要给出什么提示，并且对于错误发生时，如何防止用户再次发生错误？第一个也是最好的防止错误的方法，就是将产品设计为不可能犯错的。第二个避免错误的方法就是使错误难以发生，即使一些错误发生，产品也应该帮助用户改正错误。有效的错误信息和容易自我解释的界面可以在错误发生之后帮用户纠正。当用户完成一些操作后无法纠正的错误，产品就该提供从错误中恢复的方式。对于那些不可恢复撤销的错误，提供大量警告就是产品唯一可以预防的方法。
信息框架：研究人们如何认知信息的过程，对于产品而言信息架构关注的就是呈现给用户信息是否合理并却具有意义。在以内容为主的网站上，信息架构主要工作就是设计组织分类和导航的结构，让用户可以高效率，有效的浏览网站的内容。信息框架与信息检索和分类体系密布可分，针对分类体系我们可以从上到下或从下到上这两种方法来建立。
从上到下的信息架构从战略层考虑，先从最广泛的，有可能满足决策目标的内容与功能开始进行分类，然后再依据逻辑细分出次级分类；从下到上根据对“内容和功能需求分析”而来，从已有的资料开始，先把他们分为最低级别的分类，然后再归纳到高一级分类，从而逐步构建出反应我们产品目标和用户需求的结构。这两种方法各有弊端，从下而上容易将内容的重要细节忽略，从下而上使架构过于精准的反应内容，对于后期的维护变动不是很灵活。因此我们要尽可能的从两种方式中寻找一个平衡点。一个高效结构的优点就是具备“容纳成长和适用变动”的能力。一个适应性强的信息架构体系，既可以把新内容作为现有结构的一部分容纳进来也可以当成一个新的部分加入。
在充满概念型的结构层牵引出大量需求后，这些需求都是来自我们战略目标的需求。在框架层我们要更进一步的提炼这些需求结构，确定详细的界面外观，导航和信息设计，这样才能使结构变得更加丰满。框架层需要处理更为细节问题，在结构层我们建立了一个框架和交互设计。在框架层我们关注点就是界面的元素以及它们之间的关系。当我们提供用户做某些事情的能力是，属于界面设计；当我们提供用户去某个地方能力，则属于导航设计；当我们要传达想法给用户时，那就是信息设计。
界面设计：成功的界面设计就是要让用户一眼就看到“最重要的东西”，而另一方面，不重要的东西，不应该被注意有时候则它们根本就没有出现在那。设计界面，平面最大的挑战之一就是弄清楚用户不关注的东西并减少他们的比重。将第一要表达的要素快速传递到用户。
导航设计：任何一个网站的导航设计必须同时完成三个目标：1.它必须要提供用户在网站的跳转方式；2.导航设计必须传达出这些元素和它们所包含内容的关系；3.导航设计必须传达出它的内容和用户当前浏览页之间的关系；这三个目标就是必须要纳入考虑的范围，清晰的告知用户“他们在哪里”以及“他们能去哪里”把用户当成是“傻瓜上帝”。
习惯和反射作用是我们与这个世界交互时的基础，我们在使用互联网产品这么多年的时间中，绝大部分的操作效果和下意识的操作方式已经被养成，所以要让你的界面与用户早养成的习惯保持一致是很重要的，界面要与它自身保持一致。这并不是说，每一个界面问题的解决方式都必须毫无条件的死守这些习惯。当某种不同的方式有明显的益处时，你反而应该尝试谨慎的违背一些习惯，到那时需要我们做的每一个决定都要有充分的，明确的理由。有效的使用比喻，就是减少用户在“理解和使用你的产品功能”是的猜忌，让用户第一眼就知道你的图标表达的是什么意思，要有强指示性质。
内容，功能和美学汇集的地方，完成其他四个层面的所有目标并同时满足用户的感官感受。在框架层，我们主要解决放置的事情；在界面设计考虑可交互的元素布局；导航设计考虑在产品引导用户移动元素安排；而信息设计考虑传达给用户的信息要素的排布；在向上就是表现层，我们这里要解决的就是弥补“产品框架层逻辑排布”的感知呈现问题。我们每一次经历最终都是由我们的感觉器官来进行的。在设计的过程中这是用户体验的最后一站：决定我们设计最后被哪些（视觉/听觉/嗅觉/触觉/味觉）感受器官受到呢？
嗅觉和味觉对于用户体验设计师是很少考虑的范围；触觉更多的用于工业设计领域，关注用户和产品之间的物理接触；听觉可以应用到不同类的产品中，如开机/新消息提示等；视觉：这是用户体验师最得心应手饿领域，几乎所有的产品都会涉及视觉设计。代替用“什么具有美感”来评估一个视觉设计方案，应该吧注意力集中在他们能否“良好运作”，对于那些上层决定的目标，设计能否赋能帮助企业更好的变现，设计的本质就是用合适的方式帮助用户/企业完成需求目标；
忠于眼睛评估一个产品视觉设计最简单的方式，就是你的视觉首先落在什么地方？哪个设计要素第一时间吸引注意力？它们对于战略目标是最需要表现的东西吗？用户第一时间接受的信息是你想要表达的吗？设计还是要把握4大基本原则：对比；重复；对齐；亲密性；
不管你的产品多复杂，用户体验都是一样的，创建良好的用户体验最重要的工作内容就是大量收集解决细微的问题。“成功的方法”和“注定失败的方法”归根究底就是：1.了解你正在试着去解决的问题；2.了解这些解决办法所造成的后果；必须要同时考虑五个层面的全部因素，这对于创建成功的用户体验至关重要。
提成正确的问题，面对那些用户体验需要解决的纠缠不清的问题，要抱有一种正确心态，不要以“节约项目时间或金钱”名义对用户体验问题敷衍了事。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：许小鹏 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
决策疲劳在现今互联网深度发展的时代似乎非常常见，面对眼花缭乱的APP页面，我们通常会因为需要做出过多决策而烦躁。那么产品设计者应该如何减少决策疲劳现象，给予用户更好的体验。本文围绕解决用户决策疲劳展开了详细讲述，推荐对此感兴趣的伙伴阅读。
决策疲劳是用户体验圈一个路人皆知的词汇，用于描述人们在某个时期内做出过多决策而导致厌烦的情况。研究表明，它主要发生在人类的认知能力在单位时间内随着时间的延长而减少时。这就是为什么学习、钻研问题，是一件非公众都能做好的少数事件。
在产品设计中，我们要坚持减少用户需要做出决策数量的基本原则。保证用户使用产品来完成一项任务，能够越顺利、越直接。个人在特定时期内被要求做出的决定越多，即使这些决定是微不足道的（比如选择播放那个节目），他们的决策质量也会越低。
当你感到疲倦时，这会显著地影响你的决策能力，而 设计师在为用户设计界面时必须了解到疲劳可能对用户的影响。这个话题很有趣，因为人们在使用你的产品时可能会遇到的认知过载的原因有很多。
本文重点是介绍在你进行下一个 产品项目时减少认知过载的六种方法。
作为用户，每天我们拥有的选择题都在呈指数增长。互联网让我们可以在瞬间访问世界上的内容。如此多的选择会使我们思维迟钝，降低我们的满意度，并可能导致我们对体验感到沮丧而不是变得更好。
当给用户太多选择时，他们往往会感到困惑和迷茫。一个产品可以拥有世界上所有的功能，但是当界面因为选择过多而过于复杂时，它最终给到用户的体验一定很差。《人格与社会心理学杂志》的一项研究表明，当我们有太多选择时，往往会导致决策失误和情绪沮丧。
来自哈佛商业评论的模型
在追求最大化满足商业化可能的产品设计中，老板可能会要求在其产品中包含过多或过少的功能。通过使用哈佛商业评论提供的模型，横轴为功能数量，三个点依次为用户复购最大化、用户终生价值最大化、用户初次购买销售最大化，公司能够根据他们想要的结果找到适合他们的功能数量最佳点。
研究表明，人们更有可能购买提供了有限数量的商品。在这种情况下，他们也会对自己的选择更满意，而不是从购买前的犹豫到购买后的忐忑，从而产生更大的满足感。
关键是很多产品为用户创造了太多的选择，这可能会造成浪费并适得其反。用户可能会浪费时间尝试点击所有可能的产品，而不是按照预期进行实际购买。
在用户体验世界中，关于使用多少次点击以及人脑一次可以接收多少信息，存在许多相关的说法。但最重要的是，产品设计师需要在简单性和功能性之间取得平衡，这样他们就不会要求用户做太多的操作或过多考虑用户的需求遗漏了什么。
最容易被误解的理论之一是乔治米勒的“神奇数字 7”。有人说产品设计应该只有七个菜单选项卡或下拉列表中的七个项目。
这是个谬误，虽然我在某种程度上同意这种观点，因为坚持这样的限制似乎更自然，但我们也必须考虑信息是如何随着社会和我们的大脑发生变化的。当前的互联网会通过网站和大屏手机向我们展示数据，而不是早年的4.0英寸的小屏手机，用户可以轻松地一次看到他们的所有选项，并不是非要强制通过数字7的限制让用户一块很大的屏幕上来回滚动。
同时现在也有一些研究表明，人们有可能喜欢有多种选择的菜单。我们拥有的选项越多越好，因为用户不必花时间深入查找相关信息。
比如主页上最多包含 几十个类别链接的淘宝列表）比仅提供有限选项（如没有子类别的类别）的网站更有用。但这里要强调的是需要考虑实际的用户场景，电商平台的属性导致了要为消费者提供更多的选择，而类似工具产品，尤其是垂直工具产品，在设计选项数量时一定要谨慎。
还有另一个站不住脚的理论：从业者普遍接受但完全不靠谱的“三击规则”，或者更加扯淡的“两击规则”。用户的满意度和事件完成率其实并不一定受几次点击影响，比方说付费流程，缺少必要的流程硬按点击次数把流程缩短，导致用户错误付费而产生的用户体验变差几乎是不可逆的。
比菜单选项卡或下拉列表的数量更重要的是视觉体验。视觉布局可以更轻松地扫描和记住每个选项。根据信息搜索理论，信息线索的持续感知对你的用户体验很重要。
人们在日常生活中要做出很多选择，而太多的选择可能会让人不知所措。当我们因产品特性不得不呈现更多的信息时，重要的是信息组织方式。
你可以去尝试减少选择的数量，但最重要的是你的信息结构。如果你的信息没有组织好，或者给到用户的决策过程中涉及的步骤过多，用户就不会费心去寻找他们想要的东西，因为他们觉得这会花费太长时间或可能没必要去更更努力地探索。
为了在产品上让用户的决策中有更好的转化，我建议去掉任何不必要的东西，例如无关的标签和链接，这些标签和链接会分散用户的注意力，使其无法找到他们正在寻找的东西。同时综合产品特性去考虑实际该有的流程数量和必要选项，平衡简单性和功能性的关系。
现实中我们都会犯错。它可能发生在我们所有人身上！但是，如果用户犯了错误，优秀的产品设计师应该怎么做？
答案是：让用户轻松回到起点。
通过让用户走上正轨，你更有可能留住他们作为用户，而不是导致他们离开你的网站或应用程序。
下面是我在设计用户流程时的一些最佳实践：
导航是任何网站或应用程序的核心。这就是让你的设计能够让每个人都易于访问和使用的原因。设计出到适合你产品的导航系统，对用户体验至关重要。
导航的设计应该直观且易于使用。用户应该始终知道它在哪里，它的意义，以及点击它会去哪。
一个好方法是通过颜色为用户对操作区域进行导航：比如当进行切换、更改等动作时配备不同的颜色，并用文案清楚地说明每个菜单项下是什么功能。
这些小动作有助于使浏览您的网站或应用程序成为一种畅快的体验。
一个例子是 Instapage 登陆页面。如果标题没有箭头，很难看出下方有更多内容：
在设计新界面时，必须尽可能降低受众的学习成本。一个方法是利用他们已经熟悉的模式和习惯。但是你怎么知道这些约定是什么？
下面是三个常见的 设计惯例，这些惯例可以让你的用户在与产品内交互时感觉更熟悉，这有助于减少他们的学习成本，并让他们更快地开始学习你试图传达给他们的任何内容。
简洁的配色方案要远比复杂华丽的配色更有效果。人眼会被颜色所吸引，因此如果你在整个界面中使用简洁的配色方案，人们会更容易找到自己想要的信息而不是被颜色乱神。
不仅要遵循常见的用户体验规则，而且要在一个产品里不停的重复，不要轻易作新颖的尝试，前辈们大多已经帮你尝试过了。
这样的意义在于：
人们使用你的产品感觉更轻松，因为这个产品没什么复杂的新东西（降低了学习成本）。
一个例子是，目前无论你在那个浏览器查看哪个页面，你的菜单栏都会保持在站点的顶部或底部。这会让你产生导航认知，因为它在帮助你决定下一步需要采取什么行动时减轻了学习成本。
图标是在你在表示操作对象是什么的好方法，它们易于理解且具有普遍可识别性，因此非常适合作为交互介质。使用在生活中已经被广泛理解的图标和符号有助于让你的产品内容不会感觉难以理解和过于复杂。
图标一定要广为人知——例如房子。这个图标被普遍认为是“主页”或开始屏幕的图标。垃圾桶也是一样——这个图标被认定为一个垃圾桶图标来删除一个元素。
我们都知道应该以用户为中心进行设计，而不是你自己，但其实不是那么容易。当你处于设计过程中试图弄清楚你的用户需要什么或他们会如何反应时，其实往往会按照自己的喜好走偏。
一个方法是你可以使用一些简单的技巧来确保你在设计时考虑到你的用户。有些人发现从第一人称的角度写下他们的想法有助于将自己想象成最终被服务的用户。
或者某些设计师会讲角色分类，然后全情单线程的专注一个项目，以牺牲时间和效率为代价确保航道的正向。
以用户为中心进行设计的最佳方式是听取用户的意见。当你从事一个新项目并考虑这个产品将如何服务于用户时，请确保在进行原型设计之前先和你的用户聊聊。
可以尝试提出以下问题：
往往你会惊讶于他们可以提供的见解以及他们将期望如何改变你原型的方向。
你可以使用多种用户体验研究方法来确保你在设计时考虑到用户：
不要提供太多的选项或功能让用户不知所措。
每个产品都有自己为用户解决的核心问题，用户希望在产品中获得帮助并快速做出决定。问题是，很多产品经常沉迷于他们产品功能以及他可以为用户实现什么，忘记了如果有太多选项和功能，新用户可能会感到不知所措。
如果你负责一个产品，可以考虑你的用户在面临过多选择或功能时的感受，并尽量优先突出他们最需要的选项或功能。
例如，在电子商务网站中，用户不能从 50 种不同的衣服面料中选择他们最喜欢的材质，如果预先只有三四个选择，可能会带来更好的体验。也可以考虑隐藏一些选项，方法是使用视觉提示，例如类似“探索更多”文字的按钮。
确保将最重要的信息呈现给用户的一种方法是将信息流设计为金字塔形状，首先呈现基本信息，不太重要的信息尽量放在不显眼的地方或者想办法隐藏。
这里提供了六种方法，帮助你减少产品中的决策疲劳，从而使用户更有可能走上正轨，解决他们的问题，并帮助获得更高的转化。产品设计时把自己放到用户的角度去思考，才能更好的服务于用户
文章来源：人人都是产品经理 作者：公众号：真的不一定
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
以下内容主要分成两大部分，第一是聊聊响应式和自适应的区别和原理，以及我们应该如何去设计响应式界面；第二部分也是比较关键的B端系统设计的核心，B端设计中台完整构建过程的具体步骤，以及应用到的格式塔原则，和命名的一些注意事项，内容较多，大家可以根据上述目录来选择性阅读。
简单概括多端兼容设计的发展史，最早是桌面端，比如桌面的一些应用；后来出现了移动端，针对移动端大家用的都是WAP，指一种无线应用协议，大家在用手机浏览一些网站，会把网站翻译成一种低流量的浏览方式，比如去掉图片大图，只剩全文字，因为当时网络不好，早在3G和2G时代移动端用的都是WAP；在2008年之后出现了响应式，也就是做一套代码可以兼容三端（网页、移动端、iPad）设备，在发展的同时也遇到很多问题，但响应式同时也遇到了很多问题；于是又出现了自适应，指不同的设备打开不同的页面进行自适应，自适应能增加效率，但需要增加工作量；2017年以后直到现在看到最常用的就是渐进式，类似完整的像在使用一个APP。这是多端兼容设计的整体的发展。
可以理解成用户在手机、电脑、ipad打开同一个界面，所呈现的界面是一样的。需要考虑移动端设计和网页端怎么通过一套代码进行兼容。
自动布局算是响应式的一种，但平时看到很多响应式其实并不是真正的响应式，而是自动布局，因为界面在不同的设备用的是不同的模板，当我们用电脑打开呈现的是一套模板，而用手机打开则是另外一套模板，这种看起来是响应式，其实不是。因为当我在开发者模式下调节不同设备展示时，就会发现，其实是换了一个网址来根据不同的设备进行自适应的，而真正的响应式是不需要刷新的，在拖小窗口的时候就会变成手机端的那个样子。
渐进式布局是近几年比较新起的，这种布局设计，很像一个网站或者本身它就是一个网站，但用起来就像一个APP一样，看到这里大家很容易相到，小程序就是渐进式布局得一种，小程序明显是一个网页，但通过技术的一些嵌入和一些接口或者缓存的方式的操作，让用户在使用的时候感觉小程序就是一个APP，但核心技术还是web网页。
响应式的原理是通过定位的方式来做响应式的各种开发，需要在页面中至少标出这十个点：中心点，上下左右点，上左上右点和下左下右点，这几个点其实就代表了做响应式和做布局相应的位置。这样可能大家不容易理解，其实结合figma来看，这些点对应的就是这样（如下图），在figma中的布局点。设计师通过调节图形的布局点，可以做到在页面拉伸时，让想动的元素跟随变化，不动的元素静止不动，这就是响应式的原理。换言之，我们做响应式布局的原理也就是通过figma或者sketch中的布局约束这个功能来实现的。
01、响应式
如下图是响应式的优点和缺点。响应式其实就是只开发一套页面，这个页面兼容三端。虽然做了响应式，但如何响应是需要设计师去设计的。比如我们设计了一个移动端界面，然后全部做好对应的自动布局，再进行页面拉伸，内容随之会发生变化，比如当拉伸到1024*768的时候，也就是iPad的尺寸，就会发现局部在设计上有些不合实际情况，这时就需要设计师在对应尺寸的设计稿上进行内容上的微调，比如按钮不可能那么长，就把按钮设计的短一点。当继续进行拉伸到1440网页的宽度时，然后再酌情针对网页尺寸的呈现样式，局部进行尺寸的调整，比如文字和按钮被拉伸到网页版都需要居中对齐，电脑端的样式就需要设计师重新排版了。
通常在B端系统，设计师需要做响应式设计时，往往是从大往小做设计，这也取决于这个B端产品是否需要进行移动端的设计，《B端设计总概二》中提到过什么情况下进行设计B端移动端。如果需要设计B端移动端，就需要我们将网页改成移动端设计，比如B端的侧边栏导航在拉伸到移动端时，就会变成用一个折叠悬浮的iocn来替代等等这样设计上的改变。在figma中，做三端拉伸时候，可以用断点插件来进行演示，通过对断点插件的设置，就可以完美的看到页面在三端不同情况的适配呈现，断点插件用来做演示非常方便。
02、自适应
如下图是自适应的优点和缺点，其实就是一个项目开发三个页面，分别做定制设计，网页端、移动端和Ipad端。
我们都知道2021年也就是今年是我国新基建的元年，十四五规划2035远景目标里提到重点发展传统企业数字化转型，尤其是今年我们设计师更能深刻体会，C端和B端已经是完全两个不同的行业，C端发展近十年，已经很难再做到创新上的突破，该做的功能和创新都已经做了，而B端这片蓝海才刚刚开始发力，很多企业也都在考虑B端系统的搭建，降本提效率成了很多公司新的指标，因此数字化转型重点在于B端系统探索，B端重点在于中台的搭建！设计师通过设计中台，构建出基本的业务类型，再分类到业务中，构建出不同的业务界面，所以设计中台非常关键，很多公司经常会用这两个系统去构建，Antdesign和Elemnet就是设计中台，我们会发现用Antdesign可以做出很多的系统，那怎么进行设计中台的设计呢？和我们设计师有什么样的关联度呢？带着这个问题，我们深度探索B端设计中台的落地！
概念：中台是互联网的术语，一般应用于大型企业，中国互联网的变革永远是从大型互联网开始，大型互联网公司引发了技术的变革，这也是中台的兴起，一般指搭建一个灵活快速应对变化的架构，快速实现前端提的需求，避免重复建设，达到提高工作效率目的。
作用：降本提效。如果没有组件库，普通设计师一天最多做十个页面，再多就不太可能了，如果有组件化得产生，一天可以做一百个左右的界面。在面对B端系统这样几千个页面的巨大的工作量前，组件库的作用尤为重要。但如果落地，就需要前端工程师的密切配合，因为设计师设计的组件只是一个样式，而前端需要把组件进行代码化，所以组件一定是代码化的，也就是说只有代码化的组件才是真正的组件。所以视觉组件的复用，和前端代码的复用，可以大大提高设计师的工作效率。
基本库指的是一些色彩系统、字体系统、图标系统、栅格系统、间距系统等等，之所以强调系统两个字，有系统就要统一规则和统一规范，然后进行调用应用在系统中的各个地方，比如我们想调用一个颜色，不是去随选用一个颜色，应该严格的从色彩系统中去调用，如果系统组件库里没有这个颜色，我们也绝对不可以使用，可以先用替代色做或者根据业务再进行补充颜色进组件库为了后续的调用，这是一种比较严谨的使用方式。所以在建立组件库的时候我们要考虑全面，组件库中如果没有相应的组件，我们应该试着反推一下，是否要加进组件库中去，来进行系统的调用。在做中台的过程中，我们一直使用Antdesign，我们对组件的名称，组件的分类其实一点都不陌生，其实Antdesign也在借鉴国外的Bootstrap组件库（大家感兴趣可以下载Bootstrap组件库进行查看），所以并不是Antdesign组件库形成了一定的规则，它也是在沿用别人的规则，而这些规则也需要不断的有大公司去继承出来，所以慢慢衍生出来现在这样的组件库，那中台设计，首先要搭建基本库，把基本库里的基础一些系统搭建好后，我们继续去做扩展库。
如下图，扩展库中包含了很多内容，比如分了四类，导航系统，数据录入，数据展示和反馈系统。其中导航系统又包含了，面包屑导航、下拉菜单、导航菜单、顶部导航等等，包括后面的数据录入、数据展示、反馈系统也包含了很多内容。我们做这样的扩展库，也不需要做成像Antdesign的组件库里包含的那么多，或者和新出得字节Arco组件库，因为它们面向的是系统级的解决方案，各行各业都可以用它，它面向的是一个大系统，也许我们只涉及到了其中的20%，因为也没有一个系统能用到它所有的组件，所以我们自己在设计组件库的时候，一定是按照我们自己项目的范围去做组件库，而不是做一个大而全的，大而全的组件库对我们也没有意义。它们做的是公共平台，而我们要做的是一个专属平台。
形成完基本库和扩展库后，第三步是建立方法库。方法库告诉我们的是什么时候用，比如我做了一个多选框，这个多选框应该什么时候用，是不是只要遇见一个选择就去用多选框，肯定不是，应该加以说明什么时候用这个多选框。类似于是组件的设计说明。
最后再做一个案例库，最佳实践库，具体组件什么时候用我们知道了，接着案例库就是在告诉我们应该如何正确的使用，或者说的方法是什么。比如标签的左对齐和右对齐，这种情况都对，什么时候用顶对齐，什么时候用左对齐，什么时候用右对齐呢？那么根据眼动仪实验数据数据来看，并且结合给出一些工作中业务中的最佳实践得案例放进去，给使用的人去做指引。
所以设计师做的事情，不仅仅是应用组件库和创造组价库，还应该指导其他设计师，指导开发人员在去复用每个页面组件的的时候，应该怎么正确的使用，这也是在B端设计中一个关键的环节，同时我们的视觉系统一定也是和业务有关联度的，所以在B端中做设计一定也不会脱离业务去做，我们一定要联系到实际的业务场景中，这个业务场景指的就是业务和视觉的结合，在做C端的时候，业务场景一定不会比B端多，C端的业务场景大多是定制化的业务场景，它要求的是个性化，不要求通用，尽量得个性化，比如图标、按钮、页面，而B端需要统一化，中台组件库的落地，可以大大提高设计师的工作效率和开发人员的协同效率，严谨的调用组件使用组件，可以使得系统页面保持高度的一致。
如图1：可以看出纵列的关系更紧密，因为纵间距小于行间距。
如图2：可以看出行间距大于列间距，它得横向关系更加紧密。通过图中这样的视觉设计为什么会感觉间距更加紧密呢？这属于用户心理学的应用，如果元素相邻的更近，元素之间的关系就会更加的紧密。
如图3：如果元素相邻的关系都是保持一样的，那么它们的关系是相对对等的。
由此可以得出结论，如果相邻的关系越近，它们的关联度就越近，如果相邻的越远，它们的关联度就越远。
应用案例：如图4卡片中得标题和内容，设计中把标题和内容进行区分，所以我们会做大量的留白，这样的留白就会让信息结构具有层次感，层次感就是指它们信息结构的关联度，如果想让它们有关联度，就让它们距离近一点不要做区分，如果不想让它们有关联度，或者关联度出现一个等级的区分，那么就可以加一条线，让它们之间的关联度分隔开。这就是格式塔接近性的应用。
如图5：如果去区分右边的形状，通常我们会根据形状进行区分，因为人的潜意识会认为相似的形状会更有相关的分类性。这就是格式塔中的相似性原则。
应用案例：如果文字的标题大小是保持一致的，包括它有统一的大小，统一的色彩，统一的字号，那系统中的其他同样功能的地方，都应该用统一的文字，这就是格式塔相似性的应用，比如图标也是一样，只有用了相似的图形大小，相似的颜色，在相同的位置，用相同的图标进行表达，图标之间的设计才具有相似性。
如图6：可以看到有一个L，是主体与背景进行了区分，如果在设计的时候让L看的更加明显，我们采用的办法就是将主体的色彩或者形状变的更加独特，或者将背景的颜色变得更加分明，这样就可以做到那个L看的更加明显。这就是主题与背景区分原则。
应用案例：比如警告弹出，可以用色彩去区分，目标就是让用户看的更加得清晰，当警告的时候给用户一个警告的信息，当成功的时候给用户一个成功的信息。还有类似对话框的弹出，采用背景变暗和加阴影的方式，都使用到了格式塔的主体与背景变化关系的原理。因此应用在我们设计系统中，前景和背景进行区分的时候，我们就可以通过色彩进行区分，色彩的区分要保持统一，比如背景色彩透明度50%同时加一些背景模糊，其他的背景也需要保持一致，阴影也是一样，如果把阴影放在一个平面上，距离平面越近，它得阴影越短，距离平面越远，它得阴影越长，这也是阴影的层级关系。
如图7：可以看出这是一个四分之一的圆形。
如图8：这个图可以看出是一个五角星。
封闭性应用案例：当一个形状被另外一个形状或者被另外一个色彩阻断的时候，并不影响人们对这个形状额外得认知，一定会脑补出另外一个形状，这个原则和我们UI的关系是什么呢？比如一个loading，半圆一直在旋转，或者图表中的圆占比，我们就可以判断出谁大谁小，谁多谁少，判断出当前的进程和位置，封闭性原则通常应用在图标的设计，图表的设计和步骤条的设计中。
如图9：可以看出用一些简单得形状来体现，其中三角形具有明显的指向性，三角形箭头指向右边，上面五个是一组，可以看出它们具有连续性；另外一组三角形箭头指向右下角，可以看出它们是连续的一组。不同的形状会有连续性，箭头也特别有指向性，这就是为什么返回和前要进放在不同的位置，当我们的数据需要有连续的时候，我们也要使用相似的形状来表达，这就是连续性原则的应用。
同理如图10：连续性一定是要有连续等阶的变化，从左上角开始，向下和向右我们可以看出有明显的颜色连续等阶变化，通过色彩的透明度也可以做到连续性。
很多公司或者不同公司有不同的命名方式，这个需要和团队开发提前做沟通，主要以方便开发习惯操作为主，如果不命名也不能非得说成是错误的，命名可以理解成是一件锦上添花的事情，因为一切都以效率优先，命名自然会影响工作效率，通常情况，组件的命名可以分成组件的名称、级别、尺寸、状态，这样的命名顺序来进行，这样命名开发使用也比较方便，因为是按照了开发的统一规则来进行命名的。如图所示：
当英文不好的时候，推荐大家记常用组件英文名，以及常用状态名、级别名、内部名、尺寸名和位置名，那这些英文也几乎涵盖了工作中80%的英文词汇，收藏记忆哦~
文章来源：站酷 作者：飞鱼十七
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“复杂是世界的一部分，但它不应该令人困惑，好的设计帮我们驯服复杂，不是让事物变简单（如果复杂是符合需求的），而是去管理复杂”--唐纳德·A·诺曼
与复杂共处，这是一个有趣的话题。在这个奉行“少即是多”的时代，设计师对于复杂噤若寒蝉，认为优秀的设计应该简洁明了，若无必要，勿增实体，而复杂则常备被视作失败设计的标签。设计师为了保持设计上的简约挖空心思，甚至试图通过削弱功能的方式来降低产品的复杂度，得到自己想象中的完美设计。然而一味追求“简单”的设计真的符合用户的实际需求吗？从心理学的角度来看，复杂的事物往往功能强大，而功能强大意味着更好的服务与更高的价值，用户也更愿意为之付费。当我们购买商品时，我们会仔细斟酌，拿着产品的功能列表反复比对，这个时候我们忘记了产品复杂与否，更多考虑的是功能是否满足自身需求。
对于大部分B端产品而言，复杂或许难以避免，复杂是出于实实在在的业务的需要，而非某位设计师的错误喜好。B端产品之所以给人感觉会相对复杂，是因为产品需要完成复杂的工作任务，界面内承载的信息内容较多，在视觉上会带给用户压力，直观感受上觉得产品很复杂。但是这些信息又都是必需的，如果缺少这些必要的信息，会对用户理解和使用产品造成阻碍。就如同飞机的驾驶舱，密密麻麻的按钮如此复杂，但是每一个按钮都有着相应的功能，不可或缺。既然复杂难以避免，那么作为设计师我们不应该被动接受或盲目拒绝复杂，我们应该学会如何与复杂共处，去尝试驯服复杂、管理复杂。
相信很多设计师和我一样，经历过现代主义浪潮的洗礼，对于简约的设计有着或多或少的偏好。因为这种偏好，在自己进行设计时也希望能够选用这种风格，在设计时刻意的去追求界面简约，却忽略了界面上的简约不等同于产品易于理解和使用。从心理学的角度上看，复杂的事物更容易理解，简单的事物反倒令人困惑，一味的追求简单反而会让事物变得复杂。
B端产品的目标是降本提效，追求简约的设计思想在B端产品的设计中并没有那么适用，为了提升用户的操作效率，我们需要将一些能够帮助用户理解的信息与常用的操作直观的展示给用户。这会在一定程度上增加界面的复杂度，但是相较于产品视觉界面会因此变得复杂，产品的易用性和操作效率对于B端产品而言会更为重要。
与复杂共处的前提是能够理性地看待复杂，复杂本身的含义即非褒义也非贬义。复杂描述的是事物的状态，它在词典上的解释是拥有很多即错综复杂又相互关联的组成部分的事物。产品复杂与否是由产品本身所从事的业务和需要完成的任务来决定，就像我们不能要求一个做机械结构设计的工程软件做得像一个图画板一样简单，因为两者的功能需求不是一个层面的，所以我们也不能单纯的将产品简洁还复杂作为评判一款产品优秀与否的标准。
我们之所以对复杂怀有畏惧，其实更多的是畏惧令人困惑的复杂，复杂与困惑有着本质的区别，理解他们之间的区别很有必要，复杂描述的是事物的状态，而困惑表述的是用户使用产品时的心理。复杂的背后可以拥有规则与逻辑，理解这些规则和逻辑，能够帮助我们理解和使用产品。而令人困惑的产品往往缺少这样的内在规则与逻辑，用户难以理解产品的运转机制，需要花费很大力气才能完成有效操作，容易让用户产生挫败感。产品可以是复杂的，但是不应该让用户困惑。
在很多复杂的传统线下业务数字化转型的过程中，为了让产品易于使用，设计师需要深入到一线，去了解真实用户在线下业务场景中是如何处理日常任务的，在流程线上化过程中也需要遵循这样的业务流程，这样能够让用户更快上手，而如果我们在设计过程中不去参考用户在线下的操作场景，按照自己的想法去意测用户的行为，这样设计出的产品背离了用户的心理模型，缺乏内在逻辑，会让用户感到混乱困惑，陷入深深的麻烦。
基于产品本身功能需要，我们可能无法很主观的去降低产品的复杂度，这就需要我们在进行产品设计时花费更多的心思，通过对业务流程、页面布局、信息呈现上的调整与设计让产品变得清晰，不让用户陷入困惑。如下图的关于表单编辑器的A\B两种设计，用户在编辑器内完成一系列针对表单的编辑、配置操作，然后发布表单。方案A中将这些表单编辑配置项通过tab进行排列，这种方式结构简单，但是扩展性较差，过多的栏目也容易让用户陷入困惑，不清楚需要完成哪些配置项才能进行发布。方案B中采用了步骤导航加侧栏导航的双层导航结构，在步骤导航上给出完成表单编辑配置的主要步骤，在大的步骤下用侧栏导航承载小的编辑项，结构清晰，且能够对用户编辑表单提供一定的帮助指引。虽然两种方案信息内容上都一致，视觉观感上甚至方案B更为复杂，但是方案B在这里可能是更合适的方案，因为方案B在配置流程的指引上更为清晰，也更贴近用户心理模型，即使没有使用过在线表单的用户也能理解产品流程，因而用户能够更容易的完成表单配置并发布表单。
我们在使用产品时，都会有一个大概的心理预期，会认为某一类型的产品会较为复杂，某一类型的产品会相对简单。为什么我们会有这样的认知呢？是因为我们知道这些产品大概有哪些功能，而这些功能就决定了产品的复杂层度。产品的复杂程度由产品的业务与功能决定，而不是依照设计师的自我喜好，像如淘宝、京东这类的购物网站、拥有着很多的栏目，所以淘宝、京东的界面相对来说较为复杂；而像百度这样的搜索引擎功能相对来说比较简单，所以界面设计相对简单干净。
我们可以容许一个功能强大的产品设计得相对复杂，但是一个功能简单的产品设计得复杂难用就是一个灾难。作为设计师我们需要根据产品的实际需要来进行设计，即不过度设计，也不执着于追求简约，而是基于需求恰到好处的进行设计。
复杂的产品会有好的用户体验吗？答案是肯定的，用户体验的好坏与产品是复杂还是简单并没有直接的关系，很多时候复杂的产品也能带给我们良好的用户体验，在互联网产品中，我们可以看到很多复杂的产品，这些复杂的软件产品，一点点的改变着我们的生活与工作方式，让我们生活与工作变得便捷与高效。
首先可以看看我们的国民级电商应用淘宝，乍看淘宝的界面，可能会觉得十分复杂，甚至会给人一种眼花缭乱的感觉，但是包括我在内的许多人仍然十分喜欢逛淘宝。淘宝内除了有本身的淘宝、天猫店铺外还有专做海淘的天猫国际，做社区团购的淘鲜达，专做拍卖的阿里拍卖等数十个板块，业务繁多，功能复杂，但这几乎很难改变，因为之所以做这些业务和功能背后都有着商业上的考量。从交互设计的角度看，虽然淘宝的业务和功能繁多，却有着清晰的布局、信息对齐、内容组织，产品尽管复杂，但并不令人感到费解和困惑。购物流程也与用户在线下购物流程相仿，贴近用户的心理模型，用户容易了解产品功能、容易与之交互，整体上有着良好的用户体验。
又如我一直在使用的一款笔记软件Notion，Notion相对于印象笔记、有道云笔记而言更为复杂，需要花费一定的时间成本学习才能够从容上手使用，但是这并不妨碍Notion被众多使用者所追捧。Notion的很多功能在使用之前，甚至都不会想到会出现在一款笔记产品里面，如甘特图，多维表格等，这类功能一般出现在项目管理类软件中。而Notion块结构的布局模式，让笔记能够自由拖拽，拥有了极强的自由度，用户可以很自由的用各种各样的形式来记笔记，要是你肯再花一些心思，你甚至可以在Notion内搭建一个个人专属网站来记录的学习知识，打造个人专属知识库。将我们习以为常的线性笔记思维，转变成纵向思维，甚至是网格状思维。Notion无疑是复杂的，但是这样做是为了给用户提供的强大功能和极高的自由度，这些功能恰恰也切合了用户的需求，创造了一种全新的笔记体验，带给用户愉悦的使用感受。
简单是产品追求的最终形态吗？其实未必，很多时候产品设计的过度简单反而会给用户带来麻烦。为了追求简单的设计，不可避免的就需要隐藏一些信息或者拉长操作路径，这是一个权衡的过程，我们在做设计时也会经常面临这样的抉择，是追求视觉上的简约美观还是信息传达准确性与操作上的效率。给用户一个简约美观的视觉感受无疑很重要，人们对于美的事物往往更有耐心，也更愿意去探索。但是对于一款针对B端用户的效率软件、办公应用而言，准确的传达信息，帮助用户进行判断，频繁使用的功能设计得更高效便捷，这些点能带给用户更实际价值，也是我们在设计产品时应该优先考虑的点。
特别是在一些专业性的软件中，如果我们为了追求简约而弱化或者省略掉一些关键信息，还有可能会导致用户错误操作的出现，造成严重的后果。试想一下当你在使用软件编写一个计算字段时，软件提供给你了计算公式却没有就近给你提供计算公式的解释和用法示例，导致你因为书写上的不规范使得计算结果频繁出错。这时你可能会满怀愤怒的抱怨为什么产品会如此难用，为什么不能配置过程中给到更多的反馈与帮助信息来减少配置错误的发生。
前面我们了解了关于复杂的定义，认识了复杂与困惑之间的区别，也明确了在B端产品中复杂或许难以避免，复杂是出于实实在在的业务的需要而非某位设计师的错误喜好，既然复杂无法避免，我们就应该学会与复杂共处，管理与驯服复杂。那么如何与复杂共处呢，有一些策略或许可以给予我们一些思路。
复杂与困惑的本质区别在于复杂的背后隐藏着规则与逻辑，而困惑缺少这样的规则与逻辑，让人无法预测与揣摩，对应到软件产品的设计，一款成功的优秀的软件产品，应该是易学易用、能够满足用户预期，用户能够直观的理解产品的流程与主要功能，并通过产品实现自己的目标。那么具体到软件的设计上我们应该怎样做呢？
这里可以看看我们团队正在使用的研发管理工具TAPD，TAPD是一款敏捷研发协作工具，凝聚了腾讯研发方法及敏捷实践精髓，其中敏捷开发的方法就是TAPD的内在规则与逻辑，有过敏捷开发经验，理解敏捷开发流程的的开发人员能够快速的上手使用TAPD，对于不了解敏捷开发的开发人员也可以通过产品帮助中心学习敏捷开发思想，进而理解产品的功能与流程，因此虽然TAPD功能与页面结构相对复杂，但是基于对敏捷开发的认识用户还是能从产品复杂的功能界面中摸索出一条操作路径，实现自己的目标。这就是产品拥有内核思想以后能够带来的直观好处，将原本零散的功能点通过特定逻辑链接成操作流程，帮助用户更好地理解与使用产品。
相同的在我们公司自己的一个项目中我们也运用了同样的方法，在我们公司之前研发的一款crm产品中，为了给用户提供最佳的销售实践，帮助用户更快上手使用我们的产品，我们在设计产品时寻找了硅谷蓝图团队做了顾问咨询，并依照硅谷蓝图的销售转化路径来构建我们的产品体系，确定产品功能，梳理产品中的业务流程。并希望在以后为客户做实施的过程中能够将硅谷蓝图的销售方法一起带给用户，让用户能够更好地使用我们的产品，实现产品的最高价值，为中小企业销售团队赋能。
通过前面两个案例其实我们可以感受到，当一款复杂的产品有了内在的规则与逻辑以后，用户理解和使用我们的产品会变得更顺畅，用户不会迷失在茫茫的功能之中，通过理解规则与逻辑，用户能够对自己操作结果有一个大概的预期，而不是处于困惑状态，作为设计师的我们也可以将这种规则逻辑作为我们设计的引导，让我们的设计更为系统和有条理，让产品不再是一堆功能的堆叠，各自为战。
复杂是用户的一种心理感受，用户觉得产品复杂除了产品本身结构信息复杂之外，也是因为产品在设计上没有贴合用户的心理预期，用户很难理解产品的流程与交互，所以贴近用户心理进行设计就显得尤为重要。这里我们需要先了解三个概念，实现模型、表现模型和心理模型，三个概念的释义如下：
实现模型：产品是怎样工作的
心里模型：用户认为产品是怎样工作的
表现模型：通过设计来让用户认为产品是怎样工作的
表现模型越接近心理模型，用户就越容易了解产品功能、容易与之交互。表现模型越接近实现模型，用户越难理解产品，产品就越难使用。复杂产品在用户体验过程中的痛点在于用户需要花费时间学习或培训之后才能了解产品的运转机制，很多B端产品在设计时更多的偏向于实现模型，用户在使用产品的过程中会发现很多地方的交互和自己心理预期并不一致，使用过程中会遇到很多的阻碍，影响整体的使用体验。对于一款复杂的产品而言，我们需要让我们产品的表现模型更接近于用户的心理模型，这样用户能够更容易了解产品的功能，并与之交互。
大家使用电脑时有没有遇到过类似下图这样的电脑报错信息，里面是一堆的专业名词，看得人一头雾水。这时候我们能做的只有默默的打开百度，去了解弹窗里面讲的内容究竟是什么，了解后才明白原来这样，然后按照百度上操作步骤一通操作，侥幸解决了问题。但是当下次我们遇到相同问题时，可能还是不知道如何解决，无可避免还是需要求助百度。这个就是表现模型贴近与实现模型会带给用户的困扰，用户不是专业的开发者，他们不了解也不需要了解产品背后的实现逻辑，这对用户而言是没有价值的，给予用户这些信息不能对用户起到预想的帮助作用。贴近实现模型进行设计会让用户与产品交互变得困难，变相的是在人为的增加产品的复杂度，与复杂共处，我们需要学会贴近用户心理进行设计。
复杂的产品往往功能、页面繁多，如果页面内的视觉元素以及交互各自为战，那么放大到整个产品就是一个灾难，不仅是产品给用户感官上不统一、整体性差，过多的交互模式也会增加用户的学习与记忆成本，用户在这些相视功能但是不同的视觉与交互的模块之间容易陷入困惑，对用户使用产品造成困扰。针对这个问题，现在越来越多的公司开始通过搭建组件库的方式来规范自家产品内的视觉与交互，一个规范完整的组件库的确能够在很大程度上解决产品在视觉与交互上的一致性问题，通过模块化解决方案，也能降低冗余的生产成本，实现产品快速开发。因此很多人也认为搭建好组件库就能一次性的解决产品体验一致性问题，但实际上就算一个产品有了一个自己的组件库，依旧还会遇到体验上统一性问题，这是为什么呢？
在原子化设计理论中，粒子是构成页面的最小颗粒，粒子构成简单组件，简单组件到复杂组件，再到区块、页面。虽然用组件能去构建页面，但是还会遇到页面结构、交互不一致的问题，设计师各自使用组件去搭建并不能提升我们的效率和解决设计一致性的问题，在末端设计并没有做到约束。因此我们在构建好组件以后还需要继续抽取出了页面级的组装结构和交互模式。
这里我们拿B端产品中常见的列表页来举例，纵观所有后台列表页面，抽取后无非就分为这么几个区域。不同的业务可以通过基础组件和样式定义符合自己业务线的子模块。比如列表页中的筛选区，在不同的业务场景下，对筛选器的需求也各不相同，简单的可能只需要使用标签选择就能够完成筛选，复杂的可能添加很多的筛选项甚至选项之间还有且或关系，我们需要根据实际的业务场景设计适合的筛选器，但是需要注意的是一个产品中用到的筛选器形式不应太多，我们需要抽取归纳出三四种筛选器形式去覆盖我们产品内所有的筛选场景。来保证产品内不会出现各种相识却有各不相同的筛选器。
B端后台产品中比较常见的还有表单，我们可以归纳出产品内可能会使用到的表单类型，然后定义出具体的框架结构与交互，在具体的设计过程中在根据实际情况选用不同的表单区块。
一种常见的信息录入以及信息展示表单，这种形式是我们最长用。
分布表单适用于信息录入项以及信息展示项过多，在一个页面内已经不能合理清晰的组织传递信息，或者表单内容的录入方式或者展示方式存在较大差异，不适宜在一个页面内进行展示时。按照布局的不同也可分为横向步骤和纵向步骤两种。
组合表单因其结构能够承载更多的信息，每一个栏目都可以承载一个独立的表单页，有效的管理信息。
很多时候我们也会用弹窗来承载表单，好处是交互衔接流畅，不用跳页。
将产品中类似的区块做成最佳的交互模式范例，能够最大的程度的规范我们产品中的交互，这样才能真正的实现产品体验上的统一，化繁为简，让复杂的产品也能够调理清晰，上手简单容易。在面对复杂的系统级软件时，在统一组件样式的基础上还应该统一产品内的交互模式。
复杂的产品页面内信息往往都特别繁多，如果不做好信息归纳，用户将很难把握住重点内容，信息获取效率低下，十分影响用户的使用体验，所以信息的强弱的整理十分重要，那么什么样的信息是对用户而言重要的信息呢？
信息设计大师爱德华·塔夫特认为优秀的视觉设计应该是“将清晰的思考视觉化”，他还认为只有充分理解观看者的“认知任务”及一些设计原则才能设计出优秀的产品。
如何找到对用户真正重要的信息需要借助到产品设计中一个十分重要的工具--用户模型，通过调研的来得用户模型是对于我们产品客户的抽象归纳，通过用户模型我们可以确定哪些功能对于用户而言是高价值的重要内容该重点突出，哪些内容相对不是那么重要可以弱化处理，通过对于页面内容强弱的划分，用户能够更快的获取到对自己有用的内容，尽管页面仍旧复杂，但是信息划分合理、层级清晰、表意明确的页面人就能够带给用户良好的用户体验，帮助用户高效的处理任务。
复杂是产品的本来特性，本身不含褒贬，但是如果复杂不加以控制，让其发展为困惑与混乱，这对于一款产品而言绝对不是一件好事情，这样即使产品功能上很优秀，用户也无法长期忍受，一旦市场上出现替代产品，那么忍受已久的用户也将抛弃产品转向体验更好的新产品。
曾经我也是一个极简主义的追捧者，但是经历过越来越多的设计项目，我开始发现某些产品复杂性是必需的，将产品做得简单并不是其核心诉求。真正需要处理的问题也不是复杂，而是混淆的状态和由此产生的无条理性。解决的方法不是简单的去除几个界面元素，让其在视觉界面上变得简洁干净，而是要让产品拥有内在规则、一致且能够被理解。
文章来源：站酷 作者：Yone杨
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
目录
1.百度网盘 ：会员标识
2.当当：搜索记录隐藏
3.当当：分享动效 ➕ 一键制作朋友圈分享海报
4.抖音：点击复制 ID
5.飞书：效率工作—语言自动转化
6.美团：优惠卷新到提示
7.墨迹天气：一键登录（大部分应用已上线该功能，部分应用仍未上线）
8.起点读书：长按可进行互动
9.腾讯视频：亮度调节的动效设计
10.微博：点赞动效设计
11.知乎：删除搜索记录
12. QQ：可隐藏会话
13. QQ 音乐：搜索入口的听歌识曲
14. QQ 阅读：长按复制的放大设计
在开通会员后百度网盘会进行对于应用图标的更换，使得应用图标更加高级，在分享链接时也会加入会员分享的标识。
属于用户激励体系中的一个板块，增强用户的标识和身份。
搜索隐藏功能设定。
我们在使用各大应该的搜索功能时总会遇到过这样的场景，当你要某人或者在某种场景下需要进行搜索时，来不及删除自己的搜索记录出现社死的情况。
而当当的搜索隐藏就可以完美的解决这个问题，退一步讲我们可以思考一下为什么别的成熟型应用，没有采用这样的方式。大部分是没有这个功能，其余则是在搜索这一个功能上已经添加了其余用户体验的设计。所以在这一块就没法加入这个设计。
在当当应用中点击分享进入页面后不同于传统的分享页面，而是把分享到微信和分享到朋友圈进行了动态设计。并且在分享到朋友圈的右上角加上了海报的标识。我们点击会自动跳转生成海报。
这样的设计可以更加吸引用户的眼球并且自动生成海报可以激发用户在朋友圈转发的次数。
主页 ID 点击可进行复制 很多应用都有 ID 。但是当我们要进行 ID 搜索的时候，我们便需要一遍一遍的反复查看或者记住这个 ID 然后再进行搜索。
目前部分的应用也上线了类似的功能,让用户点击 ID 区域可进行复制。对于用户体验的提升有着很显著的效果。
飞书属于一款协同办公类的应用
在飞书的设置用有语音直接转换文字的说明，飞书本身便是一款协同办公类的产品。此产品效率便是产品关键词之一，所以加入这样的设置可极大的提升用户的体验。
有提示用户新到多少张优惠卷的提示
可以促进用户消费的同时能帮助和提醒用户去使用消费卷不仅提高了商家的销量还使得用户在消费中发现自己的优惠卷及时使用
一键登录
应用登陆中目前主流为（1.第三方登录，登陆之后需要再次绑定手机号。2.手机号注册登陆，登陆之后可选择是否绑定第三方。3.一键登录，登陆之后可以选择是否绑定第三方）在设计流程中，设计开发者需要尽可能的减少对流程的复杂化。
一键登录在为看来是最喜欢的一种登陆方式。导致现在如果需要各种注册绑定，除非必要的情况下，我会直接放弃这款应用。
长按页面可以框选当前的段落，并且出现互动选项。
增加用户和用户之间，用户和作者之间的互动。使得用户在读书的同时有着较强的参与感。
滑动可调节亮度
左边的小动效的设计加上右边的渐变进度条，使用户可以更加明确的知道自己所处于一个什么样的观看环境，并且加入了渐隐渐现的出场和入场。
用一个小巧的动效设计帮助用户确定自己的亮度属性，
点击点赞会出现彩色的波浪并且不断扩散的同时有小表情弹出。
增加趣味性和互动性。
清空时会在进行确认，再次点击全部删除方可删除。
在下方列表中可逐一删除，上面清空中不是点击后就全部清空。而是再次出现，起强调和确认的作用。
增加用户体验，帮助用户进行二次确认和防止用户误触。作为一款咨讯类应用用户的搜索记录也是比较重要的。
前几天发现的一个神级功能（虽然我已经不用 QQ 进行社交了），当时我外甥和我讲述了这个功能他么00后戏称为养鱼神器。
在好友的设置中可隐藏会话，开启隐藏会话以后。此联系人发来的消息不会显示在联系人列表。需要自己手动去设置隐藏会话列表去寻找。
应用的功能更加多样化满足多种不同的需求。
在搜索入口加入了听歌识曲且进入界面后可进行听歌识曲和哼唱识别的切换
搜索歌曲界面的使用场景为：1.用户得知该歌曲的名称或者歌词进行搜索。2.用户听到了某一首很好听的歌曲想进行搜索。此时在场景二的情况下，正好可以进行听歌识曲。听歌识曲此功能在比较旧的版本属于主页中的一个模块，把听歌识曲放到搜索入口处更加符合用户场景。
对用户场景进行细致的研究，增加了用户体验。
长按复制会有放大镜设计
当用户处于复制文案的场景下时，由于复制需要拖动，在拖动的过程中会按压住自己所处于的复制内容位置。所以在用户进行复制时加入放大镜的设计会使得用户清楚的明白自己复制到哪里，不需要后续用户在进行删减。
极大的加强了此场景下的用户体验
文章来源：站酷 作者：张阳光Designer
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com