界面UI设计的五大要素

一款 App 或 Web 产品，从用户体验的角度包含了战略层、范围层、结构层、框架层、表现层。而作为 UI 设计师，如果连「表现层」的内容都还一知半解就去盲目地学习其他领域，这是不提倡的。

这里说的「表现层」是指视觉设计层面，在界面的视觉设计中同样也包含了 5 个视觉要素：色彩、文字、图标、图片、空间。一个出色的界面设计，必然是将这些要素做到了淋漓尽致。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

本文结合大量优秀的案例，并以通俗简练的语言，系统地介绍了这 5 个视觉要素。篇幅略长，耐心读完你一定会有收获!

适合阅读人群：视觉设计师、交互设计师、平面设计师、设计爱好者等。

文章大纲如下：

那我们就开始吧 : )

要素一：色彩

1. 色彩基础概述

1.1 色彩三属性

• 色相(H)：即色彩的相貌、种类和名称，比如红、橙、黄、绿等颜色的种类就叫色相。

• 饱和度(S)：即色彩的鲜艳程度，也称纯度。

• 明度(B)：即色彩的明亮程度。

人眼看到的任一彩色光都是这三个属性的综合效果。

1.2 色彩寓意

同一色相的不同明度和不同饱和度，也会对人产生不同的心理感受。我在这里归纳整理了各种色彩在通常情况下代表的不同寓意，仅供参考。

红色(Red)：热烈、喜庆、热情、浪漫、危险

橙色(Orange)：温暖、食物、友好、财富、警告

黄色(Yellow)：光辉、明亮、尊贵、权力

绿色(Green)：健康、自然、清新、希望、安全

青色(Cyan)：朝气、脱俗、真诚、清丽

蓝色(Blue)：平静、纯洁、清凉、科技、沉稳

紫色(Purple)：神秘、高贵、优雅、浪漫、妖艳

黑色(Black)：深沉、庄重、严肃、邪恶、死亡

白色(White)：纯洁、神圣、干净、高雅、冷淡

灰色(Gray)：平凡、随意、苍老、冷漠

2. 色彩搭配

色相对比：两种及两种以上色彩组合后，由于色相差别而形成的色彩对比效果称为色相对比。

色相对比的强弱程度，取决于色相之间在色环上的距离 (角度)，距离 (角度) 越大对比越强，反之对比越弱。

一般界面的色彩搭配主要包括三种颜色：主色调、辅助色、点缀色，搭配比例分别为6:3:1。

2.1 同类色搭配

色环上相距0°的颜色为同类色，一般常用同一种色相的不同明度或不同饱和度的组合方式，例如蓝与浅蓝，红与粉红等。同类色搭配对比效果统一、清新、含蓄，但也容易产生单调、乏味的感受。

2.2 邻近色搭配

色环上相距30°左右的颜色为邻近色 ，例如紫与蓝紫，蓝紫与蓝等。邻近色搭配对比效果柔和、文静、和谐，但也容易感觉单调、模糊，需调节明度来加强效果。

2.3 类似色搭配

色环上相距60°左右的颜色为类似色，例如橙与黄，黄橙与黄绿等。类似色搭配对比效果较丰富、活泼，同时又不失统一、和谐的感觉。