2022 马上就要过去，又到了写年终总结的节点。那些跃升飞快的职场达人，早就掌握了年终总结开挂技能。如果你在年终总结中还有以下问题：不能让给上级留下清晰的印象；不清楚如何有效地组织和呈现一年的工作；不知道怎么能将年终总结写出彩；总结效率很低、输出过程很痛苦…

2022 马上就要过去，又到了写年终总结的节点。那些跃升飞快的职场达人，早就掌握了年终总结开挂技能。如果你在年终总结中还有以下问题：

不能让给上级留下清晰的印象；

不清楚如何有效地组织和呈现一年的工作；

不知道怎么能将年终总结写出彩；

总结效率很低、输出过程很痛苦……

那么这篇文章就是为你量身定做。你将获得一套 年终总结 的万能公式，它能帮助你高效地完成工作梳理，有条理、有重点、有亮点、有计划地完成总结输出。

模板参考：

不知道如何写年终总结？收下这份速成攻略（附实用模板） 想必大家跟我一样最近都在忙着写年终总结，最近的公众号和知乎也各种给我推相关的文章，我挑了几篇读了一下，教了在下很多框架性的问题，虽然也很受用，但基本都是指导思想，具体怎么落地，从哪块动笔好像真没说明白，想来想去总觉着差点意思…

阅读文章 >

一、年终总结的意义 在落笔之前我们首先要明确：为什么要写年终总结？

很多同学容易把总结这事儿当成负担，觉得平时也有周会和月会总结，为什么还要专门花大力气做年终总结呢？其实可以从两点看它的价值。

 

对于我们自身，年终总结可以帮助我们复盘这一年都做了什么事情、有什么亮点与不足、有哪些成长等，为我们今后的进步指明方向。而上级通过你的总结，可以更清晰地了解我们的能力和对于团队的价值，也为日后升职加薪提供了依据。此外，如果你想获取某些方面的资源、获得领导的支持，年终总结也是一个非常不错的契机。

对于团队，年终总结不仅能够系统性地向上级和团队成员展示你在这一年/半年内的工作内容，而且这些内容也能够在一定程度上反映你所在业务/项目的整体情况，比如所在阶段、核心项目、重点方向、未来计划等等。了解这些信息，对于团队后续的资源配置和工作重心都具有十分重要的意义。

二、总结内容的准备 总结输出的内核，是丰满充分的内容，也就是我们一年的工作产出。而一年产生的工作内容体量相对庞大，里面有大型的重点项目，也有工作琐事，有体现你创新能力的，也有体现你的协同组织能力的……如何把大体量又各有特点的内容高效有序地整理出来呢？可以使用「纵横整理法」。

1. 「纵」罗列

纵坐标是你做过所有事情的罗列，我们可以按照时间的维度去梳理做过的事情。大部分设计团队/ 设计师 平时都有写周报/月报的要求/习惯，我们就可以直接在此基础上查缺补漏，可以节省很多时间。梳理完成后，把这些内容按照输出形式进行分类，如：项目、研究、活动、分享等。

2. 「横」梳理

横坐标是各个内容的属性标注，这一步对形成整体结构具有至关重要的作用。这里的属性包含但不限于以下这些：

① 事件维度_基础信息

包括事件本身的重要性、周期、上线/完成效果、突出亮点等。

② 事件维度_参与信息

包括你的参与程度、个人价值/贡献、运用了哪些设计方法等。

③ 个人维度_能力提升

看看哪些工作内容，让你的以下能力有明显的提升/突出的表现，包括：专业能力、沟通能力、创新能力、统筹组织能力、管理能力、影响力、人际关系（与合作部门形成融洽/高效的合作机制，有效避免/化解矛盾等）等。

3. 「炼」提炼与归纳

通过以上梳理，一年工作内容就以非常直观的方式展现在我们眼前了。因为年终总结需要在较短的时间内做到有效传达，所以我们必须要把精力放在「有价值」的内容上，这时候就需要我们提炼出高价值度的内容，过滤/弱化掉价值度没那么高的内容。上一步梳理工作内容属性，能帮助我们轻易地评估出哪些是高价值的（如重度参与的/设计价值体现度高的/能集中体现个人某些能力的项目 1、研究 1、活动 1、分享 1）以及价值度低的（如参与程度低的/各方面都表现平平的项目 3、活动 2）内容。

其次，结合自己的角色对专业产出进行分类，确定需要总结汇报的项目都被分类进相应的版块；最后，对版块进行排序，可以以项目为主线体现多个维度的价值，也可以以业务目标/团队目标为主线，用不同的项目来体现。

为了方便理解，我们以 2021 商业服务设计（半年）总结案例为例展开。首先，整体内容有一个大的分类，包括：服务生态搭建、设计研究、工具产研等。其次，每一个分类下面都罗列出了详细的工作项，同时又用色块重点标注出了价值度高也就是会重点展开的内容，这样既能展现出充足的工作量，又做到了有主次有重点。

三、总结的思路与框架 最后的总结输出，我们需要一个整体框架把这些内容进行组织和包装。对应开头讲的总结的意义，我们可以分成三个部分：取得的成绩以及经验、总结的教训及不足、未来的计划。

1. 「成绩与经验」

这部分内容延续上面提炼的结果，对每个项目进行细节阐述，如项目背景、分析的过程、设计的目标、解决的问题、设计的亮点、项目最终的价值等等；其次，项目结束后要主动收集相应的数据信息，以最具信度的形式，具象化设计的价值。另外，善于总结设计方法，对于重点项目能形成一套完整的设计解决方法论，可以复用给更多的设计师，为你的总结增加亮点。

2. 「不足与教训」

百科对于“工作总结”的定义：把一个时间段的工作进行一次全面系统的总检查、总评价、总分析、总研究，并分析成绩的不足，从而得出引以为戒的经验。也就是说，剖析不足也是总结的关键部分。

这部分内容可以从两个方面展开：

① 未达成的工作目标

对标我们的 KPI 或 OKR，看看哪些工作目标没有完成。如果有未完成的内容，就需要说清楚现在进行到了什么程度，没有完成的原因是什么。

② 未实现的个人目标

设计之路是一条发展变化着的职业道路，它要求我们不断完善自己的个人能力模型，因此很多设计师都在会年初制定个人发展目标，年底审视自己和目标的差距。如果目标实现情况不理想，则需要分析差距在哪儿，具体原因是什么。

最后，针对总结出的两方面不足，分析出改进的办法，并在下一步计划中明确具体的实施方案。

3. 「未来计划」

未来计划在整个总结中起到承上启下的关键作用，主要包括三个方面：

① 前提：贴合公司发展目标和方向。

公司的发展是个人发展的前提和保障，拥抱变化，紧跟大方向，个人的计划才有实现的可能。

② 关键：要结合总结的成绩和不足，针对性地制定未来的计划。

做得好的不骄傲，吸取经验做大做强。把重点放在暴露出短板上，正视它，补齐它。

③ 细节：需列举这些目标下具体的操作方法和需要得到的支持。

计划不能只写方向，要写具体的执行步骤和排期，最好有可量化的标准。比如你想在新的一年提升个人的团队影响力，那么计划可以这么写：未来半年完成至少 2 场大/中型分享+至少 2 篇专业发文+组织 1 场团队活动。

四、小结 想要有条理、有重点、有亮点、有计划地完成总结输出，只需要两步：

第一步：通过「纵横总结法」高效有序地整理一年所做工作，并进行提炼和归纳。

第二步：按照成绩（按照项目分类）+不足（对标工作和个人目标）+计划（有前提、有关键、有细节）的结构呈现总结内容。

番外：所有的方法和思路都只是帮你规避基础的坑，让你的总结达到平均分，如果你想有一个更突出更出色的成果，那除此之外，你需要在每一步上以及内容上，整理出更让人印象深刻的设计成果或者思维方式，这个就来自于这一年你是否真的设计有果了。

最后，祝你顺利完成年终总结，对未来更有把握和信心。

更多年终总结的方法：

设计师如何写好年终总结？我总结了4个维度！ 2021年已经快过去了，作为设计师来说总结并分析问题才能获取经验，本文将会和大家一起探讨学习下作为设计师如何写好总结。

阅读文章 >

因为我这样写设计总结，所以又被总监表扬了！！ 很多同学都苦恼，自己虽然专业方面还可以，但经常写不好总结，不善于表达，从而错失了很多机会。

阅读文章 >

欢迎关注「58UXD」的微信公众号：

经常听朋友们抱怨“上班如上坟”，我自己也是如此，但随着工龄的增长，我的“上坟感”无论从频率还是时长上都显著减少了，究其原因更多是心态和沟通能力上的成长。今年看了两本讲述职场的书，分别是李诞的《脱口秀工作手册》和杨天真的《把自己当回事》，今天想结合书中的部分观点，分享几个让工作变“简单”的小技巧，希望能帮大家减轻上...

经常听朋友们抱怨“上班如上坟”，我自己也是如此，但随着工龄的增长，我的“上坟感”无论从频率还是时长上都显著减少了，究其原因更多是心态和沟通能力上的成长。今年看了两本讲述职场的书，分别是李诞的《脱口秀工作手册》和杨天真的《把自己当回事》，今天想结合书中的部分观点，分享几个让工作变“简单”的小技巧，希望能帮大家减轻上班的“痛感”。

降低焦虑干货+1：

设计师职场焦虑怎么办？我总结了这4个方面！ 前言： 越来越频繁的听到同龄人对工作前途的焦虑，30+的年龄在互联网公司就算你是 leader 或者专家级的岗位，失业后再次找工作的过程也是非常坎坷。

阅读文章 >

