天津渔网价格虚拟社区

在一个小团队中如何建立一个设计体系

一身是月2018-09-22 16:15:33

昨晚我和我的小团队出去学习设计体系。“ 设计体系 ” 在2017年是一个时髦的词,我们很希望我们也可以建立一个自己的设计体系。


我们听到过很多关于设计体系的优点,比如:节省时间、减少争论、易于合作等等,我很兴奋。


所有的谈话都是关于怎样创建一个设计体系。但是,那些都是大团队或者他们有额外的资源,甚至一个创建DesignOps团队(2017年第二火的词)来维护设计体系。


在夜晚的最后,我们大家都有点灰心,但是我们并不孤单,在问答期间我们讨论了很多问题:

“ 假如只有一个设计师,我如何建立一个设计体系? ”

“ 我是唯一的一个设计师,你有什么建议给我? ” 


但是我和我的团队并不想让这些困难难住我们,我们仍然打算去创建我们自己的设计体系。在我开始之前,下面是一些背景知识。


什么是 “ 设计体系 ”?


“ 设计体系一个是包含视觉样式、元素、相关文档的库,由个人、团队或社区作为代码和设计工具发布,以便使用时可以更高效、更有凝聚力。“

 ————Nathan Curtis


简而言之,设计体系是可重复使用元素的合集,来将整个产品捆绑起来。


也有许多人已经写过了很有深度的文章或书关于设计体系的,下面贴几个可能你会觉得有用的链接。

https://www.invisionapp.com/blog/guide-to-design-systems/

https://uxcellence.com/2017/design-systems-style-guides-pattern-libraries

https://www.designbetter.co/design-systems-handbook

https://www.uxpin.com/studio/ebooks/create-design-system-guide-checklist/


设计规范 VS 设计体系

 

看完上面你可能会想,很棒,可是这不就是设计规范吗?


 “ 设计规范是设计进程的一个人工产品,设计系统是一种活的、有路线图和待办事项支持的产品,并服务于一个生态系统。”

 ———— Nathan Curtis


另外,设计规范是一个不同尺寸的设计元素的集合,可以用无穷无尽的方式组合起来,创建一系列更大的元素。Brad Frost的《Atomic Design》是元素设计的灵感。


设计体系的好处


“ 我们如今面对的挑战是现在的工具不能在相互之间很好的传达,细节会从裂缝中消失,在设计与代码之间有巨大的缝隙,所以我们需要许多额外体力来确保我们能兼顾注意到所有事。“

 ————UX Bootcamp


作为一个在B2B企业中做软件的小团队,我们要在有限的时间、预算、资源下创造一个设计体系。我想提醒我们团队这样做的好处。


总体上说,我们的团队会更节约时间,因为:

* 减少争辩——不需要再浪费时间对相同设计原件的再讨论。

* 可重复使用的设计原件使规模化成为可能

* 增强合作——改善不同办公室的远程办公


对于建立设计体系,我也有一个自私的原因。我迅速意识到,如果我们成功,我们可以使许多任务自动化,这样可以使我们有更多的时间去做我们想做的事,来解决用户的问题!这才是UX的核心。


设计体系结构


为了建立一个设计体系,我们系要打破它然后理解他的不同部分:



也涉及到一些灵魂深处的探索,当要创造一个设计体系时,需要问一些问题。


这个体系在现在和将来会如何工作?

我们的想象是什么?

我们想要解决什么问题?

这些问题最影响谁?

我们希望设计体系对我们的工作有什么影响?


其他人是如何解决这些问题的:


