编者按：Confetti Design Studio 是一家来自印度的设计工作室，屡获殊荣，客户遍及世界各地。Confetti 主攻平面设计、产品设计和网页设计，这篇文章是他们近期梳理总结的 2022 年流行的平面设计趋势，值得对照参考。你能想象日复一日始终保持不变的生活吗？

编者按：Confetti Design Studio 是一家来自印度的设计工作室，屡获殊荣，客户遍及世界各地。Confetti 主攻 平面设计 、产品设计和网页设计， 这篇文章是他们近期梳理总结的 2022 年流行的平面设计趋势 ，值得对照参考。

你能想象日复一日始终保持不变的生活吗？那么如果设计也一成不变，我们是否会同样感到窒息？

好消息是，设计行业大概永远不会这样，大家总会追随着新发生的变化，旧时代的想法被重新构思，回到我们的生活中。我们所熟知的很多设计风格、方式，都会被「回收」，然后被「更新」，变成新的产品呈现出来。

和很多其他的行业一样，平面设计也始终处于变化和波动当中，随着新技术的出现，趋势也随之改变。当发生改变的时候，设计师会做他们最擅长的事情：适应改变。

接下来，我们一起来看看当下所流行的设计趋势，用 2022 年的平面 设计趋势 ，来一窥未来的设计形态。

7个优秀网页设计趋势！来自资深设计师的超全总结 编者按：这篇文章出自资深设计师 Erik Messaki 的总结，文章总结了 7 种优秀网页设计趋势，虽然其中很多趋势之前已经存在，但是在细节和特征上，Erik 有更为深入的网页设计分析，值得设计师们好好看看。

阅读文章 >

1、90年代怀旧风格

怀旧是永恒的经典。如果你是经历过 90 年代的设计师，那么你对于那个时代的特征性元素，应该有着清晰的记忆——CRT显示器、卡带机、Windows 98 等等。

这些象征着千禧年、流行音乐、前沿技术的90年代元素，结合哥特式的衬线，蒸汽波风格，明快的配色，和相对简单的表情符号，共同构成了早期互联网的情怀，这是我们一直热衷于怀念的黄金岁月。如果你对于你的设计项目感到无所适从，如果你想寻找特征性的、炫酷而有趣的表现手法，不妨试试 90s 怀旧复古风。

2、2D 和 3D 的结合

在很长的一段时间以内，2D 和 3D 有着清晰的分野，2D 的设计更偏向肌理、材质的触感，3D 则强调真实的光影和结构。当下的设计领域，3D 元素越来越多，不同类型的 3D 设计元素、技法、风格都在蓬勃发展。

而值得一提的是，2D 和 3D 的结合正在创造令人惊叹的全新体验。

将肌理感和手作感十足的 2D 插画/动画，和立体感更强的 3D 设计组合到一起，设计师可以借由两种不同风格、不同技法的碰撞，制造出视觉奇观。这也不难理解 2D 和 3D 的混合设计是如何受到如此之多的青睐。

3、扭曲的字体和排版

文本和版式是视觉传达的核心，它极具功能性，用来传递有效的信息，然而在 2022 年，大家对于文本的视觉张力、以及信息的饱满度提出了新的要求。

这是一种将不同风格、不同样式的字体混搭到一起的排版方式，让字体的风格冲撞，但是有轻重节奏的变化，用符号和 emoji 作为间隙的填充，加入少量的矢量图形作为点缀，控制好了，这种版面设计会非常漂亮。

但是这种视觉风格也存在一个潜在的问题，它是需要借助大量的实验来进行测试。不过一旦找到对的搭配方式，这种设计方法能够迅速的产生效果。

一个非常典型的案例是漫威的剧集《Loki》的开头字体设计，不同风格样式的 Loki 让角色多变诡谲的性格迅速呈现出来。

这种设计是不同寻常的，但是它充满新鲜感，也让人感到兴奋。

4、「反设计」式设计

这是迄今为止我最喜欢的设计趋势之一，在写这篇文章的时候我在网上浏览了大约 2个小时各种反设计的设计作品，迷失在令人惊叹的创作中。

这种被称为「Anti-Design」的设计风格，比起粗野主义走的更远，它凸显的是未完成的粗粝感，而这种堪称叛逆的设计方式让它成为了 2022 年最流行的设计趋势。

2022 设计趋势！正在悄然流行的「新粗野主义」风格 每年你会在优设看到大量的设计趋势预测和总结类的文章，其中有的出自腾讯这样的头部公司，有的出自 Uxdesign.cc 和 Graphicmama 这样的知名设计博客，还有的则可能会出自行业内的知名设计师。

阅读文章 >

反设计追求的是，宁愿被称为丑陋或者叛逆，也要制造出差异，进行表达。反设计就像一个完全忽略可用性和易用性的设计门类，像在宵禁时溜出去哗众取宠的少年。

不过，在实际的设计项目当中，设计师肯定不会抛弃所有的设计规则，而是会尽量兼顾画面的平衡。

5、Y2K

和 90s 的怀旧气息略有不同，Y2K 在色彩的使用上更加明亮，撞色几乎是必备的组成部分，在技术元素的运用上更为大胆，受到新前年概念的影响，富有科幻气息的渐变色、复杂光影构成的材质感，都是 Y2K 令人着迷的要素。

很多平面设计师和创意工作者都试图在自己的设计当中，重拾 Y2K 的视觉张力。Y2K 在配色上大都偏好蓝色、泡泡粉，类似镭射光碟一样的彩虹渐变，Low Poly 式的图形和 CGI 元素，延续自 90 年代操作系统的密集、粗粝的界面元素，Y2K 更加具有赛博朋克的特征。

用一篇超全面的文章，帮你了解Y2K的美学文化 亚文化 Y2K跟其他的这些文化也是一样的，是千千万万种文化中的一种。

阅读文章 >

6、协调的糖果色

如果你想从追求复古、粗野主义、反设计的各种设计作品当中脱颖而出，有一个非常不错的策略，就是用活力十足的糖果色，添加到你的设计当中，将版面和场景都使用糖果色包裹起来，赋予作品以超强的亲和力。

为什么这种策略是有效的？通常而言，我们会认为丰富有趣的糖果色对于儿童充满吸引力，但是实际上，这些明亮的色彩同样足以吸引成年用户的注意力，能够传递积极的情绪，大胆用，它一定会发挥效果。

7、柔和的低饱和度配色

你是否知道，绝大多数的设计师的设计项目当中，耗费在配色上的时间占到了 30%？选择合适的配色方案在很多设计师和设计项目当中，都是一个贯穿始终不折不扣的顽疾。

你看了成千上万的配色，但是老实说，最扛造耐看的配色，始终还是沉静的低饱和度配色，它们足够现代，给人感觉足够清新，也能够适配多种不同的情况，不会因为色彩不协调出现状况外的情形。这大概也是最近几年，低饱和度的配色方案出现在越来越多设计项目中的缘由吧。

8、参数化的图案

图案和字体一样，也是平面设计师的基石，而借助参数化的几何图案来构建的图案，则有着不同于手绘图案的规则性美感，它们精准地变化，规则，且趣味十足。

参数化的图案呈现出的是一种关乎数学的美感，它们是具备流动性的，相比于随性的手绘、充满刚性的建筑，参数化的图案似乎将抽象的数学画作奇异的可视化信息，它迷人的地方也正在这里。

9、迷幻设计

迷幻的设计可以追溯到 1960 年代，这种充满着扭曲、融化、放飞的美学设计深刻地改造了整个设计领域。富有迷幻特色的平面设计作品是永恒的流行趋势，它们能够随着反主流文化的推进，一次又一次地回归。

迷幻的设计风格体现的是打破枷锁的自由精神，这种精神在音乐和时尚领域也是一以贯之的。字体、图形、排版、动画、网页、APP，当中都能运用迷幻风的设计，而它们所制造的体验是令人震惊，且令人着迷的。

在 2022 年，我们看到了很多迷幻而超现实的设计作品，它们还在蓬勃地发展。

结语 很难以一个确切的原因来总结这种变化，2022 年的平面和视觉设计领域的趋势看起来颇具随机性。不过，在诸多设计趋势当中，技术加持下的参数化的图案正在走高，反设计的浪潮似乎也正在扩大，而拥抱市场、寻求设计亲和力的设计师则将糖果色玩得出神入化，它们在很多地方成为主流的风格，也就不奇怪了。

时间走到 2022 年底，我们回顾这一年的设计风格的同时，也在期待全新的 2023 年，会出现什么样的设计趋势。

编者按：设计师如何自学？什么样的自学方法最高效？本文分享一套高效学习方法，学完就能用！

编者按：设计师如何自学？什么样的 自学方法 最高效？本文分享一套高效 学习方法 ，学完就能用！

自学设计却半途而废？让优设和优优来帮你从小白成为专业设计师 大家好，这里是和你们分享如何零基础自学设计的花生 ~ 自学设计是当下的热门话题，无论是刚进入设计专业的大学生，还是零基础想要入门设计行业的小伙伴，肯定都在利用丰富的网络教学资源自学设计。

阅读文章 >

在职场中，专业的设计能力，积极的工作态度以及良好的职场习惯，能为我们构建完整的自身形象，这些形象将会给别人留下很深的印象，通过发布作品、不断为自己发声，积累机遇与个人标签，任何事情都有起步的可能，只要你有足够的精力，并愿为之持续做下去，随时都可以开始，30 几岁也只会是一个职场十年，未来还有更多的职场十年。

这篇文章从我近期学习的一些内容，结合自身经历与大家分享我的一些思考与感悟，望能互勉～

一、为什么通过写作学习

1. 输出&输入

开头我提到“通过发布作品、为自己发声，积累机遇与个人标签”，写作是很值得一提的输出方式，它是终身学习者与成长者的标配。通过输出可以倒逼你持续输入，帮助自己更快更好地学习。而持续地学习与成长，又能让自己积累更多的内容可以输出，如此形成一个正向的循环。

2. 终身成长

掌握写作技能，会让你的人生多一种选择。写作可以成为一项终身事业，它没有时间地点的限制，也没有年龄限制，只要你愿意，可以一直写下去。

3. 积累复利

写作是循序渐进的过程，从开始写，到写出来、写通顺，再到写好，最后产出精品，这是一个不断学习与积累的过程，也是不断实践的过程，同时写的本身也是一件能为你带来复利的事情，它能让你的行动有所记录，方便日后查找翻阅，也能沉淀为自己的知识库，更加完善自身。

当你疑惑不知道写什么，怎么开始写时，那就先从输入开始，看一部电影、阅读一本书，多多少少都会让你有所感悟；

或者通过学习积累内容，在这之前，我们需要做好下一步。

二、明确学习目的

在行动前，首先需从 Why 出发，想清楚自己为什么要学，依据所处的不同阶段、不同目标的底层需求，再制定规划相应的成长路径，让行动更加清晰，避免盲目跟从陷入迷失困境。

学习目的明确可以让你知道自己要学的方向是什么，哪些内容值得去学。

按照内容的必要性，学习方向大致可分为 3 类：

1. 必须要学的 如果你学习的目的是职场晋升，不学的话会让自己在职场中寸步难行，那就必须要往能提升自身核心竞争力的方向学习。

学哪些内容呢？

如果你是想提升专业能力，那就必须要学基础的设计原理、技法层面的补充，关键是要去践行，而非停留在理论层面，行动才是关键。

如果你想提高工作中的思考能力与表达能力，那么就必须要多阅读能提升自己逻辑表达能力的文章或书籍，比如《结构思考力》《金字塔原理》等，多学习职场领域的优秀文章、交流讲座，看别人是怎么写的、怎么思考与表达的；

如何去学？

以我自己为例，我的日常工作接触视觉、UI 界面设计较多，短板是缺乏业务梳理与交互思维的实战经验，那这两方面就是我必须要学、且优先级排在最高的内容，掌握这两项技能可以丰富我的专业实力，避免同质化而被市场淘汰；明确目的后就可以结合后面提到的学习方法，进行目标拆解与细分，定好预期的成果验收，然后践行即可。

必须学的内容除了本职刚需外，日常的临时需求也是必须学的细分种类，例如紧急任务需要快速掌握新的知识、并输出应用时，你就需要以集中、针对性的方式应对问题，边学边用，理论结合实践快速产出，达成目标需求。

总结一下，必须要学的内容往往直接链接我们的生存刚需，大的知识体系我们可以通过系统学习在一定时间阶段内进行吸收完善；面对紧急情况时，我们也要具体问题具体分析，抓重点快速解决。

2. 自己想学的 自己想学的内容大部分自主能动性很高，这部分知识通常围绕你的兴趣爱好、好奇点展开；

从你自身出发，罗列自己喜欢的、或者因好奇想深入探索的方向，根据学习带来的价值大小排列优先级，筛除那些仅仅只是喜欢，但暂时无法完成、或可有可无的内容；

例如我喜欢大海，一直想学游泳，但种种原因使得「学游泳」这件事 2 年多都没开始，那就可以先剔除掉；

再比如我喜欢读书、看电影，一直很羡慕别人写书影评有理有据，头头是道，同时写书影评对于我的语言表达能力与逻辑思考能力也有帮助，那这个「想学」就可以置顶，结合学习方法规划安排。

总之，自己想学的内容也要明确「想」的触发点是什么，这种想的念头能够让你持续多久，是否可以与主线任务串联，达到事半功倍的效果，如果可以那就去做！

3. 无关紧要的

西方一位哲人曾说“不懂得拒绝无关紧要的事情，你就慢慢变成一个不重要的人。”学习成长的过程中，也同样如此。

你能区分出哪些知识对自己来说无关紧要，就可以暂时后置或完全舍弃，在有限的时间内，把更多的精力投入到最需要完成的事情上，凡事有所为、有所不为，才能全力以赴、高效地工作。

三、常见的学习方法 许多人都挣扎于拖延症，而你也知道一旦拖延，事情大概率就只能够走马观花的过一遍，无法专注去做好、做成。

著名管理师戴维• 艾伦指出：“我们想方设法地让自己去做该做的事……很大程度上，我所知道的表现最出色的人，都在生活中运用了最好的小技巧……为了安排自己做些事，我们身体最聪明的部分会发出信号，接下来总是不太灵光的部分自动回应并产生行为，从而得到出色的结果。”

其中提到的想方设法的“小技巧”，也是你常见的三种学习方法，分别是：番茄时钟、行动日志与学习日历；

1. 番茄时钟

“番茄工作法”是一种帮你在短时间内集中注意力的方法，是弗朗西斯科·西里洛于 1992 年创立的一种简单易行的时间管理方法。它能为你建立专属的环境场，相当于一个明确的启动信号：“进入这个环境，我就要开始专注啦！”

当你发现自己总在拖延时，不妨从一个 25 分钟的计时开始。

具体方法如下：

① 清除干扰源

把手机或任何其他会发出提示音、闪烁的干扰源关闭或远离自身；

② 设定时钟、全神贯注

用计时器设定 25 分钟，让自己尝试全神贯注于一件事中。

温馨提示：刚开始或许你会走神儿，不要担心、也无需气馁，意识到自己走神儿了，把自己拉回到任务中即可；

