关于 design language system 的一些思考

前言

工作期间,公司开始属于自己的UI视觉规范,基于视觉设计规范,我们开始形成了模块组件迭代。并由此,围绕着产品交互,UI,前端开发,三轴同步跟进自己的系统,争取在需求确定后,以最准确最快速最低地成本完成迭代。本文就这一阶段的参与交互规范设计的经历,谈一谈自己对于design language system、规范、合作、以及不同类型的设计系统语言的理解。

我所理解的 design language system

Alla Kholmatova 在书籍《design system》中描述到早期设计体系发展的背景,建立于传统网页设计方式通常以"页"为单元进行思考,而随着互联网的飞速发展和产品复杂度的提升,非体系化的”页“思考与设计的方法越来越不适用,因此建立体系化的设计模式,对于产品的持久性发展至关重要。

设计语言系统
若将其整体视为名词,则指的是一个渐成的以设计语言为主题的系统,又或者是以设计为主题的语言系统。若将其拆解为动词与名词,则可理解为是设计与语言相关的系统。

以上三者对于设计语言系统这个词的定义涵盖了大部分这个系统的使用场景。设计师和开发人员齐心协力设计与设计语言相关的系统,目的是为了让内部产品研发相关人员能够快速就所要设计的项目,需要用到的零部件快速达到一致。而这样一套语言的设计,需要考虑产品的真实业务场景,商业目标,用户的体验场景,心智模型,情感要素,产品开发的成本等相关因素。对于基本组件有了明确的定义,产品研发的相关工作人员就能够更加专注地研究场景,并基于各自擅长领域的研究,对于整体体系进行迭代升级,从而达到灵活可持续的长久发展。尽可能得提高消息传递的准确率和效率。

design language system的构成
《design system》描述到设计体系包含”设计模式“和”实践方法“两个方面,设计模式包含功能性模式设计和感知性模式设计,功能性设计模式(组件设计)主要关注于行为和实体组成要素,感知性设计(风格设计)主要关注非实体组成要素,如界面外观,配色,字体等。实践方法则强调如何构建与维护体系,如前期规划,界面清查,模式库创建,文档撰写,语义定义,迭代。

发展到现在,design system 已经成为各互联网公司产品设计中的底层标准和架构,支撑着整个产品的运转。通常设计界被大家熟知的 design system 有
1、Ant design
2、Lighting design system
3、Material design system
4、ios-apple design sysytem
通过研究几套design system language ,你会发现它通常以几个模块构成
-设计原则 design guideline
-工作流设计 - 如何用一套“大家”都“能听懂”的“标准化”语言,对于流程进行“设计与说明”。
-设计模式 - 功能模式(导航指引,信息输入,信息输出,反馈与提示,其它)
-设计模式 - 感知模式(基本元素,动态语言,图形化风格内容)
-数据可视化图谱模块
-实现工具 - 前端编程语言