APP设计案例参考：如何为品牌APP制定一套合适的配色方案

当用户在使用某APP时，首先会注意到的就是产品的视觉表现，特别是产品的配色方案。

换句话说，APP的配色方案将会直接影响着用户在使用产品时的情感。如果品牌对色彩的运用不加以克制，介面就会显得花俏而缺少层次;相反，如果APP在配色上过於拘谨，则容易导致介面保守，难以激发用户的情绪。

下面，Inspirr将会以泰国知名物流综合服务商Bee express为APP设计案例：如何为品牌APP制定一套合适的配色方案，来说说如何为品牌APP制定一套合适的配色系统。

【Bee express品牌介绍】

Bee express是泰国知名物流综合服务商，主营业务包含快递、快运、仓配，以及速递柜服务等，致力为企业及个人提供高端的物流配送一体化解决方案。

APP设计案例参考：如何为品牌APP制定一套合适的配色方案

为品牌APP制定配色方案之前，首先我们需要搞清楚，每个颜色所具有的性格特徵和表达方式，以及明白每种颜色的正方面特徵，避免产品主色调的负面特徵会给品牌/产品带来负面影响。

另外，在为品牌APP配色过程中，我们还需要注意以下问题：

☒ 高饱和度色彩容易造成视觉疲劳及产生幻觉。

☒ 低饱和度色彩则会让介面显得灰蒙蒙、非常压抑的感觉。

☒ 没有规律且过多的配色，会让介面看起来非常凌乱且毫无层次，建议使用6：3：1的色彩配比。

☒ 太轻柔的色彩会分散用户的注意力，同时给人一种没有重点且轻飘飘的感觉。

☒ 不要将对抗色重叠容易造成视觉闪烁。

第一步：为APP定位品牌色

虽然设计是相通的，但不同设计领域的配色规则，依然存在巨大的区别。就拿更换品牌色来说，更多是根据公司商业策略进行调整，然後通过品牌视觉上的变更将讯息传递给消费者。

Bee express前期的主色调及视觉形象以橙黄色为主。为了不影响原有色调前期的视觉传播，本次品牌色彩升级是在原有基础上调整SHB数值(即色相、饱和度、明度)，让色彩更具视觉冲击力，保证後期产品的易用性和延展性。

APP设计案例参考

▲ 调整後的主题色使介面更加明亮清晰，为信息传递、引导操作，以及品牌价值都带来更大的提升。

第二步：同色系为辅助色

产品以同色系为辅助色，既可加深品牌色的感知，让介面看起来更有层次感，同时在介面色彩上保持一致性，给人一种协调统一的感觉。

APP设计案例参考

▲ 同色系是指与品牌色H(色相)一致，通过改变S(饱和度)与B(明度)变化所产生的色组。

使用同色系完成项目虽然能保证介面色彩的一致性，但是对於中大型项目而言会略微过於单调且缺少层次感。对此，我们需要考虑其他色彩作为辅助色，设定不同任务属性和传达不同情感;同时，搭配中性色(黑、白、灰)，赋予介面更多变化和层次。

第三步：提取其他颜色作为辅助色

APP设计案例参考

根据品牌色H(色相)为基础，在色相环(如上图)中不断递增、递减15°，最终得出24个颜色。(如下图)

APP设计案例参考

问题来了，如何从这24个颜色中选取合适的辅助色?

这需要满足两个条件，

❶ 与品牌色有明显区分

❷ 色彩搭配不能过於突兀

APP设计案例参考

基於以上条件，Bee expres选取了上述三种颜色作为介面的辅助色，既能保证页面元素不会相互冲突，更加协调有质感，又能与品牌色有明显的区分，用在需要特别强调某个元素时会非常有效。

最後一步，视觉统一感官校准

每种颜色都有自己的「感官明度」，即发光度，因此当我们将所有色彩都放在同一介面时，会发现由於颜色本身自带的感官明度属性有所区别，导致视觉上会有明显的明暗差别，因此我们需要通过发光度的调整，来进行最终的色彩校正。

APP设计案例参考

▲ 依次在辅助色上叠加一层纯黑图层，将该纯黑图层颜色调整Hue(色相)，就可以通过无彩色系下的明度色值，并进行对比使色彩视觉感官保持一致，发现：青色和蓝色属冷色调，需加深发光度。

根据上面同色系的明度、纯度对比规则，对所有定义的辅助色进行明度和纯度的输出，最终获得辅助色色板。

APP设计案例参考

▲ 保持色相一直，通过调整饱和度和明度，并分别往浅色/深色方向按均匀数据增加，各产生5个坐标值。

APP设计案例参考

▲ 因为最左侧的3种同色系，其明度过低，颜色非常接近黑色，色相在肉眼也几乎趋於一致，因此建议删除，并最终获得基於品牌色推导出的全色系色阶色板。

看看最终成果：

APP设计案例参考

【最後】

要制定APP设计的配色方案，往往需要从根据行业类型和视觉诉求的需要，选择一种合适的主调色彩，作为画面的整体色彩倾向，然後基於主色调衍生1~3种辅助色。当然，除此之外，在规划一套标准的色彩系统时，还需要考虑中性色规范、颜色使用规范等，最终才能按照色彩组合的原则真正完成设计。