最近在做组件化管理的设计工作,找了些相关资料进行学习,uxpin的这篇文章可谓是构建设计系统的方法论。下面是译文:
产品团队目前遇到的挑战
随着产品团队的壮大,它的成长过程变得更加难以管理。如果没有标准化的工作流程或组件库,团队的低效率和不一致性最终会影响到整个产品。
软件通常由庞大的团队创建。由于更多的人加入到团队中来,创造连贯体验的挑战也就呈指数增长。随着时间的推移,不同的人会贡献新的解决方案和风格,导致体验的不一致。
-Karri Saarinen,
Principal Designer and creator of Airbnb design system
通过与全球数千名客户的合作,我们已经看到了多年来出现的四种问题。
1.产品和平台的不一致性
体验的不一致性降低了用户的使用效率,从而影响了产品的价值。这种问题在企业级产品中尤其常见,由于技术框架、设备和用户群的不同,产品的不一致性体验也就几乎不可能解决。
2.缺少集中的资产会导致版本控制问题
由于不同的设计团队使用不同的工具,生成的文件也就无法有效的整合在一起,所以没有人能保证在任何时间文件都能被正确的用于项目中。
如果这些工具是基于桌面的,版本控制问题将会更加棘手。设计师必须严格遵循命名规则,否则组件会变的混乱不堪。
3.扩大产品团队间的认知差异
没有了组件库这个最好的实践标准,不同的团队就会采用不同的规范和准则。随着时间的推移,产品的不一致性就不可避免了。
4.效率低下的流程会导致重复劳动
由于缺少用于设计和开发的通用组件库,重复性工作就会降低团队的效率。
由于设计师发现自己需要从头开始创建公共元素和页面,原本计划1-2周的迭代周期可能需要2-3倍的时间。
总结
上述所有的痛点都是相互关联的。
为了提高产品一致性和团队效率,构建设计系统将有助于在设计人员和开发人员之间整合资产和工作流程。否则,不可扩展的设计将会持续带来问题。
进入设计系统
由于Salesforce和Airbnb等公司推广,设计系统为产品团队提供了可重复使用和基于组件的产品开发方法。
设计系统至少可以在两个层面上创造价值。在团队层面,它可以创造一个更简化以及可预测的过程,从而减少设计和开发的时间。在用户体验层面,它有助于在界面中提供一致性和可预测性,当设计师和开发人员自由的思考高阶任务时,它能够提高体验的整体质量。
-Nick Stamas, Creative Lead at WeWork
真理的唯一来源
设计体系不仅仅是一个风格指南或设计模式库,而且是产品开发的蓝图。
所有的设计原则,组件库和模式都被详细记录。所有代码参考都包含在每一个设计中。因此,设计可以随着发展而扩展。
设计系统的ROI
1.加快了投入市场的速度
一个基于控件的组件库可以在任何一个地方访问,从而实现更加灵活的敏捷过程,使产品在不影响质量的前提下加快发布速度。
2.提高了产品的价值
可重复使用的组件相互构建,为产品创造一致的外观,感知和行为。 随着一致性的增加,用户的使用效率也随之增加。
3.增加了协作和知识共享
由于共享的设计系统是一种协定,因此设计师和开发人员将更加自主的发挥自己的作用。
4.节省了时间和金钱
因为设计师和开发者不再纠结于多余的问题和重复性的工作,他们被释放出来,从而进行更多有商业价值的项目。
构建设计系统
这是一个简单的事实:如果不先创新你的构建方式,你就不能创新产品。
-Karri Saarinen, Principal Designer and creator of Airbnb design system
1.创建你的界面清单
请首先创建产品用户界面中所有内容的清单,来快速识别目前产品中的不一致性问题:调色板、文本样式和界面模式。这个清单将是你推广设计体系的最强大的工具。
1.1查看界面和代码,并列出你可以找到的所有颜色和文字。
1.2从你的产品中截取或者复制界面模式。请把所有的截屏放在一个位置。
1.3按照不同的目的将界面模式分类(例如:按钮、表单、导航等)。
1.4标记模式之间的不一致性,并为你的团队讲解说明。
2.获得团队的认同
当你介绍清单中反映界面不一致的问题时,强调设计系统的投资回报率。
工程师会对于设计系统在控制源代码、提高模块化、增加自主权的优势感到满意。商业人员对于设计系统能更快的推动产品面世,提高的产品价值和节约资源的优势感到满意。
3.定义你的设计原则
在构建一套新的系统之前,你需要创建一套体验一致的原则。哪些是设计师应该牢记在心的设计原则。
4.统一视觉设计
想一想你设计的界面中最基本和最常见的模块。
你可能最先想到的是颜色,文字样式,图标。也许还有一些交互性的模块(悬停在可点击的元素上),输入框的视觉属性又或者是动画?与团队进行讨论,来决定哪个版本将会对这些元素进行规范。然后将他们记录为体系的一部分。
5.创建你的交互式组件库
一旦你的基础元素定义完成,开始制作和添加你的界面模块到分享库中。保证设计系统的不断更新,鼓励你的团队在随后的每一个新产品中开始使用,团队的效率以及产品的一致性将大幅提升。
最后,要确保产品团队的每个人都有对设计系统的发言权,他们可以对于每个新的模块提出自己的意见。
平心而论,构建设计系统不仅是对设计师的挑战,也是对整个团队执行力的挑战。但如果能够有效落地实施,对于整个研发团队的价值都是非常巨大的。