③ 适当的奖励是持续的关键

时间一到，暂停下来奖励自己一下，喝一杯温水、查看下信息、环顾周边的人事物等，做一些能让自己真正享受放松的事情，这样在休息之后你才能更好的投入到下一阶段的专注之中。

时间久了，你的经验会更加丰富，可以自定义番茄时钟的时长，20、25、60 或任意你想要的时长，因为你不会每次都做同样的事情，所以也不必设定同样的时间，此时的你能清楚自己完成各项任务需要多长时间，对自己的认知也更现实，认识到有限时间内能够承担的任务量多少，也会发现自己的成长在突飞猛进。

工具建议：

个人推荐还是可计时时钟，能够有效避免干扰源；如果必须使用手机，也可以下载 Forest 等 APP，选择深度专注模式，进行辅助设置。

2. 行动日志

尼尔•菲奥里在他的优秀作品《战胜拖拉》中建议，个人可以将每日活动计划详细记录下来，坚持一两个星期，了解自己拖延的症结所在，能对你做出改变提供关键的指导作用。

具体方法如下：

① 写下愿望、构建路径

从必须学和想学清单中分别提取出首要任务，简要列下对应目标的预期结果、可检验的标准是什么，要以怎样的方式去实现。

② 目标拆解

长期的大目标拆解为可执行的短期目标，这里提到的行动日志就是以周为单位记录；

在新一周开始前，写下自己的周目标；之后每天晚上基于周目标，提前为第二天写出 5～10 个小而合理的日目标，完成一项就勾掉，然后品尝完成的喜悦与成就；

如有必要，你可以把一定的任务量分解为三个冲刺目标，写到“迷你任务清单”里，帮助自己保持动力。

温馨提示：计划写好后，除非事发突然且不得不做外，其他情况尽量不要在往日待办清单中增加事项，避免积压变成「完不成的清单」；

如非紧急必要，你可以先把事项单独记录在「收集」栏目中，择期安排，这样可以避免自己忘记，同时减轻大脑负担，专注在当前重要的事情上。

工具建议：

我日常使用较多的形式还是随身携带手账本，用子弹笔记的形式去书写内容，可以避免手机等电子设备的干扰，同时纸笔沙沙的摩擦声，也能让我思路更加清晰，推荐尝试～

当然还有一些 APP 也可以按需选择，例如滴答清单等。

3. 学习日历

计划何时何地解决任务，能大大增加任务达成的可能性。

具体方法如下：

① 截止日期的提醒

有重要截止日期的事项，你可以把它记录在日历上辅助提醒，根据记录着“截止日期”的日历，倒推出下一周要做的 20 个关键待办事项，每晚再依据周待办清单写下次日待办清单，方法使用第 2 点行动日志即可。

有种方法或许是你也听过的，日历上设置的截止日期，可以比实际日期提前一天，这样让自己预留充足的思考时间，不会等着最后一秒去赶工；

② 找到合理的时间

每天先从最困难且重要的事做起，例如我的晨间 1 小时写作，晨起后的我没有过多的思绪压力，清醒后的状态可以让我快速进入写作状态，往往 1 小时能产出 500～1000 字的内容，效率比夜间写作更高；

而晚上下班后，我可以适当的放松享受，阅读或者做一些其他的安排，如此一来就减少了我因没完成写作安排而怀着愧疚的心去度过一天的剩余时光。

要记住，在合理的时间内完成每日任务，重要的是「去做」，享受过程与其带来的最终成果，不积跬步无以至千里，你养成的一系列新习惯会为自己的生活增添无限乐趣。

工具建议：

我目前在使用的是 iOS 系统自带的日历，主要看中的是它的多设备同步，方便实时查看；你也可以选择其他电子日历，或者尝试使用纸质日历也是不错的提醒方式。

四、提升进阶、学出新意 常用学习法是基础，随着不断积累，你也会总结出专属自己的优化方案，以下总结几点我亲测有效的进阶之法，可以选择其中 1-2 条实践一下～

1. 知识复利 复利的真正核心在于时间。

你通过学习和阅读输入来提高自身认知，建立专属的知识体系，又通过写作和演讲输出自己的认知，新知识不断成为你下一次思考素材的积累，形成知识的“复利”并快速迭代。

这让我想到罗永浩曾说过的一句话：“普通人的努力，在长期主义的复利下，会积累成奇迹。时间帮助了他们，他们成为时间的朋友。”

2. 学出新意 ① 运用回想与重复的力量

新信息首先被储存在短期记忆中，要把信息转变为长期记忆，你需要不断演练。

例如读完一页书、学完一节课程、做完一件事，你可以把目光转向别处，并回想刚才所学内容的主要观点、关键行动与结果分别是什么。

每次回忆你不仅是在复习学过的信息，而且也是在增加你的知识。在长期记忆中，你的创造性想象起着重要的作用。你对学过的内容复习的越多，就会越多地把它与你已经记住的其他知识联系起来。

② 思维导图

思维导图不仅是一个帮助记忆的视觉工具，还是一个动态和有机的复习工具、时间管理器、记忆激发器。

在学习过程中，善用思维导图串联我们的规划安排、学习知识点，包括在书写文章前使用思维导图，都能大大提高你的认知效率。

例如学习一门课时很多的课，使用思维导图反映这一课程的主要章节、主题、理论、主要人物及实践，那就仿佛拥有了一套大师级指南，提前了解整体框架，便于你在每次读书或听讲座前，把任何主要的新想法加入到其中，为不断增长的内在知识的网络创造一个外在的镜像。

为文章做一幅组织有序的思维导图，将为你提供：文章的主要部分，每个部分所涉及的要点，以及这些要点间的相互联系方式，帮助你快速梳理文章结构，疏通“写作阻塞”，围绕文章主题自由驰骋。

制作思维导图的关键要点是，多采用正确的关键词与关键图像进行书写搭建，把它们用作回忆信息的精确记忆激发器，以助于令你快速准确的回想到相关信息。

③ 善于进行知识整理与串联

通过对现有知识的输出，查漏补缺，倒逼输入进行知识的获取；

处理问题时进行组块，你搭建组块的过程就是理解问题、练习解决方法的过程，有了组块才能在脑中瞬间闪现答案。

解决一个问题后，将其重新排演一遍，并尝试思考不同的解决技巧，以新思路方式了解事物的更多可能性。将信息合成一个个流畅的组块，把各种相关内容进行串联，梳理出某一类的知识体系，方便你任何时候都能任意提取使用。

实际操作中你可以结合学习笔记、反思复盘去记录收获与思考的过程、积累的经验感悟等，深入浅出地将知识、信息表达出来，并写下可提升优化的部分、或可尝试的行动清单，在下次践行中应用起来，检验成效，在循环记录与实践中不断达到自我提升。

④ 做主动的那个人

工作中，作为设计师的你任务来源通常有三方面：领导安排、主动发现与相互协作。

通过主动与领导的反馈链接，不仅能让对方掌握你的工作进度，同时还可能让你提前获取下一项任务的相关信息；即便当下没有新的任务安排，你也可以主动排查公司的设计不足，提出一些优化建议；进行中的需求主动推进，跟进开发进度，提前进行视觉走查；

善于破冰，主动与同事进行互动，认识不一样的同事，体会每个人面对事物时的不同态度，从他人身上也能学到不一样的东西；

我曾经听过这样一句话：“觉得要做时，需要多去做，多一点主动，多一分设想。”让自己成为主动的那个人，主动选择、主动行动，有助你构建完整的自身形象，提升机遇与成长。

⑤ 心里对照

工作或学习过程中，遇到一些不会有结果的争论，不要急于求胜、寻求结果，而是先记录下来，冷静思考，等时机成熟再做商议，将宝贵的时间用到其他更重要的事情上。

想想曾经的自己，对比未来那个通过学习成就的自己，为学习注入有效的心理动力。

例如在你的工作或学习区域贴一张图或几句话提醒自己的梦想，如果缺乏动力了，就看看它们，想想自己正做的事，它的价值与意义，对你和你爱的人一定值得！

3. 学习管理

有了学习方法，你也要做好相应的学习管理，例如对文件的管理、心态的管理与时间的管理。

① 管理日常

作为设计师，你的日常积累相信不会少，灵感素材、设计文件、以及学习笔记，你可以选择搭配软件进行协作管理。

例如 Eagle 或其他本地管理软件，可以整理你积累的灵感素材，包括优秀作品开眼、产品体验日记、文章话题等，使用关键词标签进行收录与分类整理，便于你在面对需求时压缩反应时间，从而提升设计效率。

Notion 结合项目复盘，对于设计文件的管理有着很大的帮助，将设计文档按「时间+项目名称」进行整理，记录项目的背景与需求、设计思考与过程、成果等内容，都是一种积累与沉淀；同时设计文件本身的管理也不容忽视，例如对文件本身图层的命名、分组及组件化管理，还有对设计过程中使用的一些新素材也要进行整理收档。

好记性不如烂笔头，学习笔记的整理可以结合语雀、飞书等在线工具协同记录，避免太多信息交织在一起，仅靠大脑来记忆的话，可能会遗漏很多细节；养成动笔的好习惯，可以释放大脑的记忆负担，让它存储更多关键信息，同时还能通过记录加深印象，发觉被忽略的知识点，拓展收获。

你要明确整理是方便后期进行查阅与调用，整理同时也反映着自己的生活态度，也是个人标签的一个方面。

② 保持好奇心

设计师需要时刻了解最新趋势，不断探索新的设计紧跟与软件，保持对新鲜事物的敏感是一名优秀设计师所必备的方面，运用新趋势加强自身日常练习，模拟真实的项目需求进行演化，这也必将让你掌握新的思路与技巧，对新趋势更好的吸收与转化。

好奇心的保持可以让你通过对外界信息的接收、对自己生活的反思，在脑海中形成记忆与沉淀，潜移默化锻炼自己的思维能力。

③ 劳逸结合

人的身体不是永动机，必须有足够休息作保障，才能持久高效率工作。

因此建立切合自己实际情况的作息规划很重要，对于学习时间的安排有一点很关键——间隔开重复动作，无论学什么，不要安排的太集中，每类知识一天穿插安排一定的量，持续下去就能积累更多的有效信息，达到真正的提升。

人的身体不是永动机，必须有足够休息作保障，才能持久高效率工作。

因此建立切合自己实际情况的作息规划很重要，对于学习时间的安排有一点很关键——间隔开重复动作，无论学什么，不要安排的太集中，每类知识一天穿插安排一定的量，持续下去就能积累更多的有效信息，达到真正的提升。

要记得，没有任何事情重要到可以让你以消耗健康为代价去做，身体健康才能有饱满的精力去迎接更多挑战，见证自己每个阶段的成长。

五、结语 学习永远没有终点，只取决于你是否每天都在进步，任何时候要学习不一样的东西。多一点行动，多一分设想。希望你在学习时更有耐心，相信时间的力量，相信积累的力量，任何技能都是可以通过刻意练习提升的。

大多数人高估了一年内能做的事情，而低估了他们 10 年里能做的事情。

多积累输出，并且养成习惯，未来可期，愿你我都能不断成长为更好的自己，终在未来实现自己所愿。

参考资料

《精进写作》弘丹 《写下来的愿望更容易实现》王潇 《学习之道》芭芭拉•奥克利 《博赞学习技巧》东尼•博赞 欢迎关注作者微信公众号：「雪莉成长圈」

编者按：设计师如何自学？什么样的自学方法最高效？本文分享一套高效学习方法，学完就能用！

编者按：设计师如何自学？什么样的 自学方法 最高效？本文分享一套高效 学习方法 ，学完就能用！

自学设计却半途而废？让优设和优优来帮你从小白成为专业设计师 大家好，这里是和你们分享如何零基础自学设计的花生 ~ 自学设计是当下的热门话题，无论是刚进入设计专业的大学生，还是零基础想要入门设计行业的小伙伴，肯定都在利用丰富的网络教学资源自学设计。

阅读文章 >

在职场中，专业的设计能力，积极的工作态度以及良好的职场习惯，能为我们构建完整的自身形象，这些形象将会给别人留下很深的印象，通过发布作品、不断为自己发声，积累机遇与个人标签，任何事情都有起步的可能，只要你有足够的精力，并愿为之持续做下去，随时都可以开始，30 几岁也只会是一个职场十年，未来还有更多的职场十年。

这篇文章从我近期学习的一些内容，结合自身经历与大家分享我的一些思考与感悟，望能互勉～

一、为什么通过写作学习

1. 输出&输入

开头我提到“通过发布作品、为自己发声，积累机遇与个人标签”，写作是很值得一提的输出方式，它是终身学习者与成长者的标配。通过输出可以倒逼你持续输入，帮助自己更快更好地学习。而持续地学习与成长，又能让自己积累更多的内容可以输出，如此形成一个正向的循环。

2. 终身成长

掌握写作技能，会让你的人生多一种选择。写作可以成为一项终身事业，它没有时间地点的限制，也没有年龄限制，只要你愿意，可以一直写下去。

3. 积累复利

写作是循序渐进的过程，从开始写，到写出来、写通顺，再到写好，最后产出精品，这是一个不断学习与积累的过程，也是不断实践的过程，同时写的本身也是一件能为你带来复利的事情，它能让你的行动有所记录，方便日后查找翻阅，也能沉淀为自己的知识库，更加完善自身。

当你疑惑不知道写什么，怎么开始写时，那就先从输入开始，看一部电影、阅读一本书，多多少少都会让你有所感悟；

或者通过学习积累内容，在这之前，我们需要做好下一步。

二、明确学习目的

在行动前，首先需从 Why 出发，想清楚自己为什么要学，依据所处的不同阶段、不同目标的底层需求，再制定规划相应的成长路径，让行动更加清晰，避免盲目跟从陷入迷失困境。

学习目的明确可以让你知道自己要学的方向是什么，哪些内容值得去学。

按照内容的必要性，学习方向大致可分为 3 类：

1. 必须要学的 如果你学习的目的是职场晋升，不学的话会让自己在职场中寸步难行，那就必须要往能提升自身核心竞争力的方向学习。

学哪些内容呢？

如果你是想提升专业能力，那就必须要学基础的设计原理、技法层面的补充，关键是要去践行，而非停留在理论层面，行动才是关键。

如果你想提高工作中的思考能力与表达能力，那么就必须要多阅读能提升自己逻辑表达能力的文章或书籍，比如《结构思考力》《金字塔原理》等，多学习职场领域的优秀文章、交流讲座，看别人是怎么写的、怎么思考与表达的；

如何去学？

以我自己为例，我的日常工作接触视觉、UI 界面设计较多，短板是缺乏业务梳理与交互思维的实战经验，那这两方面就是我必须要学、且优先级排在最高的内容，掌握这两项技能可以丰富我的专业实力，避免同质化而被市场淘汰；明确目的后就可以结合后面提到的学习方法，进行目标拆解与细分，定好预期的成果验收，然后践行即可。

必须学的内容除了本职刚需外，日常的临时需求也是必须学的细分种类，例如紧急任务需要快速掌握新的知识、并输出应用时，你就需要以集中、针对性的方式应对问题，边学边用，理论结合实践快速产出，达成目标需求。

