Before you develop a marketing strategy, you should ask yourself what your business strategy is. Your marketing strategy should be based on your business strategy and brand strategy. Your marketing strategy is not equal to your business strategy.
如何做UI设计的配色
好的用户界面设计是字体、颜色、版式、平面元素在视觉效果上达到有机统一,同时也考虑到数据流和用户体验的平衡关系。现在公司主要用Drupal,所以今天主要说说我对于Drupal网站UI设计在色彩界面这一部分的小小心得。
下面先来科普一下关于色彩的基本概念:
基色、间色、复色
配色的第一步是选择一个主色,我建议从选择一个明亮,柔和的基色或间色作为开始。这样的选择往往是相对安全的,关键看你接下去如何使用它以及选择合适的色彩去搭配它。
下面的颜色是app中最经常使用的颜色。这些颜色用在按钮,图标和菜单等视觉元素上都有着非常好的效果。且记不要过度使用色彩,仅在需要引导用户进行操作的地方才使用色彩。
单色
单色是指通过对同一颜色,加上10-90%白色或黑色的透明度层后获得的一组颜色。由于他们的色相相同,而又能产生和谐的对比效果,因此单色的应用在设计中非常重要。
通过调整黑色或白色层的透明度,可以得到不同的单色,他们互相之间都能很好地调和。
当你对于颜色拾取器掌握得更加熟练后,你可以通过不改变色相,而调整明度和饱和度的方法来获取一个新的单色。简单点说就是PS拾色器当中B的值作调整,其它不动。
邻近色
邻近色是指在色相环中相邻的色彩。很显然这样的配色方案不会产生高对比度。当你觉得自己的设计在色彩上太过单一时,可以使用邻近色来增加色彩上的变化,从而使你的设计更有层次和活力。
比如红色是橙色的邻近色,而橙色又是黄色的邻近色。
将色相值(PS拾色器当中H的值)增减 30-50,就能得到一个新的邻近色。
互补色
互补色是指色相环中,相对(互为180度角)的两个颜色。互补色让人产生强烈地对比效果。例如,紫色按钮在黄色背景上非常的突出。当然,这还取决于每一种颜色的饱和度。互补色经常用在需要突出显示的按钮、警告等地方,但使用不当也有可能使你的设计显得非常突兀,通过实践来理解是最好的,请记住: 对立对比 。
将色相值增加整个色相条宽度的一半(也就是色轮中相对的颜色)可以得到当前颜色对应的互补色。
中性色
中性色是指由黑色、白色及由黑白调和的各种深浅不同的灰色系列,中性色不属于冷色调也不属于暖色调,它可以起到中和剂的作用。过多的使用色彩会使整个设计缺乏可用性,而中性色却可以帮助将用户的注意力拉回到内容本身。
在使用中性色时,应尽可能避免使它与主色产生冲突,因此建议总是将中性色的饱和度设为接近0的值。
上面就是一些色彩的基本概念,下面就来说说色彩在UI设计中的运用。
在设计中主色往往是比较容易确定的,但背景和文字颜色有时却很难把握。它们的搭配很微妙,需要设计师有足够的经验将它们进行组合并调整到最佳。现在我来说一下UI设计中对色板的运用。
蓝色色板
蓝色是所有网站或App UI中使用最多的,它给人安静,宽广,值得信任的感觉,像Twitter,Facebook,IBM,LinkedIn等商业巨头都采用了蓝色作为它们的主色。而且蓝色也更容易与其他颜色搭配使用。
灰色色板
我们应该始终避免在UI中使用纯黑(#000)。纯黑色和其他颜色搭配时,产生的对比过于明显。
如果你要使用灰色,请使用明度值低于30%或者高于70%的灰色。平均明度的灰色显得单点而且不能与其他颜色很好的搭配。
自定义色板
除了上面推荐的蓝色和灰色色板,也可以使用任何颜色来定制自己的色板,不过这需要你来对色板的颜色进行互相搭配。
那么如何来定制色板呢?
首先滑动色相(H)滑块来选择一个主色,然后选择与主色相关的其他单色,邻近色和互补色。最后通过调节这些颜色的饱和度(S)和明度(B)来增加色彩对比和活力。
上面就是试着调节的色板,你也动手试一下吧,很简单的。
刚才说色板的时候有提到对比,色彩对比在实际运用中也是很重要的一项。通过有效地使用对比可以使你的内容更加清晰从而让阅读变得轻松。
好的对比,一般会采用色彩的两极,如白与黑,淡蓝与深蓝,高亮与低亮。那么多颜色我就不一一举例啦,感兴趣的朋友可以自己去动个手,会有不一样的体验哦。
在一些情况下,你还需要根据品牌或可用性来权衡UI的明暗。比如iBook的应用中,当外界环境变得昏暗时,它会自动切换到暗色的阅读模式。这会让你在阅读的时候更加舒适。
明亮UI的配色原则(如上图最左)
- 内容应该比背景明亮。通过亮度的对比,可以使你想突出的内容轮廓更加清晰易读
- 不要过度使用颜色。颜色总是可以抓住人们的视线,但过度使用却会往往会人们忽视主体内容,因此,仅在需要进行突出提示的地方,如重要的按钮以及需要突出的状态时,使用颜色。
暗色UI的配色原则(如上图中、右)
- 不要使用纯黑,那样很难看到细节,另外与白色的对比会显得过高。
- 如果你必须使用黑色,那么请选择使用暗灰作为替代,这样可以消除过高的对比度。
- 当使用其他颜色时避免同时使用灰色。例如:深蓝与蓝色更相配。
在界面中设计按钮时,你要注意颜色的含义。没错,不同的颜色代表的含义也是不同的,比如:
- 红色:热烈 喜庆 激情 避邪 危险、热情、浪漫、火焰、暴力、侵略
- 橙色:温暖 食物 友好 财富 警告
- 黄色:艳丽 单纯 光明 温和 活泼、明亮、光辉、疾病、懦弱
- 绿色:生命 安全 年轻 和平 新鲜、自然、稳定、成长、忌妒
- 青色:信任 朝气 脱俗 真诚 清丽
- 蓝色:整洁 沉静 冷峻 稳定 精确、忠诚、安全、保守、宁静、冷漠、悲伤
- 紫色:浪漫 优雅 神秘 高贵 妖艳、创造、谜、忠诚、稀有
- 白色:纯洁 神圣 干净 高雅 单调、天真、洁净、真理、和平、冷淡、贫乏
- 灰色:平凡 随意 宽容 苍老 冷漠
- 黑色:正统 严肃 死亡 沉重 恐怖、能力、精致、现代感、死亡、病态、邪恶
应该合理地使用色彩来分别表示不建议的操作,肯定的操作,链接以及未激活的状态。避免使你的用户在使用这些按钮或功能时感到疑惑。比如,不要使用绿色按钮来作删除操作,绿色一般都是代表肯定正确。一般会用红色按钮来作删除操作,表示不建议或者危险。蓝色代表平和稳定,一般用来作中性操作,如:取消、编辑等。这些是运用最普遍的。当然并不是说不能使用其他颜色,只要颜色的含义与操作不冲突,都是可以的,毕竟好看的颜色那么多,不用就太可惜了。
当然如果你拿不定主意,不知道该怎么选色,那么你可以留意观察周围的一切。当你看到一张美丽的图片,一件东西或一副数字作品时,作为设计师你第一个注意到的可能就是那美丽和谐的色彩。这时你可以拍一张照或做一个屏幕截图,然后将色彩提取出来。这样,你就可以通过这些提取出来的色彩,生成一个新的色板。
主色一般与整个品牌的颜色一致,在图标,按钮,菜单中都会有所使用。次色可以选择与主色色调一致的同色系色彩,也可以使用如对比色,邻近色等与主色存在反差的色彩。次色使用得比较少,仅用在需要引起用户注意的地方,如消息提醒,折扣推销等需要醒目标识的地方。对于背景色,它们用来衬托内容,也可以起到调和整个应用色调的做用。这也是为什么,我们会同时看到明亮主题的UI和暗色主题的UI。
下面来给大家分享一些色板案例(图片来自《DESIGN FOR SCREEN》 ).由于图片是手机拍摄后调整的,会与色板存在色差,色板和色值是我做的,所以是可以用的。大家可以试着搭配看看,同一色板不同的主色调会有不同效果哦。