一、可以有情绪吗 常被教育“有情绪”=“不专业”，但我想，我们中的大部分人都无法将情绪与工作完全剥离。情绪无非来自一些工作阻力、压力或沟通时的冲突，既然不可避免有情绪，那不妨掌握一些面对情绪的方法：

1. 处理情绪

一旦发现自己有情绪了，不妨先暂停。如果是源于沟通产生的冲突，可以先记下双方分歧点，各自再回去找找资料，想想解决办法，约个下次同步进度的时间。如果是工作压力，就买点好吃的，睡个好觉，和朋友抱怨抱怨，看看工作之外的事物。先保护好自己的情绪，才能更好地投入工作。

2. 表达情绪

暂停重启后无非两种情况，若是一时冲动，就继续投入工作，如果仍然觉得这件事不对，那就好好表达。可以和领导或合作方说，你认为这件事情哪里不应该是这样的，这样做让你不适/委屈/难过，怎么做的话你觉得会更好，如果你不知道该怎么处理，也可以直接问：“我不知道该怎么做好，但我想解决这个问题，你有什么建议吗？”。如果你实在是情绪到达极点了，虽然不建议，但偶尔通过生气、哭闹释放出来或许也能解决问题。李诞在手册中说，在新人时期，生气、哭、都没有问题，你表达了情绪，其实也是在向领导和合作方表示你对工作的认真，对问题的重视。

3. 不能一直拿情绪当武器

虽说要表达情绪，但在表达的时候要切忌拿情绪当武器。如果你说“要这样我就不干了”很可能可以解决当下的问题，但这种解决方式一需要依靠对方的共情力，二对你沟通能力的提升没有任何帮助。别人可以因为认可你的态度或同情你的遭遇，妥协一次，但不可能次次依靠态度解决问题。况且，当你把情绪当武器时，也会伤害自己，如果你只能通过生气推进工作，那你的工作最后会只剩下生气。更好的方式是厘清原因，如果是表达问题，通过理性客观的说服替代情绪武器，如果是环境问题，可以对流程提出优化建议，靠流程来解决。

4. 情绪不是被操控的

杨天真在书说到：“如果有个人过来对你说：‘你控制不了自己的情绪，就说明你还不够成熟。’那么我会认为这个人根本就不懂得沟通”。所言极是，懂得沟通的人都明白只有情绪稳定才能更好地推进工作。情绪是被保护的不是被操控的。我们说不要拿情绪当武器，其实也是在保护对方的情绪。如果一份工作需要你不断地压抑自己或用情绪做武器，而对方完全不在乎你的情绪，或指责你不会控制情绪而不去解决情绪背后的问题，那说明你处在非常恶劣的职场环境中，接下来该做什么我就不多说了。

二、主动沟通，保持客观 上文我无数次提到沟通，但具体要怎么沟通呢？我发现即使是工作了很久的朋友，也经常陷入：遇到不公 → 难受/生气 → 找朋友吐槽 → 被建议去沟通 → 不敢沟通 → 不了了之 → 遇到不公 → 难受/生气...这样的死循环中。为什么不敢沟通，无非就是怕关系闹僵、怕暴露问题、怕意见冲突。然而我想说的是，意见冲突是工作的必然，关系问题可以通过 沟通技巧 解决，而暴露问题是解决问题的最好方式之一。

1. 意见冲突

职场分工一定有它的合理性，既然我们做这份工作，拿这份钱，就是要说在这个岗位上该说的话的。岗位分工就是这样，需要多方的声音来对冲，方案都是在磨合的过程中产生的。而且也需要每个人为了这个岗位需要坚持的“执念”发声，才能达到最好的解法。只要表达清晰客观，这种冲突就是好的。至于在意见冲突的情况下如何表达，不妨想清楚这几个问题：设计依据是什么？设计方案对用户有什么好处，对产品有什么好处？对方的工作诉求是什么？他的权利范围和边界在哪里？他是否有决策权？他所提出的要求是在他的工作范围之内还是之外？如果我不能满足他目前的要求，我有什么备选方案可以提供？

2. 暴露问题

很少有项目能一帆风顺地进行，遇到磕磕绊绊的时候，年轻的朋友总是习惯独自处理好，假装无事发生，做好了的情况下事倍功半，做不好的情况下就成了背锅侠。更好的处理方式其实是及时汇报：当前的进度到哪了？遇到的困难是什么？接下去打算怎么解决？既能让领导知道项目的困难程度，也能及时纠正解决思路，保证项目如期完成。如果是上线后才发现的问题，汇报方式也是分三步：造成这个错误的原因是什么？我的解决方案是什么？我用什么方法让这个错误以后不再发生？诚然，我们可能会面对能力的质疑或问题的指责，但及时沟通暴露问题既是分摊责任也是更快解决问题的方式。只要你提前找好解决方案，这些问题都会是你项目经验上的闪光点。

3. 保持客观

如果是遇到“人”的原因受了委屈不敢沟通，一个最简单的办法就是提事不提人。比如与你合作项目的 设计师 偷懒又不听劝导致你必须付出额外的工作，你可以这样反馈：这个项目设计人手有点不足，我已经尽力在加班赶进度了，但我担心这样下去可能会影响上线计划，是否可以多派个人手。这样既表明了自己最近持续加班的情况，暴露了上线风险，申请了人力，又没有指责同事。同理可以适用于其他职场关系的场景，核心就是客观，不说负面话，提事不提人。一些职场成功学总是会建议大家在职场中保持真诚，但不得不说真诚是需要超高的情商加持的，如果无法保证自己的真诚不被误解、不误伤他人，可以试试保持客观。

三、接受有意义的失败 当然，沟通不能解决所有的问题，总有沟通失败的时候，这时我会建议你放平心态，顺其自然。

1. 理论是持续发展的

虽说设计有一些既成的理论，诸如要保持一致性，标签应该是那样，面板应该是这样。但事实上规范是人定的，理论是总结出来的，拉长时间线看，理论是会发展的，规范是可以被讨论的。举个例子，以前我接收到的理论是 action sheet 和 activity view 是两个不一样的组件，面板不能叠加面板，而随着发展，action sheet 和 activity view 的边界开始变得模糊，苹果系统也开始出现了面板叠加面板的交互。

坚持已有的规范或理论，或许能产出设计上定义的正确方案，但如果“设计正确”并不被当前阶段认可，适当的接受“创新”也未尝不可，在碰撞过程中我们或许就能触碰到原则的边界，理解规则定义的原因，探索现存规则的局限性，这些都能帮助你对专业有更深的理解。

2. 重要的是经验而不是这个需求

很多朋友会担心，这个需求做不好，会影响以后整理作品集，也无法展示自己的能力。其实大可不必这么焦虑，按每两周做一个需求来算，我们一年会做 26 个需求，其中只有 2-3 个需求能被我们放入作品集，加上我们和面试官之间存在着信息差，完全可以摘取出最好的 2-3 个需求，利用信息差整理出一份出色的作品集。我们做设计的目的不单单是把当前这个需求做好，更重要的是通过做这个需求磨练自己，成为一个优秀的设计师。适当地接受有意义的失败，当你明白原来这样做会造成那样的结果，这样是合适的而那样是行不通的，你就会成为一个什么需求都能兜得住的设计师，就能把每个需求都做好，甚至可以把做得有瑕疵的需求以完美的方式表达出来，也能回答上所有的质疑。

3. 这只是一份工作

很多人会瞎操心业务或公司的死活，觉得自己这个按钮没做好这个需求明天没上线这个业务就被我搞砸了，大可不必！这只是一份工作，关注自己，你要成就的是你这个人，不要把自己和公司的命运绑在一起，公司和业务的好坏应该由拿着这份工资的人担这份责任。甚至这个需求都不属于你个人，不要过多地干涉，你要做的是通过完成公司的项目实现自我成长。你是且只是自己事业的第一负责人，不要把自我成长的责任强加在公司上，更不要瞎揽壮大公司的责任。

欢迎关注作者微信公众号：「白话说交互」

漫长的时间线里插画随着时代、文明、科技的变化，以不同的创作形式传递创作者的思想。如今插画独特的属性魅力，造就了其在设计中的新趋势。 鲁迅先生曾经说过：“在书本里边的插图，装饰了书籍，增加了读者兴趣，而这种无形的力量是文字所不及的。

漫长的时间线里插画随着时代、文明、科技的变化，以不同的创作形式传递创作者的思想。如今插画独特的属性魅力，造就了其在设计中的新趋势。 鲁迅先生曾经说过：“在书本里边的插图，装饰了书籍，增加了读者兴趣，而这种无形的力量是文字所不及的。”

更多 设计史 科普：

用一篇文章，帮你掌握美国平面设计史 在 20 世纪 30 年代时候“图形传达系统“传到美国，对美国地区的平面设计产生很大促进，我们今天的话题就需要将镜头移到美国。

阅读文章 >

一、插画的源起发展 将其划分为五个时间节点，分别为源起，开端，探索，发展，变化。 在漫长的时间线里插画随着时代、文明、科技的变化，以不同的创作形式传递创作者的思想。

插画的源起，要从公元前 15000 年阿尔塔米拉洞穴彩色野牛头绘画说起，其次重要的是埃及的《死者之书》，这是公元前 332 年发现的纸钞草绘画作品，为什么说很重要呢？因为它是最早以插画形式完整展示的叙事性内容。

死者之书也称为“通往光明之书”。段落是依照死者生平而撰写的，对其中画面感兴趣的也可以看看最近漫威新上映的英雄剧集《月光骑士》，里面后三集的一些情节和死亡之书有契合之处～，比如男主两个人格（马克和史蒂文）的心脏再和天平秤量的时候，因心脏都不完整无法在天平上保持平衡。这一设定死者之书中也有绘制，这源于古埃及神话：当一个人去世后，为了证明自己无罪，用玛特的羽毛和死者的心脏称量，如果心脏比羽毛轻即为无罪。反之则有罪。（Ma’at 玛特）「古埃及真理和正义的女神，其象征物为鸵鸟羽毛。」