总结一下，必须要学的内容往往直接链接我们的生存刚需，大的知识体系我们可以通过系统学习在一定时间阶段内进行吸收完善；面对紧急情况时，我们也要具体问题具体分析，抓重点快速解决。

2. 自己想学的 自己想学的内容大部分自主能动性很高，这部分知识通常围绕你的兴趣爱好、好奇点展开；

从你自身出发，罗列自己喜欢的、或者因好奇想深入探索的方向，根据学习带来的价值大小排列优先级，筛除那些仅仅只是喜欢，但暂时无法完成、或可有可无的内容；

例如我喜欢大海，一直想学游泳，但种种原因使得「学游泳」这件事 2 年多都没开始，那就可以先剔除掉；

再比如我喜欢读书、看电影，一直很羡慕别人写书影评有理有据，头头是道，同时写书影评对于我的语言表达能力与逻辑思考能力也有帮助，那这个「想学」就可以置顶，结合学习方法规划安排。

总之，自己想学的内容也要明确「想」的触发点是什么，这种想的念头能够让你持续多久，是否可以与主线任务串联，达到事半功倍的效果，如果可以那就去做！

3. 无关紧要的

西方一位哲人曾说“不懂得拒绝无关紧要的事情，你就慢慢变成一个不重要的人。”学习成长的过程中，也同样如此。

你能区分出哪些知识对自己来说无关紧要，就可以暂时后置或完全舍弃，在有限的时间内，把更多的精力投入到最需要完成的事情上，凡事有所为、有所不为，才能全力以赴、高效地工作。

三、常见的学习方法 许多人都挣扎于拖延症，而你也知道一旦拖延，事情大概率就只能够走马观花的过一遍，无法专注去做好、做成。

著名管理师戴维• 艾伦指出：“我们想方设法地让自己去做该做的事……很大程度上，我所知道的表现最出色的人，都在生活中运用了最好的小技巧……为了安排自己做些事，我们身体最聪明的部分会发出信号，接下来总是不太灵光的部分自动回应并产生行为，从而得到出色的结果。”

其中提到的想方设法的“小技巧”，也是你常见的三种学习方法，分别是：番茄时钟、行动日志与学习日历；

1. 番茄时钟

“番茄工作法”是一种帮你在短时间内集中注意力的方法，是弗朗西斯科·西里洛于 1992 年创立的一种简单易行的时间管理方法。它能为你建立专属的环境场，相当于一个明确的启动信号：“进入这个环境，我就要开始专注啦！”

当你发现自己总在拖延时，不妨从一个 25 分钟的计时开始。

具体方法如下：

① 清除干扰源

把手机或任何其他会发出提示音、闪烁的干扰源关闭或远离自身；

② 设定时钟、全神贯注

用计时器设定 25 分钟，让自己尝试全神贯注于一件事中。

温馨提示：刚开始或许你会走神儿，不要担心、也无需气馁，意识到自己走神儿了，把自己拉回到任务中即可；

③ 适当的奖励是持续的关键

时间一到，暂停下来奖励自己一下，喝一杯温水、查看下信息、环顾周边的人事物等，做一些能让自己真正享受放松的事情，这样在休息之后你才能更好的投入到下一阶段的专注之中。

时间久了，你的经验会更加丰富，可以自定义番茄时钟的时长，20、25、60 或任意你想要的时长，因为你不会每次都做同样的事情，所以也不必设定同样的时间，此时的你能清楚自己完成各项任务需要多长时间，对自己的认知也更现实，认识到有限时间内能够承担的任务量多少，也会发现自己的成长在突飞猛进。

工具建议：

个人推荐还是可计时时钟，能够有效避免干扰源；如果必须使用手机，也可以下载 Forest 等 APP，选择深度专注模式，进行辅助设置。

2. 行动日志

尼尔•菲奥里在他的优秀作品《战胜拖拉》中建议，个人可以将每日活动计划详细记录下来，坚持一两个星期，了解自己拖延的症结所在，能对你做出改变提供关键的指导作用。

具体方法如下：

① 写下愿望、构建路径

从必须学和想学清单中分别提取出首要任务，简要列下对应目标的预期结果、可检验的标准是什么，要以怎样的方式去实现。

② 目标拆解

长期的大目标拆解为可执行的短期目标，这里提到的行动日志就是以周为单位记录；

在新一周开始前，写下自己的周目标；之后每天晚上基于周目标，提前为第二天写出 5～10 个小而合理的日目标，完成一项就勾掉，然后品尝完成的喜悦与成就；

如有必要，你可以把一定的任务量分解为三个冲刺目标，写到“迷你任务清单”里，帮助自己保持动力。

温馨提示：计划写好后，除非事发突然且不得不做外，其他情况尽量不要在往日待办清单中增加事项，避免积压变成「完不成的清单」；

如非紧急必要，你可以先把事项单独记录在「收集」栏目中，择期安排，这样可以避免自己忘记，同时减轻大脑负担，专注在当前重要的事情上。

工具建议：

我日常使用较多的形式还是随身携带手账本，用子弹笔记的形式去书写内容，可以避免手机等电子设备的干扰，同时纸笔沙沙的摩擦声，也能让我思路更加清晰，推荐尝试～

当然还有一些 APP 也可以按需选择，例如滴答清单等。

3. 学习日历

计划何时何地解决任务，能大大增加任务达成的可能性。

具体方法如下：

① 截止日期的提醒

有重要截止日期的事项，你可以把它记录在日历上辅助提醒，根据记录着“截止日期”的日历，倒推出下一周要做的 20 个关键待办事项，每晚再依据周待办清单写下次日待办清单，方法使用第 2 点行动日志即可。

有种方法或许是你也听过的，日历上设置的截止日期，可以比实际日期提前一天，这样让自己预留充足的思考时间，不会等着最后一秒去赶工；

② 找到合理的时间

每天先从最困难且重要的事做起，例如我的晨间 1 小时写作，晨起后的我没有过多的思绪压力，清醒后的状态可以让我快速进入写作状态，往往 1 小时能产出 500～1000 字的内容，效率比夜间写作更高；

而晚上下班后，我可以适当的放松享受，阅读或者做一些其他的安排，如此一来就减少了我因没完成写作安排而怀着愧疚的心去度过一天的剩余时光。

要记住，在合理的时间内完成每日任务，重要的是「去做」，享受过程与其带来的最终成果，不积跬步无以至千里，你养成的一系列新习惯会为自己的生活增添无限乐趣。

工具建议：

我目前在使用的是 iOS 系统自带的日历，主要看中的是它的多设备同步，方便实时查看；你也可以选择其他电子日历，或者尝试使用纸质日历也是不错的提醒方式。

四、提升进阶、学出新意 常用学习法是基础，随着不断积累，你也会总结出专属自己的优化方案，以下总结几点我亲测有效的进阶之法，可以选择其中 1-2 条实践一下～

1. 知识复利 复利的真正核心在于时间。

你通过学习和阅读输入来提高自身认知，建立专属的知识体系，又通过写作和演讲输出自己的认知，新知识不断成为你下一次思考素材的积累，形成知识的“复利”并快速迭代。

这让我想到罗永浩曾说过的一句话：“普通人的努力，在长期主义的复利下，会积累成奇迹。时间帮助了他们，他们成为时间的朋友。”

2. 学出新意 ① 运用回想与重复的力量

新信息首先被储存在短期记忆中，要把信息转变为长期记忆，你需要不断演练。

例如读完一页书、学完一节课程、做完一件事，你可以把目光转向别处，并回想刚才所学内容的主要观点、关键行动与结果分别是什么。

每次回忆你不仅是在复习学过的信息，而且也是在增加你的知识。在长期记忆中，你的创造性想象起着重要的作用。你对学过的内容复习的越多，就会越多地把它与你已经记住的其他知识联系起来。

② 思维导图

思维导图不仅是一个帮助记忆的视觉工具，还是一个动态和有机的复习工具、时间管理器、记忆激发器。

在学习过程中，善用思维导图串联我们的规划安排、学习知识点，包括在书写文章前使用思维导图，都能大大提高你的认知效率。

例如学习一门课时很多的课，使用思维导图反映这一课程的主要章节、主题、理论、主要人物及实践，那就仿佛拥有了一套大师级指南，提前了解整体框架，便于你在每次读书或听讲座前，把任何主要的新想法加入到其中，为不断增长的内在知识的网络创造一个外在的镜像。

为文章做一幅组织有序的思维导图，将为你提供：文章的主要部分，每个部分所涉及的要点，以及这些要点间的相互联系方式，帮助你快速梳理文章结构，疏通“写作阻塞”，围绕文章主题自由驰骋。

制作思维导图的关键要点是，多采用正确的关键词与关键图像进行书写搭建，把它们用作回忆信息的精确记忆激发器，以助于令你快速准确的回想到相关信息。

③ 善于进行知识整理与串联

通过对现有知识的输出，查漏补缺，倒逼输入进行知识的获取；

处理问题时进行组块，你搭建组块的过程就是理解问题、练习解决方法的过程，有了组块才能在脑中瞬间闪现答案。

解决一个问题后，将其重新排演一遍，并尝试思考不同的解决技巧，以新思路方式了解事物的更多可能性。将信息合成一个个流畅的组块，把各种相关内容进行串联，梳理出某一类的知识体系，方便你任何时候都能任意提取使用。

实际操作中你可以结合学习笔记、反思复盘去记录收获与思考的过程、积累的经验感悟等，深入浅出地将知识、信息表达出来，并写下可提升优化的部分、或可尝试的行动清单，在下次践行中应用起来，检验成效，在循环记录与实践中不断达到自我提升。

④ 做主动的那个人

工作中，作为设计师的你任务来源通常有三方面：领导安排、主动发现与相互协作。

通过主动与领导的反馈链接，不仅能让对方掌握你的工作进度，同时还可能让你提前获取下一项任务的相关信息；即便当下没有新的任务安排，你也可以主动排查公司的设计不足，提出一些优化建议；进行中的需求主动推进，跟进开发进度，提前进行视觉走查；

善于破冰，主动与同事进行互动，认识不一样的同事，体会每个人面对事物时的不同态度，从他人身上也能学到不一样的东西；

我曾经听过这样一句话：“觉得要做时，需要多去做，多一点主动，多一分设想。”让自己成为主动的那个人，主动选择、主动行动，有助你构建完整的自身形象，提升机遇与成长。

⑤ 心里对照

工作或学习过程中，遇到一些不会有结果的争论，不要急于求胜、寻求结果，而是先记录下来，冷静思考，等时机成熟再做商议，将宝贵的时间用到其他更重要的事情上。

想想曾经的自己，对比未来那个通过学习成就的自己，为学习注入有效的心理动力。

例如在你的工作或学习区域贴一张图或几句话提醒自己的梦想，如果缺乏动力了，就看看它们，想想自己正做的事，它的价值与意义，对你和你爱的人一定值得！

3. 学习管理

有了学习方法，你也要做好相应的学习管理，例如对文件的管理、心态的管理与时间的管理。

① 管理日常

作为设计师，你的日常积累相信不会少，灵感素材、设计文件、以及学习笔记，你可以选择搭配软件进行协作管理。

例如 Eagle 或其他本地管理软件，可以整理你积累的灵感素材，包括优秀作品开眼、产品体验日记、文章话题等，使用关键词标签进行收录与分类整理，便于你在面对需求时压缩反应时间，从而提升设计效率。

Notion 结合项目复盘，对于设计文件的管理有着很大的帮助，将设计文档按「时间+项目名称」进行整理，记录项目的背景与需求、设计思考与过程、成果等内容，都是一种积累与沉淀；同时设计文件本身的管理也不容忽视，例如对文件本身图层的命名、分组及组件化管理，还有对设计过程中使用的一些新素材也要进行整理收档。

好记性不如烂笔头，学习笔记的整理可以结合语雀、飞书等在线工具协同记录，避免太多信息交织在一起，仅靠大脑来记忆的话，可能会遗漏很多细节；养成动笔的好习惯，可以释放大脑的记忆负担，让它存储更多关键信息，同时还能通过记录加深印象，发觉被忽略的知识点，拓展收获。

你要明确整理是方便后期进行查阅与调用，整理同时也反映着自己的生活态度，也是个人标签的一个方面。

② 保持好奇心

设计师需要时刻了解最新趋势，不断探索新的设计紧跟与软件，保持对新鲜事物的敏感是一名优秀设计师所必备的方面，运用新趋势加强自身日常练习，模拟真实的项目需求进行演化，这也必将让你掌握新的思路与技巧，对新趋势更好的吸收与转化。

好奇心的保持可以让你通过对外界信息的接收、对自己生活的反思，在脑海中形成记忆与沉淀，潜移默化锻炼自己的思维能力。

③ 劳逸结合

人的身体不是永动机，必须有足够休息作保障，才能持久高效率工作。

因此建立切合自己实际情况的作息规划很重要，对于学习时间的安排有一点很关键——间隔开重复动作，无论学什么，不要安排的太集中，每类知识一天穿插安排一定的量，持续下去就能积累更多的有效信息，达到真正的提升。

人的身体不是永动机，必须有足够休息作保障，才能持久高效率工作。

因此建立切合自己实际情况的作息规划很重要，对于学习时间的安排有一点很关键——间隔开重复动作，无论学什么，不要安排的太集中，每类知识一天穿插安排一定的量，持续下去就能积累更多的有效信息，达到真正的提升。

要记得，没有任何事情重要到可以让你以消耗健康为代价去做，身体健康才能有饱满的精力去迎接更多挑战，见证自己每个阶段的成长。

五、结语 学习永远没有终点，只取决于你是否每天都在进步，任何时候要学习不一样的东西。多一点行动，多一分设想。希望你在学习时更有耐心，相信时间的力量，相信积累的力量，任何技能都是可以通过刻意练习提升的。

大多数人高估了一年内能做的事情，而低估了他们 10 年里能做的事情。

多积累输出，并且养成习惯，未来可期，愿你我都能不断成长为更好的自己，终在未来实现自己所愿。

参考资料

《精进写作》弘丹 《写下来的愿望更容易实现》王潇 《学习之道》芭芭拉•奥克利 《博赞学习技巧》东尼•博赞 欢迎关注作者微信公众号：「雪莉成长圈」

构图决定了整体画面的基调，是绘画的一个关键知识点。本文由优设大课堂老师态爷@AIFI矮肥才华有限 出品，帮你掌握常用的构图形式。更多构图方法：构图没灵感？

构图 决定了整体画面的基调，是绘画的一个关键知识点。本文由优设大课堂老师态爷 @AIFI矮肥才华有限 出品，帮你掌握常用的构图形式。

更多 构图方法 ：

构图没灵感？试试这 8 种超好用的构图方法！ 「构图」远不如跳跃率、图版率等重要，且「构图」灵活多变，每个版面都可以延伸出多种构图。

阅读文章 >

构图决定了整体画面的基调，是绘画的一个关键知识点。本文由优设大课堂老师态爷@AIFI矮肥才华有限 出品，帮你掌握常用的构图形式。更多构图方法：构图没灵感？

构图 决定了整体画面的基调，是绘画的一个关键知识点。本文由优设大课堂老师态爷 @AIFI矮肥才华有限 出品，帮你掌握常用的构图形式。

