一、从设计工作串联思考框架

我们的初衷是提升视觉（UI/UX）设计师平日工作中的系统思考能力。因此我们在整理框架时，还是基于设计师的工作去分析。

那么设计师的工作是什么？《设计中的设计》一书中提到：“设计不是一种技能，而是捕捉事物本质的感觉能力和洞察能力”。在界面设计中，视觉设计师将这种能力转化成视觉语言，传达给用户，让用户能快速理解并掌握产品的使用。由此可见，我们的日常工作其实是对于视觉语言的运用。

以视觉语言做为切入点，在分析和整理过程中，我们团队发现了两个关键视角：设计师和用户。设计师通过设计价值观推导设计原则，通过设计原则约束设计元素。用户在使用产品中，对有规律的色彩、图形产生风格感知，强烈的风格，会让用户对产品的调性形成认知。

↓ 下图是我们团队对于两视角下设计语言组成的思考框架：

通过该图，能看到设计价值观、设计原则、视觉调性以及视觉风格，在两个视角下的对应关系。下面，我们将基于这个思考框架进一步展开。

二、视觉设计通用思考画布详解

01 设计价值观

作为视觉语言的内核，有效的设计价值观能帮助产品建立用户心智，形成良好的体验，获得用户的认可和信赖。设计价值观随时代和市场变化。影响它的主要因素有：品牌愿景、业务战略和用户群体。

品牌愿景：作为企业为自己确定的未来蓝图和终极目标，品牌愿景相对固定，对设计价值观的影响最直接；

业务战略：业务战略与产品竞争环境相关，是企业通过行业竞争对手确定产品定位，突出产品优势所展开的策略。业务战略随竞争环境和企业发展阶段变化，设计价值观也会因此进行调整；

用户群体：不同的用户群体对于审美和产品期望不同，设计师需要充分考虑目标用户的喜好和诉求。

02 设计原则

作为视觉语言的语法，其主要作用是约束和指导设计元素的使用。设计原则包含多个维度，自下而上可分为：通用层、平台层和业务层。

通用层：基础原则，适用范围广，可运用在大部分产品中；

平台层：用于特定产品，可理解为平台规范、品牌VI，用来保障品牌基因的传达；

业务层：用于特定业务场景，保障设计元素符合业务特性。

设计原则很多，常见的有可用性、可供性等功能原则，也有如一致性、透气性等审美原则。近几年，随着体验设计发展，如情感化设计、无障碍设计等设计理念逐渐被行业关注，但从本质看，这些设计理念也属于设计原则。

· 情感化设计

情感化设计探讨的是在本能、行为和反思维度下，可用性和美感之间的矛盾点，以及如何平衡两者之间的关系，将情感融入到产品设计中。

△ 饿了么天气情感化：缓解用户焦虑和骑士送餐压力

· 无障碍设计

无障碍设计始见于1974年，初衷是使残疾人与健康人享有“平等地位”的环境设计。在产品设计中，无障碍设计指任何人在任何情况下都能平等、方便、无障碍地获取信息和使用功能。是以残疾人为目标群体的设计。

△ 高德地图：视觉障碍模式设置，保障视障用户的体验

03 设计元素

作为视觉语言的显像符号，设计元素是和用户交流的直接媒介。设计元素包含基础元素、控件等，此处可参考“原子设计”，这里我们主要展开讲解基础元素。

根据设计构成，常见基础元素有：色、字、构、质、形。随技术和体验设计的发展，动效和图片也被纳入基础元素中。

下图是我们团队从元素定位、构成、应用，以及度量，4个维度对基础元素相关知识的梳理总结，大家可以通过此画布进行方法理论的查找。

为方便大家理解和使用，接下来我们将对每个基础元素进行更详细的讲解。

1. 文字

作为移动界面中最常见的设计元素，文字在界面中起到了传递信息、帮助理解、引导操作的作用。

1.1 通用层：移动界面的文字

在通用层，广义分类有设计字体和开发者字体，影响文字排印的基本参数有：字体、字号、字重、行高等，设计师根据行业标准分析研究字体属性，保障文字符合通用衡量标准。

（1）使用系统字体，区分开发者字体与设计字体

通常，界面设计选用开发者字体，开发者字体是指产品代码中给字段指向的字体，通常为系统默认字体，也可是特定的字体包。而设计字体由设计师进行字体变形和特殊设计，缺乏通用性，会占用APP安装包大小。

