网页设计网站选对色彩很重要

新闻 2024-9-22编辑：深圳网站建设阅读（）标签： 很重要 设计网站

深圳网站建设【shè】公【gōng】司 帮助企【qǐ】业提升网站形象【xiàng】,彰【zhāng】显公司实力【lì】,PC+手机+微信+小程序【xù】
【模板网站的价格】国际域名+阿里1G空间+备案 一条龙服务
【定制网站的功能】SEO精准营销系统+城市分站+W3C标准
【营销网站的效果】重长尾，重优化，提权重，扩收录，提排名
【量身订制的设计】据据需求量身定制。设计到满意为止
【专属VIP的服务【wù】】24RX365 为您提供1对【duì】1的专属VIP服务

　　配色确实是【shì】一件难搞的事情。它牵涉到文【wén】化【huà】背【bèi】景，受到方方【fāng】面【miàn】面的影响【xiǎng】，在情感【gǎn】含义上【shàng】的理解【jiě】又因人而异【yì】，设计师所【suǒ】面对的问题往往是选择太多，而非太少【shǎo】。

　　配色的方法很多，辅助工具【jù】也不少，但是【shì】令人印【yìn】象深刻的，往往【wǎng】是一些【xiē】颇为有【yǒu】意【yì】思的【de】技巧。今天，小编给大家分【fèn】享【xiǎng】一个配【pèi】色大【dà】师 Patrick Multani 的色彩搭配技巧。也许这10个【gè】技巧，会成为你的配色体系【xì】的可【kě】靠补充~

　　谨记配色策略

　　开始着手挑选配【pèi】色【sè】之前，我【wǒ】常常会翻看 Dustin Senos 关于【yú】设计原则的短【duǎn】文。他在文章中，阐述设【shè】计【jì】原则的【de】方式非常【cháng】有意思，干练而【ér】有趣，“方向优于选择”，“合适优于一致”，“发展性优于总【zǒng】结”。其实如【rú】果【guǒ】借用这种句【jù】式来总结配色也不错【cuò】：“白【bái】色优于灰【huī】色”，“和谐优于错位”，“沉【chén】静优于热【rè】烈”。当我在工作的时候，我【wǒ】会时【shí】刻谨记【jì】这【zhè】些配色策略，它们【men】更像是一种感觉上的规范，就像用户角【jiǎo】色引导UX设计师来【lái】设计体验【yàn】一样。

　　取色一条线

　　当我在调色板上选择色彩的时候，我会倾向于沿【yán】着直线路径来挑选【xuǎn】色【sè】彩，从左到右，从上【shàng】到下，或者【zhě】沿【yán】着【zhe】对角线来选取色彩。这样所获得【dé】的一套配色可以兼【jiān】顾到不同【tóng】的按钮【niǔ】状态(可用/不【bú】可【kě】用，活动/非活动)，兼【jiān】顾到视觉主体【tǐ】和【hé】边框【kuàng】，背【bèi】景等。我们也可【kě】以在取色器【qì】的同一个位置取色，调整色调，获得的一组色度接近色【sè】调【diào】不同但是高度协调的色彩组合。上图【tú】中，中间那个就是【shì】。

　　保持敏感，小幅调整

　　调配这这么多配色方案【àn】，给我【wǒ】最深刻的经验教【jiāo】训就是【shì】：哪怕轻微的色彩调整，都【dōu】会对整个配色方案带来巨大的影响。所【suǒ】以，我觉【jiào】得【dé】在配【pèi】色的时候，要保持敏感，小幅度调整【zhěng】和改变。你可以【yǐ】试着挑选【xuǎn】偏冷或偏暖的灰色，运用【yòng】到你的配色方案【àn】中【zhōng】，你会发现它们会不同程度【dù】地调【diào】和整个【gè】配色方案【àn】的协调度。根据这样【yàng】的策略【luè】，你【nǐ】可以【yǐ】挑【tiāo】选出一【yī】大堆色【sè】彩作为【wéi】备【bèi】选，反复迭代，变得对于微妙的色彩变化更加敏感。

　　善用叠加模式

                                                                                                      网【wǎng】页设计网站

