设计神器Mobile Palette Generator!自动生成UI设计移动端配色方案

时间:2021-12-17
类别:配色达人
观众:1.7w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

设计神器Mobile Palette Generator!自动生成UI设计移动端配色方案

平⾯设计的三要素是:⾊彩、⽂字、图⽚,UI 设计当然也离不开这三要素。

⼤家刚⼊⾏ UI 的时候可能或多或少的被配⾊折磨过吧,选了⼀个主⾊,但是不知道怎么应⽤互补⾊、对⽐⾊这些⾊彩理论去寻找合适的辅助⾊点缀⾊。 接下来要介绍的这款神器,以及它另外四个同样神奇的神器朋友,将会帮你打消⾊彩⽆助的阴霾。

神器介绍

Mobile Palette Generator(移动端界⾯调⾊板⽣成器),看中⽂译名不难看出是针对移动端推出的产品。功能专⼀,只做⾊彩,并且还频繁驻扎 Product Hunt ⽇榜第⼀。

设计神器Mobile Palette Generator!自动生成UI设计移动端配色方案

使用方式

⾸先明确⼀下界⾯逻辑哈,跟常⻅的⼯具⼀样,采⽤左右布局,左边为操作⾯板,右边为结果⾯板。

设计神器Mobile Palette Generator!自动生成UI设计移动端配色方案

操作逻辑跟布局息息相关,我们需要先在左边的操作⾯板中来定义 Main Color(主⾊),主⾊的定义有:拖拽取⾊标、滑动取⾊条、输⼊Hex ⾊值三种⼤家习以为常的⽅式,还有⼀种就是选择⽹站提供的六种预设颜⾊。

每次选择的主⾊⾊值也会在取⾊器下⾯做映射,并且可通过 Copy Link 复制当前⾊值。 定义完主⾊,系统会⾃动⽣成与之相配的 SECONDARY COLOR(辅助⾊)、ACCENT COLOR (强调⾊)

设计神器Mobile Palette Generator!自动生成UI设计移动端配色方案

辅助⾊和强调⾊⽣成之后,除了 HEX ⾊值外,还会显示出 HSB,并且可以对它们进⾏微调: Saturation(饱和度)、Brightness(亮度)都可以拉动滑块进⾏定义。 这些主⾊、辅助⾊、强调⾊都⽣成之后,在右侧的结果⾯板可以实时看到这些颜⾊的应⽤效果, 会按照主⾊ 60%、辅助⾊ 30%、强调⾊ 10%的科学⽐例进⾏⾃动分配,⾮常直观:

设计神器Mobile Palette Generator!自动生成UI设计移动端配色方案

并且有这三种颜⾊的应⽤点说明,⼤家对层级不敏感的话也可以在这⾥寻求答案。

设计神器Mobile Palette Generator!自动生成UI设计移动端配色方案

神器的朋友

物以群分,神器还有四位同样优质的朋友需要跟⼤家简要介绍⼀下。在Mobile Palette Generator 的右上⻆可以看到它们四个的名字:Gradient Buttons(渐变按钮)、2 Color Combinations(双⾊搭配)、Material Palettes(调⾊盘)、Colorion(⾊卡)。

设计神器Mobile Palette Generator!自动生成UI设计移动端配色方案

Gradient Buttons(渐变按钮)

设计神器Mobile Palette Generator!自动生成UI设计移动端配色方案

顾名思义,是⼀个专⻔提供各⾊渐变⾊卡的⼯具,之所以名叫「按钮」,是因为⻚⾯中中的⾊卡均为按钮样式,点击这些⾊卡和按钮,将直接复制⾊值代码,我们就可以去到各种软件⾥⾯复制进去了。对开发⼩伙伴来说⼗分便利,对设计师伙伴来说,需要抽丝拨茧看⼀下 Hex ⾊值才能应⽤到设计稿中。

设计神器Mobile Palette Generator!自动生成UI设计移动端配色方案

2 Color Combinations(双⾊搭配)

双⾊为主⾊+辅助⾊,⽹站会提供⾮常丰富的⾊彩做搭配展示,左右两侧简单来说就是两种颜⾊ 分别为主⾊、辅助⾊时的效果展示。因为是双⾊嘛,所以中间的「复制⾊值」按钮也是两个,供⼤家⾃⾏决定取⾊顺序。配⾊不熟练的同学也可以尝试着来找找灵感

设计神器Mobile Palette Generator!自动生成UI设计移动端配色方案

Material Palettes(调⾊盘)、Colorion(⾊卡)

⼤家应该也⽤过各式各样的配⾊⼯具,调⾊盘和⾊卡也是这样⼀个⽹站,⾥⾯有各式各样的⾊ 卡,每⼀套有五种颜⾊,每个圆形⾊卡只要⿏标放上去,就可以通过点击,复制下来单⾊的色值。

设计神器Mobile Palette Generator!自动生成UI设计移动端配色方案

结语

不是每位设计师的⾊感都很到位,确实有天⽣⾊感很好的⼈,但⽆论是谁都需要⼀个锻炼的过程,那这个神器可以很好的帮⼤家练习配⾊。虽然⼗分⽅便,但是希望⼤家把它当成⼀个引路⼯ 具,不要依赖它,毕竟创造美好事物的是你⾃⼰。 好了,感兴趣的朋友快去试试吧~相信它可以帮你很多~

神器链接:Mobile Palette Generator

本⽂编辑:CCOA

使用过这款神器的朋友也使用过...

11 收藏 39

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 快来秀出你的观点

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了

优优教程网 365 天打卡计划

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片