（2）制定适合阅读的字号、字重、字间距以及行高

根据识别性原则，注意字号、字重等属性的边际，确保文字易于阅读。

1.2 平台层：标题、正文、注释

在平台层，根据使用场景，文字被分为标题、正文、注释等。设计师根据平台规范保持阅读体验的一致性。

（1）注意字阶的使用规范

字阶包含字号阶梯、字色阶梯以及字重阶梯，是平台按照品牌和通用标准制定的设计规范。遵循平台规范进行文字设计，可避免页面中出现不同的文字样式，确保文字阅读体验的一致。

（2）注意文字的组合规律和跳突率

文字在组合搭配的过程中，可以通过拉开属性参数来区分信息的主次关系。如：大小、粗细、颜色等，可以通过组合规律以及跳突率快速选择需要的文字参数。

1.3 业务层：文字标识、商业数字

在业务层，因业务场景的特殊性，需通过文字表示和商业数字透传心智或强化信息。

（1）了解文字标识、商业数字与业务特征的关系

文字标识是对字体进行加工后，作为标识建立用户心智。文字标识可结合业务的具象特征或抽象特征。商业数字常用于金融业务，使用数字特殊字体可使信息更易识别和展示，选择字体时，需考虑字体性格，以及字体是否等宽。

2. 色彩

作为界面设计中最具表现力的视觉元素，色彩能直接影响用户情感，巧妙运用色彩能够带来美感并激发关注、记忆以及欲望。

2.1 通用层：中性色/彩色、单色/渐变色

在通用层，色彩按属性分为中性色和彩色，按数量分为单色和渐变色，设计师需了解色彩的构成和基础规则。

（1）色彩的明暗阶梯和对比标准

明暗阶梯常被分为7个阶梯；而色与色的组合根据WCAG，不同层级有不同的对比值标准。

（2）了解渐变模式和效果

渐变色是两个及以上的色值组合过渡的效果。渐变需注意舒适性与美感，渐变的效果通常受渐变模式、色环角度影响。

2.2 平台层：品牌色、功能色、营销色

在平台层，色彩按使用场景分为主色和辅助色，主色常为品牌色，用于核心信息、操作等；辅助色包含功能色和营销色，常用于状态、提示、辅助操作。

（1）品牌色诞生于品牌价值观

品牌色是品牌价值观的直接呈现，常基于品牌关键词提取，根据色彩心理等进行取色，常见的色彩心理有经验象征和文化象征。

（2）辅助色的取色方式

辅助色通常取自色环、国际标准，以及文化象征。会和品牌色搭配使用。

2.3 业务层：业务色、大促主题色

在业务层，色彩按业务特征分为业务色和大促主题色。综合性平台会衍生多个垂直业务，需特定的业务色强化业务差异；大促主题色则随大促活动所制定，一般会用于大促氛围烘托。

（1）业务色反馈业务特征

业务色常与业务特征关联，可以借助人群象征、经验象征、语义共鸣等方法提取业务色。

3. 图形

作为最具表现力的元素，图形通过视知觉获得的感观激发心理反应，帮助用户更快、更准地理解信息，产生记忆和反馈。

3.1 通用层：形状、容器

在通用层中，图形按作用分为：形状和容器。形状反馈信息，容器承载信息。设计师可通过尺寸，描边，圆角等属性改变图形。

（1）容器在界面中的应用

容器是界面中的模块或组件载体，其主要特性是具备点击感和聚合感，常见容器有图片容器、组件容器、卡片容器。

（2）圆角对图形的影响

圆角常被运用在图标和容器上，圆角率会影响图形的友好度、聚焦感，以及视觉风格。

3.2 平台层：系统图标、标签、按钮

在平台层，按使用场景，图形可分为系统图标、标签、按钮。设计师基于品牌基因和功能，确保图标、标签、按钮符合一致性、识别性等原则。

（1）注意图标的一致性和识别性

系统图标作为平台基础图标，需保障一致性和识别性。一致性带来良好体验，识别性可提升用户效率。

（2）做好标签的分类与识别

标签的核心作用是将关键信息提炼成信息字段，一般会用文字和容器的方式展示，利用容器的独立性提升信息识别。

（3）确保按钮的聚焦感与点击感

