武汉互联网公司——APP设计中的色彩搭配

作者： 时间：2024-07-31 浏览：

App的色彩搭配能直观、快速的反馈到用户的大脑中形成记忆思维；好的色彩搭配可以加深用户对产品的印象；明确界面的视觉层次，让用户分清主次信息；同时还能给用户赏心悦目的视觉享受。那么，在UI设计时该如何进行色彩搭配呢？

我们可以从App中都包含了那些色彩开始，通常一个App中包含了主色、辅助色、点缀色、背景色这4类，下面就以微信读书为例，武汉网站设计小编进行详细的讲解（个人角度）。

1、 主色

主色是指在配色中处于主导地位的色彩，给用户的第一眼印象，通常是产品的品牌色。

在App设计中，主色一般占有色相色彩的60%的比例；这里指的是60%的界面都使用到的主色比例，而不是使用面积（因为通常一个界面中使用面积最大的是背景色）；还有就是背景色多为浅灰色或白色，它们都属于无色相色彩，因此不涉及到配色过程中。

我们看到微信读书的第一印象，就可以判断它的主色为蓝色，这也是它的品牌色；在标签栏、按钮、图标、注册登陆全都使用了这种纯净的主色，使界面看上去非常和谐一致。



2、辅助色

辅助色与主色相辅相成，辅助色的功能是帮助主色建立更完整的形象，使界面丰富精彩起来，避免画面过于单一。

通常，主色的邻近色、互补色、分散互补色和三角对立色都可以成为优秀的辅助色，但注意辅助色不宜过多，否则就会使界面看上去花哨分散了主题；根据6:3:1原则，辅助色可以占有色相色彩的30%或更少为宜。



在微信读书中，绿色、橙色、梅红、蓝紫色是除了主色以外使用最多的颜色，它们都是辅助色，主要用于功能图标和栏目分类上。

虽然辅助色看起来有点多，但其实都是从主色的邻近色和对比色（及其邻近色）中提取出来的搭配，而且只用在页面中很少的地方，这种搭配技巧既可以丰富色彩的搭配，传递出年轻活跃的产品气质，又保证了整体搭配的和谐统一。



3、点缀色

点缀色是除了主色和辅助色以外的另一种色彩，通常体现在细节上。

其作用是，当页面中主色和辅助色不能满足关键信息的提示时，就需要点缀色来吸引用户眼球，还有就是利用点缀色来平衡画面的冷暖色调。

点缀色通常都是分散的，使用面积小，颜色非常显眼，能与主色形成强烈的对比；一般点缀色是主色的互补色。在微信读书中，使用了香槟金、梅红和红色作为点缀色；香槟金用在文章分享按钮上，梅红色用在点赞图标上，强调其特殊性，红色用在通知及退出登录提醒上，用于警示。



来看看这三种点缀色与主色之间存在什么样的关系，在色相（H）上，3种点缀色为邻近色，与主色为互补色；在明度（B）上，3种点缀色均为高明度色彩，起到强提醒的作用。这种强对比的互补色的点缀色可以快速引起用户注意力。



4、背景色

背景色就比较好理解了，通常为了衬托内容，大多数App都是用浅灰色作为背景色，以白色作为背景色的对比色，来区分视觉层次；建议是可以根据前景色来提取背景色，将其调亮或变暗，这样可以让界面色调更加统一。

在微信读书中背景色是偏蓝色调的浅灰色，而不是纯灰色，背景对比色是在白色里加入了蓝色色相，而不是纯白色，整体对比较柔和，给人清爽通透的感觉。



以同色系配色为主导，多色搭配为辅。

同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性；由于业务的多样化，我们需要多色搭配为辅；多色的辅助颜色，也可称之为功能色，可设定不同的任务属性和情感表达；再搭配中性色黑白灰，赋予更多的变化和层次。

两种配色通过主次、使用比例，可灵活运用在业务的各个场景中，具有非常好的延展性。好了，APP设计中的色彩搭配就到这，接下来武汉网站设计小编还会更新一些其它相关的研究和总结，一定会给你在工作中带来帮助的。