更多 构图方法 ：

构图没灵感？试试这 8 种超好用的构图方法！ 「构图」远不如跳跃率、图版率等重要，且「构图」灵活多变，每个版面都可以延伸出多种构图。

阅读文章 >

编者按：Confetti Design Studio 是一家来自印度的设计工作室，屡获殊荣，客户遍及世界各地。Confetti 主攻平面设计、产品设计和网页设计，这篇文章是他们近期梳理总结的 2022 年流行的平面设计趋势，值得对照参考。你能想象日复一日始终保持不变的生活吗？

编者按：Confetti Design Studio 是一家来自印度的设计工作室，屡获殊荣，客户遍及世界各地。Confetti 主攻 平面设计 、产品设计和网页设计， 这篇文章是他们近期梳理总结的 2022 年流行的平面设计趋势 ，值得对照参考。

你能想象日复一日始终保持不变的生活吗？那么如果设计也一成不变，我们是否会同样感到窒息？

好消息是，设计行业大概永远不会这样，大家总会追随着新发生的变化，旧时代的想法被重新构思，回到我们的生活中。我们所熟知的很多设计风格、方式，都会被「回收」，然后被「更新」，变成新的产品呈现出来。

和很多其他的行业一样，平面设计也始终处于变化和波动当中，随着新技术的出现，趋势也随之改变。当发生改变的时候，设计师会做他们最擅长的事情：适应改变。

接下来，我们一起来看看当下所流行的设计趋势，用 2022 年的平面 设计趋势 ，来一窥未来的设计形态。

7个优秀网页设计趋势！来自资深设计师的超全总结 编者按：这篇文章出自资深设计师 Erik Messaki 的总结，文章总结了 7 种优秀网页设计趋势，虽然其中很多趋势之前已经存在，但是在细节和特征上，Erik 有更为深入的网页设计分析，值得设计师们好好看看。

阅读文章 >

1、90年代怀旧风格

怀旧是永恒的经典。如果你是经历过 90 年代的设计师，那么你对于那个时代的特征性元素，应该有着清晰的记忆——CRT显示器、卡带机、Windows 98 等等。

这些象征着千禧年、流行音乐、前沿技术的90年代元素，结合哥特式的衬线，蒸汽波风格，明快的配色，和相对简单的表情符号，共同构成了早期互联网的情怀，这是我们一直热衷于怀念的黄金岁月。如果你对于你的设计项目感到无所适从，如果你想寻找特征性的、炫酷而有趣的表现手法，不妨试试 90s 怀旧复古风。

2、2D 和 3D 的结合

在很长的一段时间以内，2D 和 3D 有着清晰的分野，2D 的设计更偏向肌理、材质的触感，3D 则强调真实的光影和结构。当下的设计领域，3D 元素越来越多，不同类型的 3D 设计元素、技法、风格都在蓬勃发展。

而值得一提的是，2D 和 3D 的结合正在创造令人惊叹的全新体验。

将肌理感和手作感十足的 2D 插画/动画，和立体感更强的 3D 设计组合到一起，设计师可以借由两种不同风格、不同技法的碰撞，制造出视觉奇观。这也不难理解 2D 和 3D 的混合设计是如何受到如此之多的青睐。

3、扭曲的字体和排版

文本和版式是视觉传达的核心，它极具功能性，用来传递有效的信息，然而在 2022 年，大家对于文本的视觉张力、以及信息的饱满度提出了新的要求。

这是一种将不同风格、不同样式的字体混搭到一起的排版方式，让字体的风格冲撞，但是有轻重节奏的变化，用符号和 emoji 作为间隙的填充，加入少量的矢量图形作为点缀，控制好了，这种版面设计会非常漂亮。

但是这种视觉风格也存在一个潜在的问题，它是需要借助大量的实验来进行测试。不过一旦找到对的搭配方式，这种设计方法能够迅速的产生效果。

一个非常典型的案例是漫威的剧集《Loki》的开头字体设计，不同风格样式的 Loki 让角色多变诡谲的性格迅速呈现出来。

这种设计是不同寻常的，但是它充满新鲜感，也让人感到兴奋。

4、「反设计」式设计

这是迄今为止我最喜欢的设计趋势之一，在写这篇文章的时候我在网上浏览了大约 2个小时各种反设计的设计作品，迷失在令人惊叹的创作中。

这种被称为「Anti-Design」的设计风格，比起粗野主义走的更远，它凸显的是未完成的粗粝感，而这种堪称叛逆的设计方式让它成为了 2022 年最流行的设计趋势。

2022 设计趋势！正在悄然流行的「新粗野主义」风格 每年你会在优设看到大量的设计趋势预测和总结类的文章，其中有的出自腾讯这样的头部公司，有的出自 Uxdesign.cc 和 Graphicmama 这样的知名设计博客，还有的则可能会出自行业内的知名设计师。

阅读文章 >

反设计追求的是，宁愿被称为丑陋或者叛逆，也要制造出差异，进行表达。反设计就像一个完全忽略可用性和易用性的设计门类，像在宵禁时溜出去哗众取宠的少年。

不过，在实际的设计项目当中，设计师肯定不会抛弃所有的设计规则，而是会尽量兼顾画面的平衡。

5、Y2K

和 90s 的怀旧气息略有不同，Y2K 在色彩的使用上更加明亮，撞色几乎是必备的组成部分，在技术元素的运用上更为大胆，受到新前年概念的影响，富有科幻气息的渐变色、复杂光影构成的材质感，都是 Y2K 令人着迷的要素。

很多平面设计师和创意工作者都试图在自己的设计当中，重拾 Y2K 的视觉张力。Y2K 在配色上大都偏好蓝色、泡泡粉，类似镭射光碟一样的彩虹渐变，Low Poly 式的图形和 CGI 元素，延续自 90 年代操作系统的密集、粗粝的界面元素，Y2K 更加具有赛博朋克的特征。

用一篇超全面的文章，帮你了解Y2K的美学文化 亚文化 Y2K跟其他的这些文化也是一样的，是千千万万种文化中的一种。

阅读文章 >

6、协调的糖果色

如果你想从追求复古、粗野主义、反设计的各种设计作品当中脱颖而出，有一个非常不错的策略，就是用活力十足的糖果色，添加到你的设计当中，将版面和场景都使用糖果色包裹起来，赋予作品以超强的亲和力。

为什么这种策略是有效的？通常而言，我们会认为丰富有趣的糖果色对于儿童充满吸引力，但是实际上，这些明亮的色彩同样足以吸引成年用户的注意力，能够传递积极的情绪，大胆用，它一定会发挥效果。

7、柔和的低饱和度配色

你是否知道，绝大多数的设计师的设计项目当中，耗费在配色上的时间占到了 30%？选择合适的配色方案在很多设计师和设计项目当中，都是一个贯穿始终不折不扣的顽疾。

你看了成千上万的配色，但是老实说，最扛造耐看的配色，始终还是沉静的低饱和度配色，它们足够现代，给人感觉足够清新，也能够适配多种不同的情况，不会因为色彩不协调出现状况外的情形。这大概也是最近几年，低饱和度的配色方案出现在越来越多设计项目中的缘由吧。

8、参数化的图案

图案和字体一样，也是平面设计师的基石，而借助参数化的几何图案来构建的图案，则有着不同于手绘图案的规则性美感，它们精准地变化，规则，且趣味十足。

参数化的图案呈现出的是一种关乎数学的美感，它们是具备流动性的，相比于随性的手绘、充满刚性的建筑，参数化的图案似乎将抽象的数学画作奇异的可视化信息，它迷人的地方也正在这里。

9、迷幻设计

迷幻的设计可以追溯到 1960 年代，这种充满着扭曲、融化、放飞的美学设计深刻地改造了整个设计领域。富有迷幻特色的平面设计作品是永恒的流行趋势，它们能够随着反主流文化的推进，一次又一次地回归。

迷幻的设计风格体现的是打破枷锁的自由精神，这种精神在音乐和时尚领域也是一以贯之的。字体、图形、排版、动画、网页、APP，当中都能运用迷幻风的设计，而它们所制造的体验是令人震惊，且令人着迷的。

在 2022 年，我们看到了很多迷幻而超现实的设计作品，它们还在蓬勃地发展。

结语 很难以一个确切的原因来总结这种变化，2022 年的平面和视觉设计领域的趋势看起来颇具随机性。不过，在诸多设计趋势当中，技术加持下的参数化的图案正在走高，反设计的浪潮似乎也正在扩大，而拥抱市场、寻求设计亲和力的设计师则将糖果色玩得出神入化，它们在很多地方成为主流的风格，也就不奇怪了。

时间走到 2022 年底，我们回顾这一年的设计风格的同时，也在期待全新的 2023 年，会出现什么样的设计趋势。

设计规范的应用逻辑很简单，但需要有非常娴熟的软件功能使用基础，所以之前花了很长的篇幅讲解了和规范相关的软件功能应用，就是为了现在做准备。往期回顾：从零基础到精通：B端设计规范和组件库搭建指南（一）这是一篇酝酿了比较久的内容了，即讲解 B 端设计规范和组件库的分享。阅读文章 > 从零基础到精通：B端设计规范和...

设计规范 的应用逻辑很简单，但需要有非常娴熟的软件功能使用基础，所以之前花了很长的篇幅讲解了和规范相关的软件功能应用，就是为了现在做准备。

往期回顾：

从零基础到精通：B端设计规范和组件库搭建指南（一） 这是一篇酝酿了比较久的内容了，即讲解 B 端设计规范和组件库的分享。

阅读文章 >

从零基础到精通：B端设计规范和组件库搭建指南（二） 今天来分享关于规范应用中软件功能的具体介绍，发现用图文的形式解释软件功能实在是太难做了。

阅读文章 >

从零基础到精通：B端设计规范和组件库搭建指南（三） 今天这篇从组件的使用逻辑、文件管理、变体功能、发布和共享4个方面，帮你掌握组件功能的具体应用。

阅读文章 >

一、项目规范的整理准备 1. 项目规范的制作流程

项目设计规范的制作是一个 “庞大” 的工程，不是设计师依靠直觉平推就能做好的。所以需要先了解必要的环节，根据自己项目的实际情况做调整，再开始执行。

基础项目设计规范的完整流程，大致包含下面这些步骤：

构思项目的视觉方向和风格样式 对主要页面进行具体的视觉设计和定稿 进行规范内容的具体分析和规划 梳理全局框架和交互规范 整理基础视觉样式规范 整理控件和组件规范 规范内容评审团队对齐 规范文件整理和导出应用 后续的更新和维护 很多人错误的把开始使用设计软件生成具体的样式和组件当成设计规范的起点，这是非常错误的想法，那已经是中后期的工作了。

一套专业有效的规范，不可能凭空制定出来，必然要包含前期的准备、分析、测试和评审，最终定义出来的规范细节只是对前面设计工作的 “总结&补充”，而不是再造出新的内容出来。所以，前期的工作步骤非常重要。

首先就是在获取产品原型、需求以后，根据项目的实际情况去构思设计的风格了。换句话说，就是要构建你项目的情绪版，是要设计得比较政务国企风，还是商务稳重、科技多元。虽然 B 端项目的视觉并不像 C 端设计这样差异巨大，但依旧是得做出选择的。

不同设计风格图

初期情绪版的制定只是设计意图，所以我们需要通过部分页面的设计来落实。尤其是在前期可能拓展了多个设计方案的情况下，更需要通过输出多套飞机稿 Demo 的方式来选择最合适的一版。

所以这个阶段需要输出的页面数量不用多，只要能评估页面视觉风格的 3-5 个关键页面即可。只有视觉方案在团队内部定稿，我们后面的工作才是具有确定性的。

店小蜜的主要几个页面样式展示

因为规范可以做的东西实在太多，但每个项目的实际需要又不一样，而且留给我们制定规范的时间也不一样，使用的环境也有区别，所以我们需要在前期制定规范的层级结构和内容列表。这约等于制定一个项目的待办清单，让我们可以更好的控制进度和输出质量，这在下一小节就会展开解释。

完成上面两步，才到了具体使用设计软件进行规范制作的过程。也就是创建视觉样式，制作组件库的环节，这是要耗费精力最多，花费时间最长的步骤。但和你们想的不一样的是，这恰恰是整个流程里最简单的一步。

因为样式、组件的整理方法是死的，但怎么落地、应用、维护规范却是活的，非常考验设计师的团队协作能力和项目经验。我不会建议大家一口气就把所有规范内容全部做完，而是先把每个模块的内容制定一部分以后，就进行规范的内部评审。

主要评审规范的展示形式、引用方法、制作规范，统一设计团队内部的意见和引用，以及和开发协商如何有效进行组件化快发，保障规范在实际开发过程中被有效利用。只有这些条件都满足以后，再完成后续的所有内容制作与输出。

不要一厢情愿认为只要做了设计规范出来，其他人就一定会配合你的工作。没有经过团队内部评审交换意见后输出的规范，只是强加给其他团队成员的 “枷锁“，无法成为他们日常工作中的 “标准“。

2. 项目规范的整理准备

从构思情绪版到设计定稿，我就不在这里开展。从风格定稿以后，我们就要进行制作规范准备工作了。需要花至少半天以上的时间进行分析，应该做一套什么样的项目设计规范出来。

简单来讲，就是给自己提出几个关键的问题，并给出对应的分析结果。比如：

你有多少时间来整理这套规范？ 使用第三方库还要定哪些规范？ 规范主要的应用场景在哪里？ 规范的载体用哪种形式？ 项目的前端配合程度有多高？ 有哪些控件组件要做规范？  …… 具体要提出哪些问题是开放性的，因为每个项目摆在我们面前的阻力是不一样的，分析的侧重自然也不一样。

就比如时间这一条，如果留给我的时间特别短，以及除非我想无偿为企业做奉献，那么必然会考虑怎么降低规范的制作规格，删减不必要的细节，思考最低配输出的底线是什么。

再比如应用场景，有的项目设计规范不管我们接不接受，确实就是摆设。给领导看的、给投资人看的、给甲方加钱的，它最后就没有落地的条件。那自然做样子也就有做样子的玩法……

不同分析的结果对后面的工作内容影响是巨大的，所以考虑得越全面越好。然后就要根据分析的结果，使用思维导图工具来梳理规范中要包含的内容，整理的顺序遵循由上而下，从宏观到微观。

对应思维导图结构

上面是个简单的示例，例举了规范中常见的一些模块内容，前面的框架、样式规范内容比较稳定，所有项目基本都会包含，工作量也小。而组件库的内容就非常灵活了，需要你们自己根据项目的情况去制定。

比如，Ant 这类开源的组件库里包含了大量的组件，有相当一部分组件在我们的项目中压根不会出现，所以就不用考虑它们。也因此，每个项目的组件库都是独一无二的，你需要根据产品的原型来判断会应用，以及需要整理出来的组件。

这个目录就是你制作规范的任务清单，虽然第一版还可能有缺漏，但只要大框架有了，后面再在实际的设计推进中进行补充即可，我们就可以开始具体的设计规范制定了。

