菜单

如何使自己的“设计系统”得到商业的认可

来自:花火译文小组 阅读数:28 2020/07/27


Jul 9  阅读时长约7分钟左右 

作者:Dmitry Plotnikov

翻译:cyruan、田晓青、罗几、Dong Cong

审校:Dong Cong




如何通过整合自己定制设计系统开发、产品设计、以及质量保证帮助企业提升自身价值。成为众多企业和技术开发的首选合作伙伴。


.  .  .


现如今,几乎所有网络营销会议上都会提到设计系统,媒体会对最成功的案例进行评级,而大品牌往往积极致力于成功案例的贯彻。在这篇文章中,我们会探讨为什么设计系统是必需的,以及如何正确运用到商业中。


“设计系统”开发流程概括图


.  .  .


什么是"设计系统"


这个术语是在20世纪中期出现的,在这期间,设计系统在零售业中的需求非常活跃:超市和产品制造商使用专门的专业模版工具创造他们的包装标识。


随着互联网普及,网页设计真正步入我们的世界,直到2000年末,这些操作工具仍然相当原始:网站还是一系列混乱的flash动画,在使用的过程中因不熟悉的操作工具而被束缚。那时候还没有“可用性”这样的意识出现。


这些情况在2010年之后朝好的方向改变,人们开始思考怎样使网站更加友好,如何充分利用团队资源使之生效,这些问题得由设计系统来解决。


实际上,这些网络系统是品牌的可视部件元素,由一些细小的部分组成:字体,颜色,形状,图标,透明度和圆。网站的组成部分有——按钮,输入框,文本块,表格,筛选器和各种条元素。同时,代码可以生成这些元素,使排版设计迅速搭建出新项目。


首次有目的地尝试创建这样一个系统的是谷歌。2014年,Material Design(谷歌开发的设计语言)计划实施,改变了Youtube,谷歌地图和公司其他服务的界面布局。之后,相似的系统相继在大型互联网品牌出现——比如银行和在线服务。我们可以在一些网络平台发现最佳的设计系统案例,其中最有名的是styleguides.io 和 designerlynx.co


.  .  .


谁需要设计系统?


设计系统对最终的用户来说很方便,几乎所有东西都为他准备好了。无论用户通过手机应用还是桌面浏览器浏览公司的内容,他都应该能体验到同样的舒适度。


经常要更新当前产品并推出新产品的大型服务商需要这样的系统,例如Airbnb。据创始人透露,创建这个设计系统是值得的投资,也是一个巨大的飞跃。自从共享设计语言和源码后,他们几乎可以同时在所有本地平台上创建和运行功能,发展速度得到大幅度提升。


Airbnb 模块化设计系统-组件页


设计系统还适合小型快速发展的项目,因为它有助于快速推出新服务,还包括网站新的部分和功能。


总体来说,设计系统能够实现以下商业目标:


  • 提升品牌识别度——一个非常注重系统界面细节设计的公司,更容易在用户记忆中留下长久的印象;


  • 优化团队工作——设计系统能够完成分配给开发者和设计师的部分工作;


  • 节约时间——设计系统使页面组装变得更简单:从组建库中拉出已经准备好的元素然后组装起来;


  • 将提供媒体宣传——企业对新的设计系统项目非常有兴趣。


如今、银行、在线平台以及服务提供商都开始使用设计系统。对他们来说,让用户通过不同设备使用产品能体验到同样的舒适度很重要。另一个有趣的设计系统案例是Uber设计系统。


设计系统提高了员工对公司产品信心,并对品牌声誉产生了积极的影响。它的整合可以作为良好的公关步骤,提高公司在数字服务市场的地位。




设计团队(红)和开发团队(蓝)如何步调一致,为了避免重复工作而建立清晰明了的路线


.  .  .


在设计系统和UI工具包之间作出选择


那么问题来了,常规的UI工具包已经能够满足大多数公司的需求,为什么他们还需要一个设计系统?


为了更好的去理解,我们首先能够肯定的一个概念是,UI工具包包含了网站界面的元素:按钮、选项卡、箭头、滑块等,项目中所有可视化组件都存储在UI工具包中。如果有必要,你完全可以在这些元素的基础上,架构整个网站。


设计系统是一个很宽泛的概念,它既包含了哲学部分(品牌价值),还包括应用的部分——规范、品牌说明和UI工具包。这是一套品牌组件,最大程度地升级呈现为一个工具包。最后,工具包被转换成代码,这让使用者可以更快地搭建出一个新的项目。


