恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
从0到1,搭建一套完整的产品 “设计语言” !(下篇)
0.0°
2021-08-05 原创文章 经验/观点 举报 783 1 1 0

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

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

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

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

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

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


软件产品 

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

  1. 布局  

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

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

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


· 适配:做好页面的适配规则,规定断点、拉伸规则、设备兼容规则等。

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


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

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


  2. 样式  

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

· 颜色:规定整个界面的全局颜色系统,包括品牌色、中性色(中立色)、功能色三部分色彩,以及衍生出的 UI 调色板。

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


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

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


· 图标:制定图标的设计原则、设计规格、设计风格等方面,通过提炼具有品牌辨识度的视觉元素,传达品牌特性。

(图标设计规格示例)


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

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


· 模式:近两年非常流行的暗黑模式,如果在你的界面中有涉及到,也需要做好深色色彩应用的相应规范。

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


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

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


· 动效:动效可以增强 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



Powered by Froala Editor

更新:2021-08-05

收藏

1人已收藏

Ant Design

企业级产品设计体系,创造高效愉悦的工作体验

  • 59

    作品

  • 568

    粉丝

  • 1

    关注

  • 设计模式 | 宏 Macros:如何让用户快捷完成自定义操作
  • 设计模式丨历史记录:让用户的操作有迹可循
  • 设计模式 | 多级撤销 Multilevel Undo:让用
  • 设计模式 | 撤销按钮:让用户更有掌控感

    猜你喜欢

      2021-08-05 原创文章 经验/观点 举报 783 1 1 0

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

      0.0°

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

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年07月20日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      1
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录