按钮的核心作用是传递当前模块或页面的行为信息，并引导用户操作，借助容器的圆角可提升按钮的聚焦感，同时，环境贴切可提升按钮的点击感。

3.3 业务层：业务图标、业务容器

在业务层，按业务特性需强化图标，或借容器表达业务的特殊性，帮助提升业务感知和吸引力。

（1）业务图标、业务容器与业务特征的表达

业务图标是产品中具有业务特征的定制化图标，常用于业务入口。除了需要遵循一致性和识别性，业务图标在吸引力和信息传达上都有更高的诉求。而业务容器则通过形状等属性和业务进行关联。

4. 图片

作为界面设计中的常见元素，图片通过展示丰富的画面效果，传达产品信息。

4.1 通用层：移动界面的图片

在通用层，根据输出格式分类，设计师需要根据其特点，考虑图片的加载速度对用户的影响。

（1）图片的格式及特点

图片使用后端下发的形式以减轻安装包的负担，但图片的下载依然需要注意内存不能太大，常见有以下几种图片格式：

4.2 平台层：头像、商品图、产品配图

在平台层，图片按使用场景分为头像、商品图、产品配图等，设计师需要考虑形状等参数和图片传达信息的相关性，掌握其制作规范和用法。

（1）根据用户特征选择头像容器的形状

头像用来展示用户的身份信息。设计师常通过容器区分用户身份，常见容器一般为圆角矩形或圆形，两种样式存在一些微观差异，可根据实际情况选择。

（2）商品图的制作规范

商品图用来传递商品的图像信息。商品图由于配置方不同，较灵活，设计师可通过制定规范保障商品图和品牌视觉语言的一致性，以及商品信息传达的有效性。

（3）产品配图的使用方法

产品配图指产品中用来增加情感化内容的表达，帮助产品提升用户友好度的图片。产品配图一般用于以下几种场景：空态配图、加载配图、挽留配图等。产品配图通过情感共鸣缓解用户消极、焦虑和不满的情绪。

4.3 业务层：营销配图

在业务层，按使用场景，常见营销配图有头图、banner等，设计师需了解其应用技巧。

（1）营销头图的设计方法

头图是指某个营销页面，或者营销弹窗的头部的主视觉，该图片通常引领整个页面的风格感知。营销设计重在创意，依赖于设计师的灵感，但是依然可以寻找一些方法和依据。

（2）Banner的设计方法

Banner是穿插在页面中的一个橱窗图片，用来展示运营内容的一种图片形式，起到分流作用。可以通过以下方式提升吸引和点击：

5. 质感

作为物体材质给人带来的感受，在界面设计中常指视觉表现模拟真实物体的效果，效果越强质感越强。材质、纹理和光影是构建质感的关键元素。

5.1 通用层：移动界面的质感

在通用层，按质感强弱可分为：拟物、新拟物、半扁平、扁平。设计师需要依据产品功能选择适合的质感。

（1）拟物、扁平和半扁平

拟物之所以发展为扁平，是因大众审美，信息降噪等因素，而引发的设计趋势；扁平化是基于极简的设计理念，以信息最大化为目标的设计趋势；但随着互联网产品越来越趋同，质感的应用又悄然而生，半扁平化进入大众视野。

（2）新拟物的兴起

在反趋同的趋势下，诞生了「Neumorphism」新拟物。比起半扁平，新拟物通过模拟光效，利用阴影参数显出物体的厚度，除了dribbble上的概念方案，现应用于音乐、遥控类的产品设计中。

5.2 平台层：组件质感

在平台层，质感常作用于控件和组件容器上，为突出起可操作性。

（1）应用于按钮的光影

按钮的光影是模拟光照射在纯色按钮上形成的渐变效果，这种真实感使设计更贴近用户，增加吸引力和点击感。

（2）应用于遮罩的毛玻璃质感

遮罩用于区隔交互控件前后模块，常通过毛玻璃效果提升页面的品质感，并起到拉开层级，强调视觉重心的作用。

5.3 业务层：图标质感、背景质感

在业务层，因业务特殊性，可通过增强质感表现，提升业务感知和吸引力，常应用于业务图标和背景。

（1）图标质感从抽象到写实

区别于系统图标的简单性，业务图标在吸引力和信息传达上有更高的诉求，因此业务图标的质感表现有更多的发挥空间，可根据业务的细化程度，选择半扁平质感、拟物质感或者实物质感。

