颜色

有意义的颜色

颜色在界面设计中的使用应同时具备品牌识别性以及界面设计功能性。众所周知颜色是相当感性的东西,设计中对颜色的运用首要应考虑到品牌层面的表达,另外很重要的一点是颜色的运用应达到信息传递,动作指引,交互反馈,或是强化和凸现某一个元素的目的。任何颜色的选取和使用应该是有意义的。众所周知颜色是相当感性的东西,设计中对颜色的运用首要应考虑到品牌层面的表达,另外很重要的一点是颜色的运用应达到信息传递,动作指引,交互反馈,或是强化和凸现某一个元素的目的。任何颜色的选取和使用应该是有意义的。

JUI Colors

JUI 的色板由 8 种基本颜色组成,每种基本色又根据明暗变化衍生出 5 种颜色。

.bg-light

.dker
.dk
.bg-light
.lt
.lter

.bg-dark

.dker
.dk
.bg-dark
.lt
.lter

.bg-black

.dker
.dk
.bg-black
.lt
.lter

.bg-primary

.dker
.dk
.bg-primary
.lt
.lter

.bg-success

.dker
.dk
.bg-light
.lt
.lter

.bg-info

.dker
.dk
.bg-dark
.lt
.lter

.bg-warning

.dker
.dk
.bg-black
.lt
.lter

.bg-danger

.dker
.dk
.bg-primary
.lt
.lter

颜色和交互

设计元素本身由于交互行为会引发一系列细微的视觉变化,而元素本身的颜色变化有时也能很好的实现这一目的。例如当鼠标 hover 某个特定元素,就视为浮起,对应颜色就用相应的更亮色,例如按钮,菜单都做了这样的效果。

主题

上面的 8 种颜色中,主色.bg-primary是比较特殊的,一个是它代表了一个品牌的调性,另一个是界面其他元素很多也是基于主色的,例如链接颜色,主按钮颜色,菜单高亮颜色等,所以修改主色的颜色可以做到最简单的定制主题。