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

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

提交需求

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

0/20
0/200

设计大赛

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

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

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

什么是设计语言?

设计语言是把设计作为一种“沟通的方式”,用于在特定的场景中进行内容与信息的传递。我们最常见到的是交互界面规范相关的设计语言:



其实设计语言的内容远不止于此,作为一种能够被大众解读和认可的“表达”,它通常具备以下特点:

· 具备严谨的设计规范:设计语言是产品设计参考的标准和规范,规定了产品设计的基本原则和基础框架;

· 是动态的,不断升级的:设计语言不是一成不变的,需要根据市场所流行和认可的设计趋势,进行补充、迭代和完善;

· 能够使产品具备统一的特征性:使用设计语言设计出的产品能够保持较好的统一性,并带明显的品牌特征;

· 能够提高设计效率:设计语言中的规则和元素可以被当成组件,应用于产品设计的过程中,减少重复性工作;

· 符合主流用户群的审美标准:“美” 是很难被定义的,设计语言通常会更倾向于所属行业和主流用户群体的审美标准。


很多有一定影响力的公司以及优秀的产品都有自己的设计语言,例如 Matreial Design,就是 Google 为 Andorid 平台编写的设计语言:


除了Google 和 Apple 这些国外公司,国内如腾讯和阿里等大厂也都陆续发布了自己的设计语。

例如腾讯的 Q 语言,设定了三个基本目标:统一体验,基因体现,社交向善;并基于对用户的洞察,制订了设计原则和应用规范:



除了软件界面设计,在硬件产品的设计中也有一些公司依靠应用设计语言,突出了品牌特性。比如:你肯定不会轻易将保时捷品牌的车认错,哪怕是挡住了车前方的标志。国内很多公司也不乏优秀案例:小米生态链中的智能家居产品在设计时就很重视设计语言,即使是面对不同行业、不同品类的产品也依旧可以做到设计风格的统一:



如何构建设计语言?

设计语言可以针对一个企业或一个产品进行构建。构建设计语言并不是一个简单的工作,需要设计师同时具备理性思维和感性表达,结合品牌特性、流行趋势,以及对市场和用户的洞察等多个方面,进行系统的规划。我们可以从以下几个方面入手:

1. 企业 / 产品特征与背景

你需要对将要使用你的设计语言的企业 / 产品足够了解,并依此奠定设计语言的核心基调,你可以思考(但不限于)以下几点:

· 行业背景:了解行业大背景、整体风格,比如美妆行业和科技行业的设计调性就大不相同;

· 价值观:设计语言的核心精髓来源于企业 / 产品的价值观,并与之保持一致;

· 品牌特性:应用设计语言的一个重要意义就是突出企业 / 产品的品牌特性,设计语言中的元素需要与品牌形象相呼应,是品牌意向的提炼与升级;

· 用户群体:通过对企业 / 产品的用户群进行分析,找出群体特点和喜好,更好的为产品设计打基础;

· 流行趋势:观察和预判设计的流行趋势,把握设计潮流发展的大方向,使设计语言新颖现代,符合或超出用户预期。


2. 设计价值观

每一套设计语言都有其价值观,为设计师提供评价设计好坏的标准,并为解决具体设计问题指明方向。设计语言的价值观来源于企业 / 产品特征,并包含一定的设计哲思,是设计语言的核心精髓。以下给出几个例子:

设计价值观看上去很抽象,却是整个设计语言的灵魂核心,也是企业或产品文化的直接体现


3. 设计原则

设计原则是由设计价值观衍生出的要遵循的设计准则,将设计价值观进一步细化和落地。设计原则包含一定的设计学基本原理,是设计语言的基础架构。以下给出几个例子:

  • 设计原则根据企业 / 产品的属性和功能进行制定,并在此基础上制订更详细的设计范式


4. 设计范式

设计范式是由设计价值观和设计原则推导出来的、针对具体问题的一般解决方案。对于互联网产品来说,设计范式通常包括整体设计布局、界面设计风格、设计组件、业务模块 / 场景、动效规则等一系列内容,这也是整个设计语言的主要构成部分。设计范式需要尽可能的考虑全面、详细,这部分的内容会非常繁杂,必须做到条理清晰,逻辑严谨。

腾讯的 Q 语言,详细的规范了色彩、图标、交互行为、文案等内容,每一部分的内容都有详细的文档规范和应用说明

为了更好的应对用户复杂多变的场景需求,让团队能以更小的成本,对不同场景和版本的产品进行有规律性的差异化设计,Q 语言也设计了一套设计控件


不仅仅是腾讯的 Q 语言,阿里巴巴的 Ant Design、Google 的 Material Design、微软的 Fluent Design 都有着自己一套完整的设计范式。设计范式需要具备独特性,使得每套设计语言之间形成差别。推荐几个设计语言的案例,你可以感受下不同产品设计语言的差别:

https://ant-design.gitee.io/index-cn

https://material.io

https://www.microsoft.com/design/fluent/#/

  

看完以上这些内容,相信你已经对设计语言有了一些了解和认知。关于怎样搭建出这样完整的一套设计体系,建议你不要心急,你需要耐心的分析、理性的思考和需要熟练的表达。阿里巴巴的一款设计工具 Fusion Design,也可以为组件的设计提供捷径。本文是设计语言构建方法上篇内容,日后会为大家推送下篇,讲解更细节的知识和方法,欢迎关注。


Powered by Froala Editor

更新:2021-07-20

收藏

5人已收藏

Ant Design

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

  • 59

    作品

  • 568

    粉丝

  • 1

    关注

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

    猜你喜欢

      2021-07-20 原创文章 经验/观点 举报 963 5 1 0

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

      0.0°

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

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

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

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      5
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录