情况是创建一个设计系统,而不仅仅是一个UI工具包所能产生的意义。如果:


  • 公司有一些相关的产品,需要系统性地去扩展;


  • 公司有必要去优化研发团队的工作;


  • 品牌不是唯一的视觉语言;


  • 已经有一套完整的UI工具包了,但是却没有一个单独的数据库供研发和设计人员去使用。


如果我们谈论的只是一家初创公司,那么我们最好专注于关键的业务流程:如产品和期待服务值的提升上,因为这些行动可以在短期内给公司带来利润。


说到设计系统,研发起来会有点困难,因为投资方不会把钱直接投在这里,这会是一个着眼于品牌战略发展的长期项目。研发出一个好的设计系统至少要花费六个月的时间,而且是需要相关领域的专家们几乎放下手里其他工作,全部投入其中。


这就需要一名设计师(负责绘制元素、组件、模板),一名研发人员(用代码去实现视觉元素)。如果客户们并不想把时间和金钱投放在设计系统的研发上,那么你就完全可以使用常规的UI工具包去完成工作了。


使用“设计系统”(红)要比未使用“设计系统”(蓝)的设计任务效率提升20倍


在你开始开发一个设计系统之前,需要完成以下几个步骤:


1. 与整个开发团队达成一致

因为这个项目将需要动员所有的劳动力,最简单的方法是激励同事,解释开发设计系统不仅仅是简化他们的工作量,也为以后的工作当中迭代项目时使用得更加简便。


2. 重新定义用于衡量“设计系统”的准则

构建一个设计模式、规范、设计组件库,可以防止产品大规模发布时出现不一致。这可是增加用户忠诚度对企业生存和发展的重要意义。


3. “设计系统”的长期有效性

为了满怀信心地快速迭代,团队可能会有新的想法,原本将需要花费很长时间去开发设计组件,直到“设计系统”版本的出现,可以支持可伸缩的UI语言和精简用户体验,随着品牌接触点能支持跨越多个设计渠道,适配不同设计平台,才能保持这个系统长期有效。


.  .  .


现在是时候把这种想法扩展到产品的各个方面了


创建一个设计系统对设计师和开发人员来说显然是有利可图的。因为这样可以简化他们的工作。但是所有的参与设计开发的工作者都要面临同一个问题:如何让所有的涉众或者你的高管相信实现这样一个系统的好处?


1.明确企业的需求

如我们上面学到的,并不是每个公司都需要设计系统。作为一个代理商,可以提供给那些有稳定的市场地位的企业,这些企业需要依赖强大的后台技术支撑这样的系统。而小型创业公司可以借助UI工具包而存在。


2.验收与反馈

经常与客户加强沟通。他们会帮助你理解一个企业每天面临的问题。根据这个问题实施思考和不断迭代方案,并向他们提供安排好的建议。


3.只看结果,不看过程

通常情况下,客户都不知道“设计系统”具体是什么东西。他只是简单的想看看“设计系统”最后的成果。因此,重要的是强调设计系统实现的产出成果,而不是关注设计流程,这些优化过程只要设计师和开发人员来完成即可。给客户看到的应该是一个更注重呈现出来的结果,是否能为他们的企业创造有效效益。


4.讲透商业利益

虽说视觉设计是一种主观的东西,很难立即评估其商业价值。不过你可以从另一个角度确保这个系统对公司本身的有效性和其持续有用性;开发新产品的过程是否实现自动化流程,是否简化团队的工作量。


这可以让员工减少大量的繁琐的操作工作,便于让员工专注于产品创造力和战略部署。


文字阅读障碍表使用准则

(当背景色越深时,文字建议使用白色字体,反之亦然)



小结:


一个好的“设计系统”应将完美地处理和优化员工的工作任务。虽说这是一项庞大的任务,最终需要我们许多团队的努力。可以把这件事告诉你的老板,创建我们的设计系统值得加大研发投入,对整个企业的发展也是巨大的进步。



原文:https://medium.muz.li/how-to-get-executive-buy-in-for-your-design-system-approach-8bdf2e5976c9


感谢阅读,以上内容由花火译文小组翻译,转载请注明出处!





往期精彩译文


如何界定网站设计项目的重要阶段

必须关注新的三大设计趋势

如何进行色盲无障碍设计?

Apple Music概念设计构思:搜索功能重设计

如何轻松实现设计交付



- END -

                                                      花火圆桌

花火社群自2017年成立至今已经汇集了 18000+设计小伙伴,在这里有干货、有直播、常分享、共成长,快来加入我们吧!


                                                      加huahuokefu进微信群,一起交流成长!
                                                       关注公众号回复关键词可获得最新资源
                                                          软件 | UI | 交互 | C4D | 动效 | 插画

花火公众号

关注花火公众号

回到顶部