想做好UI配色?只需要这三步!

一套产品色彩需要有哪几种色彩:品牌色+提醒类型颜色(成功、错误、警告)+中性黑白灰颜色(各种字体、背景、分割线颜色等)那么用到的色彩类型:品牌色品牌黑内容底色全局底色分割底色图标色文字链接可点击颜色提示信息错误提示错误提升文字颜色重要文字常规文字辅助文字 1辅助文字 2反白文字或图表次要的反白文字或图表分割线常规分割线(10%)、强调分割线(30%)、最弱分割线(5%)反白:常规分割线(10%)、强调分割线(30%)、最弱分割线(5%)如何确定品牌颜色选取品牌色方面,选择公司 logo 色是最为保险的,便于与公司的品牌标识保持一...

优设文章 2021-07-10

学会HSB色彩模式,让配色有理有据!

念起作为一名 UI 设计师,不免每天都会和色彩打交道,但有时总会苦恼于色感把握不准,让我们配的色彩,总是“不对味儿”。我结合在近期的一些项目中对于 HSB 色彩模式的应用,与大家分享一些结合 HSB(HSV)色彩模式帮助我们进行配色的理论和技巧。也欢迎大家一起讨论,共同进步。

优设文章 2021-04-08

找不到配色灵感?这个网站有全世界设计师的优秀色板!

如果你需要一些配色灵感,我介绍过许多色彩工具,通常都会给出不错的色彩组合,还有从特定主题挖掘色彩搭配,像是 Color Leap 时光机则是查询每个时代流行的配色组合:[link https://www.uisdc.com/color-leap]当然也有很多色彩工具是采用随机显示,相较于有明确主题可能需要更多创造力才行。本文要介绍「Veranda Colors」是最近新推出的调色盘、在线配色选色服务,主要可以随机产生四种色彩,每次点选空格键就重新选色,如果遇到喜欢的颜色可单独固定或微调色彩,如此一来就能在反复不断调整选择的过程中...

优设文章 2021-03-09

超详细!总监出品的B端设计规范指南(三):配色

B 端设计也是 UI 设计的一种,它的输出环境只存在于电子屏幕中,所以统一使用 RGB 色彩显示模式即可。RGB 即光的三原色,因为每个像素点是由 R 红色、G 绿色、B 蓝色三种颜色的不同色彩强度混合而成。所以 RGB 色的表示可以由 3 个颜色各自使用 0-255 中的数值来呈现,比如:这是 RGB 色彩最标准的记录方式,但显然看起来特别的不直观,或者说不方便。

优设文章 2021-02-22

找不到配色灵感?这个网站给你100种选择!

如果平常的工作和设计有关,对于色彩应该也会有一定的敏感度,若对颜色没那么熟悉,其实网络上有不少配色工具可以使用,通常会以不同方式产生调色盘,让使用者在各种颜色里快速选择取用色码,有助于降低色彩选择的难度和时间。之前推荐过一些以特定主题收录的色码表,像是 NIPPON COLORS 就有代表日本传统的 250 种颜色:[link uisdc.com/nippon-colors-free-website-build...

优设文章 2020-11-17

配色不够协调,该如何解决?

配色一直以来都是设计圈内老生常谈的话题,一幅优秀的作品离不开合理协调的颜色搭配。不同的颜色所表达的含义不同。即便是相同的颜色,明度和纯度不同,给人的视觉感受也不同。

优设文章 2020-10-26

筛选了100个配色工具后,我挑出了这25个!

UI 设计中,颜色几乎是最先被感知到的设计元素,好的色彩感知是成为一个优秀的设计师的基础,配色工具层出不穷,辞典酱在筛选了100多种配色工具后,精选了这25个,相信必然帮到你!Cool BackgroundsCool Background 是产品设计师 Moe Amay 创建,是由5个开源生成器整理组成的彩色图像工具集,内置5种不同的背景风格,每一种风格还提供了简单的参数配置。非常的炫酷美观,你可以将其添加到博...

优设文章 2020-08-24

10年经验的资深设计师,总结了这份 UI 配色终极奥义

配色,设计师的世纪难题。从平面到屏幕,CMYK 到 RGB,墨点到像素,色彩越来越丰富,形式越来越复杂。UI 的发展从拟物的繁琐细节中挣脱出来,却在色彩的展现中放飞了自我。

优设文章 2020-07-30

壹周速读:超实用的配色方法小合集

配色是设计师的基础技能,看起来并不复杂,实际却是花样繁多。善于运用色彩的同学能够借助色彩撬动整套设计方案,改变体验,甚至扭转局面。如若你也想提升「配色力」,不妨来看看本期的配色技巧小专题:色彩技巧小合集配色方案当中,不同的色彩占据的比例、承载的功能各不相同。

优设文章 2020-07-27

超多案例!写给新手设计师的配色攻略(二)

在上期文章我们知道了配色的步骤通常是从确定主色开始,再选择与之搭配的副色,最后根据造型、排版等方面调整增加多个点缀色。我们也知道了确定主色调的四种方法,本期将继续讲解如何选择副色和点缀色。往期回顾:[link https://www.uisdc.com/color-matching-strategy-1]如果说主色相对容易建立,那么副色和点缀色的创建就比较有难度了,难在设计师要对色彩语言有深入的了解,同时要有深...

优设文章 2020-03-26

超多案例!写给新手设计师的配色攻略(一)

在纷繁复杂的视觉信息中,设计的首要任务是吸引视觉的注意力。在人的视觉层次中,色彩占据着第一顺位,最先被人的视觉所感知,所以较图形、文字有着在短暂的时间中吸引观众视觉注意力的显著效果,而且有效距离也更远。所以设计作品的合理配色是作品成功的起点。

优设文章 2020-03-25

用一个实战项目,帮你掌握科学的 UI 配色方法

各行各业的设计师每天都在和颜色打交道,UI 设计师设计用户界面也不例外。用户界面是一个设计师用理性思维解决用户感性需求的窗口。如果对色彩的运用不加以克制,界面可能会显得花哨而没有主次;但过于拘谨又容易使界面保守,难以激发用户情绪。

优设文章 2020-03-20