1. 插画的开端

公元 5-15 世纪为插画的开端，这里主要着眼于两处，一是中国隋唐五代时期出现的为印制而雕刻成版的版画，这也是世界上发现最早的版画记录，二是欧洲，此时欧洲插画主要应用于宗教领域。呈现形式为刺绣和手抄本.

2. 插画的探索

15-17 世纪，插画进入了探索阶段，下图第一幅作品—火之圣母是欧洲记载最早的版画。1440年从欧洲的角度而言标志着插画艺术的真正开始，缘由为德国人古腾堡发明和建造第一台活字印刷机，由此插图版画在书籍中广泛运用。

16 世纪文艺复兴时期，德国画家丢勒，使得欧洲木刻达到了顶峰。

17 世纪巴洛克时期的鲁本斯对于木刻进行再次探索。

3. 插画的发展

18-19 世纪属于插画的发展阶段，这里首先提及英国 18 世纪的三位画家，分别是：威廉霍加斯、托马斯比维克、詹姆斯吉尔雷。

第一幅《堕落过程》为霍加斯的系列作品，一共有 8 副，记录了伦敦社会中一位年轻绅士的腐败以及最终毁灭，讽刺当时英国贵族奢侈糜烂的生活。整个系列也被称之为叙事插画最伟大的成就之一。

第二幅为《四足动物史》，作者比维克一生都在为伊索寓言绘制插画。

最后一幅作品描绘的是英国首相威廉皮特和拿破仑瓜分全球，作者吉尔雷，他的蚀刻版画因其尖刻的政治讽刺而闻名。

比如说现在的微博大 V 乌合麒麟他的绘画作品也多为社论和政治讽刺，最为大家所了解的是孟晚舟女士回国这张作品，在推特和 ins 上能看到很多相关社论插图，以下几张。

发展阶段，纵观日本和中国仍然偏爱木版印刷，并且保持极简主义。葛饰北斋，是这一时期中最有成就的。简约清晰的线条以及全彩制图使他打破了木版绘画的局限性。代表作为《富岳三十六景》。

此外在发展阶段必须要提及三次技术革新。

第一次是 18 世纪平版印刷机的发明，在整个印刷过程中，可以在印刷运行中单独添加色彩以获得全彩效果。 第二次技术革新是摄影技术的发明，1826 年尼埃普斯拍摄了现存最早的照片，但实际上 1839 年由其合伙人达盖尔才真正发明了摄影技术，这对古典艺术，写实类肖像画产生了一定的冲击，但由于最初的摄影技术只能拍摄黑白照片，所以对于彩色插图而言并有有形成太多的冲击。 第三次革新为 19 世纪中叶，报纸在整个欧洲兴起。插画的叙事性为新闻增加戏剧性。由此出第一个标志性的漫画人物 Aly Sloper「盟友斯洛珀」诞生，围绕盟友斯洛珀塑造了很多新闻事件插图。 4. 插画的变化

20 世纪插画到了不断变化的阶段。

从两个角度去看，一是变化的主要原因，二是不同风格的原因。

接下来重点看一下有哪些插画风格在变化阶段应运而生。

① 复古怀旧浪漫

主要代表人物有 拉克姆 和 杜拉克 以及浪漫的乡村主义 波特（细致的水彩插图）波特笔下的兔子后期改编为电影，就是大家所熟知的《彼得兔》

② 漫画的革新

改变漫画形式为「乔治赫里曼」。在他的创作中，线条松散。构图上运用时间和空间的概念，表现出超现实的视觉幽默。上图《疯狂的凯特》通过洞的不同方向，以及夜晚白天来表达空间和时间的变化。

到了六七十年代，比利时插画家 愛弗米倫，他的风格更为时髦犀利。

③ 战争宣传海报

一战期间，插画被应用到战争中，比如招募男性士兵、保护妇女儿童。

二战期间，插画主题多为压迫犹太人，以及美化德国的民族主义。

④ 装饰现代主义

要提及四位著名的插画师。

首先第一位新艺术运动的代表人物 穆夏，他抛弃传统装饰风格，使用大量自然元素作为装饰，优美的曲线来描绘女性。

从小提琴手到顶尖插画师：穆夏大神炼成记 上一回我们聊了 “维也纳分离派”这群叛逆青年的故事，其中著名的象征主义画家古斯塔夫跟建筑师霍夫曼两人的设计风格是此流派的风格基因，主要特点是简约的几何化构图以及富有象征意味的装饰图形。

阅读文章 >

第二位 比亚兹莱 他的画风受日本浮世绘等风格的影响，具有强烈的个人风格，尤其是对线条的出色运用和黑白画的创造性成就。

第三位 卡桑德尔，第二次工业革命以后，人民对现代性发展有了广泛的接受，卡桑德尔在他的作品中，打破了几何边界的界限，并且有较强的设计感。

第四位是被誉为“发明了现代杂志设计的整个构想”的 克里斯蒂安 ，他为当时的《星期六晚邮报》制作了三百多个封面。

1967 年嬉皮文化到来。由时代音乐及地下生活方式的影响而创作的色彩鲜艳的的迷幻图像（看起来像是一场对装饰艺术风格的革命），但是并没有转化为主流，到七十年代初，就几乎销声匿迹。

⑤ 极简主义美学

代表风格为萨普拉卡特风格，这种风格的先驱 霍尔温，作品中较少的几何形体、醒目的字母、形状最大简化等，对极简主义美学和海报化做到了很好的探索。

⑥ 电影和动画

真人电影和动画电影诞生于维多利亚时代晚期。

到了 20 年代，它们已经主宰了娱乐界，此时摄影技术还没有很完善，所以制作海报的几乎都是插画。代表作品《大都会》《爵士歌手》。展示了插画在电影海报中的妙用。

20 年代，第一位动画明星「猫菲利克斯」诞生，实际上后来很多的 IP 动画形象都有参考其模版绘制，包括米老鼠、猫和老鼠。

1937 年：迪士尼，发行了第一部彩色长篇动画《白雪公主》此时除了动画师，还有数百名的概念艺术家、角色设计师。

1938 年最初创造的超人形象登场——动画也向全新的流行艺术发展。

⑦ 儿童绘本

1928 年儿童插画家 万达加格 出版的《数百万只猫》被公认为是第一本（绘本）。打破了原有图书文字排版和插图之间的关系，取而代之的是更多的由有趣的插图，文字只是为了支撑图像。但此时儿童绘本并没有被更多用户接受和理解。

一直到 1963 年 森达克 创作的《野生动物在哪里》强化了儿童绘本在用户心中的心智，这也是儿童绘本的里程碑。

⑧ 超现实主义幽默

第二次世界大战以后，插画师 阿兹巴舍夫，创作的图形风格惊人，在机器上显示出明显的人为属性，有超现实的黑色幽默。

⑨ 奇幻画派

六七十年代，摄影逐渐取代插画成为媒体视觉表达的主要方式，比如杂志的封面多为摄影拍摄，但由于摄影不能拍摄不存在的东西，所以幻想艺术蓬勃发展（科幻小说、漫画、儿童绘本）奇幻画派的先驱 弗雷泽塔 创作了很多肌肉发达的英雄，已及奇幻元素。当代游戏概念艺术都受到他的 影响。

⑩ 数字艺术

80 年代个人电脑革命兴起——数字技术发展迅速。 设备也不断更新比如：手绘版、iPad。

综上所述可以发现，插画风格是多样的，而背后的原因，除了插画师本人的经历、喜好、价值观等主观原因，更多的是受时代背景、流行文化、社会环境、历史事件、以及绘画技法、等客观因素的影响，才慢慢演化为当下自由、多元、包容的插画创作氛围。

二、商业插画被广泛应用的原因 从六个方面来看，分别是商业插画的概念、应用场景、应用背景、插画本身的优势、市场和用户需求。

艺术创作没有目的性，但是商业插画的目的性非常强。商业业插画一般承接了用户和市场的需求，深受当下的流行文化影响。

插画的应用场景有很多，归类来看分为以下六种：

从四个角度看插画的应用背景：

商业化的发展及视觉文化传播方式的广泛应用 人的思维模式从语言文字为主的理性主义形式转变成以图像为主的感性主义形式 文化形态的传播方式从语言文字的生产、传播、消费转变成视觉图像的创作、传播和消费 信息时代的不断发展，电脑等电子设备已经成为时代发展的标志

插画本身的优势有几点：

从市场需求的角度来看，市场需要通过插画广告刺激消费，提高经济效益，其次强化宣传提升品牌传达：

从用户需求的角度来看，互联网信息时代，用户在接收复杂繁多的广告信息的同时，需要更好的视觉体验来提高审美，其次用户也希望从中产生一定的情感共鸣，获取到情绪价值。

三、插画在 UI 设计中的优势和应用场景 优势有以下6点：

1. 信息可读性与高记忆点

从用户角度来当前界面，可以简洁直观的通过插画 get 到花不同的钱可以享受到的不同服务。

2. 叙事性激发用户交互

美国的 Mailchimp 网页端用插画的方式，引导用户认识产品并如何使用产品，更好激发了用户进行交互操作。

3. 强化品牌识别

通过 IP 的 插画设计 ，不断夯实品牌的用户心智。

4. 强化界面的美型提，升用户审美

5. 插画的定制感与独特感增强用户的分享欲望

6. 建立信任

插画的表达方式更能与用户拉近距离建立信任。

插画在 UI 设计中的应用场景，分别有以下这些：

1. 新手引导

