来源:网络 作者:佚名
在不同页面的功能icon上，我们丰富了icon的表现形式，同时将新的对比色配色加入到每个icon元素中，增强了icon的活力和吸引力，让每个icon看起来更精致。
而在功能插图中上，我们采用了与icon统一的配色和表现形式，让页面中的所有元素具有统一的品牌感。
最终，我们将新的配色规范逐步落实到网易七鱼所有的Web端和Mob端页面中，使七鱼的整体官网设计焕然一新。在新的官网页面中，不仅提升了整体的设计品质，同时也解决了前面分析的问题，整体提升了15%的客户留存率。
通过这个案例我们可以发现，整体配色的改变，可以极大的提升官网对于用户的第一印象。用户往往在进来的一瞬间就决定了对官网的印象，并最终影响用户是否进一步阅读，而配色则是其中非常重要的一部分，正确的配色能够让用户更愿意停留并阅读内容。
（2）推广活动页面中的对比色应用
在推广页面的设计中，通常需要用营造强烈的视觉冲击，以达到快速吸引用户并传递信息的目标。这就需要大面积的对比色，来达到强烈的对比效果。而在较大面积使用对比色时，整体色彩的主次和整体平衡至关重要。
我们可以来看一个案例：
可以看到，整个页面主由橙色和深蓝紫色两个主要对比色构成。大面积的对比色产生了强烈的视觉冲击，让整个页面充满了吸引力。整个画面用最强烈的对比色重点突出了两个主要的人物角色，从而吸引用户注意并进行阅读，最终将用户引导至购买入口。至此，整个页面的任务也算是完成了。
在推广页面中，我们需要注意的是，重点信息并非只能是文字内容，也可以是最吸引用户的画面核心元素。
除了掌握以上的几种基本色系的配色方法外，大家可以在此基础上尝试更多的配色风格。比如在同色系、对比色系的基础上，有目的地加入色彩元素丰富色调，在保持整体色彩层级的同时，加入更丰富的变化，从而达到配色目标。
更清新的“同色系”配色
更丰富的“同色系”配色
更多彩的“对比色”配色
复古的平面风配色
而对于很多初学者来说，我建议大家能够首先明确配色的目标，在配色时保持色彩层级的精简明确。在此基础上，循序渐进，逐步去尝试更多地配色风格。只有这样，才能养成良好的配色习惯。
四、提升品质感我们按照之前的方法，正确的确定了配色的目标，选择了合适的配色方向，并逐步完成了整体的设计排版。很多同学到这一步之后，就觉得作品已经完成，便停止继续深入了，而这也是初级设计师经常容易出现的问题。这个时候的作品，从整体上看并没有太多问题。但是当用户被页面吸引，开始仔细欣赏作品时，往往会发现作品没什么看点。
出现这种问题的原因，就是作品缺乏足够的细节和品质，导致作品不够耐看。就像一本书有着精美的封面，但是打开以后却平淡无奇，最终对整本书都非常失望。
想要让作品更优秀，除了基本的版式和配色之外，往往还需要更深入地去雕刻作品，让作品带有一种更高级的“气质”，而这种“气质”就是我们所说的品质感。
1.什么是品质感？品质感是对于设计作品来说，是一个综合性的评价。我们可以将这个词分为“品”和“质”，“品”代表物体本身的品相和细节，而“质”则代表质感。
怎样的设计才算是有品质感的？如何提升设计的品质感？我们可以首先来研究一些优秀的设计案例，寻找其中的共同点。苹果的产品和页面设计，是比较公认的具有较高品质感的，我们可以来看一下苹果的部分官网页面。
苹果的所有产品和页面，从产品图到页面的设计都非常有质感。为什么这种质感会如此吸引我们，令我们觉得非常舒适？如何才能让设计产生质感？
要了解如何产生质感，首先要了解一下物体产生质感的原理。
当光线照射在富有质感的物体表面时，会产生不同程度的漫反射，最终反射进入我们的眼球后，就会显现出一层富有质感的渐变色。所以想让物体获得质感，渐变是一个关键要素。
我们可以利用这一原理来提升质感。下面的案例，是FisnDesign组件库官网的一个局部页面。其中就运用了大量的渐变色质感原理，将渐变色融入到icon和页面元素中，从而提升了整个页面的质感。
渐变只是是获得品质感的关键因素之一，苹果官网将渐变这种原理加入到页面和元素中，配合精美的产品图片，让页面保持了非常高的品质感。那么是否还有其他要素的存在，能够提升质感呢？
仔细观察苹果的所有元素设计，在渐变的同时，还加入了微量的投影和丰富的细节，使所有的元素在简洁中充满了细腻的质感。
我们可以总结一下，让设计获得品质感的几个要点：细腻的渐变+轻微的光影+细节/纹理。
发现这些原理以后，我们可以尝试将这些原理运用到设计中，从而提升设计的品质感。下面的几个案例，就是我在研究时所做的一些案例，在不同的页面细节中都可以看到以上原理的运用效果。