二、规范中的原则制定 设计规范整理的第一步，就是明确 —— 设计原则。用互联网一点的话术，也叫 “设计价值观”。So，啥事没干就开始上价值观整活了？

理论上，优秀的系统必然会包含某些固定的内核，比如企业文化、小说宗旨、宗教思想……整个系统的表象和细节都是受这些内核影响延伸出来的。

比如包豪斯学派的设计，是以实用性为核心主旨进行实践的。所以这类设计崇尚构成主义、标准化、极简。以这个价值观完成的设计，是不可能做出荒诞、繁杂、浮夸、喧嚣的设计的，和以消费主义为内核的波普风格是截然相反的。

包豪斯家具和波普家具

艺术看起来离我们很远，再换个例子，不同的人，不同的价值观，就会构建他们不同的穿衣风格和气质。对外在只希望简单舒适和极度渴望他人注意的人，就会对不同的品牌风格感兴趣，花不同的时间进行打扮，并表现出显而易见的差异。

这些都是价值观的作用，设计本身的价值观也没什么特殊的，就是反应制定者对这套规范作用的预期，也就是通过制定价值观让整套规范的实践发展符合指定的方向。

比如，Arco 的设计价值观中，使用了清晰、一致、韵律、开放四个词条，他们分别有如下的解释：

清晰：设计中减少不确定的因素, 减少用户判断次数，明确信息层级导向，让用户操作的目的性更明确

一致：高标准的一致的设计体系, 给用户带来品牌信赖感同时还能够通过一致的重复降低用户反复学习成本

韵律：产品使用中的韵律反应了用户习惯, 富有韵律的设计让用户的操作仿佛本该如此，减少理解记忆负担

开放：中后台产品复杂的业务场景很难以一套固定的设计体系去涵盖，只有开放包容的体系才能适应复杂的业务场景

可以看出，每个关键词其实都指向了解决某些具体的项目问题。所以明白了嘛，项目规范的原则就是从解决问题出发，通过找出或预判项目面临的重要问题，然后构想一个 “大概” 的解决方案，再提炼成关键字……

要注意，这里的价值观关键字和情绪版的关键字不一样，情绪版是定位视觉风格的词汇，范围更小更抽象，而价值观的关键字更宏观更具体（解决问题）。

给规范上价值观制定是考验设计师本身的全局思路和远见的，需要通过大量的项目去做积累，才能确保制定出来的内容具有说服力，不会让其他人看着尴尬……

虽然没有输出它也不会直接影响规范在项目中的作用，但建议新人从第一次接触开始就可以做尝试，慢慢去过体会其中的区别。

三、框架布局规范的制定 1. 全局框架版式的制定

除了价值观外，规范中层级最高的东西，就是全局框架了。在前面的分享中我们已经解释过它是什么了：

全局框架：项目的主要模块排版和布局，产品使用的主要依据和步骤

具体可以参考：

从零基础到精通：B端设计规范和组件库搭建指南（一） 这是一篇酝酿了比较久的内容了，即讲解 B 端设计规范和组件库的分享。

阅读文章 >

全局框架的制定确定了整个产品的基本交互形式，它既是交互的要素，也直接影响界面的设计框架。主要制定的内容包含下面几个要素：

主要页面布局 不同类型页面  全局组件应用 ① 主要页面布局

决定页面的核心组件布局和交互方式，包含导航栏、工具栏、菜单栏、内容区域等绝大多数页面都会出现的组件。

比如下面案例就使用了完全不同的布局结构：

但是，项目中往往会出现一些非常规性的页面，比如演示、会员付费、官方活动页等，我们也要在这个阶段中尽量考虑进去，描述包含哪些特殊的布局，应用到哪些场景。

② 不同类型页面

然后进行细化，解释几种常用页面类型的应用和设计方向，包含展示类型和页面类型。

展示类型就是页面的展示载体，如独立页面、弹窗、抽屉形式，这在我们过去的分享也解释过。

链接，页面形式说明

用一篇文章，帮你认识 B 端交互的页面、浮层、弹窗和抽屉 在 B 端产品操作中，需要高频率地打开各类链接和按钮，如果点击后需要展示新的内容，那么展现形式就包含了很多种类型，标签页、新页面、悬浮层、弹窗、抽屉等等。

阅读文章 >

页面类型是页面的功能类型，比如常见的表盘页、列表页、表单页、详情页等等，同类页面虽然在不同业务场景会有不同的字段，但它们会包含结构上的共性，是可以在前期进行整理提炼的。

比如表盘页，统一采取卡片模块拼接的模式。表格页面，统一筛选模块和表格模块的布局位置。包扩业务特有的一些页面，也可以进行整理，提升后续设计的统一性和效率。

有赞不同表盘页，置灰

③ 全局组件应用

最后，就是除了基本框架外的全局组件应用规则，例如全局提示弹窗、消息窗口、固钉等元素。

虽然在 Ant、Tdesign 等开源框架是在组件章节才去解释这些组件，但这和全局组件说明还是有差异的。在我们自己的项目中，要在全局类别下完成对它们的布局说明。

例如，包含几种通知类型，窗口对应出现的位置，触发的条件。或者 Saas 的客服&帮助固钉，要悬浮固钉在页面的哪个地方，受不受其他模态遮罩影响等。

这些元素对后续的界面都会有一定的影响，所以需要我们提前进行解释。同时，这些解释并不是深入到组件本身的说明上，仅仅是描述它们 “全局下的应用”。具体的组件本身的设计、状态、交互细节都可以在后面的组件部分进行说明。

2. 栅格响应规范的制定

可能有人会认为栅格才应该是框架规范中的第一步，这也是误解。因为——栅格是为框架服务的，而不是框架根据栅格来制定。

比如常见的导航栏位于左侧的设计，导航本身是排除到栅格区域外的。如果应用了可以展开的双列导航，那么栅格的区域还会被压缩。这在我们过去的 B 端栅格介绍中也有提及。

一级导航和双列导航加栅格的原型

即使使用了 Ant 等开源框架的栅格系统，我们也要做栅格的规范制定。因为官方只是提供了一套自定义栅格工具，并对它的开发使用做出说明。

这对于我们项目设计来讲等于什么都没说，所以需要我们进一步确认栅格中运用的参数，并在规范中进行确认，保证开发和后续的页面使用固定的参数完成。

要重点关注参数如下：

列数 Columm：栅格总共使用的列数，常见 12、16、24 列 间距 Gutter：栅格格线之间设置的间距数值，一般为 8-16px 间距 Margin：整个栅格区域两侧的预留外边距 空间 Space：栅格作用的区域，如前面不包含侧边导航或右侧展开面板等 范围 min-max：栅格支持的最小宽度和最大宽度区间

这几个参数是栅格系统中最重要的说明，其它的细节如列的两侧边缘添不添加间距、Flex 流动，都可以另外和开发商量。

很多 B 端设计师会错误的把列宽 Column Width 数值标注进去，这就代表他们依旧没有理解栅格是什么。列宽根据页面宽和上方参数被计算出来，它是个 “变量”，没有固定的宽度值，它是响应式中模块布局宽度变化的参照对象。

没有理解栅格的也可以看我们之前已经做过的栅格解释：

B 端响应式界面应该怎么做？这篇教程超详细！ 继上一次关于 B 端界面宽度设置的内容以后，现在我们就要谈一谈另一个 B 端设计师都很关心的话题，B 端的响应式应用。

阅读文章 >

3. 间距数值应用

布局还有个不是太起眼，但是非常重要的地方，就是间距的应用。包含模块间距、标签列表间距、模块内间距、按钮内间距等等。

间距的应用是构成整个页面稳定性的核心要素之一（另一个是对齐），要尽可能将整个项目的间距控制在几个固定的间距数值之中。

比如 TDesign 中的间距制定：

对于我们自己的项目，间距的数值不需要和它们完全一致，但是只像它一样列几个参数显然也太苍白了。所以需要对每个间距数值的应用给出一定的示例，确保内部对间距应用思路保持一致。

4. Z 轴层级关系制定

全局的最后一个模块，就是针对 Z 轴层级进行制定。它用来表示页面中元素的上下顺序和叠加关系，类似设计软件中图层的顺序。

要确定的内容除了上方这种固定的 Z 轴顺序以外，还包含活动的层级，在原有图层上 +1 级的高度。如：

下拉菜单 文字气泡 操作气泡 除了在后续设计中让我们直接进行覆盖以外，Z 轴作为一种空间关系，被越来越多的设计规范结合到投影的使用上。比如 Android Material Design 2 中，不同 Z 轴高使用不同的投影参数。

MD 投影参数页面截图

如果项目中要应用投影，就可以把它关联到 Z 轴的应用中，给对应层级分配固定的投影类型，保证空间感的一致。

以上就是关于全局框架中需要记录内容的解释了，具体的描述文案、内容，可以参照 Ant、TDesign、Arco 的相关说明，并自行优化。

四、基本样式规范制定 1. 色彩规范的制定

进入样式的规范制定中，首先就围绕颜色展开。颜色规范主要关注几个固定的色彩类型，并通过一个画布进行记录和展示。

主色：项目的主要用色，以及主色的相关变体 辅助色：用来配合主色提升项目内容辨识度和权重的色彩 中性色：项目中黑白灰的不同灰度值应用 遮罩：相关遮罩层的色彩和透明度设置 渐变：应用渐变色的相关角度、渐变跨度或固定渐变值

店小蜜规范色彩应用

如果对这些色彩应用没概念，可以参考我们前面写过的 B 端色彩说明：

超详细！总监出品的B端设计规范指南（三）：配色 B 端设计也是 UI 设计的一种，它的输出环境只存在于电子屏幕中，所以统一使用 RGB 色彩显示模式即可。

阅读文章 >

这里我要提个和大多数网上色彩规范分享不同的观点，就是一个项目里，色彩应用数量是越少越好的。99% 的项目压根不需要制定完整的多色相衍生色板。

这在实际设计和开发环境下就是纯粹的负担，因为我们每次选色都面临着大量的选择对象。而且这种情况还需要我们处理对应的 Color Token 命名，和开发对齐规则应用方式，投入是远远低于产出的。

如果想要实现类似按钮悬浮、点击之类的不同状态的颜色调整，就可以通过黑色、白色遮罩的应用来关联不同交互行为。

多种按钮类型，默认状态，鼠标悬浮叠加 白色 10%，点击 黑色 10%，

要是项目确定使用了某套开源框架，且没有固定的品牌色。那么就建议所有颜色都从官方的色卡选色，然后在色彩示例种备注对应的颜色名称（不是 Token）即可。

比如使用上方的色彩规范展示案例，直接替换成 TDesign 色卡中应用的色彩和名称：

店小蜜规范的色彩从 TD 里拿，和上方的做对比

2. 字体规范的制定

色彩之后，就是字体的规范了。同样，我们字体规范就是从完成界面中整理出对应的字体规格，包含标题、正文、注释三个大类，以及特殊的英文、数字等类型。

每个类型要反应字体、字号、字重、行高这几个核心参数。因为设计软件中可以直接查看，所以今天我们在处理规范的时候往往在画布上把字体放上去就可以，往往不用独立标注。

店小蜜字体规范列表，字体设置罗列多个

其中，主要字体定义通常不会只有一个，会包含多个字体选项，根据打开网页的系统环境进行匹配。所以，我们要筛选出对应的字体范围进行说明。

如果对网页字体本身认知不够清晰的，也可以参照我们前面做的规范说明：

超详细！总监出品的B端设计规范指南（二）：字体 第二篇，我们就要回到 UI 整个类目里最麻烦，也是最重要的规范类型——字体。

阅读文章 >

字体和色彩类似，规格数量一样是越少越好，多了即不能提升实际的效果，还会拖累项目效率。

3. 图标规范的制定

在项目中图标也是基本的组成要素，我们过去关于图标的分享做了不少了，相信大家都知道图标本身是具有一定绘制规范的。

虽然 Ant 它们都有一些自带的图标栅格系统，但即使我们应用了它们提供的图标苦，这些栅格对于我们来讲也毫无意义。因为那是他们画图标的标准，关我们的规范什么事……

首先我们要明确项目中不可能只使用完全相同参数的图标，最起码在尺寸上会有不同，所以项目里就必然包含多套图标。

店小蜜页面多图标的示例

所以即使我们用了类似 iconpark 的图标库，依旧要做几个关键的规范要制定的，比如图标的尺寸，对应的粗细设置等。

如果没有用图标库，完全由自己设计，那么就需要提供更丰富的规范内容了。尤其是尽量包含不同规格下的栅格模版，因为栅格的制定在不同尺寸下是会有不同细节调整的。

店小蜜基础的图标展示，包含栅格

如果对图标的理解不够深入，也可以看我们做过的 B 端图标说明：

5600字干货！B端图标设计全面指南 我们的多个 B 端社群都在咨询有关图标设计的各类问题，所以，索性针对 B 端单独出一篇图标的说明。

阅读文章 >

4. 圆角模糊等细节制定

样式中最后一步，就是视觉细节的总结了，包括圆角、背景模糊、线段、图形比例等。

我们需要总结在项目设计中运用到的可以总结出来的细节特征，并加以记录和统一，防止在后续的设计中不断膨胀出新的规格。

店小蜜细节内容总结

这些细节是构成界面样式丰富性的主要因素，也是最容易破坏项目视觉统一性的东西。比如圆角的设置，一些初级 B 端设计师输出的项目，就可以包含无数种规格，且圆角的大小并没有清晰的使用逻辑，这是严重降低设计质量的表现（当然也是能力问题）。

我们在归纳细节的时候就是防止不同设计师（尤其是刚入门的新人），在后续设计中放飞自我。每个项目都会有不同的细节内容和特征，就需要设计师自己去思考和总结出来了。

以上就是关于视觉部分样式的说明，每个类型可以在软件中制作一个独立的画板，并放置对应示例，并且只需要针对软件面板中无法反应的规则做注释说明，不要事无巨细把所有参数备注都写出来。

以及可以添加到软件样式表中的，也在这个阶段中完成，然后再开始整理后续的组件库，确保组件库中的属性已经完全关联到对应样式上。

五、控件和组件规范制定 1. 控件和组件规范记录的标准

再强调一遍名词的概念，控件在这边指基础的交互元素和单位，组件指包含复合操作的业务模块，虽然本质上它们都是 “组件 Compoent/Symbol/Kits”，但因为复杂度不同，在规范的制作上自然会有一定的差异，这会再后面具体提及。

它们反而是整套设计规范中最简单的部分，因为 Ant 等框架对于组件的说明和展示也已经足够完善，都是现成的参考案例。所以，我不打算像其他人分享的内容一样，逐一具体控件和组件进行简单介绍。

Ant 的组件介绍页面

制作组件库和规范的主要难点，在我看来是怎么让它们可以高效的被利用起来，所以这需要一个清晰的内容索引机制。

Ant 等主流组件库，如果有引用过它们组件库直接做设计的同学应该都会发现非常痛苦，不仅仅只是使用了各种编组和自动布局的关系，还包含想要找到自己想要的组件得找很久。

原因就是因为这些组件库不是他们团队真实的项目库，只是 KPI 和任务。所以并不会太多考虑实际应用难上的困难，直接使用英文排序来罗列组件，或者没有任何规则。