比如转转知乎在新手引导时都选择插画的表现形式，提升用户对产品的好感度，已及降低对产品的学习成本。

2. 新功能提示

降低用户学习成本，拉近与用户之间的距离～

3. 品牌宣传

Goole 的 web 端每逢节日便会有围绕 goole logo 来进行节日主题插画的创作，很好强化品牌的用户心智。

4. 登录页

众多产品都在登录页使用插画的表达形式，更容易于用户产生情感连接达到品牌触达。

5. 插画组件

Ant Design、自如都构建了自己的插画组件，有助于统一的视觉风格传递。

6. IP 设计

这可以很好的赋予品牌生命力，提升品牌的温度，更好的触达用户。

7. 奖励机制和榜单

在一些奖励交互动作时，通过插画形式传达正向反馈，提升用户情绪价值。

8. H5 的主题分享

最近几年产品都会有年度报告，很多都以插画的形式表现，插画的定制感与独特感增强用户的分享欲望，用户通过分享建立自己的社交货币，满足用户的社交需要。

从插画的发展、商业插画、UI 设计中插画的应用三条脉络做了简单梳理。希望对您了解插画应用插画有一定的帮助。

感谢浏览～Thanks

与《小王子》作者合作出书：顶尖黄书插画师奥布里·比尔兹利 上一回我们讲述了法国新艺术风格的代表设计师穆夏，他以绘画见长，成长阶段遇到不少贵人，最后练成自己独步天下的画风，至今仍然有不少品牌会以致敬方式复兴这种风格。

阅读文章 >

漫长的时间线里插画随着时代、文明、科技的变化，以不同的创作形式传递创作者的思想。如今插画独特的属性魅力，造就了其在设计中的新趋势。 鲁迅先生曾经说过：“在书本里边的插图，装饰了书籍，增加了读者兴趣，而这种无形的力量是文字所不及的。

漫长的时间线里插画随着时代、文明、科技的变化，以不同的创作形式传递创作者的思想。如今插画独特的属性魅力，造就了其在设计中的新趋势。 鲁迅先生曾经说过：“在书本里边的插图，装饰了书籍，增加了读者兴趣，而这种无形的力量是文字所不及的。”

更多 设计史 科普：

用一篇文章，帮你掌握美国平面设计史 在 20 世纪 30 年代时候“图形传达系统“传到美国，对美国地区的平面设计产生很大促进，我们今天的话题就需要将镜头移到美国。

阅读文章 >

一、插画的源起发展 将其划分为五个时间节点，分别为源起，开端，探索，发展，变化。 在漫长的时间线里插画随着时代、文明、科技的变化，以不同的创作形式传递创作者的思想。

插画的源起，要从公元前 15000 年阿尔塔米拉洞穴彩色野牛头绘画说起，其次重要的是埃及的《死者之书》，这是公元前 332 年发现的纸钞草绘画作品，为什么说很重要呢？因为它是最早以插画形式完整展示的叙事性内容。

死者之书也称为“通往光明之书”。段落是依照死者生平而撰写的，对其中画面感兴趣的也可以看看最近漫威新上映的英雄剧集《月光骑士》，里面后三集的一些情节和死亡之书有契合之处～，比如男主两个人格（马克和史蒂文）的心脏再和天平秤量的时候，因心脏都不完整无法在天平上保持平衡。这一设定死者之书中也有绘制，这源于古埃及神话：当一个人去世后，为了证明自己无罪，用玛特的羽毛和死者的心脏称量，如果心脏比羽毛轻即为无罪。反之则有罪。（Ma’at 玛特）「古埃及真理和正义的女神，其象征物为鸵鸟羽毛。」

1. 插画的开端

公元 5-15 世纪为插画的开端，这里主要着眼于两处，一是中国隋唐五代时期出现的为印制而雕刻成版的版画，这也是世界上发现最早的版画记录，二是欧洲，此时欧洲插画主要应用于宗教领域。呈现形式为刺绣和手抄本.

2. 插画的探索

15-17 世纪，插画进入了探索阶段，下图第一幅作品—火之圣母是欧洲记载最早的版画。1440年从欧洲的角度而言标志着插画艺术的真正开始，缘由为德国人古腾堡发明和建造第一台活字印刷机，由此插图版画在书籍中广泛运用。

16 世纪文艺复兴时期，德国画家丢勒，使得欧洲木刻达到了顶峰。

17 世纪巴洛克时期的鲁本斯对于木刻进行再次探索。

3. 插画的发展

18-19 世纪属于插画的发展阶段，这里首先提及英国 18 世纪的三位画家，分别是：威廉霍加斯、托马斯比维克、詹姆斯吉尔雷。

第一幅《堕落过程》为霍加斯的系列作品，一共有 8 副，记录了伦敦社会中一位年轻绅士的腐败以及最终毁灭，讽刺当时英国贵族奢侈糜烂的生活。整个系列也被称之为叙事插画最伟大的成就之一。

第二幅为《四足动物史》，作者比维克一生都在为伊索寓言绘制插画。

最后一幅作品描绘的是英国首相威廉皮特和拿破仑瓜分全球，作者吉尔雷，他的蚀刻版画因其尖刻的政治讽刺而闻名。

比如说现在的微博大 V 乌合麒麟他的绘画作品也多为社论和政治讽刺，最为大家所了解的是孟晚舟女士回国这张作品，在推特和 ins 上能看到很多相关社论插图，以下几张。

发展阶段，纵观日本和中国仍然偏爱木版印刷，并且保持极简主义。葛饰北斋，是这一时期中最有成就的。简约清晰的线条以及全彩制图使他打破了木版绘画的局限性。代表作为《富岳三十六景》。

此外在发展阶段必须要提及三次技术革新。

第一次是 18 世纪平版印刷机的发明，在整个印刷过程中，可以在印刷运行中单独添加色彩以获得全彩效果。 第二次技术革新是摄影技术的发明，1826 年尼埃普斯拍摄了现存最早的照片，但实际上 1839 年由其合伙人达盖尔才真正发明了摄影技术，这对古典艺术，写实类肖像画产生了一定的冲击，但由于最初的摄影技术只能拍摄黑白照片，所以对于彩色插图而言并有有形成太多的冲击。 第三次革新为 19 世纪中叶，报纸在整个欧洲兴起。插画的叙事性为新闻增加戏剧性。由此出第一个标志性的漫画人物 Aly Sloper「盟友斯洛珀」诞生，围绕盟友斯洛珀塑造了很多新闻事件插图。 4. 插画的变化

20 世纪插画到了不断变化的阶段。

从两个角度去看，一是变化的主要原因，二是不同风格的原因。

接下来重点看一下有哪些插画风格在变化阶段应运而生。

① 复古怀旧浪漫

主要代表人物有 拉克姆 和 杜拉克 以及浪漫的乡村主义 波特（细致的水彩插图）波特笔下的兔子后期改编为电影，就是大家所熟知的《彼得兔》

② 漫画的革新

改变漫画形式为「乔治赫里曼」。在他的创作中，线条松散。构图上运用时间和空间的概念，表现出超现实的视觉幽默。上图《疯狂的凯特》通过洞的不同方向，以及夜晚白天来表达空间和时间的变化。

到了六七十年代，比利时插画家 愛弗米倫，他的风格更为时髦犀利。

③ 战争宣传海报

一战期间，插画被应用到战争中，比如招募男性士兵、保护妇女儿童。

二战期间，插画主题多为压迫犹太人，以及美化德国的民族主义。

④ 装饰现代主义

要提及四位著名的插画师。

首先第一位新艺术运动的代表人物 穆夏，他抛弃传统装饰风格，使用大量自然元素作为装饰，优美的曲线来描绘女性。

从小提琴手到顶尖插画师：穆夏大神炼成记 上一回我们聊了 “维也纳分离派”这群叛逆青年的故事，其中著名的象征主义画家古斯塔夫跟建筑师霍夫曼两人的设计风格是此流派的风格基因，主要特点是简约的几何化构图以及富有象征意味的装饰图形。

阅读文章 >

第二位 比亚兹莱 他的画风受日本浮世绘等风格的影响，具有强烈的个人风格，尤其是对线条的出色运用和黑白画的创造性成就。

第三位 卡桑德尔，第二次工业革命以后，人民对现代性发展有了广泛的接受，卡桑德尔在他的作品中，打破了几何边界的界限，并且有较强的设计感。

第四位是被誉为“发明了现代杂志设计的整个构想”的 克里斯蒂安 ，他为当时的《星期六晚邮报》制作了三百多个封面。

1967 年嬉皮文化到来。由时代音乐及地下生活方式的影响而创作的色彩鲜艳的的迷幻图像（看起来像是一场对装饰艺术风格的革命），但是并没有转化为主流，到七十年代初，就几乎销声匿迹。

⑤ 极简主义美学

代表风格为萨普拉卡特风格，这种风格的先驱 霍尔温，作品中较少的几何形体、醒目的字母、形状最大简化等，对极简主义美学和海报化做到了很好的探索。

⑥ 电影和动画

真人电影和动画电影诞生于维多利亚时代晚期。

到了 20 年代，它们已经主宰了娱乐界，此时摄影技术还没有很完善，所以制作海报的几乎都是插画。代表作品《大都会》《爵士歌手》。展示了插画在电影海报中的妙用。

20 年代，第一位动画明星「猫菲利克斯」诞生，实际上后来很多的 IP 动画形象都有参考其模版绘制，包括米老鼠、猫和老鼠。

1937 年：迪士尼，发行了第一部彩色长篇动画《白雪公主》此时除了动画师，还有数百名的概念艺术家、角色设计师。

1938 年最初创造的超人形象登场——动画也向全新的流行艺术发展。

⑦ 儿童绘本

