组件的命名方式

设计系统的基础工作之一就是给组件命名。这个工作看上去并不起眼，似乎还有些机械重复，但实际上却需要具备严谨的逻辑和对细节的锱铢必较。

组件的命名方式并不唯一，你可以按照你对组件构成的理解，来规划你的命名逻辑。下图以我工作中用到的一款组件库为例，呈现出组件的命名逻辑：

可以看到，我们在命名时分了 5 个层级，依次是类别，元件，模式，等级，状态。

1、类别

类别指的是组件最本质的作用和宽泛的应用场景。通常我们会分为：通用、导航、数据录入、数据展示、反馈等几个类别，类别以及其中的部分组件如下图所示：

2、元件 / 组件

元件即具体的、单一的组件，比如 “导航” 这个类别下就包括了固钉（返回顶部）、面包屑、下拉菜单、导航菜单、分页、页头、步骤条等几个组件：

3、模式

目前的模式通常会分成暗黑模式（Dark Mode）和浅色模式（Light Mode）两种，但随着对用户体验的不断重视，未来也有可能会出现 “护眼模式”、“色盲模式”、“高对比度模式” 等模式。

4、等级

等级的分类和数量由组件的基本功能和在产品的具体需求决定，有些组件比如 “分页器”、“面包屑” 通常只有一个等级，在命名的时候就可以不体现；而有些组件如 “按钮”、“标签页” 、“导航” 则会有多个等级：

5、状态

状态即组件在交互时的变化样式，通常包括普通（默认）、悬浮（悬停）、点击、失效（禁用）等，根据不同组件的特性，也可能会包括危险提示、聚焦等状态。

根据上述这个规则，我们就可以对所有组件进行有规律的命名，下图中组件悬停状态的命名为：Navigation/Sidemenu/Light/Primary/hover

组件命名的注意事项

转载请注明：学UI网》工作经验｜设计资产库中的组件，应该如何命名？

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

在我们平时的工作中，经常需要创建各种各样的情绪板：用于品牌、App、海报、服装……等涉及到设计领域，但我经常会发现在整理素材和归纳的时候，很容易遗漏某些步骤，或者创建过程晚了被客户拒绝，所以我决定写一篇总结文章，其中包含一系列技巧和工具。

什么是情绪板？

有些人将其称为风格图、参考图，但它们之间的差异存在争议，但总而言之，它是一组图像，把它们汇总在一起代表品牌（或项目）将采用的视觉方向。

我们可以将情绪板的作用总结为三个主要目标：

• 为视觉设计过程奠定基础
• 建立了品牌的世界观
• 提供视觉标准，便于以后的视觉延展和一致性

如何制作情绪板

我在刚参加工作时的项目中所犯的第一个错误就是收到一个新的设计需求简介后，就立即疯狂收集参考图，我想这是与品牌匹配的，没有任何问题。（然而这样的设计方式非常错误且痛苦）

现在看来，与之相反的，应该先花点时间分析下设计需求简介，让自己真正了解品牌的背景、历史、未来计划、行业、竞争、目标受众、品牌信息和价值主张。如果以上任何一块缺失并影响了创建情绪板，你最好都需要先跟需求方沟通清楚缺失部分的细节。针对这些缺失的细节发送品牌调查问卷，避免甲方推翻重新设计，影响设计进程。

情绪板在品牌推广过程中占有一席之地，但在一开始的时候肯定是没有的。假设你已经从客户那里收集了所有信息，现在我们准备进一步推进情绪板创建的实际步骤：

1） 研究并搜集参考

2） 排版和优化

3） 情绪版展示（可选）

接下来，会详细的为大家分享每一个步骤。

研究并搜集参考

在我开始找图之前，我喜欢把需求介绍中的形容词或其他关键词放在自己面前，这样我就可以检查研究的内容是否与关键词产生共鸣。

另外，不要忘记还要了解目标受众和市场细节！

在我们谈论研究之前，我想分享几个我喜欢使用的图像收集工具。

Pinterest 几乎是图像收集的首选工具之一。你们中的许多人可能已经在用了， 优点是很容易设置收集画板，并且关联图片和以图搜图都非常方便，而且还是免费的。

Sample board from Pinterest 来自 Pinterest 的样板

