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

用户头像
杭州/设计爱好者/5年前/2385浏览
从0到1,搭建一套完整的产品 “设计语言” !(上篇)

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

什么是设计语言?

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



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

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

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

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

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

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


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



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

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


undefined


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




如何构建设计语言?

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

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,也可以为组件的设计提供捷径。本文是设计语言构建方法上篇内容,日后会为大家推送下篇,讲解更细节的知识和方法,欢迎关注。


30
阅读原文
|
举报
|
65
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
牛奶乳液层次平面平铺平面
城阙凡花
海底世界插画
空的平台平面和自然景观
城市园林平面布局航拍
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
平面男孩喝咖啡插画设计
城市园林平面布局航拍
平面书法字手写
金色颗粒质地的平面
平面插画设计女孩喝咖啡
中国传统纹样创新图案设计
平面设计 吊牌设计
玄关入门地毯印花图案红地毯
金色颗粒质地的平面
平面风格黄绿色系花朵装饰
空的平台平面和自然景观
金色颗粒质地的平面
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
平面花卉图案扁平简约无缝拼接插画
“知识宅急送”外卖,快递,平面,海报,素材,教育
城市园林平面布局航拍
牛奶乳液层次梯田平铺平面
倒计时,海报,平面
古风平面仕女与瓷器
你可能喜欢
相关收藏夹
平面
平面
平面
平面
大家都在看
登录注册