1928 年儿童插画家 万达加格 出版的《数百万只猫》被公认为是第一本（绘本）。打破了原有图书文字排版和插图之间的关系，取而代之的是更多的由有趣的插图，文字只是为了支撑图像。但此时儿童绘本并没有被更多用户接受和理解。

一直到 1963 年 森达克 创作的《野生动物在哪里》强化了儿童绘本在用户心中的心智，这也是儿童绘本的里程碑。

⑧ 超现实主义幽默

第二次世界大战以后，插画师 阿兹巴舍夫，创作的图形风格惊人，在机器上显示出明显的人为属性，有超现实的黑色幽默。

⑨ 奇幻画派

六七十年代，摄影逐渐取代插画成为媒体视觉表达的主要方式，比如杂志的封面多为摄影拍摄，但由于摄影不能拍摄不存在的东西，所以幻想艺术蓬勃发展（科幻小说、漫画、儿童绘本）奇幻画派的先驱 弗雷泽塔 创作了很多肌肉发达的英雄，已及奇幻元素。当代游戏概念艺术都受到他的 影响。

⑩ 数字艺术

80 年代个人电脑革命兴起——数字技术发展迅速。 设备也不断更新比如：手绘版、iPad。

综上所述可以发现，插画风格是多样的，而背后的原因，除了插画师本人的经历、喜好、价值观等主观原因，更多的是受时代背景、流行文化、社会环境、历史事件、以及绘画技法、等客观因素的影响，才慢慢演化为当下自由、多元、包容的插画创作氛围。

二、商业插画被广泛应用的原因 从六个方面来看，分别是商业插画的概念、应用场景、应用背景、插画本身的优势、市场和用户需求。

艺术创作没有目的性，但是商业插画的目的性非常强。商业业插画一般承接了用户和市场的需求，深受当下的流行文化影响。

插画的应用场景有很多，归类来看分为以下六种：

从四个角度看插画的应用背景：

商业化的发展及视觉文化传播方式的广泛应用 人的思维模式从语言文字为主的理性主义形式转变成以图像为主的感性主义形式 文化形态的传播方式从语言文字的生产、传播、消费转变成视觉图像的创作、传播和消费 信息时代的不断发展，电脑等电子设备已经成为时代发展的标志

插画本身的优势有几点：

从市场需求的角度来看，市场需要通过插画广告刺激消费，提高经济效益，其次强化宣传提升品牌传达：

从用户需求的角度来看，互联网信息时代，用户在接收复杂繁多的广告信息的同时，需要更好的视觉体验来提高审美，其次用户也希望从中产生一定的情感共鸣，获取到情绪价值。

三、插画在 UI 设计中的优势和应用场景 优势有以下6点：

1. 信息可读性与高记忆点

从用户角度来当前界面，可以简洁直观的通过插画 get 到花不同的钱可以享受到的不同服务。

2. 叙事性激发用户交互

美国的 Mailchimp 网页端用插画的方式，引导用户认识产品并如何使用产品，更好激发了用户进行交互操作。

3. 强化品牌识别

通过 IP 的 插画设计 ，不断夯实品牌的用户心智。

4. 强化界面的美型提，升用户审美

5. 插画的定制感与独特感增强用户的分享欲望

6. 建立信任

插画的表达方式更能与用户拉近距离建立信任。

插画在 UI 设计中的应用场景，分别有以下这些：

1. 新手引导

比如转转知乎在新手引导时都选择插画的表现形式，提升用户对产品的好感度，已及降低对产品的学习成本。

2. 新功能提示

降低用户学习成本，拉近与用户之间的距离～

3. 品牌宣传

Goole 的 web 端每逢节日便会有围绕 goole logo 来进行节日主题插画的创作，很好强化品牌的用户心智。

4. 登录页

众多产品都在登录页使用插画的表达形式，更容易于用户产生情感连接达到品牌触达。

5. 插画组件

Ant Design、自如都构建了自己的插画组件，有助于统一的视觉风格传递。

6. IP 设计

这可以很好的赋予品牌生命力，提升品牌的温度，更好的触达用户。

7. 奖励机制和榜单

在一些奖励交互动作时，通过插画形式传达正向反馈，提升用户情绪价值。

8. H5 的主题分享

最近几年产品都会有年度报告，很多都以插画的形式表现，插画的定制感与独特感增强用户的分享欲望，用户通过分享建立自己的社交货币，满足用户的社交需要。

从插画的发展、商业插画、UI 设计中插画的应用三条脉络做了简单梳理。希望对您了解插画应用插画有一定的帮助。

感谢浏览～Thanks

与《小王子》作者合作出书：顶尖黄书插画师奥布里·比尔兹利 上一回我们讲述了法国新艺术风格的代表设计师穆夏，他以绘画见长，成长阶段遇到不少贵人，最后练成自己独步天下的画风，至今仍然有不少品牌会以致敬方式复兴这种风格。

阅读文章 >

色彩体系的推导其实有很多文章有详细的介绍了，这一篇主要粗浅的梳理了整体流程经验，补充一下技术方法与色彩模型的差异。相关干货：如何设计B端色彩体系？3个步骤帮你掌握起来！

色彩体系 的推导其实有很多文章有详细的介绍了，这一篇主要粗浅的梳理了整体流程经验，补充一下技术方法与色彩模型的差异。

相关干货：

如何设计B端色彩体系？3个步骤帮你掌握起来！ 编者按：B端设计的色彩体系如何构建？

阅读文章 >

前言：

本文粗浅阐述色板生成、检验与应用的流程方法，包括主流的基准色选取、演算方法、补充色彩空间底层差异、以及 Tokens 结构。好了，那就开始吧~

一、取色

1. 主色：从产品或品牌主色开始

注：以个人项目主色为案例，前期产品色是基于 HSB 色彩模型选取的主色

配色 ：品牌/产品所要传递的调性

以拾取 24 色为例：H 360/24=15°递进，Brand Blue H218°。

配色原则方法：1、基于品牌传递调性；2、基于邻近色、对比色、互补色。

配色种类：自定义（6、8、12、16...）

2. 检验：主色保持视觉感官一致

保持视觉感官一致，适宜长时间浏览阅读。矫正饱和度 S 与亮度 B，HSB（brightness）的亮度一致不能保证视觉感知一致，需引入 Photoshop 图像灰度模式或者 Lab 色彩空间下的亮度 L（Lightness）来检验。在保证主色色彩主观感受舒适下，以品牌色亮度为基准，亮度过渡尽量平缓，矫正过于跳跃的色彩主色，才能衍生出接近视觉感官一致的全色系色板。

二、延展

演算 1.0：透明叠色

操作性快捷，色彩过渡平均。假设不以纯白纯黑作为起点与终点，就需要确定最小起点值 95%(自定义)，确定 11 色(自定义)，白色步幅为 n=5(自定义)，黑色步幅为 n=5(自定义)，得出 95%/n=19%。

演算 2.0：等序差值

操作性容易，有规律推算 S 值与 B 值。同样假设不以纯白纯黑作为起点与终点，就需要确定最小起点 Smin=5%(自定义)；Smax=100%(自定义)；Bmax=100%(自定义)；Bmin=20%(自定义)，浅色步幅为 n=5(自定义)，深色步幅为 n=5(自定义)。如果把调色板看成是一个二维坐标轴，我们有主色坐标、深色坐标与浅色坐标，三个坐标点之间进行均值计算，一次衍生步幅坐标点。

通过此规律，那么就可以利用 Numbers 表格搭建简单演算工具，依靠公式修改基准色 S 值与 B 值，演算延展出完整的深浅色板。

演算 3.0：曲线拟合

依赖曲线函数，多种过渡变化。色彩过渡缓和在直线的基础之上，引入线段曲率与点速度，也可以使用常用的曲线函数：EaseIn；EaseOut；EaseInOut 等。曲线色彩梯度自行推导难度相对较大，需要依赖工具生成。

三、检验

1. 检验色板：视觉感官的一致性亮度

当然除了亮度检验，还需要做 WCAG 2.1 标准下的对比度检验。

相比于直线生成的色板，曲线函数的优势能生成亮度一致性更接近的色板，但是仍然无法完全解决这个问题，那么是不是问题出在色彩模型下呢？

2. 两类色彩模型的底层差异

追求亮度一致的视觉感知体验，目前在软件层面涉及到色彩部分，几乎都是以 RGB 或者 RGB 的色彩模型衍生出来的色彩空间。RGB 的原理发光元件通过三色光叠加，是一种基于计算机显示技术发展而来的色彩模型。

其实对发光元件而言的亮度与人眼感知的亮度是存在非常大的差异。那么基于人眼测定的色彩模型就有像 Lab、HCL 以及最新的谷歌 HCT，常用的 Photoshop 图像灰度模式与 Lab 中的 L 都是基于人眼测定的亮度 Lightness 通道。

下图可以直观感受基于两种色彩模型差异，虽然都是相同的亮度 Lightness，但是视觉感官体验上的舒适性差异明显。

在这里补充色彩模型差异，主要原因是软件产品服务对象是人本身，所选用色彩模型应尽量贴近人眼感知层面的色彩模型。基于 HSL、HSB 生成的色彩，同样可以通过换算关系，转换成 Lab、HCL，但是由于色域范围不一致，色彩会存在不兼容的情况。

换算关系：sRGB(HSL/HSB) → linearRGB → CIEXyz → CIELab → CIELch， 在 W3C（15. Sample code for color conversions）文档中有给出具体转换公式代码。

四、应用

工具资源

对比度检测 Color.review WCAG2.1： https://color.review/ 透明度叠加工具 Tint and Shade Generator： https://maketintsandshades.com/ 直线等分亮度工具 chroma.js palette helper： https://gka.github.io/palettes 色彩曲线工具 ColorBox by Lyft Design（搭梯子使用）： https://lyft-colorbox.herokuapp.com/ 色板生成工具

