原文链接:The Path to Design System Maturity
原文作者:Christian Beck
在现今的软件领域,我们不再局限于去解读Dribbble作品上那些不足的细节,我们现在缺少安全感,是因为我们没有创建一套足够健壮的设计体系。就像是在看Lebron打篮球,或Thom Yorke编写音乐,首先是我们大多数人很难去胜任这样的角色。而不是去挂出我们的鞋子或者吉他,我们可以会从一些一流的体系中获取灵感,然后从0开始理解它是如何走向成功的。
Nathan Curtis说过,设计体系应该像产品一样被对待。在这样的观点下,你可以看到一款体系是如何从羽翼未丰,走向NYSE。设计体系从来不需要过于庞大,很有有团队这样做。
使用产品作为参考,让您可以更容易理解如何去构建自己的设计体系。
这里不对设计体系是否有价值去争论。我们会关注于如何定义你的体系,目标受众和MVP。这会帮助你更为有效的做出决定,并指导你该在哪里做出努力。你不会从一开始就陷入麻烦之中。
设计体系可以被分解为三个主要的主题,这些主题可以映射到产品的阶段:
1.效率为导向的体系(启动阶段)
2.一致性为导向的体系(扩展阶段)
3.最优化为导向的体系(成熟阶段)
1.效率(启动阶段)
理解这些成熟度对应的设计体系阶段十分重要,而不是团队本身。每个新或成熟的团队,都会发现他们是在重新确立一个设计体系。在这个阶段,你要么就是创业产品的一部分,要么就是在一个成熟的组织中去创建你的设计体系。
建立内部设计效率
工具:Sketch,Atomic,Subform
摆在最前面也是最重要的,一套设计体系必须是让设计师们更有效率的。可以让设计师更高效的工作,并让他们能够保持创新。在我看来,如果没有满足这一点,下面的都是不值得去做的。
VMWare’s Clarity systemprovides a .sketch fileas the foundation for their design team这第一步,就是让你的设计团队使用提高效率的设计工具。在我看来,Sketch,Atomic,Subform都是优秀的工具。他们足够智能,同时也提供了足够的空间去探索。Sketch几天就能够上手,并且通过它来搭建设计体系会越来越简单。
在设计师间创建一致性
工具:分享设计体系,Brand.ai 和 Craft Library;设计体系框架,Material Design 和 UX Power Tools
UX Power Toolsuses nested symbols to cascade changes from one source.当你处在设计体系的早期阶段时,一致性通常是向上的。不是一系列的原则来指导实践,而是通过新兴模式来指导原则(有时可能是错误的)。大多数的美国设计师都想要暂停一下,建立设计原则并使用在之后的迭代中,但这些努力总是会被实施中耗费掉。与此同时,你应该去学习关键原则和方法来管理用户体验和产品设计。
2.一致性(扩展阶段)
在这个阶段,你的产品很可能正在增长,你的团队也是如此。你有丰富的经验,指导你的产品是如何一步步迭代到现在这样,这会允许你去创建更多的指导和原则来规范你的工作。这一阶段,你也在跨越个人的设计工具,开始建立沟通工具。当你的团队通过本地化发展,你的公司可能会衍生出新产品,或团队中迎来了更多的设计师,这时对一致性的需求就会增加。
WeWork’s explorations leading up to their Plasma system, from:https://medium.com/@andrewcouldwell/plasma-design-system-4d63fb6c1afc提供理论基础
工具:Style Guide,Design Principles,Pattern Libraries
这个时候你已经很熟悉了页面布局和产品流程,并且对您需要处理的内容也有了更深入的了解。假使你的产品是基于目标和HCI核心原则设计的。那么你可以使用将现在的工作作为一个起点,来提取更可能指导工作的潜在原则,更重要的是,它让你有时间停下来,通过建立更好的指导工作,来优化你所做的事情。
融入品牌
工具:Brand Guide, Voice 和 Tone Guidelines
品牌和产品,在这个事物即服务的世界中,关系十分紧密。到目前为止,你可能一直在简化,或者没有足够的资源来真正拥有产品品牌,在你能够真正缩小一致性的差距之前,你需要将品牌融入到你的产品中去。
Naturally,Shopifyhas fantasticvoice and tone guidelines.这确保了你的设计体系能够反映出,产品向市场展示出的面貌。它还有助于将其他团队(营销和品牌)引入到最终的提升中,从而实现全面的优化。
3.优化(成熟阶段)
在这一阶段,如今谈论的很多成熟体系都处在这个阶段。设计与开发之间存在着紧密的联系。这都是在前几个阶段的基础上,才实现的。
并不是每个团队都需要达到这样一个水平。
这取决于你自己的目标,还有产品的优先级。这个阶段需要产品团队中每个部门足够成熟,认可,体验还有明确的ROI。
开发的一致性
工具:HTML 和 Sass;Javascript其他的中间框架层
Google已经发布了数十款工具,这从他妈呢框架的版本号就可以看出来,这很容易让人想到Bootstrap,只是基于它自身的设计体系构建核心设计原则。
Material Design Liteprovides code snippets that mirror the design framework.传递优化
工具:Custom system 和保持设计开发同步的工具,Governing Strategies,Design Ops,Design Technologists
最近,Airbnb推出的他们的React Sketch.app:
http://airbnb.design/painting-with-code/
这可能是一个成熟体系的例子,它包括了编译工具还有更多的其他东西。Airbnb期望在他们的设计和开发团队之间能够更透明的合作。
就像一个公司,当你达到了这个阶段,过程和所有权都会变得更为重要,尽管美国之外的人可以推崇Airbnb的体系,但现实是这种规模和复杂性的体系在未来也会被内部优化迭代。这就是设计和管理策略发挥作用的地方。
这也是你可以联系品牌和设计体系的地方。
结语
所以我们学到了什么?一般来说,对“设计体系”没有正式的定义,他可能是一种结构化的方法来优化你的产品设计流程。
像软件产品一样,一个设计体系会走向成熟,因为它变得更为复杂,满足设计团队之外的其他诉求。
所以,如果你想要创建一个设计体系,先思考一下你为什么要创建设计体系,然后确立一个目标MVP。找出你想要解决的问题,然后选择最合适的方法,莱满足你的需求。
网友评论