pic
2020-07-13 22:17
全文共 2489 字 16 图，阅读需要 9 分钟
设计范式的基本内容
上篇文章我们介绍了设计语言的基本知识（如需回顾可点击：干货丨从0到1，搭建一套完整的产品 “设计语言” ！（上篇）），设计语言中包括设计价值观、设计原则和设计范式：
设计价值观：设计语言的灵魂核心，体现一定的设计哲思
设计原则：设计语言的标准，是基本的设计原理
设计范式：设计语言的主体，是一般的设计解决方案和规范
作为设计语言的主要构成部分，设计范式该如何整理和输出呢？我们可以分软件产品和硬件产品两个方面来看：
· 软件产品 ·
软件是一种逻辑产品，如果你设计的产品或者供职的公司是以软件产品为主，设计范式通常可以从（不限于）以下内容进行构建和思考：
1. 布局
布局是体系化视觉设计的起点，产品界面的布局空间要基于动态、体系化的角度出发展开：
单位：规定好设计时遇到的分辨率、像素密度、绘图单位等，并做好切图和画布设置等相关规则：
▲Fusion Design 设计语言：单位规范示例
适配：做好页面的适配规则，规定断点、拉伸规则、设备兼容规则等，我们曾在文章：干货丨Material Design 全面解析(二) 响应式栅格布局 详细的讲解了 Material Design 的响应式布局规范：
▲Material Design 设计语言：响应式栅格布局示例
间距：制定基线网格、间距设置方法、引导线等相关规范，使元素的布局有依据：
▲Material Design 设计语言：间距规范示例
2. 样式
样式是产品通用的基本规则，包括颜色、字体、图标、阴影、模式、动效、音效等方面，从产品功能出发进行规范制定：
颜色：规定整个界面的全局颜色系统，包括品牌色、中性色（中立色）、功能色三部分色彩，以及衍生出的 UI 调色板。我们曾在文章：高级进阶！从0到1打造高效的 UI 组件库！ 一文中为大家介绍过色彩相关的概念：
▲Material Design 设计语言：间距规范示例
字体：字体通常从主字体、行宽与行高、字重、字体颜色等几个方面进行系统的规范：
▲Ant Design 设计语言：字体行高规范示例
图标：制定图标的设计原则、设计规格、设计风格等方面，通过提炼具有品牌辨识度的视觉元素，传达品牌特性。我们在文章：品牌基因+图标体系，一套完整的图标系统设计思路！一文中详细的说明了如何构建一套完整的、具备品牌基因的图标设计系统：
▲图标设计规格示例
阴影：阴影能够体现界面上元素的层次，元素所处的层级不同，阴影属性也有所不同。对于阴影，Material Design 有深入的研究，其扁平化风格的设计语言很注重阴影的应用：
▲Material Design 设计语言：阴影规范示例
模式：近两年非常流行的暗黑模式，如果在你的界面中有涉及到，也需要做好深色色彩应用的相应规范。我们在文章：干货丨超全面! 详解 Material Design 暗黑模式 一文中详细的分析过暗黑模式设计规范：
▲Material Design 设计语言：阴影规范示例
音效：对音效进行统一的规范，统一声音类型和应用方式。音效会从听觉的角度丰富和提升用户的使用体验：
▲Material Design 设计语言：音效的设计原则示例
动效：动效可以增强 UI 的表现力，我们在文章：深度丨UX 动效设计的 “终极指南” ！中详细介绍了 UI 动效中的常见的应用规律，你可以选择其中符合产品场景需求的动画效果，对不同元素运动的时间、速度、位置、轨迹等方面进行规则制定：
▲动效的设计规范示例
3. 组件
组件可以把视觉表达模块化、产品需求场景化，每个组件通过标准的组合方式构建设计方案，从而提升设计效率，并保证产品在各个场景中的一致性。关于组件的基本概念，可以阅读文章：高级进阶！从0到1打造高效的 UI 组件库！ 进行了解。在搭建组件的过程中，要始终遵循设计原则和规范，既要兼顾全局，又要考虑细节。
我们曾在之前的文章：阿里巴巴的利器！Fusion Design 你会用么？中介绍过阿里巴巴的一款设计工具 Fusion Design，也可为制作组件提供捷径：
▲Fusion Design 组件库搭建
· 硬件产品 ·
硬件产品的设计范式与软件产品不同，你可以从以下（不限于）这些角度进行思考与设计范式的搭建：
1. 整体风格
产品的整体风格是一个较为抽象的概念。如果你在设计硬件产品时，遵守设计语言的价值观和设计原则，整体的产品风格就已经基本形成了。整体风格是使用一个或几个词汇就可以概括出来的，使用户提起品牌 / 产品名称就会想到相应的设计理念：
提起无印良品，你可能会立即想到：天然、简洁、素雅等词汇。无印良品以一种趋近于“无”的形式进行产品设计，是禅宗的“空寂”意识的反映，也是产品的设计价值观：
2. CMF
CMF 是每一件硬件产品在设计和生产时都必须要考虑的问题：
颜色 / Color：思考产品的主色调、点缀色。一款硬件产品的配色通常不会超过4种颜色。系列产品在配色上需保持相对统一。
材质 / Material：产品的材料和质感的选择也会传递出产品独特的气质。
成型 / Finishing：产品成型方式和加工工艺会影响产品的外观以及产品的使用感受。
3. 细节元素
硬件产品品类繁杂，细节元素远多于软件产品，具体产品要具体分析和总结。这里举几个例子：
边角：产品的边角会展示出产品的性格，直线和曲线会体现不同的特点和风格：
接缝：产品的接缝是设计细节的体现，不同的接缝处理会产生细微的差别感受：
按钮：按钮也是展现产品设计的细节之处，不同造型的按钮让产品具有不同的个性：
设计语言维护与更新
设计语言并不是一成不变的，需要不断的维护与更新，是一个动态进化的过程。这种进化，包括三个方面的内容：
设计过程中的灵活应用：设计范式中的组件库可以优化设计工作方法，提升设计效率。灵活应用组件，能够最大限度的保证产品的一致性。
产品功能的更新与迭代：随着产品功能的更新和新产品的上市，设计范式和组件库都会不断被添加和完善。
设计趋势的发展与变化：设计语言跟随设计流行趋势做出调整，符合当下流行的审美观，做补充和优化。
设计语言不是一蹴而就的，在维护和升级的过程中要做好版本的记录，把整个设计语言作为一个完整的项目进行管理，更有助于设计系统的良性生长与发展。
由于篇幅所限，本文提到的 CMF 相关知识会在日后为大家详解，欢迎关注 [长弓小子] ，了解更多干货内容。
图片及内容参考来源：
https://fusion.design
https://material.io/
https://ant.design/index-cn