基于 HSL/HSB

Eva Design System: Deep learning color generator： https://colors.eva.design/ ColorBox： https://colorbox.io/ 基于 HCL

Atmos - Create UI color palettes with ease： https://app.atmos.style/ Colorpicker for data： http://tristen.ca/hcl-picker 基于 HCT

Material Theme Builder： https://material-foundation.github.io Figma 插件(Color Space: First plugin with HCT)： https://www.figma.com 来源参考：

使用 Chroma.js 掌握多色调色阶：  https://www.vis4.net/blog Re-approaching Color：  https://design.lyft.com/re-approaching-color Designing Systematic Colors：  https://uxplanet.org/designing-systematic-colors 关于 HCL 颜色的一些笔记：  https://segmentfault.com/a/1190000023056925 产品配色 2.0：使用 HCL 色彩空间替代 HSL 生成配色：  https://jessieji.com/2020/hcl-instead-of-hsl The Science of Color & Design：  https://material.io/blog/science-of-color-design Design tokens：  https://m3.material.io/foundations/design-tokens/overview W3C：  https://www.w3.org/TR/css-color-4/#color-conversion-code 更多色彩体系干货：

配色找不到感觉？这个PCCS色彩体系帮你从根本上解决（三） 大家好，我是和你聊设计的花生~ 之前向大家介绍了 PCCS（日本色彩研究所配色体系），它是目前全世界最常用的色彩体系之一，能帮助我们了解色彩要如何使用才更方便，以及如何搭配色彩才更和谐更好看。

阅读文章 >

如何设计B端色彩体系？3个步骤帮你掌握起来！ 编者按：B端设计的色彩体系如何构建？

阅读文章 >

欢迎关注「JellyDesign」的小程序：

如果你有午睡的习惯，你会发现如果中午不趴那么一会儿，一下午的脑子都是不清醒的。如果你有迷茫的习惯，最终你也会发现，无论处在人生哪个阶段，都有数不清的“迷茫”和“瓶颈”在等着你守着你。也许没准儿哪一天，这些迷茫不再以迷茫的面貌出现，它换了一个更酷的名字，灰犀牛。

如果你有午睡的习惯，你会发现如果中午不趴那么一会儿，一下午的脑子都是不清醒的。如果你有迷茫的习惯，最终你也会发现，无论处在人生哪个阶段，都有数不清的“迷茫”和“瓶颈”在等着你守着你。也许没准儿哪一天，这些迷茫不再以迷茫的面貌出现，它换了一个更酷的名字，灰犀牛。

上周给团队做了关于职业规划的分享，我现场做了个小的调研。结果并不出人意料：几乎没有人认为自己拥有清晰的 职业规划 ，同时，约有 30%的设计师认为自己作为设计师最多只能工作到 35 岁。

对大部分人来讲，一生中三分之二的时间在工作，职场是一个个人自我实现的舞台。保持适当的求生欲与危机感，有意识的准备自己职业发展的 Plan B，应该是每个职场人的必修课。 设计师 们也应该重视自己的职业规划，有了更清晰的目标，才能在为老板工作的同时，也为自己工作，为自己的未来工作。

本文从实用角度，以互联网行业的设计从业者为例，结合我自己作为职场老鸟的血泪经验，梳理了进行自我职业规划的方法和步骤，希望大家可以建立一个正确的认知，打开职业生涯发展的新思路。

往期同类文章推荐：

深度分析设计师能力模型（一） ： 从心理学角度聊聊职业规划 很早之前写了一篇《设计师晋升述职和能力模型》的文章，很多小伙伴给我留言或者私信，问了很多问题，也跟我探讨了自己的设计师职业规划和职场困惑。

阅读文章 >

一、认知自我 职业规划的核心根本问题是认知问题，认知问题的处理首先需要从认知自我开始。

成为自己，成为如所其是的自己，是每个人无论在工作还是生活中的首要目标。全球最有影响力的生涯发展研究者舒波，提出的职业发展拱门，也将“自我”的构筑放在了拱门最顶端、最中间的位置。

所以说，了解自己，正确的认知自己是做好职业规划的第一步。成为自己，成就自我，是职业生涯规划的最终目标。

那么如何认知自己呢，我觉得可以从以下 4 个纬度来进行。

1. 职业性格

一个人的性格或人格在成人之后已经定型，几乎是无法改变的了。所以了解自己的性格，正确的认知自己的性格，是一个非常基础的事情。

比方说一个人非常内向，我们不应该把注意力都集中在内向有哪些缺点，拼命改掉这些缺点，努力变得更外向的人差不多。而是应该洞察自己，认知自己，了解自己性格中的长处和短处是什么，不断放大自己的长处，学习一些技巧来弥补自己的短处。

心理学上会有很多方法和量表，比如 MBTI、九型人格、大五人格这些测试工具都可以帮助我们认知自己。

2. 职业兴趣

林语堂说，“先有痴，而后有成”。自己喜欢做的事情，自己天生对某些事情的热爱，往往是我们做事情的原动力。

很多目标感强的人，在学生时代就有了相对明确的目标，这往往得益于比较成熟的职业兴趣与职业启蒙。

相信大多数工作几年之后的同学，也会比较确定自己的职业兴趣。喜欢什么，不喜欢什么。如果对这一点仍然存在疑问的，可以结合“霍兰德职业兴趣测试”来做判断。

3. 能力结构

为了帮助大家更好的进行设计师的能力结构认知，我结合设计师的岗位胜任力模型整理了一个素质评估模型。

我们可以首先看一下专业素质和通用素质的部分，基本上作为设计师我们有六项能力是需要不断提升，也是被不断评估的。分别是：专业技能、项目管理、洞察创新、协作能力、执行力、解决问题的能力。

我们可以通过这个结构化的东西来自评自己的能力结构，哪些方面得分较高，哪些方面得分较低。从而对自己的能力结构有一个全面的认知。

4. 职业价值观

简单的说，我们作为一个人，在工作中自己最看重的是什么，我到底是觉得赚更多的钱最重要，还是获得更多的工作成就感更重要，抑或还是有融洽舒适的同事关系更重要，这都是我们的职业价值观。

职业价值观相对于上面的三点相对更加隐性，但其实对于职业规划而言是最为重要的。

舒波提供的职业价值观自测量表，将职业价值观划分成 15 种类型，分别是美的追求、安全稳定、工作环境、智能激发、独立自主、多样变化、经济报酬、管理权力、帮助他人、生活方式、创造发明、上级关系、同事关系、成就满足、名誉地位。

无论你对了解自己有多高的自信，还是非常建议自测一下。

二、认知环境 对外部环境的认知，也同样重要的决定了我们能不能做好职业规划。对于设计师来讲，需要考虑两个领域的现状和趋势，一个是设计的专业领域，一个是就职公司所在的行业领域。

嗯，这的确是一个很伤脑筋的问题，不过我们在职场上很多关键的选择都与对这个问题的认知程度强相关。遇到问题时抓瞎，问问这个，问问那个，还是不知道该怎么选，这样的情况可能是因为对环境缺乏认知。

在设计思想同质化、设计方法透明化、设计工具傻瓜化的今天，设计师作为一个职业，有着明显的低门槛、低天花板的现象。

低门槛让设计技法的重要性变得越来越弱，设计思维的重要性越来越得以凸显。

想法远大于技法。

这是好事。科技的发展释放了设计师更多的头脑和时间，设计方法和设计理念的同质化加速了设计师的成长速度，从而使得年轻的设计师可以得到快速晋升。

同时，快速晋升的同学也逐渐看清了自己在这个领域里的天花板。天花板与瓶颈的本质不同：瓶颈说的是过程，而天花板说的是终结。所以这意味着互联网行业的设计人才在进行着快速的迭代，快速的新陈代谢。

这也许是一种耸人听闻的说法，但愿如此。

我们再看一下行业环境。显而易见的是，设计师除了是设计师之外，还是自己所在行业的从业者。而设计师和程序员这样的职业，跨行业跳槽相对比较容易，所以我们也经常面临对行业的选择。

也许我们有一些途径可以获知很多信息，帮助我们做选择和判断。不过最近发生的一些事情，充分显示了大环境的不确定性。

2021 年之前，也许没有人能想象奥运会在疫情下召开，全世界的人一起看的奥运直播，直播画面全部是都 2020，而今年是 2021 年；也没有人能想象在线教育行业以双减政策的出台而整体塌方，一夜之间新东方等教育机构的市值缩水近 7000 亿；也几乎没有局中人可以获知滴滴上市后面临的审查。

这就是不确定性。

三、设定 1 个大目标和 1 个小目标 认知环境是一个难度较高的事情，并且我们掌握的信息永远是片面的，我们的认知也永远是不全面的。

如果我们要做职业生涯规划，不需要等到对自我和环境的认知非常胸有成竹之后再进行目标设定。并且因为我们认知的局限性，我们设定的大目标往往只能是一个模糊的、不够具体的目标。

所以首先我们要做的，是设定一个哪怕是模糊的长远目标，结合你所有关于职业状态的美好想象，大胆的设想它，并把它写下来。

然后围绕这个大目标，我们设定一个近期就能尝试实现的小目标。小目标的设定周期可以是一个月，两个月，或者半年。不要太长，也不要太短。

比方说，小莉的职业理想是成为一个万众瞩目的、多金的网络红人，那么他可能就需要从打造第一个关于自己的爆款短视频开始。小目标要与大目标要有强关联。

达利欧 通往成功的 5 步流程

四、立即行动 有了目标，就需要尽快动起来。如果不去行动，会在迷茫中继续蹉跎度日，最后陷入一个毫无动力的死循环。