比如下图是 Ant 在即时中的组件存放面板（内容应该不完整…），一个大分类下堆满了不同的组件，查找起来非常的低效。

所以针对我们自己的项目，就不能照搬这种模式。要充分利用软件的页面 Page、画板 Artboard、链接 Link 功能来完成组件的索引和存放。

首先再回到前面准备工作中的思维导图，我们通过思维导图记录了一些会出现的组件内容，这里我们要进一步分类。每个二级分类对应软件中的页面 Page，三级分类对应画板 Artboard，四级分类对应画板中存放的组件内容。

整体遵循分类和层级清晰的原则，避免在同一画板中堆砌没有关联性的组件，同时针对一份完整规范的要求，还要在前面添加引导页 Guide Page，样式页 Style Page 即可。

思维导图

完成结构的创建以后，后面的组件内容摆放就根据这个目录来完成，虽然这个思维导图大纲还是第一版，必然是不完善的。但只要前期这个框架形成体系，那么后面添加的内容自然会根据这个结构来补充。

每个画板下方内容怎么放，会在后面的两个小节做解释。这里重点说下第一个引导页面 Guide page，它作为打开规范看到的第一个页面，是要承载一些必要的信息的，比如设计的原则、规范的使用说明、版本的更新之类的解释。

一定要牢记 “必要信息” 这个关键词，不是鼓励你们在首页写几万字的内容进行自我感动，而是在一个画板内用最精简的文字把该放的信息放进去即可。

比如以 Arco 的说明作为参照，大概就是这样：

对应案例

除此以外，首页还有个最重要的功能，就是 “内容目录”。一个有效的索引机制可不仅仅是让我们手动查找，而是会创建一个用来快速跳转的 内容明细目录。

原理就是可以选中画板、图层右键复制它的链接，然后再在对应图层中添加这个链接，就可以让这个图层成为跳转到刚才元素位置的按钮。

理解原理，之后就是创建目录了。我们依旧可以使用自动布局的功能，并根据刚才的结构划分，快速创建出一个可以自由调节并支持跳转的目录出来，比如下面的这样的案例：

目录截图

在这个引导页中，目录是权重更高的模块，因为其它信息一般看一两次就够了，没有特别的事情不会再看它，而目录才是每次进入这个页面的价值所在，所以放的位置要显眼，不要让其它文本信息过度占据页面的内容。

完成目录后，就可以在左侧页面 Page 列表创建对应的组件分组，并进行下一步工作了。

2. 基础控件规范制定要点

基础控件因为太简单，所以不需要用太多的文字内容做解释，单个解释面板下包含的内容只需要有：

标题简介：简单描述这个控件是什么，有什么作用，最多几十个字就够了 样式展示：把这个面板下包含的不同控件类型先统一展示一遍，然后使用简单的文字备注 状态展示：把每个类型控件会出现的状态罗列出来，对需要备注的地方进行说明 一个按钮控件面板的制作，做前讨论：

一个按钮控件面板的制作，做前讨论

变体要调整，不按当前的做法做

一定要牢记，自己的项目和线上的开源框架解释是不同的，内容不要太含糊。就比如上面的按钮，我在项目中使用过几个不同的高度和类型，那我一定会把它们都列出来，而不是简单放一个样式和状态就结束。

因为规格不同，就肯定没办法用一个按钮的变体组件来完成项目的全部按钮设计，所以肯定要生成多个组件和变体。然后在状态展示的部分，就可以直接将变体放进去，并且给出对应的注释即可。

3. 进阶组件规范制定要点

组件比控件复杂，复杂不只是视觉而已，而是更复杂的交互和业务逻辑，既然我们梳理规范了，那自然应该把重要的交互解释放进来。

当然，组件也分一般的基础组件和复杂的业务组件。基础组件如下拉菜单等没有交互说明必要的和控件的做法别无二致，麻烦的是复杂的业务组件记录和说明。

且因为业务组件的特殊性，尽量在一个画板中只展示一个组件，而不是硬凑到一起去。

复杂的业务组件的面板应该包含的内容如下：

标题简介：简单描述组件是什么，以及对应的用途 样式展示：展示同一组件的主要状态和样式 交互说明：对组件的交互创建连线和基本说明

对应案例

这里还延伸出一个问题，就是关于项目交互文档的问题。在我们前面发过的分享中有专门解释，一套完整的交互文档会囊括非常全面的内容和信息，但是正常的项目中，交互文档一般只对应一个版本和迭代，很难去维护一份总的交互文档，来反应项目中最新的交互内容。

所以，在组件库整理中，每次把交互的信息整理进去，是最简单、有效的处理方式，不仅组件本身的各个状态样式能反映出来，交互的信息也不用到别的文档查看，减少了文档维护的压力。

只要了解了这几个核心的要点，那么整理整套组件库就只是时间问题了。

最后还要重复那句话，文档格式是死的，人是活的。我们要根据前期对项目环境的分析，来决定规范应该做到什么程度，该写哪些说明。不要在没有充分考虑的情况下，把我例举的案例直接作为标准在项目中实践，很可能因为内容太多而最终放弃。

所以，尽量先从最精简的模式展开，先完成基本的框架搭建和样式图层置入。确保组件库能满足最基本使用需求后，再考虑逐渐优化丰富相关信息。

六、规范的评审和分享 1. 规范的内部评审会议

完成版本相关的规范以后，就一定要在内部召开一次规范的评审会议，来统一相关成员的认识。如果团队成员对规范还有意见，认为有需要修改的地方，就要进行协商并做进一步优化。

评审要解决以下三个领域的问题：

产品/交互 UI 设计师 开发/测试 ① 产品/交互

第一，让产品经理和交互设计师了解规范中的内容有哪些，对应的结构和目录，以及文件存放的位置，如何打开进行查看、引用。

因为设计规范只要整理了，就绝对不是局限在视觉样式上，必然会包含了框架、交互的内容，在后续的版本迭代中产品和交互都要遵守。

比如提示和弹窗，产品和交互设计师都不能在后面的原型中随心所欲的设计，想放哪放哪，必然是要根据设计规范来处理。如果一定要和原规范内容不同（规范不适用新场景），那这就是一个新的产品需求，是要添加到版本迭代的条目里的。

同时，产品或者交互在完成一些新页面原型的时候，如果页面本身很简单，也是可以直接使用规范中的内容直接拼装高保真原型出来的，可以大大提升他们的原型有效性，而不是还在产出一些风马不相及的简陋原型，降低我们的工作压力……

做的非常差的产品原型

② UI 设计师

第二，就是设计团队内部的对齐了。如果你们团队人少，都参与了规范的搭建这步可以略过，但如果团队人多，部分设计师压根不知道你做了什么，那就绝对不能忽略。

我们需要和他们讲解规范文件所在的位置，引用样式和组件库的方法，以及如何进行维护和迭代的说明。确保设计规范可以在设计团队中正常的流通和应用，而不是完全变成自嗨。

因为设计规范的应用必然会和不同设计师原有工作方式有冲突，所以一方面我们要征求他们意见优化，另一方面就是需要强制推行的（职场问题），需要一开始就有部门的领导或者项目负责人发声表态，并全力支持规范的执行，不然规范的结果嘛……

③ 开发/测试

规范的应用，必然和前端有非常大的关联，需要他们在这个阶段理解规范的内容，以及思考模块化开发的可能性和阻力，并给出优化建议。

如果前端没在评审阶段对我们制作规范的工作表示认可，那基本后面也不会照着规范的内容做开发，这同样需要有外部的不可抗力来强制他们执行规范。

除了开发外，测试工程师也肯定要知道规范的内容，这可以让他们在测试阶段共同发现设计的问题，而不是只让设计师做程序还原度检测。

这三个部分意见都统一了，这套规范才脱离自嗨的范畴，具备真正的生命力。

2. 规范文件的应用思路

最后，就是规范文件本身的注意要点了。

我们前面讲过，规范直接使用设计软件中的文件作为载体，在里面放置样式、组件并添加文字说明，然后进行发布，就可以从别的文件引用它了。

常规的项目设计，会拆分成不同的模块或流程，每个用一个独立的设计文件。所以这种好处就是即保证文件独立性，又支持我们在规范页面优化内容批量修改所有引用页面。

页面引用结构

但这也衍生出一个新的问题，当进入新的版本以后，我们会创建新的项目文件，那么按新设计更新了规范，那么老的引用它的文件不就也受到影响了嘛？

所以，我们不能在整个项目中只引用一个规范文件。而是要在每次新的版本中，创建一个新规范文件出来作为引用对象，并且能保证每个版本的规范文件被保存下来，且让规范的文档编号和项目的编号持平是最好的情况，而不是独立一个规范的版本编号出来。

对应结构

满足完这点，那么规范的变动就可以追溯，也便于长期的维护和更新。我们的整套 B 端设计规范制作的分享也就结束了。

结尾 一套优秀的规范输出并落地，是规范制定者本身能力的直接反应，需要具备扎实的设计基础，丰富的知识点，充分的项目经验，以及职场必备的同理心和执行力。

它是检验我们自身能力的一面镜子，新手可以通过去构建规范来检查自己的缺点，以及找到提升的方向。

虽然还有很多细节没有提，但不打算继续拓展图文内容了，因为前后已经写了两万字了。后续我会在原子核中单独开一个分支，上一套独立的规范制定视频教学。

希望对大家有所帮助……

我们下篇再贱！

欢迎关注作者的微信公众号：「超人的电话亭」

设计规范的应用逻辑很简单，但需要有非常娴熟的软件功能使用基础，所以之前花了很长的篇幅讲解了和规范相关的软件功能应用，就是为了现在做准备。往期回顾：从零基础到精通：B端设计规范和组件库搭建指南（一）这是一篇酝酿了比较久的内容了，即讲解 B 端设计规范和组件库的分享。阅读文章 > 从零基础到精通：B端设计规范和...

设计规范 的应用逻辑很简单，但需要有非常娴熟的软件功能使用基础，所以之前花了很长的篇幅讲解了和规范相关的软件功能应用，就是为了现在做准备。

往期回顾：

从零基础到精通：B端设计规范和组件库搭建指南（一） 这是一篇酝酿了比较久的内容了，即讲解 B 端设计规范和组件库的分享。

阅读文章 >

从零基础到精通：B端设计规范和组件库搭建指南（二） 今天来分享关于规范应用中软件功能的具体介绍，发现用图文的形式解释软件功能实在是太难做了。

阅读文章 >

从零基础到精通：B端设计规范和组件库搭建指南（三） 今天这篇从组件的使用逻辑、文件管理、变体功能、发布和共享4个方面，帮你掌握组件功能的具体应用。

阅读文章 >

一、项目规范的整理准备 1. 项目规范的制作流程

项目设计规范的制作是一个 “庞大” 的工程，不是设计师依靠直觉平推就能做好的。所以需要先了解必要的环节，根据自己项目的实际情况做调整，再开始执行。

基础项目设计规范的完整流程，大致包含下面这些步骤：

构思项目的视觉方向和风格样式 对主要页面进行具体的视觉设计和定稿 进行规范内容的具体分析和规划 梳理全局框架和交互规范 整理基础视觉样式规范 整理控件和组件规范 规范内容评审团队对齐 规范文件整理和导出应用 后续的更新和维护 很多人错误的把开始使用设计软件生成具体的样式和组件当成设计规范的起点，这是非常错误的想法，那已经是中后期的工作了。

一套专业有效的规范，不可能凭空制定出来，必然要包含前期的准备、分析、测试和评审，最终定义出来的规范细节只是对前面设计工作的 “总结&补充”，而不是再造出新的内容出来。所以，前期的工作步骤非常重要。

首先就是在获取产品原型、需求以后，根据项目的实际情况去构思设计的风格了。换句话说，就是要构建你项目的情绪版，是要设计得比较政务国企风，还是商务稳重、科技多元。虽然 B 端项目的视觉并不像 C 端设计这样差异巨大，但依旧是得做出选择的。

不同设计风格图

初期情绪版的制定只是设计意图，所以我们需要通过部分页面的设计来落实。尤其是在前期可能拓展了多个设计方案的情况下，更需要通过输出多套飞机稿 Demo 的方式来选择最合适的一版。

所以这个阶段需要输出的页面数量不用多，只要能评估页面视觉风格的 3-5 个关键页面即可。只有视觉方案在团队内部定稿，我们后面的工作才是具有确定性的。

店小蜜的主要几个页面样式展示

因为规范可以做的东西实在太多，但每个项目的实际需要又不一样，而且留给我们制定规范的时间也不一样，使用的环境也有区别，所以我们需要在前期制定规范的层级结构和内容列表。这约等于制定一个项目的待办清单，让我们可以更好的控制进度和输出质量，这在下一小节就会展开解释。

完成上面两步，才到了具体使用设计软件进行规范制作的过程。也就是创建视觉样式，制作组件库的环节，这是要耗费精力最多，花费时间最长的步骤。但和你们想的不一样的是，这恰恰是整个流程里最简单的一步。

因为样式、组件的整理方法是死的，但怎么落地、应用、维护规范却是活的，非常考验设计师的团队协作能力和项目经验。我不会建议大家一口气就把所有规范内容全部做完，而是先把每个模块的内容制定一部分以后，就进行规范的内部评审。

主要评审规范的展示形式、引用方法、制作规范，统一设计团队内部的意见和引用，以及和开发协商如何有效进行组件化快发，保障规范在实际开发过程中被有效利用。只有这些条件都满足以后，再完成后续的所有内容制作与输出。

不要一厢情愿认为只要做了设计规范出来，其他人就一定会配合你的工作。没有经过团队内部评审交换意见后输出的规范，只是强加给其他团队成员的 “枷锁“，无法成为他们日常工作中的 “标准“。

2. 项目规范的整理准备

从构思情绪版到设计定稿，我就不在这里开展。从风格定稿以后，我们就要进行制作规范准备工作了。需要花至少半天以上的时间进行分析，应该做一套什么样的项目设计规范出来。

简单来讲，就是给自己提出几个关键的问题，并给出对应的分析结果。比如：

你有多少时间来整理这套规范？ 使用第三方库还要定哪些规范？ 规范主要的应用场景在哪里？ 规范的载体用哪种形式？ 项目的前端配合程度有多高？ 有哪些控件组件要做规范？  …… 具体要提出哪些问题是开放性的，因为每个项目摆在我们面前的阻力是不一样的，分析的侧重自然也不一样。

就比如时间这一条，如果留给我的时间特别短，以及除非我想无偿为企业做奉献，那么必然会考虑怎么降低规范的制作规格，删减不必要的细节，思考最低配输出的底线是什么。

再比如应用场景，有的项目设计规范不管我们接不接受，确实就是摆设。给领导看的、给投资人看的、给甲方加钱的，它最后就没有落地的条件。那自然做样子也就有做样子的玩法……

不同分析的结果对后面的工作内容影响是巨大的，所以考虑得越全面越好。然后就要根据分析的结果，使用思维导图工具来梳理规范中要包含的内容，整理的顺序遵循由上而下，从宏观到微观。

对应思维导图结构