（2）背景质感的定义与应用

背景质感可以理解为背景的纹理，常用于营销设计场景中，帮助增强氛围提升业务感知，常用的纹理有自然纹理和创造纹理。

6. 布局

布局是指界面设计过程中，基于规律的结构网格，将视觉元素进行有序排列的过程，使产品界面在不同平台不同屏幕上都能提供舒适而有熟悉的体验。

6.1 通用层：移动界面的版式

在通用层，设计师需了解布局的基本原理，布局在传统定义上又称版式设计，它不仅是一种布局技能，更实现了技术与艺术的高度统一。在移动界面中，版式的运用需注意用户浏览习惯和技术布局方式。

（1）注意用户浏览习惯

在现代社会最常见的阅读习惯是从左至右，自上而下的进行浏览。但设计师也可通过差异化处理引导用户按其他的方式进行浏览。

（2）结合技术布局方式

在设备尺寸不断增加的当下，响应式布局是最流行的布局技术。是流式布局和自适应布局的结合。

6.2 平台层：框架逻辑、栅格系统

在平台层，设计师需要关注版式布局的规则和规律，以达到美观、秩序、效率的目的，通常可以借助框架逻辑和栅格系统进行设计。

（1）框架逻辑的空间概念

在一个平面里我们可以向x轴和y轴布局信息元素，而在界面设计中z轴的概念随处可见，设计师通过z轴制定模块前后关系实现框架嵌套，需注意界面设计需遵循既定的框架嵌套的逻辑，不能层级错位。

（2）建立平台栅格系统

栅格可以理解为平台级的基准参考线，以一个最小网格单位将屏幕分成有序的网格，然后制定边距、间距以及分割方式，设计师可以依照栅格系统进行秩序和逻辑的设计

6.3 业务层：版面密度、版式风格

在业务层，设计师需了解版面密度以及布局形式对于页面的影响，通常密度和布局形式取决于调性传达或营销内容，不同属性产生的冲击力和影响不同。

（1）版面密度与留白对调性的影响

版面率、留白率会影响用户对于调性的感知，设计师需根据业务属性调整密度和留白。

（2）常见的营销版式风格

基于形式美法则的版式风格也会影响调性，掌握形式美法则，能使营销设计达成美与形式的高度统一。

7. 动画

作为界面设计的重要组成部分，动画不仅是视觉装饰，也可作为功能的动态反馈。是情感化的交流手段，能帮助用户更好理解产品，让界面具有生命力。

7.1 通用层：移动界面的动画

在通用层，基础动画按功能分为装饰、交互和转场，设计师需掌握动画的基本属性，包括大小、形状、旋转、位置、颜色、透明度、时长、加速度等，了解其在界面设计中的基本原则和规律。

（1）界面交互动画的基本原则

两大基本原则：1.保持视觉连贯性；2.不要让用户等待。

（2）动画是现实世界的映射

还原物体在物理世界中真实的运动特性能够让动画更加优美自然。

7.2 平台层：交互动画

在平台层，设计师需要对用户的行为设计相应的交互反馈，提升用户的参与感。按运用场景可分为：触控反馈、功能反馈、加载反馈。

触控反馈：快速响应操作

触控反馈指针对用户手势操作做出的反馈提示，表示终端已接收到用户的操作，或对象已处于被激活状态。

功能反馈：展示操作结果

功能反馈是用户操作的结果反馈，相比触控反馈，是是可用性的表现。

加载反馈：降低等待焦虑

页面、模块需要加载或者更新信息数据时，需要使用加载动画表现系统正在运作，同时降低用户等焦虑感。

7.3 业务层：图片动画

在业务层，因业务的同特殊性，特质图片上增加的动画形式，常见动画有：gif/apng动画、movie动画。

（1）图片动画在业务场景中的不同应用

图片动画常用于业务图标、业务配图、开屏画面等。除了吸引用户注意力外，视频动画具备产品信息丰富性展示的作用。

总结

以上是关于视觉设计的通用思考画布，是我们团队在日常工作中，对于常见设计知识体系的整理。知识和理论是在不断发展和增加的，但系统的思考框架是能帮助大家提升学习和工作效率的。

我们的初衷是希望通过该画布，帮助初入门的设计师快速掌握基础设计能力，同时，对有一定工作经验的设计师，能通过该画布填充和提高个人技能树，实现专业成长。