有了目标，需要立即行动。

对，要立即行动，不是 1 年后，不是 2 个月后，也不是 2 周后。

当然并不是说你要抛下现在手里的一切，重新开始，而是说应该围绕目标先做一些尽可能的低成本的尝试。这种尝试性的行动，其实是在验证目标的可行性。

行动是目标规划的一部分，只有先动起来，才能促使自己在对规划中的内容做进一步的了解、形成更笃定的认知和判断，从而真正实现职业生涯规划的价值。

在行动的过程中总结经验，修正目标，并重复做尝试进行。

以上。

更多职场干货：

艰难求职季，腾讯设计师是如何做职业规划的？ 2020 年真的是一个开局不利的一年，如果有的选择，可能很多人都想重新开启这一年吧。

阅读文章 >

2020年陷入迷茫？帮你做好职业规划的9个实用经验！ 最近和很多设计师朋友交流发现各个阶段的设计师都对自己的职业规划比较迷茫，我最近也思考了挺久，梳理出这篇文章和大家一起共勉。

阅读文章 >

欢迎关注作者微信公众号：「柴林的设计笔记」

大家好，这里是和你们聊设计的花生~之前为大家推荐了一款上手非常容易的 AI 图像生成工具 Dream Studio，它操作界面简单易懂，非常适合刚接触 AI 图像生成工具的新手。最近又出现了一个新的同类型的 AI 图像生成神器 Dreamlike.art，操作界面同样好用且图像质量极高，即使是小白也能轻松生成精美...

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

之前为大家推荐了一款上手非常容易的 AI 图像生成工具 Dream Studio，它操作界面简单易懂，非常适合刚接触 AI 图像生成工具的新手。最近又出现了一个新的同类型的 AI 图像生成神器 Dreamlike.art ，操作界面同样好用且图像质量极高，即使是小白也能轻松生成精美的图像，效果可以跟上 Midjourney 的 V4 模型了。最最重要的是目前可以免费，使用一起来看看吧~

Dream Studio 介绍：

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

阅读文章 >

Dreamlike.art 官网直达： https://dreamlike.art/create （使用梯子速度更快，需注册账号）

模型地址： https://huggingface.co/dreamlike-art/dreamlike-diffusion-1.0

使用指南： https://dreamlike.art/guides

Dreamlike.art 的功能包括根据文本生成图像、根据图像生成新图像和图像变体，以及通过放大和面部优化来增强图像内容。

我用 Dreamlike.art 生的人物图像，质量相当不错

用户@ScourgeHH 用照片生成的图像，图片来源：官方 Discord 社区

除了输入文本提示，Dreamlike.art 的操作界面上有很多可以调节的参数，比如：

负面提示：输入后图像可以不包含有关负面提示词内容； 指导量表：控制生成图像与文本提示的紧密程度，值越高图像与提示的贴合度越高； 注意力控制：在提示中使用 （） 会增加 AI 模型对括号内单词/短语的注意力，而 [] 会减少注意力，注意力的增加意味着该单词/短语将更多地影响生成的图像。 步骤：控制图像迭代次数， 步骤越多结果就越好，但在大多数情况下 30 步足够了。

有了这些可调节的参数，我们就能对画面进行细微的调整并准确控制生成效果。即使对这些概念都不太熟悉也不用担心，官方在指南里对每一个参数的概念和调节方法都做了详细的介绍，甚至还写了一篇文章教我们如何利用最近爆火的 AI 聊天机器人 ChatGPT 生成优质的文本提示，想深入了解 AI 提示词写作技巧的小伙伴可以详细阅读官方指南，当然直接使用系统默认的参数设置也能得到不错的效果。

地表最强AI聊天机器人ChatGPT诞生！会给设计师带来哪些影响？ 大家好，这里是和你们聊设计的花生~ 前几天刚和大家聊过 AI 绘画工具 Midjourney 的 V4 模型，感叹它图像生成质量之高。

阅读文章 >

Dreamlike.art 的另一个神奇之处是它有很 5 个不同的风格模型：Dreamlike Diffusion、 Dreamlike Photoreal、Stable Diffusion 1.5、Anime Diffusion (Eimis)和 Openjourney Diffusion。其中 Photoreal 可以生成如照片般真实的图像，Anime Diffusion 是二次元画风模型，大家在使用的时候可以多做尝试，找到符合自己需求的模型。

Dreamlike.art 内置的的 5 个模型

Dreamlike.art 的图像生成速度很快，10 秒左右就能生成 5 张高质量图像。将鼠标悬浮在图像之上可以进行进一步的操作，比如下载、收藏、生成变体、画面升级加强等。

Dreamlike.art 官网上说其功能永久免费，但是这个免费并非是无限制的。

每个新用户的账户上会有 100 学分，用于免费生成图像。如果余额低于 100 积分且用户在过去 48 小时内在线，官方会每小时在余额中添加 1 个积分。如果有用户在访问你的个人资料或帖子后创建了帐户，你的账户也可以获得 100 个积分。此外参加官方日常举办的日常挑战也可以获得积分奖励，最佳作者可以获得 3000 积分。

官方活动举办社区： https://discord.com/invite/QyGR2FxsKU （需搭梯子）

官方 discord 社区内的每日主题挑战界面

很多想使用 AI 绘画工具的小伙伴刻可能都感觉写英文提示词是比较困难的事情，这里给大家推荐 2 个超好用的提示词网站 PromptHero 和 urania.ai，搭配翻译软件使用可以慢慢掌握如何写出好的文本提示词。

PromptHero 里收录了海量 AI 生成的图像及其文本提示词，并分为建筑、3D、二次元、照片风等多个门类，大家可以在其中翻找符合自己要求的图像，复制其提示词并做一些修改，就能得到相似的结果，给你一秒变大神的惊喜感。urania.ai 则收录了多位知名艺术家的风格在 AI 图像生成模型中的效果图，在提示词中加入该艺术家的名字就能形成对应的效果。

PromptHero 官网： https://prompthero.com/ ( 使用梯子速度更快)

urania.ai： https://www.urania.ai/top-sd-artists (使用梯子速度更快)

以上就是今天为大家推荐的 AI 绘画神器 Dreamlike.art，非常适合想了解 AI 绘画工具的小伙伴。喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~

Dreamlike.art 官网直达： https://dreamlike.art/create （使用梯子速度更快，需注册账号）

模型地址： https://huggingface.co/dreamlike-art/dreamlike-diffusion-1.0

使用指南： https://dreamlike.art/guides

PromptHero 官网： https://prompthero.com/ (使用梯子速度更快)

urania.ai： https://www.urania.ai/top-sd-artists (使用梯子速度更快)

推荐阅读：

字节、腾讯也玩起AI绘画了，效果还非常不错！ 大家好，这里是和你们聊设计的花生。

阅读文章 >

手残党也能成为艺术家！4个热门AI绘画平台的创作经验总结 AI画画，无疑是当下最火热的话题之一。

阅读文章 >

大家好，这里是和你们聊设计的花生~之前为大家推荐了一款上手非常容易的 AI 图像生成工具 Dream Studio，它操作界面简单易懂，非常适合刚接触 AI 图像生成工具的新手。最近又出现了一个新的同类型的 AI 图像生成神器 Dreamlike.art，操作界面同样好用且图像质量极高，即使是小白也能轻松生成精美...

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

之前为大家推荐了一款上手非常容易的 AI 图像生成工具 Dream Studio，它操作界面简单易懂，非常适合刚接触 AI 图像生成工具的新手。最近又出现了一个新的同类型的 AI 图像生成神器 Dreamlike.art ，操作界面同样好用且图像质量极高，即使是小白也能轻松生成精美的图像，效果可以跟上 Midjourney 的 V4 模型了。最最重要的是目前可以免费，使用一起来看看吧~

Dream Studio 介绍：

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

阅读文章 >

Dreamlike.art 官网直达： https://dreamlike.art/create （使用梯子速度更快，需注册账号）

模型地址： https://huggingface.co/dreamlike-art/dreamlike-diffusion-1.0

使用指南： https://dreamlike.art/guides

Dreamlike.art 的功能包括根据文本生成图像、根据图像生成新图像和图像变体，以及通过放大和面部优化来增强图像内容。

我用 Dreamlike.art 生的人物图像，质量相当不错

用户@ScourgeHH 用照片生成的图像，图片来源：官方 Discord 社区

除了输入文本提示，Dreamlike.art 的操作界面上有很多可以调节的参数，比如：

负面提示：输入后图像可以不包含有关负面提示词内容； 指导量表：控制生成图像与文本提示的紧密程度，值越高图像与提示的贴合度越高； 注意力控制：在提示中使用 （） 会增加 AI 模型对括号内单词/短语的注意力，而 [] 会减少注意力，注意力的增加意味着该单词/短语将更多地影响生成的图像。 步骤：控制图像迭代次数， 步骤越多结果就越好，但在大多数情况下 30 步足够了。

有了这些可调节的参数，我们就能对画面进行细微的调整并准确控制生成效果。即使对这些概念都不太熟悉也不用担心，官方在指南里对每一个参数的概念和调节方法都做了详细的介绍，甚至还写了一篇文章教我们如何利用最近爆火的 AI 聊天机器人 ChatGPT 生成优质的文本提示，想深入了解 AI 提示词写作技巧的小伙伴可以详细阅读官方指南，当然直接使用系统默认的参数设置也能得到不错的效果。

地表最强AI聊天机器人ChatGPT诞生！会给设计师带来哪些影响？ 大家好，这里是和你们聊设计的花生~ 前几天刚和大家聊过 AI 绘画工具 Midjourney 的 V4 模型，感叹它图像生成质量之高。

阅读文章 >