　　如【rú】果你能善用【yòng】混合【hé】模式【shì】，就能创造出令人着迷的配色方案。通过简单的叠【dié】加两个色【sè】块，选【xuǎn】择“Multiply”(乘【chéng】法【fǎ】)混合模式，就能得到匹【pǐ】配【pèi】的【de】第三种色【sè】彩。在白色【sè】背景上，我【wǒ】们还能通过调整透【tòu】明度来快速调【diào】整色彩的明暗。不过【guò】我始终觉【jiào】得在黑色背【bèi】景上来调整色彩更有意思【sī】，搭配【pèi】混合【hé】模式来探索色彩的【de】可能性，总能创造【zào】新的搭配【pèi】。这【zhè】种同色彩的交互方式，为许【xǔ】多经验丰富的设计师所使用。

　　沉静而集中的配色

　　选好色彩【cǎi】是一回【huí】事，在视觉设计中有效地运用它们是另外【wài】一回事。有的配【pèi】色【sè】方【fāng】案非【fēi】常漂亮【liàng】，但是一旦运用在特定的设计项目当中，整个视觉就崩坏了【le】。尽量让配色方案中色【sè】彩不要那么【me】庞杂，让【ràng】整个【gè】设【shè】计【jì】更加沉【chén】静。比如，文【wén】本、图标和边框采用不同类型的蓝色，能【néng】让整个【gè】设计显得协调【diào】。当你想要高亮【liàng】突出什么东【dōng】西的【de】时候，可以采用这种【zhǒng】方法。

　　在不同的背景下查看配色

　　我记得之前参与过【guò】一个可【kě】拓【tuò】展的色彩系统项目，当时【shí】我挑【tiāo】选了大量【liàng】微妙而接近的色彩，当【dāng】我【wǒ】仔细审视【shì】它们的时候发现很【hěn】难区分彼【bǐ】此。这【zhè】个时候，我将这【zhè】些色【sè】彩复制了一份【fèn】，然后添加【jiā】了一个黑色的背【bèi】景，这个时候，色彩和色彩之间的区【qū】别就变得明晰了，让我【wǒ】能【néng】够更好的作出【chū】选择。

　　明艳的色彩更吸引人

                                                                                                                网页设计网站【zhàn】

　　在取色【sè】器【qì】的右上角取色能够找到更加安全、更加吸【xī】引人【rén】的色彩，供你运用【yòng】在配色方案中。色彩越靠左、靠下，色【sè】彩上所叠加的灰【huī】度和黑【hēi】色就越【yuè】多，色彩【cǎi】本身的重量就越重，而过重【chóng】的色【sè】调会在潜意识上【shàng】给【gěi】人以【yǐ】压【yā】力【lì】。所以，我更倾向于使【shǐ】用清晰明亮的色调来进行设计。

　　叠加图层调色

　　想象有【yǒu】一【yī】张半【bàn】透明的纸【zhǐ】，当我们将它【tā】置于色彩上方【fāng】的时候，它能够从视觉上“消【xiāo】减”色【sè】度。我们可以在【zài】PS和Sketch中来模拟这样的“纸”，新建形状，通过调整透明度和混合模式，或者搭配【pèi】使【shǐ】用【yòng】来实现不同的【de】效【xiào】果，我们【men】还【hái】可以调【diào】整纸张本身为白【bái】色或者【zhě】黑色【sè】，在叠加混【hún】合模式下，能对【duì】色【sè】彩的饱和度产生不同的影响。在有的UI设【shè】计项目当【dāng】中，会借【jiè】助这样【yàng】的技术【shù】来暂时调整整个区域的敏感色度，这比【bǐ】改【gǎi】色更加轻【qīng】松，还保持了色【sè】彩之间的协调度。

　　上图中的三种效果：

　　黑色图层，叠加混合模式，不透明度50%(增加饱和度)

　　白色图层，正常混合模式，不透明度50%(变亮)

　　黑色图层，正常混合模式，不透明度50%(变暗)

　　根据前景色来挑选背景色

　　当我选取背景色的时候，我更喜欢【huān】根据【jù】前景色【sè】来搭【dā】配，吸【xī】取前景色，调亮或者变暗，而不是选【xuǎn】择【zé】纯粹【cuì】的中性灰色。这样的方式会让背景色是或【huò】冷或暖的浅灰，给人一【yī】种【zhǒng】协调的【de】感觉。

　　色彩的明暗与前后

　　最【zuì】后，我们应该始终谨记色彩【cǎi】的明【míng】暗所带来的【de】视觉深度原理。在【zài】较深的背景【jǐng】下，浅色会显得更靠前，而【ér】在较浅的背景下，深色会显得【dé】突出而靠前。

• 上一章：网页设计带来的商业机会
• 下一章：全面的移动WEB设计诀窍分享