上面是个简单的示例，例举了规范中常见的一些模块内容，前面的框架、样式规范内容比较稳定，所有项目基本都会包含，工作量也小。而组件库的内容就非常灵活了，需要你们自己根据项目的情况去制定。

比如，Ant 这类开源的组件库里包含了大量的组件，有相当一部分组件在我们的项目中压根不会出现，所以就不用考虑它们。也因此，每个项目的组件库都是独一无二的，你需要根据产品的原型来判断会应用，以及需要整理出来的组件。

这个目录就是你制作规范的任务清单，虽然第一版还可能有缺漏，但只要大框架有了，后面再在实际的设计推进中进行补充即可，我们就可以开始具体的设计规范制定了。

二、规范中的原则制定 设计规范整理的第一步，就是明确 —— 设计原则。用互联网一点的话术，也叫 “设计价值观”。So，啥事没干就开始上价值观整活了？

理论上，优秀的系统必然会包含某些固定的内核，比如企业文化、小说宗旨、宗教思想……整个系统的表象和细节都是受这些内核影响延伸出来的。

比如包豪斯学派的设计，是以实用性为核心主旨进行实践的。所以这类设计崇尚构成主义、标准化、极简。以这个价值观完成的设计，是不可能做出荒诞、繁杂、浮夸、喧嚣的设计的，和以消费主义为内核的波普风格是截然相反的。

包豪斯家具和波普家具

艺术看起来离我们很远，再换个例子，不同的人，不同的价值观，就会构建他们不同的穿衣风格和气质。对外在只希望简单舒适和极度渴望他人注意的人，就会对不同的品牌风格感兴趣，花不同的时间进行打扮，并表现出显而易见的差异。

这些都是价值观的作用，设计本身的价值观也没什么特殊的，就是反应制定者对这套规范作用的预期，也就是通过制定价值观让整套规范的实践发展符合指定的方向。

比如，Arco 的设计价值观中，使用了清晰、一致、韵律、开放四个词条，他们分别有如下的解释：

清晰：设计中减少不确定的因素, 减少用户判断次数，明确信息层级导向，让用户操作的目的性更明确

一致：高标准的一致的设计体系, 给用户带来品牌信赖感同时还能够通过一致的重复降低用户反复学习成本

韵律：产品使用中的韵律反应了用户习惯, 富有韵律的设计让用户的操作仿佛本该如此，减少理解记忆负担

开放：中后台产品复杂的业务场景很难以一套固定的设计体系去涵盖，只有开放包容的体系才能适应复杂的业务场景

可以看出，每个关键词其实都指向了解决某些具体的项目问题。所以明白了嘛，项目规范的原则就是从解决问题出发，通过找出或预判项目面临的重要问题，然后构想一个 “大概” 的解决方案，再提炼成关键字……

要注意，这里的价值观关键字和情绪版的关键字不一样，情绪版是定位视觉风格的词汇，范围更小更抽象，而价值观的关键字更宏观更具体（解决问题）。

给规范上价值观制定是考验设计师本身的全局思路和远见的，需要通过大量的项目去做积累，才能确保制定出来的内容具有说服力，不会让其他人看着尴尬……

虽然没有输出它也不会直接影响规范在项目中的作用，但建议新人从第一次接触开始就可以做尝试，慢慢去过体会其中的区别。

三、框架布局规范的制定 1. 全局框架版式的制定

除了价值观外，规范中层级最高的东西，就是全局框架了。在前面的分享中我们已经解释过它是什么了：

全局框架：项目的主要模块排版和布局，产品使用的主要依据和步骤

具体可以参考：

从零基础到精通：B端设计规范和组件库搭建指南（一） 这是一篇酝酿了比较久的内容了，即讲解 B 端设计规范和组件库的分享。

阅读文章 >

全局框架的制定确定了整个产品的基本交互形式，它既是交互的要素，也直接影响界面的设计框架。主要制定的内容包含下面几个要素：

主要页面布局 不同类型页面  全局组件应用 ① 主要页面布局

决定页面的核心组件布局和交互方式，包含导航栏、工具栏、菜单栏、内容区域等绝大多数页面都会出现的组件。

比如下面案例就使用了完全不同的布局结构：

但是，项目中往往会出现一些非常规性的页面，比如演示、会员付费、官方活动页等，我们也要在这个阶段中尽量考虑进去，描述包含哪些特殊的布局，应用到哪些场景。

② 不同类型页面

然后进行细化，解释几种常用页面类型的应用和设计方向，包含展示类型和页面类型。

展示类型就是页面的展示载体，如独立页面、弹窗、抽屉形式，这在我们过去的分享也解释过。

链接，页面形式说明

用一篇文章，帮你认识 B 端交互的页面、浮层、弹窗和抽屉 在 B 端产品操作中，需要高频率地打开各类链接和按钮，如果点击后需要展示新的内容，那么展现形式就包含了很多种类型，标签页、新页面、悬浮层、弹窗、抽屉等等。

阅读文章 >

页面类型是页面的功能类型，比如常见的表盘页、列表页、表单页、详情页等等，同类页面虽然在不同业务场景会有不同的字段，但它们会包含结构上的共性，是可以在前期进行整理提炼的。

比如表盘页，统一采取卡片模块拼接的模式。表格页面，统一筛选模块和表格模块的布局位置。包扩业务特有的一些页面，也可以进行整理，提升后续设计的统一性和效率。

有赞不同表盘页，置灰

③ 全局组件应用

最后，就是除了基本框架外的全局组件应用规则，例如全局提示弹窗、消息窗口、固钉等元素。

虽然在 Ant、Tdesign 等开源框架是在组件章节才去解释这些组件，但这和全局组件说明还是有差异的。在我们自己的项目中，要在全局类别下完成对它们的布局说明。

例如，包含几种通知类型，窗口对应出现的位置，触发的条件。或者 Saas 的客服&帮助固钉，要悬浮固钉在页面的哪个地方，受不受其他模态遮罩影响等。

这些元素对后续的界面都会有一定的影响，所以需要我们提前进行解释。同时，这些解释并不是深入到组件本身的说明上，仅仅是描述它们 “全局下的应用”。具体的组件本身的设计、状态、交互细节都可以在后面的组件部分进行说明。

2. 栅格响应规范的制定

可能有人会认为栅格才应该是框架规范中的第一步，这也是误解。因为——栅格是为框架服务的，而不是框架根据栅格来制定。

比如常见的导航栏位于左侧的设计，导航本身是排除到栅格区域外的。如果应用了可以展开的双列导航，那么栅格的区域还会被压缩。这在我们过去的 B 端栅格介绍中也有提及。

一级导航和双列导航加栅格的原型

即使使用了 Ant 等开源框架的栅格系统，我们也要做栅格的规范制定。因为官方只是提供了一套自定义栅格工具，并对它的开发使用做出说明。

这对于我们项目设计来讲等于什么都没说，所以需要我们进一步确认栅格中运用的参数，并在规范中进行确认，保证开发和后续的页面使用固定的参数完成。

要重点关注参数如下：

列数 Columm：栅格总共使用的列数，常见 12、16、24 列 间距 Gutter：栅格格线之间设置的间距数值，一般为 8-16px 间距 Margin：整个栅格区域两侧的预留外边距 空间 Space：栅格作用的区域，如前面不包含侧边导航或右侧展开面板等 范围 min-max：栅格支持的最小宽度和最大宽度区间

这几个参数是栅格系统中最重要的说明，其它的细节如列的两侧边缘添不添加间距、Flex 流动，都可以另外和开发商量。

很多 B 端设计师会错误的把列宽 Column Width 数值标注进去，这就代表他们依旧没有理解栅格是什么。列宽根据页面宽和上方参数被计算出来，它是个 “变量”，没有固定的宽度值，它是响应式中模块布局宽度变化的参照对象。

没有理解栅格的也可以看我们之前已经做过的栅格解释：

B 端响应式界面应该怎么做？这篇教程超详细！ 继上一次关于 B 端界面宽度设置的内容以后，现在我们就要谈一谈另一个 B 端设计师都很关心的话题，B 端的响应式应用。

阅读文章 >

3. 间距数值应用

布局还有个不是太起眼，但是非常重要的地方，就是间距的应用。包含模块间距、标签列表间距、模块内间距、按钮内间距等等。

间距的应用是构成整个页面稳定性的核心要素之一（另一个是对齐），要尽可能将整个项目的间距控制在几个固定的间距数值之中。

比如 TDesign 中的间距制定：

对于我们自己的项目，间距的数值不需要和它们完全一致，但是只像它一样列几个参数显然也太苍白了。所以需要对每个间距数值的应用给出一定的示例，确保内部对间距应用思路保持一致。

4. Z 轴层级关系制定

全局的最后一个模块，就是针对 Z 轴层级进行制定。它用来表示页面中元素的上下顺序和叠加关系，类似设计软件中图层的顺序。

要确定的内容除了上方这种固定的 Z 轴顺序以外，还包含活动的层级，在原有图层上 +1 级的高度。如：

下拉菜单 文字气泡 操作气泡 除了在后续设计中让我们直接进行覆盖以外，Z 轴作为一种空间关系，被越来越多的设计规范结合到投影的使用上。比如 Android Material Design 2 中，不同 Z 轴高使用不同的投影参数。

MD 投影参数页面截图

如果项目中要应用投影，就可以把它关联到 Z 轴的应用中，给对应层级分配固定的投影类型，保证空间感的一致。

以上就是关于全局框架中需要记录内容的解释了，具体的描述文案、内容，可以参照 Ant、TDesign、Arco 的相关说明，并自行优化。

四、基本样式规范制定 1. 色彩规范的制定

进入样式的规范制定中，首先就围绕颜色展开。颜色规范主要关注几个固定的色彩类型，并通过一个画布进行记录和展示。

主色：项目的主要用色，以及主色的相关变体 辅助色：用来配合主色提升项目内容辨识度和权重的色彩 中性色：项目中黑白灰的不同灰度值应用 遮罩：相关遮罩层的色彩和透明度设置 渐变：应用渐变色的相关角度、渐变跨度或固定渐变值

店小蜜规范色彩应用

如果对这些色彩应用没概念，可以参考我们前面写过的 B 端色彩说明：

超详细！总监出品的B端设计规范指南（三）：配色 B 端设计也是 UI 设计的一种，它的输出环境只存在于电子屏幕中，所以统一使用 RGB 色彩显示模式即可。

阅读文章 >

这里我要提个和大多数网上色彩规范分享不同的观点，就是一个项目里，色彩应用数量是越少越好的。99% 的项目压根不需要制定完整的多色相衍生色板。

这在实际设计和开发环境下就是纯粹的负担，因为我们每次选色都面临着大量的选择对象。而且这种情况还需要我们处理对应的 Color Token 命名，和开发对齐规则应用方式，投入是远远低于产出的。

如果想要实现类似按钮悬浮、点击之类的不同状态的颜色调整，就可以通过黑色、白色遮罩的应用来关联不同交互行为。

多种按钮类型，默认状态，鼠标悬浮叠加 白色 10%，点击 黑色 10%，

要是项目确定使用了某套开源框架，且没有固定的品牌色。那么就建议所有颜色都从官方的色卡选色，然后在色彩示例种备注对应的颜色名称（不是 Token）即可。

比如使用上方的色彩规范展示案例，直接替换成 TDesign 色卡中应用的色彩和名称：

店小蜜规范的色彩从 TD 里拿，和上方的做对比

2. 字体规范的制定

色彩之后，就是字体的规范了。同样，我们字体规范就是从完成界面中整理出对应的字体规格，包含标题、正文、注释三个大类，以及特殊的英文、数字等类型。

每个类型要反应字体、字号、字重、行高这几个核心参数。因为设计软件中可以直接查看，所以今天我们在处理规范的时候往往在画布上把字体放上去就可以，往往不用独立标注。

店小蜜字体规范列表，字体设置罗列多个

其中，主要字体定义通常不会只有一个，会包含多个字体选项，根据打开网页的系统环境进行匹配。所以，我们要筛选出对应的字体范围进行说明。

如果对网页字体本身认知不够清晰的，也可以参照我们前面做的规范说明：

超详细！总监出品的B端设计规范指南（二）：字体 第二篇，我们就要回到 UI 整个类目里最麻烦，也是最重要的规范类型——字体。

阅读文章 >

字体和色彩类似，规格数量一样是越少越好，多了即不能提升实际的效果，还会拖累项目效率。

3. 图标规范的制定

在项目中图标也是基本的组成要素，我们过去关于图标的分享做了不少了，相信大家都知道图标本身是具有一定绘制规范的。

虽然 Ant 它们都有一些自带的图标栅格系统，但即使我们应用了它们提供的图标苦，这些栅格对于我们来讲也毫无意义。因为那是他们画图标的标准，关我们的规范什么事……

首先我们要明确项目中不可能只使用完全相同参数的图标，最起码在尺寸上会有不同，所以项目里就必然包含多套图标。

店小蜜页面多图标的示例

所以即使我们用了类似 iconpark 的图标库，依旧要做几个关键的规范要制定的，比如图标的尺寸，对应的粗细设置等。

如果没有用图标库，完全由自己设计，那么就需要提供更丰富的规范内容了。尤其是尽量包含不同规格下的栅格模版，因为栅格的制定在不同尺寸下是会有不同细节调整的。

店小蜜基础的图标展示，包含栅格

如果对图标的理解不够深入，也可以看我们做过的 B 端图标说明：

5600字干货！B端图标设计全面指南 我们的多个 B 端社群都在咨询有关图标设计的各类问题，所以，索性针对 B 端单独出一篇图标的说明。

阅读文章 >

4. 圆角模糊等细节制定

样式中最后一步，就是视觉细节的总结了，包括圆角、背景模糊、线段、图形比例等。

我们需要总结在项目设计中运用到的可以总结出来的细节特征，并加以记录和统一，防止在后续的设计中不断膨胀出新的规格。

店小蜜细节内容总结

这些细节是构成界面样式丰富性的主要因素，也是最容易破坏项目视觉统一性的东西。比如圆角的设置，一些初级 B 端设计师输出的项目，就可以包含无数种规格，且圆角的大小并没有清晰的使用逻辑，这是严重降低设计质量的表现（当然也是能力问题）。

我们在归纳细节的时候就是防止不同设计师（尤其是刚入门的新人），在后续设计中放飞自我。每个项目都会有不同的细节内容和特征，就需要设计师自己去思考和总结出来了。

以上就是关于视觉部分样式的说明，每个类型可以在软件中制作一个独立的画板，并放置对应示例，并且只需要针对软件面板中无法反应的规则做注释说明，不要事无巨细把所有参数备注都写出来。

以及可以添加到软件样式表中的，也在这个阶段中完成，然后再开始整理后续的组件库，确保组件库中的属性已经完全关联到对应样式上。

五、控件和组件规范制定 1. 控件和组件规范记录的标准

再强调一遍名词的概念，控件在这边指基础的交互元素和单位，组件指包含复合操作的业务模块，虽然本质上它们都是 “组件 Compoent/Symbol/Kits”，但因为复杂度不同，在规范的制作上自然会有一定的差异，这会再后面具体提及。

它们反而是整套设计规范中最简单的部分，因为 Ant 等框架对于组件的说明和展示也已经足够完善，都是现成的参考案例。所以，我不打算像其他人分享的内容一样，逐一具体控件和组件进行简单介绍。