Dreamlike.art 的另一个神奇之处是它有很 5 个不同的风格模型：Dreamlike Diffusion、 Dreamlike Photoreal、Stable Diffusion 1.5、Anime Diffusion (Eimis)和 Openjourney Diffusion。其中 Photoreal 可以生成如照片般真实的图像，Anime Diffusion 是二次元画风模型，大家在使用的时候可以多做尝试，找到符合自己需求的模型。

Dreamlike.art 内置的的 5 个模型

Dreamlike.art 的图像生成速度很快，10 秒左右就能生成 5 张高质量图像。将鼠标悬浮在图像之上可以进行进一步的操作，比如下载、收藏、生成变体、画面升级加强等。

Dreamlike.art 官网上说其功能永久免费，但是这个免费并非是无限制的。

每个新用户的账户上会有 100 学分，用于免费生成图像。如果余额低于 100 积分且用户在过去 48 小时内在线，官方会每小时在余额中添加 1 个积分。如果有用户在访问你的个人资料或帖子后创建了帐户，你的账户也可以获得 100 个积分。此外参加官方日常举办的日常挑战也可以获得积分奖励，最佳作者可以获得 3000 积分。

官方活动举办社区： https://discord.com/invite/QyGR2FxsKU （需搭梯子）

官方 discord 社区内的每日主题挑战界面

很多想使用 AI 绘画工具的小伙伴刻可能都感觉写英文提示词是比较困难的事情，这里给大家推荐 2 个超好用的提示词网站 PromptHero 和 urania.ai，搭配翻译软件使用可以慢慢掌握如何写出好的文本提示词。

PromptHero 里收录了海量 AI 生成的图像及其文本提示词，并分为建筑、3D、二次元、照片风等多个门类，大家可以在其中翻找符合自己要求的图像，复制其提示词并做一些修改，就能得到相似的结果，给你一秒变大神的惊喜感。urania.ai 则收录了多位知名艺术家的风格在 AI 图像生成模型中的效果图，在提示词中加入该艺术家的名字就能形成对应的效果。

PromptHero 官网： https://prompthero.com/ ( 使用梯子速度更快)

urania.ai： https://www.urania.ai/top-sd-artists (使用梯子速度更快)

以上就是今天为大家推荐的 AI 绘画神器 Dreamlike.art，非常适合想了解 AI 绘画工具的小伙伴。喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~

Dreamlike.art 官网直达： https://dreamlike.art/create （使用梯子速度更快，需注册账号）

模型地址： https://huggingface.co/dreamlike-art/dreamlike-diffusion-1.0

使用指南： https://dreamlike.art/guides

PromptHero 官网： https://prompthero.com/ (使用梯子速度更快)

urania.ai： https://www.urania.ai/top-sd-artists (使用梯子速度更快)

推荐阅读：

字节、腾讯也玩起AI绘画了，效果还非常不错！ 大家好，这里是和你们聊设计的花生。

阅读文章 >

手残党也能成为艺术家！4个热门AI绘画平台的创作经验总结 AI画画，无疑是当下最火热的话题之一。

阅读文章 >

色彩体系的推导其实有很多文章有详细的介绍了，这一篇主要粗浅的梳理了整体流程经验，补充一下技术方法与色彩模型的差异。相关干货：如何设计B端色彩体系？3个步骤帮你掌握起来！

色彩体系 的推导其实有很多文章有详细的介绍了，这一篇主要粗浅的梳理了整体流程经验，补充一下技术方法与色彩模型的差异。

相关干货：

如何设计B端色彩体系？3个步骤帮你掌握起来！ 编者按：B端设计的色彩体系如何构建？

阅读文章 >

前言：

本文粗浅阐述色板生成、检验与应用的流程方法，包括主流的基准色选取、演算方法、补充色彩空间底层差异、以及 Tokens 结构。好了，那就开始吧~

一、取色

1. 主色：从产品或品牌主色开始

注：以个人项目主色为案例，前期产品色是基于 HSB 色彩模型选取的主色

配色 ：品牌/产品所要传递的调性

以拾取 24 色为例：H 360/24=15°递进，Brand Blue H218°。

配色原则方法：1、基于品牌传递调性；2、基于邻近色、对比色、互补色。

配色种类：自定义（6、8、12、16...）

2. 检验：主色保持视觉感官一致

保持视觉感官一致，适宜长时间浏览阅读。矫正饱和度 S 与亮度 B，HSB（brightness）的亮度一致不能保证视觉感知一致，需引入 Photoshop 图像灰度模式或者 Lab 色彩空间下的亮度 L（Lightness）来检验。在保证主色色彩主观感受舒适下，以品牌色亮度为基准，亮度过渡尽量平缓，矫正过于跳跃的色彩主色，才能衍生出接近视觉感官一致的全色系色板。

二、延展

演算 1.0：透明叠色

操作性快捷，色彩过渡平均。假设不以纯白纯黑作为起点与终点，就需要确定最小起点值 95%(自定义)，确定 11 色(自定义)，白色步幅为 n=5(自定义)，黑色步幅为 n=5(自定义)，得出 95%/n=19%。

演算 2.0：等序差值

操作性容易，有规律推算 S 值与 B 值。同样假设不以纯白纯黑作为起点与终点，就需要确定最小起点 Smin=5%(自定义)；Smax=100%(自定义)；Bmax=100%(自定义)；Bmin=20%(自定义)，浅色步幅为 n=5(自定义)，深色步幅为 n=5(自定义)。如果把调色板看成是一个二维坐标轴，我们有主色坐标、深色坐标与浅色坐标，三个坐标点之间进行均值计算，一次衍生步幅坐标点。

通过此规律，那么就可以利用 Numbers 表格搭建简单演算工具，依靠公式修改基准色 S 值与 B 值，演算延展出完整的深浅色板。

演算 3.0：曲线拟合

依赖曲线函数，多种过渡变化。色彩过渡缓和在直线的基础之上，引入线段曲率与点速度，也可以使用常用的曲线函数：EaseIn；EaseOut；EaseInOut 等。曲线色彩梯度自行推导难度相对较大，需要依赖工具生成。

三、检验

1. 检验色板：视觉感官的一致性亮度

当然除了亮度检验，还需要做 WCAG 2.1 标准下的对比度检验。

相比于直线生成的色板，曲线函数的优势能生成亮度一致性更接近的色板，但是仍然无法完全解决这个问题，那么是不是问题出在色彩模型下呢？

2. 两类色彩模型的底层差异

追求亮度一致的视觉感知体验，目前在软件层面涉及到色彩部分，几乎都是以 RGB 或者 RGB 的色彩模型衍生出来的色彩空间。RGB 的原理发光元件通过三色光叠加，是一种基于计算机显示技术发展而来的色彩模型。

其实对发光元件而言的亮度与人眼感知的亮度是存在非常大的差异。那么基于人眼测定的色彩模型就有像 Lab、HCL 以及最新的谷歌 HCT，常用的 Photoshop 图像灰度模式与 Lab 中的 L 都是基于人眼测定的亮度 Lightness 通道。

下图可以直观感受基于两种色彩模型差异，虽然都是相同的亮度 Lightness，但是视觉感官体验上的舒适性差异明显。

在这里补充色彩模型差异，主要原因是软件产品服务对象是人本身，所选用色彩模型应尽量贴近人眼感知层面的色彩模型。基于 HSL、HSB 生成的色彩，同样可以通过换算关系，转换成 Lab、HCL，但是由于色域范围不一致，色彩会存在不兼容的情况。

换算关系：sRGB(HSL/HSB) → linearRGB → CIEXyz → CIELab → CIELch， 在 W3C（15. Sample code for color conversions）文档中有给出具体转换公式代码。

四、应用

工具资源

对比度检测 Color.review WCAG2.1： https://color.review/ 透明度叠加工具 Tint and Shade Generator： https://maketintsandshades.com/ 直线等分亮度工具 chroma.js palette helper： https://gka.github.io/palettes 色彩曲线工具 ColorBox by Lyft Design（搭梯子使用）： https://lyft-colorbox.herokuapp.com/ 色板生成工具

基于 HSL/HSB

Eva Design System: Deep learning color generator： https://colors.eva.design/ ColorBox： https://colorbox.io/ 基于 HCL

Atmos - Create UI color palettes with ease： https://app.atmos.style/ Colorpicker for data： http://tristen.ca/hcl-picker 基于 HCT

Material Theme Builder： https://material-foundation.github.io Figma 插件(Color Space: First plugin with HCT)： https://www.figma.com 来源参考：

使用 Chroma.js 掌握多色调色阶：  https://www.vis4.net/blog Re-approaching Color：  https://design.lyft.com/re-approaching-color Designing Systematic Colors：  https://uxplanet.org/designing-systematic-colors 关于 HCL 颜色的一些笔记：  https://segmentfault.com/a/1190000023056925 产品配色 2.0：使用 HCL 色彩空间替代 HSL 生成配色：  https://jessieji.com/2020/hcl-instead-of-hsl The Science of Color & Design：  https://material.io/blog/science-of-color-design Design tokens：  https://m3.material.io/foundations/design-tokens/overview W3C：  https://www.w3.org/TR/css-color-4/#color-conversion-code 更多色彩体系干货：

配色找不到感觉？这个PCCS色彩体系帮你从根本上解决（三） 大家好，我是和你聊设计的花生~ 之前向大家介绍了 PCCS（日本色彩研究所配色体系），它是目前全世界最常用的色彩体系之一，能帮助我们了解色彩要如何使用才更方便，以及如何搭配色彩才更和谐更好看。

阅读文章 >

如何设计B端色彩体系？3个步骤帮你掌握起来！ 编者按：B端设计的色彩体系如何构建？

阅读文章 >

欢迎关注「JellyDesign」的小程序：