从0到1,搭建一套完整的产品 “设计语言” !(下篇)

Recommanded by editor
杭州/设计爱好者/4年前/1767浏览
从0到1,搭建一套完整的产品 “设计语言” !(下篇)Recommanded by editor

作者:元尧,蚂蚁集团设计师

上篇文章我们介绍了设计语言的基本知识(如需回顾可点击:从0到1,搭建一套完整的产品 “设计语言” !(上篇)),设计语言中包括设计价值观、设计原则和设计范式:



· 设计价值观:设计语言的灵魂核心,体现一定的设计哲思

· 设计原则:设计语言的标准,是基本的设计原理

· 设计范式:设计语言的主体,是一般的设计解决方案和规范



作为设计语言的主要构成部分,设计范式该如何整理和输出呢?我们可以分软件产品和硬件产品两个方面来看:



软件产品 

软件是一种逻辑产品,如果你设计的产品或者供职的公司是以软件产品为主,设计范式通常可以从(不限于)以下内容进行构建和思考:


  1. 布局  

布局是体系化视觉设计的起点,产品界面的布局空间要基于动态、体系化的角度出发展开:



  · 单位:规定好设计时遇到的分辨率、像素密度、绘图单位等,并做好切图和画布设置等相关规则:


(Fusion Design 设计语言:单位规范示例)




· 适配:做好页面的适配规则,规定断点、拉伸规则、设备兼容规则等。我曾在文章: 干货丨Material Design 全面解析(二) 响应式栅格布局 详细的讲解了 Material Design 的响应式布局规范:



(Material Design 设计语言:响应式栅格布局示例)




· 间距:制定基线网格、间距设置方法、引导线等相关规范,使元素的布局有依据:


(Material Design 设计语言:间距规范示例)



  2. 样式  

样式是产品通用的基本规则,包括颜色、字体、图标、阴影、模式、动效、音效等方面,从产品功能出发进行规范制定:



· 颜色:规定整个界面的全局颜色系统,包括品牌色、中性色(中立色)、功能色三部分色彩,以及衍生出的 UI 调色板。我曾在文章: 高级进阶!从0到1打造高效的 UI 组件库! 一文中为大家介绍过色彩相关的概念:


(Material Design 设计语言:间距规范示例)




· 字体:字体通常从主字体、行宽与行高、字重、字体颜色等几个方面进行系统的规范:

undefined


(Ant Design 设计语言:字体行高规范示例)




· 图标:制定图标的设计原则、设计规格、设计风格等方面,通过提炼具有品牌辨识度的视觉元素,传达品牌特性。我在文章: 品牌基因+图标体系,一套完整的图标系统设计思路!一文中详细的说明了如何构建一套完整的、具备品牌基因的图标设计系统:


(图标设计规格示例)




· 阴影:阴影能够体现界面上元素的层次,元素所处的层级不同,阴影属性也有所不同。对于阴影,Material Design 有深入的研究,其扁平化风格的设计语言很注重阴影的应用:


(Material Design 设计语言:阴影规范示例)




· 模式:近两年非常流行的暗黑模式,如果在你的界面中有涉及到,也需要做好深色色彩应用的相应规范。我在文章: 干货丨超全面! 详解 Material Design 暗黑模式 一文中详细的分析过暗黑模式设计规范:


(Material Design 设计语言:阴影规范示例)




· 音效:对音效进行统一的规范,统一声音类型和应用方式。音效会从听觉的角度丰富和提升用户的使用体验:



(Material Design 设计语言:音效的设计原则示例)




· 动效:动效可以增强 UI 的表现力,我在文章: 深度丨UX 动效设计的 “终极指南” !中详细介绍了 UI 动效中的常见的应用规律,你可以选择符合产品场景需求的动画效果,对不同元素运动的时间、速度、位置、轨迹等方面进行规则制定:


(动效的设计规范示例)


  3. 组件  

组件可以把视觉表达模块化、产品需求场景化,每个组件通过标准的组合方式构建设计方案,从而提升设计效率,并保证产品在各个场景中的一致性。在搭建组件的过程中,要始终遵循设计原则和规范,既要兼顾全局,又要考虑细节。


我曾在之前的文章:阿里巴巴的利器!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



11
阅读原文
|
Report
|
47
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
x oasis coffee
Homepage recommendation
相关收藏夹
ip设计
ip设计
ip设计
ip设计
作品收藏夹
B端
B端
B端
B端
作品收藏夹
作品集
作品集
作品集
作品集
作品收藏夹
设计文章
设计文章
设计文章
设计文章
作品收藏夹
平面
平面
平面
平面
作品收藏夹
UI设计
UI设计
UI设计
UI设计
作品收藏夹
大家都在看
Log in