精选案例

小贴士:网站设计如何使用单色调色板

点击数:发布时间:2018-07-26

1.基色选择

zoldi.jpg

关于使用单色色彩,我认为在网站设计中最难的部分是如何选择你要使用的颜色?现在我们只有一种颜色的选择,那么最好的选择是什么?

你可以考虑一下你想要设置的主题或情感,然后围绕你已经联想到的关键词来选择一个最适合的颜色。

· 红色:爱,激情;

· 蓝色:和谐,信任;

· 绿色:希望,自然;

· 黄色:有趣,充满能量;

· 粉色:浪漫,温柔;

· 紫色:信仰,梦幻;

···

其次,你可以考虑你的品牌色,是否有一种颜色可以从你的logo或品牌色中提取出来,并可以成为一种合适的颜色选择?

最后,考虑饱和度。单色调色板是使用大胆、明亮、完全饱和的色调,还是选择更柔和、更轻松的色调?它可以是两者的结合吗?根据颜色的选择,当你在使用相应的辅助色的时候有很多的选择。

2.明智地使用浅色泽、色值和暗色泽

icon-foil.jpg

TOC.jpg

对于单色色彩方案,你需要色彩有一些变化,你需要掌握一些色值的基础知识,通过浅色泽和暗色泽,你可以创建一个颜色的不同版本(你几乎可以把每一种版本都看成是一种额外的颜色)。

· 浅色泽:通过在基色中添加白色,可以使它更轻;

· 色值:通过自基色中添加灰色,使其更加丰富,但在饱和度上有缺失;

· 暗色泽:通过在基色中添加黑色,使颜色更暗,

正如你使用包含多种颜色的调色板一样,通过调整基色的浅色泽、色值和暗色泽,为每种颜色选择一个角色,并在整个设计中坚持使用它。你可能会发现你有更多的“颜色”而不是一个单一的调色板。

你需要确保颜色的变化与下一个步骤之间有足够的对比,这样颜色的变化对于用户来说就显而易见了。

在实际的工作中一些最有趣的单色效果病史在网页设计中,而是在与打印项目有关的平面设计中。像foiling或UV这样的技术,可以在cardstock或宣传册上表现的更好,更漂亮,比如Icon和TOC(上图)。额外的图层为单色设计增添了质感和专业的技巧感。

3.与其他元素相辅相成

futuramo-berry.jpg

cuberto.jpg

使用单色设计最困难的部分是,你需要将不同的元素融合在一起而不会有个体的感觉,以保持yoghurt的注意力在设计中。颜色差异越小,就越难以把控和实现。

比如,当你选择使用一个黑色的单色调色板时,你需要考虑文本和其他元素需要怎么表现以建立流动和对比。使用单色的简单元素可以防止设计变得太过繁杂。

· 使用颜色叠加:保持颜色的完整性,将图像转换为黑白,然后再添加覆盖,以保持统一。

· 使用粗体文本:考虑用较厚的笔画来帮助“提升”它们在单色背景上的对比。

· 使用阴影和其他视觉线索:一些元素需要一个额外的定义层,例如通过使用一个投影来创建元素之间的分离感。

· 使用插图:对于一个更具现代感的设计来说,用插图来搭配单色是最好的选择之一(同时,这也是在颜色上保持统一的最简单的方法)。

· 匹配颜色和图像:如果你在单色调色板上使用全彩照片或视频,将图像中的颜色与设计中的颜色相匹配,如Cuberto(上图)。

4.大胆地使用一种流行色

一些与Material Design相关的最流行的颜色往往具有明亮的色调。这是一个大胆的色彩选择,单色设计也不例外。

它只需要一个有趣的、明亮的东西来建立主题和情绪。流行的选择包括粉色、橙色和青柠绿。

明亮的单色调色板的好处在于它可以创建足够的空间。在颜色的使用上你有很大的空间,所以你可以很容易地创造出一系列的色调。

如果你选择了正处于流行阶段的东西,一定要注意你的设计,如果颜色趋势开始改变,你或许需要用别的东西来替代你的单色方案。你是选择另一个流行色吗?比如根据季节来选择对应的代表色——冬天的蓝色或秋天的橙色...这为你提供了一种时尚感和及时感,并给你一个理由,让你时不时地更新你的设计。

5.暗色系营造现代感

并不是所有的单色调色板都有“颜色”,在实际的网站设计项目中,我们更多的是采用深色的调色板,使用的是黑色或灰色(或者是蓝到几乎已经发黑的深蓝色)。

这些深色方案其实很有趣,而且给人以一种独特的感觉。不过,它们也很难创造,因为没有太多的空间去建立色彩之间的差别和对比。

暗色调色板的确有一种光滑而现代的感觉。他们最适合于没有大量内容的设计,比如网站设计的导航页或画册或其他小册子的“封面”页。你几乎总是需要将一个深色的单色与更轻的东西搭配,以确保内容可以轻松阅读。

6.尝试各种各样的单色

你完全可以打破单色调色板的规则,在设计中加入第二个强调色,我们称它为“Almost monochromatic”。

Almost monochromatic可以解决你在单色设计中遇到的许多问题,包括如何创建容易看到呼吁行动的按钮元素。

关于如何选择第二种强调色,你可以选择来自于色轮的另一侧,以实现最大的对比度。将其用于需要用户查看和交互的重要元素。


上一篇:解析移动端如何完美推送信息的7个注意点
下一篇:5种设计技巧,让你的手机UX与众不同