为什么构建设计系统-产品团队的口袋指南(译)

最近在做组件化管理的设计工作,找了些相关资料进行学习,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.创建你的交互式组件库

一旦你的基础元素定义完成,开始制作和添加你的界面模块到分享库中。保证设计系统的不断更新,鼓励你的团队在随后的每一个新产品中开始使用,团队的效率以及产品的一致性将大幅提升。

最后,要确保产品团队的每个人都有对设计系统的发言权,他们可以对于每个新的模块提出自己的意见。

平心而论,构建设计系统不仅是对设计师的挑战,也是对整个团队执行力的挑战。但如果能够有效落地实施,对于整个研发团队的价值都是非常巨大的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,311评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,339评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,671评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,252评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,253评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,031评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,340评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,973评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,466评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,937评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,039评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,701评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,254评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,259评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,497评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,786评论 2 345

推荐阅读更多精彩内容