[How we’re using Component Based Design – Lewis+Humphreys – Medium](https://medium.com/@lewisplushumphreys/how-were-using-component-based-design-5f9e3176babb)


https://blog.prototypr.io/design-system-ac88c6740f53


小团队如何做一个设计体系?


当你还没有足够的资源、时间、预算时,你从哪里开始?


1.不要从头开始


“ 当你想要从头开始做一个苹果派时,你必须先发明一个宇宙。“

————Carl Sagan


我们团队正在研究其他人的设计系统,以便我们可以,正如Austin Kleon所说的:


(像一个艺术家一样去偷窃)


许多大厂公开了他们的设计体系,也分享了Sketch文件,我在下面分享几个。


另外,也有一些工具可以帮助你快速建立一个设计体系的底线。


[Frames for Sketch - Web Design System](http://framesforsketch.com/)

http://janlosert.com/store/symbols-styleguides

https://www.sketchappsources.com/search_bootstrap.html


2.知道你在做什么?


我们已经决定,必须完成对所有站点和属性的UI审计。我们可能得请几个人帮忙把这件事做完。由于它只是记录存在的东西,所以从其他人那里获得帮助可能并不那么困难。这可能会耗费许多时间,但最终还是值得的。我们将能够在创建新组件时进行整体设计。


下面这个链接也许可以帮助你学习如何进行UI审查:


https://www.invisionapp.com/blog/guide-to-effective-ux-audit/


3.事先的准备


设计体系是一个有活力的文件,你要意识到工作是永远不会结束的。当我们在项目中迭代工作时,我们利用脑中的元素进行设计,最终会形成一个设计体系。幸运的是,我们团队比较小,这有利于我们的合作和模仿别人。


小贴士:在Sketch中建立symbol,我知道,这看起来似乎很耗费时间,但是一旦你了解了symbol的力量,你会感谢这句俗语:


“ 磨刀不误砍材工”


4.知道自己的局限


从简单开始着手。


一些设计体系包含代码片段。这是最终的目标,因为这能增加在公司中的普及率,也可以产生一个一以贯之的用户体验。但是,我的小团队无法做到这样,现在还不是时候。


我们打算从简单的sketch设计文件开始。一旦我们做的差不多了,我们将会做一些前端工作,包括创造CSS。允许工程师来使用他们的 “ 选择的武器 ” ,可以让设计体系在代码一端也可以有机的生存下来。代码可能每天都在更新,但要保证我们手上的都是最新的。


5.保持组织


听起来很简单,但随着项目的堆叠,和截止日期的迫近,会让你想要尽快而马虎的完成。保持更新的确需要花费一些时间,而且永远不会结束,但这能让大家更加有条理,减少沟通成本。当我们开始一个新项目,利用我们前面构建的UI Kit,我们需要保持下去。否则,我们未开始就要失败了——到处都是不同的设计样式风格。


设计文档版本控制是所有设计师的梦想。但是没有一个产品做到100%的正确。我们将利用Abstract和Plant做一个例子,看看它如何能帮助我们走上正轨。在一个企业中工作,我们唯一可以使用的在线文件储存平台是 One Drive。如果你不受限制,Google drive 和 Dropbox 也可以是你的选择。


https://sketchapphub.com/resource/abstract/

https://plantapp.io/


这些是我们团队开始做的第一步,我们也打算去尝试更多。虽然我们取得了一些进展,我也想听其他小团队的意见,甚至是一个人的团队,学习他们是如何解决遇到的问题的。


设计体系名录

可以模仿的一些设计体系(stealing like an artist)

https://github.com/miukimiu/design-systems

https://atlassian.design/

https://airbnb.design/building-a-visual-language/

http://www.bbc.co.uk/gel/

[Carbon Design System](http://carbondesignsystem.com/)

[Home - Office UI Fabric](https://developer.microsoft.com/en-us/fabric#/)

https://fluent.microsoft.com/

http://harmony.intuit.com/

https://www.ibm.com/design/language/

https://www.lightningdesignsystem.com/

[Lonely Planet Travel Guides and Travel Information](http://rizzo.lonelyplanet.com/styleguide/design-elements/colours)

https://material.io/

https://design.trello.com/

https://design.pega.com/

https://www.predix-ui.com/

https://standards.usa.gov/

https://experience.sap.com/fiori-design-web/

https://polaris.shopify.com/

http://patternlab.io/


样式库/设计规范

https://solid.buzzfeed.com/

https://buffer.com/style-guide

https://www.duolingo.com/design/

https://www.futurelearn.com/pattern-library

http://designguidelines.co/

http://styleguides.io/

https://ux.mailchimp.com/patterns

https://www.yelp.com/styleguide



本文链接:https://medium.freecodecamp.org/how-to-build-a-design-system-with-a-small-team-53a3276d44ac

本文作者:Naema Baskanderi