（彩云注：原作者这里还介绍了另外两款工具，但经过彩云的研究，发现不那么好用，不符合中国设计师的使用习惯，所以我去掉了这部分的内容。）

你也可以直接保存到桌面。但我喜欢用工具进行整理，所以当我完成研究过程后，我至少对于搜集整理方面的工具有一个广泛的了解。

一个非常新的收藏工具叫做  mymind ( https://mymind.com )，由设计师 Tobias van Schneider 开发。这是一个浏览器扩展程序，它可以帮助你保存图像、文本、视频、完整的文章、产品或其他内容，方法是使用插件扩展或右键单击添加到一个大集合（收集上也可以用）。

这是对不太喜欢打标签和分组的人做的工具，因为它会自动搜索已保存材料之间的联系并添加标签，因此在某些方面要比 Pinterest 更易于搜索

好了，工具够用了！你准备好获得灵感了吗？在开始搜索之前，我们需要记住我们之前定义的那些品牌形容词（工业、坚定、空灵等等）。

因为我知道搜索过程会让我陷入困境，所以第一件事就是给自己设置一个计时器（对我来说大部分搜索收集图片时间是 1.5 小时）。

我首选的工具是 Google 和 Pinterest，重要的是在这个阶段不要把自己限制在任何事情上并保存所有吸引你眼球的东西，这样你就有足够的材料可以使用。

我会有针对性的找一些关键元素来向客户（或我自己）展示并在以后为设计决策提供信息：颜色、排版、行业和整体氛围、包装、摄影、插图风格、纹理、图案、logo。

这听起来很简单，但如果品牌形容词没有太多引导作用呢？这里有一些提示可以尝试：

• 搜索类似的词。例如，在Solomo的例子中，一开始我试图搜索功能，但这样搜索出来的可能全是无聊的办公场所，所以我会尝试寻找同义词。
• 如果没想法的时候，尝试关掉电脑并闭上眼睛想想，当我听到这个词时我会想到什么，这也有帮助。
• 如果你和和团队有时间的话，可以组织一场脑爆会一起讨论探索想法，让更多人参与，这样也能快速帮助你找到灵感。

分享一些我常用的额外资源：

[Designspriration] — 精选灵感搜索

[PICDIT] — 高级摄影作品网站（彩云看了下貌似近期没有更新了,但以前的内容还是值得一看的）

[Flickgraphics] — 艺术排版灵感库

[Adultartclub] — 艺术摄影灵感库

[Dayinthelandofnobody] — 艺术摄影

[Visualgraphic] — 版式灵感

[typophile] — 排版灵感

[logos.ai] — 排版和logo

在你收集了一堆图片之后，接下来我们将看看如何处理它们。

排版和优化

1. 选择一个工具（Canva、Figma、Miro 等，彩云经常用sketch）

将图片组合成可展示的格式。我建议选择一些客户无需安装即可轻松使用的东西，这样反馈周期会更短。如果平台也有一些主题选项，那就太好了，例如，你可以根据客户的品牌颜色对其进行定制，并且可以将相同的结构重新用于不同的产品。

2. 挑选和组织图片

将每个图片下载到本地并把它们归纳分配在相关的风格或品牌形容词下。

如果只需要部分图片，记得裁切好需要的部分。

3. 将图片进行排版分组

在组织这些图片时，首先要记住的是颜色。我们需要避免用户在单个对象上花费太多时间，也不是自然地从一张图流向另一张图。

你可以尝试限定好图片的数量，对我来说10-15是一个很好的起点。

彩云也收集了一些比较优秀的情绪版排版供大家参考

4. 检查并最终确定方案

如果你已经到了这个阶段，那就太好了！现在是时候对最初的品牌形容词做检查标记，看看情绪版是否整体传达了品牌氛围。

在情绪版中有一个能自检的列表非常不错，我们要问自己的问题：

• 客户可能会过于字面理解吗？
• 情绪板是否反映了品牌气质？（逐个检查品牌形容词）
• 有什么特别突出的地方吗？
• 品牌所处的环境是否合适？

如果一切都考虑妥当，就该进行情绪板演示了。 最后，我收集了一些最终笔记，它们可能有助于你将其展示给其他人。

情绪板展示

如何与客户交流情绪板？

提醒客户不要从字面上理解任何内容，情绪板上的任何元素都不意味着要对他们的品牌(或项目)进行一对一的翻译。例如，如果在一张图片上有紫色的魔方飞来飞去，这并不意味着品牌会用魔方做任何事情，可能是形状，也可能是颜色。

强调这是品牌所在的视觉世界，而不是具体的元素。总而言之，鼓励客户关注整体，而不是个别部分。

如果在这个阶段一切都很糟糕并客户不认同它怎么办？

事情可能会出错，但请记住，我们可以随时后退一步，然后再前进。是时候回到关键词了，尤其是基调部分。这时候与观众一起仔细阅读每个词，并质疑相同的词是否仍然与品牌愿景产生共鸣，这是很有帮助的。

如果答案是肯定的，那么最好再进行一次会议，以了解观众根据关键词所想象的内容，以便下次符合预期。我的经验是，如果情绪板与观众或决策者一起策划，很容易获得早期支持以避免这种情况发生。

如果答案是否定的，可能要探索品牌愿景是否有任何变化，并从问卷开始回到开头。尽管这一步看起来令人生畏，但客户的舒适度确实至关重要，否则当你在整个设计过程中进一步推进时，他们将不会感到这是设计是为他们做的。

本文翻译已获得作者的正式授权（授权截图如下）
原文地址：medium作者：Peter Javorkai译文地址：彩云译设计（公众号）

译者：彩云Sky

转载请注明：学UI网》情绪版还能这样做？难怪大厂的设计师那么强

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

01.破坏图片

02.破坏文字

03.破坏版式

04.破坏背景

05.破坏文字/版式

06.破坏文字/图片

07.破裂的效果

 

做多了干干净净、整整洁洁、很美好的设计，是不是觉得有点无聊、乏味，受众估计也有这种感觉，所以何不搞搞破坏，打破这种安静的状态，给作品一点不一样的东西，这样的作品或许才更有生机。在设计的世界里，没有哪种做法是绝对正确的，也没有哪种做法是绝对不行的。当然这些出格的设计形式最好要吻合品牌的调性，或者能够帮助表达设计内容，不是纯粹为了破坏而破坏。

转载请注明：学UI网》杰出的作品就是在普通的作品上“搞破坏”

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

什么是设计中的对比？

对比是设计中的一个重要设计原则，因为对比能够有效组织界面信息，并构建设计层次，通过这样来向用户传递关键重要信息。

合理准确的运用对比原则可以有效的提高设计质感，当然如果过渡使用对比有时候也会适得其反，比如颜色对比过于强烈，反而影响了视觉阅读。

#O1.颜色对比

色相环

如上图，在色相环上，色相之间的角度大小就决定了对比的强烈程度，因此我们在选择色彩对比时候需要注意。

例如，下面这张设计图就是青绿色与紫色之间的对比，属于色相对比

上图配色色板中，分别应用色相和明度之间的对比。

#O2.形状对比

形状对比一般是有规则和无规则形状，比如上面的圆形和液态的有机图形进行组合，前者较为规整，后者往往弯曲且不对称，二者搭配使用可形成良好的对比。

那么在UI设计中的形状对比一般都是在棱角之间出现较多或者图标符号。

Google的Materials you Android 12设计语言的出现，将不同形状容器的组合在设计中，演变出多种组件容器，这样的思路，值得我们深入思考与学习，为什么我们之前就想不到这样的思路？

形状对比在产品设计中的应用有更多无限可能，现在最难的还是大家的思维限制，希望以一种开放的心态去挑战设计更多可能性。

#O3.大小对比

在UI设计中对比其实就是差异化，实现信息层次的一种方式。在使用大小对比时候，大的元素就需要更大，小的就让它更小，不能拖泥带水，不大不小。

当遇到颜色相同的版式设计，可以通过大小来做层级区分。

上图界面设计中，标题文字最大，周边运用留白，使得信息层级区分更明显。

定位图标最大化显示在地图中心区域，聚焦，引起用户的关注和留意。

好了，今天文章差不多到这，我个人觉得图形的对比用好后将是构建竞争力最有效的设计手段，突破同质化壁垒，大家下去可以多去练练，找到设计的感觉。

给大家分享一个在B站直播的小静物的绘制过程。完整的无广告演示请查看B站的视频，也欢迎大家加我们的群，直播会在群内通知。 

教程案例：

一、草稿       

先动手画草稿~选勾线-头墨画笔把果子的形状画出来，画的时候可以轻松一些。注意疏密与大小变化，把节奏感画出来。

二、填色

1.上色之前给背景填充了一个颜色，我一般不会在纯白的画布上填色。果子、树枝、叶子都分图层上固有色，方便后面修改。

2.果子图层根据光源用喷枪笔刷画出颜色的变化，离光源近的偏橙黄，远的偏红紫。

3.每块的颜色上完之后，根据光源画出投影。

三、刻画

1.在果子的图层上新建图层，把把画布放大了去画出每个果子的形状与遮挡关系，形状不好的要及时去调整。

2.用喷枪画笔把背景加上简单的光影，让背景不至于太单调。

3.继续细化，不断的去调整果子的关系，想把果子画的晶莹剔透一些，所以反光画的比较强烈，最后再点上高光，水润的感觉就马上出来啦。

 4.给视觉中心的果子加了一些高光点，增加质感。

5.利用色阶、色彩平衡等图层调整画面，让光影更强烈，再用杂点笔刷加一点光点，最后打上id就完成啦。

原文地址：空青肆绘（公众号）

作者： 风绽

转载请注明：学UI网》插画教程 | BlingBling小静物绘制过程

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

一旦让红绿色接近，

就会被大众盖上红配绿是最丑配色的骂名。

如此遥远的红绿色跨度，怎么配才会好看？

调整高低的纯度进行配色，则是在告诉我们，感情上有一定的性格差异才能取长补短，让两者色彩的使用不在那么单一化，而明度的亮暗变化像是女生时常过山车的情绪，对错完全看脸色。

当你用礼物表达情愫而不知如何使用时，红绿不同的纯度与明度配色下，可以找到最适合的那个情景帮助你俘获对方的芳心。

还是那个礼物，加入红绿配色和文字后，过高的纯度配比使得产品变得尤为浮夸，加上本身产品的金色与高纯度的红绿结合在一起时，仿佛印证着那个永远都无法靠近的诅咒。

阿绿深爱着阿红，为了阿红它可以舍弃自己鲜亮的外表，改变自身明度的亮暗，让阿红成为整张画面的聚焦点，对比之下，我们看到的不是诅咒让他们无法靠近，而是付出才是打破诅咒的唯一真理。

但是诅咒的封印过于强大，相同的配色换了一个产品后又回到了原点，面对困难，红绿色选择了共同进退，一起调低了纯度的色彩，达到符合产品本身的调性。

多尝试改变配色的比例是生活柴米油盐之外所带来的的仪式感，也是维护感情最可靠的良药。

一个吹风机，红绿对等的配色，像是在诉说着平淡无趣的生活。

试着改变配色的比例，给生活做出一些改变，让吹风机下生活的朴素感，多些有趣的行为。

不仅这样，还可以尝试改变配色的方向和形状，当阿绿跌跌撞撞的奔向你，对阿红说着：你也不能一个人离去，我们无论如何要在一起。

红配绿的诅咒在这一刻被真爱彻底瓦解，就像现在的配色质感，证明了红配绿是真的好看。

正逢圣诞节更适合

红配绿的案例

▽

步骤1：

在画布中填充红色底并用绿色作为描边，将圣诞节英文放置到画面最上方居中，并利用五角星填充到文字中形成独特性。

步骤2：

阿绿爱上了阿红，为了给阿红过节日，想着法的变出圣诞树的阿绿让自己成为这个圣诞节最绿的仔。

步骤3：

线条绘制一个三角区域，利用三角结构的构图方式，对齐进行放置文字编排。

步骤4：

合理使用参考线会帮助排版更加快捷，并且整个版式会显得干净利落，分布均衡，四角的小铃铛是阿绿给阿红特地准备的小心思。

最后我们看下版式的框架，配色与构图是相互存在的，好用的构图如果没有好的配色基础，也依然难以做出好的设计，就是这样，喵~~~

，

试着改变配色的比例，给生活做出一些改变，让吹风机下生活的朴素感，多些有趣的行为。

原文地址：修先森撩设计（公众号）

作者：修先森

转载请注明：学UI网》阿红爱上了阿绿，要怎么配才会好看？

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

作者：Clippp

转载请注明：学UI网》让数据更美！5个实用的数据图表设计技巧

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务