Ant 的组件介绍页面

制作组件库和规范的主要难点，在我看来是怎么让它们可以高效的被利用起来，所以这需要一个清晰的内容索引机制。

Ant 等主流组件库，如果有引用过它们组件库直接做设计的同学应该都会发现非常痛苦，不仅仅只是使用了各种编组和自动布局的关系，还包含想要找到自己想要的组件得找很久。

原因就是因为这些组件库不是他们团队真实的项目库，只是 KPI 和任务。所以并不会太多考虑实际应用难上的困难，直接使用英文排序来罗列组件，或者没有任何规则。

比如下图是 Ant 在即时中的组件存放面板（内容应该不完整…），一个大分类下堆满了不同的组件，查找起来非常的低效。

所以针对我们自己的项目，就不能照搬这种模式。要充分利用软件的页面 Page、画板 Artboard、链接 Link 功能来完成组件的索引和存放。

首先再回到前面准备工作中的思维导图，我们通过思维导图记录了一些会出现的组件内容，这里我们要进一步分类。每个二级分类对应软件中的页面 Page，三级分类对应画板 Artboard，四级分类对应画板中存放的组件内容。

整体遵循分类和层级清晰的原则，避免在同一画板中堆砌没有关联性的组件，同时针对一份完整规范的要求，还要在前面添加引导页 Guide Page，样式页 Style Page 即可。

思维导图

完成结构的创建以后，后面的组件内容摆放就根据这个目录来完成，虽然这个思维导图大纲还是第一版，必然是不完善的。但只要前期这个框架形成体系，那么后面添加的内容自然会根据这个结构来补充。

每个画板下方内容怎么放，会在后面的两个小节做解释。这里重点说下第一个引导页面 Guide page，它作为打开规范看到的第一个页面，是要承载一些必要的信息的，比如设计的原则、规范的使用说明、版本的更新之类的解释。

一定要牢记 “必要信息” 这个关键词，不是鼓励你们在首页写几万字的内容进行自我感动，而是在一个画板内用最精简的文字把该放的信息放进去即可。

比如以 Arco 的说明作为参照，大概就是这样：

对应案例

除此以外，首页还有个最重要的功能，就是 “内容目录”。一个有效的索引机制可不仅仅是让我们手动查找，而是会创建一个用来快速跳转的 内容明细目录。

原理就是可以选中画板、图层右键复制它的链接，然后再在对应图层中添加这个链接，就可以让这个图层成为跳转到刚才元素位置的按钮。

理解原理，之后就是创建目录了。我们依旧可以使用自动布局的功能，并根据刚才的结构划分，快速创建出一个可以自由调节并支持跳转的目录出来，比如下面的这样的案例：

目录截图

在这个引导页中，目录是权重更高的模块，因为其它信息一般看一两次就够了，没有特别的事情不会再看它，而目录才是每次进入这个页面的价值所在，所以放的位置要显眼，不要让其它文本信息过度占据页面的内容。

完成目录后，就可以在左侧页面 Page 列表创建对应的组件分组，并进行下一步工作了。

2. 基础控件规范制定要点

基础控件因为太简单，所以不需要用太多的文字内容做解释，单个解释面板下包含的内容只需要有：

标题简介：简单描述这个控件是什么，有什么作用，最多几十个字就够了 样式展示：把这个面板下包含的不同控件类型先统一展示一遍，然后使用简单的文字备注 状态展示：把每个类型控件会出现的状态罗列出来，对需要备注的地方进行说明 一个按钮控件面板的制作，做前讨论：

一个按钮控件面板的制作，做前讨论

变体要调整，不按当前的做法做

一定要牢记，自己的项目和线上的开源框架解释是不同的，内容不要太含糊。就比如上面的按钮，我在项目中使用过几个不同的高度和类型，那我一定会把它们都列出来，而不是简单放一个样式和状态就结束。

因为规格不同，就肯定没办法用一个按钮的变体组件来完成项目的全部按钮设计，所以肯定要生成多个组件和变体。然后在状态展示的部分，就可以直接将变体放进去，并且给出对应的注释即可。

3. 进阶组件规范制定要点

组件比控件复杂，复杂不只是视觉而已，而是更复杂的交互和业务逻辑，既然我们梳理规范了，那自然应该把重要的交互解释放进来。

当然，组件也分一般的基础组件和复杂的业务组件。基础组件如下拉菜单等没有交互说明必要的和控件的做法别无二致，麻烦的是复杂的业务组件记录和说明。

且因为业务组件的特殊性，尽量在一个画板中只展示一个组件，而不是硬凑到一起去。

复杂的业务组件的面板应该包含的内容如下：

标题简介：简单描述组件是什么，以及对应的用途 样式展示：展示同一组件的主要状态和样式 交互说明：对组件的交互创建连线和基本说明

对应案例

这里还延伸出一个问题，就是关于项目交互文档的问题。在我们前面发过的分享中有专门解释，一套完整的交互文档会囊括非常全面的内容和信息，但是正常的项目中，交互文档一般只对应一个版本和迭代，很难去维护一份总的交互文档，来反应项目中最新的交互内容。

所以，在组件库整理中，每次把交互的信息整理进去，是最简单、有效的处理方式，不仅组件本身的各个状态样式能反映出来，交互的信息也不用到别的文档查看，减少了文档维护的压力。

只要了解了这几个核心的要点，那么整理整套组件库就只是时间问题了。

最后还要重复那句话，文档格式是死的，人是活的。我们要根据前期对项目环境的分析，来决定规范应该做到什么程度，该写哪些说明。不要在没有充分考虑的情况下，把我例举的案例直接作为标准在项目中实践，很可能因为内容太多而最终放弃。

所以，尽量先从最精简的模式展开，先完成基本的框架搭建和样式图层置入。确保组件库能满足最基本使用需求后，再考虑逐渐优化丰富相关信息。

六、规范的评审和分享 1. 规范的内部评审会议

完成版本相关的规范以后，就一定要在内部召开一次规范的评审会议，来统一相关成员的认识。如果团队成员对规范还有意见，认为有需要修改的地方，就要进行协商并做进一步优化。

评审要解决以下三个领域的问题：

产品/交互 UI 设计师 开发/测试 ① 产品/交互

第一，让产品经理和交互设计师了解规范中的内容有哪些，对应的结构和目录，以及文件存放的位置，如何打开进行查看、引用。

因为设计规范只要整理了，就绝对不是局限在视觉样式上，必然会包含了框架、交互的内容，在后续的版本迭代中产品和交互都要遵守。

比如提示和弹窗，产品和交互设计师都不能在后面的原型中随心所欲的设计，想放哪放哪，必然是要根据设计规范来处理。如果一定要和原规范内容不同（规范不适用新场景），那这就是一个新的产品需求，是要添加到版本迭代的条目里的。

同时，产品或者交互在完成一些新页面原型的时候，如果页面本身很简单，也是可以直接使用规范中的内容直接拼装高保真原型出来的，可以大大提升他们的原型有效性，而不是还在产出一些风马不相及的简陋原型，降低我们的工作压力……

做的非常差的产品原型

② UI 设计师

第二，就是设计团队内部的对齐了。如果你们团队人少，都参与了规范的搭建这步可以略过，但如果团队人多，部分设计师压根不知道你做了什么，那就绝对不能忽略。

我们需要和他们讲解规范文件所在的位置，引用样式和组件库的方法，以及如何进行维护和迭代的说明。确保设计规范可以在设计团队中正常的流通和应用，而不是完全变成自嗨。

因为设计规范的应用必然会和不同设计师原有工作方式有冲突，所以一方面我们要征求他们意见优化，另一方面就是需要强制推行的（职场问题），需要一开始就有部门的领导或者项目负责人发声表态，并全力支持规范的执行，不然规范的结果嘛……

③ 开发/测试

规范的应用，必然和前端有非常大的关联，需要他们在这个阶段理解规范的内容，以及思考模块化开发的可能性和阻力，并给出优化建议。

如果前端没在评审阶段对我们制作规范的工作表示认可，那基本后面也不会照着规范的内容做开发，这同样需要有外部的不可抗力来强制他们执行规范。

除了开发外，测试工程师也肯定要知道规范的内容，这可以让他们在测试阶段共同发现设计的问题，而不是只让设计师做程序还原度检测。

这三个部分意见都统一了，这套规范才脱离自嗨的范畴，具备真正的生命力。

2. 规范文件的应用思路

最后，就是规范文件本身的注意要点了。

我们前面讲过，规范直接使用设计软件中的文件作为载体，在里面放置样式、组件并添加文字说明，然后进行发布，就可以从别的文件引用它了。

常规的项目设计，会拆分成不同的模块或流程，每个用一个独立的设计文件。所以这种好处就是即保证文件独立性，又支持我们在规范页面优化内容批量修改所有引用页面。

页面引用结构

但这也衍生出一个新的问题，当进入新的版本以后，我们会创建新的项目文件，那么按新设计更新了规范，那么老的引用它的文件不就也受到影响了嘛？

所以，我们不能在整个项目中只引用一个规范文件。而是要在每次新的版本中，创建一个新规范文件出来作为引用对象，并且能保证每个版本的规范文件被保存下来，且让规范的文档编号和项目的编号持平是最好的情况，而不是独立一个规范的版本编号出来。

对应结构

满足完这点，那么规范的变动就可以追溯，也便于长期的维护和更新。我们的整套 B 端设计规范制作的分享也就结束了。

结尾 一套优秀的规范输出并落地，是规范制定者本身能力的直接反应，需要具备扎实的设计基础，丰富的知识点，充分的项目经验，以及职场必备的同理心和执行力。

它是检验我们自身能力的一面镜子，新手可以通过去构建规范来检查自己的缺点，以及找到提升的方向。

虽然还有很多细节没有提，但不打算继续拓展图文内容了，因为前后已经写了两万字了。后续我会在原子核中单独开一个分支，上一套独立的规范制定视频教学。

希望对大家有所帮助……

我们下篇再贱！

欢迎关注作者的微信公众号：「超人的电话亭」

大家好，这里是和你们聊设计的花生~之前为大家推荐过 AI 图像生成工具 Dream Studio，AI 贴图材质生成工具 Ponzu，还有可以一键将黑白图像转换为彩色的网站 Palette.fm。今天再为大家推荐一款使用人工智能生成和谐配色方案的神器「Huemint」。它最大的亮点是可以智能识别前景色、背景色和重...

大家好，这里是和你们聊设计的花生~

之前为大家推荐过 AI 图像生成工具 Dream Studio ，AI 贴图材质生成工具 Ponzu ，还有可以一键将黑白图像转换为彩色的网站 Palette.fm。今天再为大家推荐一款使用人工智能生成和谐配色方案的神器「Huemint」。它最大的亮点是可以智能识别前景色、背景色和重点色，并且可以让用户自己控制配色倾向和色彩对比度，轻松生成层次清晰、符合设计风格的配色方案，能极大提升我们的 配色 效率。

用嘴上色！一键让黑白图像转彩色的AI神器「Palette.fm」 大家好，这里是和你们聊设计的花生~ 之前为大家介绍了很多 AI 图像生成工具，如 Midjourney 和 Dream studio，它们可以通过文本描述生成对应的图像内容，且生成的图像质量很高。

阅读文章 >

Huemint 网站直达： https://huemint.com/brand-intersection/

Huemint 是一个基于机器学习生成配色方案的工具，提供包括多色配色方案、等阶色彩、渐变色等多种功能，并将配色结果应用在 VI、网页、插画、图案背景和引导页等模板上。

Huemint 配色方法应用在品牌设计上的效果

Huemint 的色彩选取功能集中在网站顶部的工具栏，包括修改颜色、选取 AI 生成模型和控制配色倾向，下面为大家逐一介绍它们详细的使用方法。

1. 修改颜色

点击顶部的单个圆形色块，可以在弹出的方框里可以修改这个颜色。点击「Lock」可以锁定颜色，这样之后再次生成新配色的时候被锁住的颜色不会改变。这意味着们可以锁定一个重点色（品牌色），或者某部分（如皮肤）的特殊颜色不变，然后围绕其生成多种不同的配色方案。

Huemint 配色方案在网页设计模板上的应用

2. 选取 AI 生成模型

Huemint 内置了 3 种配色生成模型，Transformer（转换器）和 Diffusion Model（扩散模型）和 Random（随机），前两种为 AI 模型，生成效果和准确度比最后一种要好很多。

生成模型下方有一个「creativity」的调节滑块，可以控制配色方案的对比度。默认为 1.3，数值越大，配色就越活跃，对比也越明显，反之生成的色彩会越趋于相似和平缓。

Huemint 配色方案在图案模板上的应用

3. 控制配色倾向

在 Huemint 里，我们可以根据品牌特色或需求预先设定色彩氛围 ，使最终的配色方案更符合设计风格。网站预设了 6 种色彩倾向，高对比度、明亮轻盈、淡雅、活泼、深色和超强色彩。

Huemint 配色方案在图文排版上的应用

除此预设的配色方案，还有「简单」和「高级」两种调节方式。「简单」预设中，我们可以选择固定的色调，比如红色调、蓝色调、黄色调等。

在「高级」预设中，我们可以控制色彩之间的对比度。合适的色彩对比度在设计中至关重要，它直接影响最终呈现效果的已辨识度。在高级预设中，输入 0-100 之间的数字可以控制前景色与背景色之间的对比度，其中 0=任何对比，1=无对比，100=最大对比（黑/白）。

Huemint 在矢量插画配色上也有非常好的应用效果，它能生成最多 11 种颜色的复杂配色方案，再加上前面介绍的控制配色倾向和配色对比度功能 ，配色小白也能轻松得到可以直接使用的配色方案。

Huemint 网站直达： https://huemint.com/brand-intersection/

再为大家总结一下 Huemint 的优点：

支持生成等阶色、渐变色和 2~11 颜色的配色方案，无需注册,在线免费使用。 使用 AI 模型智能生成和谐的配色，且可以人为控制配色倾向和色彩对比度。 配色效果可视化，实时呈现在 UI、VI、文图排版、插画等模板上，直观明了。 以上就是今天为大家推荐的 AI 配色神器 Huemint，喜欢的小伙伴记得点赞收藏。有关于本文或者设计的相关疑问，欢迎在评论区提出，我会第一时间回复~

推荐阅读：

潘通2023年春夏流行色已发布！这个方法帮你把流行色用起来！ 大家好，这里是和你们聊设计的花生~ 9 月初，国际知名色彩权威机构 Pantone 为时尚界发布了 2023 年春夏色彩趋势报告，确定了十大最引人注目的颜色，以及适合时装设计师推出新作时使用的 5 种经典色彩。

阅读文章 >

免费开放！人人都能轻松上手的AI绘画工具DreamStudio 大家好，我是和你们聊设计的花生~ 之前为大家介绍了初代 AI 图像生成器 Disco Difussion、Dall·E 2、Midjounery，国产 AI 图像生成器 Tiamat，以及 4 款由谷歌、微软等大厂推出的 AI 图像生成器 Imagen、Parti、Make-A-Sce

阅读文章 >