进阶篇28. 设计系统简介(下)

设计系统的价值

扩大设计规模

随着团队和业务的发展,项目会变得越来越大,多个设计师会加入到同一个项目中。这就必然导致设计的分工,每一个设计师都只负责设计一小部分界面,比如,一个搜索页面,或者账户管理页面等。这很可能会导致设计缺乏统一性和协调性,因为每个设计师都有自己的风格,当他们独立的而非系统的解决设计问题的时候,就会发生类似的情况。

由于缺乏通用的设计语言来统一产品的风格,用户体验就会面临挑战,甚至出现严重的问题,设计的过程也不会顺利,对于设计的好坏进行评价也没有任何说服力。因此,团队中应该就设计风格及其具体的表现形式达成一个共识,并且以文档和组件库的形式共享给所有人,形成一个团队统一认可的最佳设计实践准则。这样每个设计师都可以很方便的按照准则去解决自己的问题。

在以前大部分的情况下,设计师都会(用PS或者AI)为项目设计一些效果图,这种图一般都是静态的。它的问题在于,这种静态的效果图往往很容易就过时了——随着项目的进展和变化,实际的项目界面和最初的效果图往往相差甚远。这个时候,一个实时更新的风格指南,或者说设计系统就可以很好的解决效果图过时的问题。

因此,通常的解决方案是,创建一个供团队内部成员访问的设计系统网站,让他们都能很方便的找到他们需要的文档、组件、最佳设计实践准则等,这样做使得团队成员能更好的保持一致和同步。

管理你欠的债

随着团队和项目的发展,债就产生了。这个债并不是经济上的债,而是技术和设计上的。债的产生是因为在设计过程中采取了一个图块、省事的方案——这在设计工作中经常发生,因为某些条件限制,比如时间、成本、或者其它团队的进度等等原因,导致设计工作必须先做一个临时的版本,等某个或者某几个条件成熟之后,再来重新做一个最终的版本。

债往往都是一些重用性很差的界面元素,风格也不统一,而他们的利息则是项目的可维护性变差。当债的累积达到某一个量的时候,就势必会影响项目的发展。

设计工作的进行并不意味着设计欠债必然会产生,就好像花钱并不意味着会产生经济上的负债一样。借助设计系统可以更好的管理和减小所欠的债,保持设计和开发工作沿着预定计划健康发展和迭代。

设计上的一致性

不断的、重复的使用标准化的组件进行设计可以使得产品的界面具有更好的可预见性,用户甚至可以在不进行学习的情况下就可以预判每一个组件的功能,这样的界面更加容易使用。标准化的组件同时还使得设计师们在样式上少花精力,而更注重于更好的用户体验。

快速做出原型

有了设计系统,你可以更快的作出设计原型,因为你只需要把各个组件组装到一起就可以了,就好像搭乐高积木那样。并且,组件之间的搭配和变化是可以多样化的,因此,理论上这个原型可以解决各种问题。(这一点其实不用解释那么多,Bootstrap的流行就说明了一切。)

快速迭代

使用设计系统,可以减少你花在修改界面样式的精力。你不再需要去修改成百上千行的代码,而往往只需要几个组件和他们所包含的几行代码。

改进易用性

不一致的设计语言会妨碍产品的易用性。如果界面上数不清的元素及他们之间的交互都是由不同的CSS和JS定义的,那么页面的载入时间也会增加,从而带来糟糕的用户体验。并且CSS和JS代码之间还有可能起冲突,导致不可预计的结果。通过使用设计系统,可以构建一个完整的组件库而不用担心他们在一个页面上可以工作,到另一个页面上的时候却失效了。因此,这也可以缩短对产品进行质量测试的时间。

更好的可访问性(无障碍性)

对于残障人士、低速网络用户、旧电脑用户而言,网站的可访问性是十分重要的。而使用设计系统,可以在组件层面就开始解决网站的可访问性问题。

对于设计系统的一些误解

很显然,设计系统并不适合所有的团队和所有的产品,但是即使对于那些适合使用设计系统的团队和产品,人们依然不见得愿意使用它,尽管设计系统有着上面说到的那些优点。而且人们往往把设计系统的优点当做他们的缺点。

误解1:局限性太大了

误解:负责项目不同部分的设计师对于各自负责的部分可能会有各自独到的见解,而一个统一的设计系统很可能会限制他们的工作,导致在某个特殊的领域不能很好的解决问题。

实际情况:设计师往往喜欢跳出已有的设计规范,去设计一个自己的解决方案,但是这么做,就会像上面说的那样,往往会增加设计和技术的欠债。通过设计系统,可以创建新的解决方案并将其反馈到系统中,从而使每个人都可以使用这些改进。就像下面第3点会提到的那样,设计系统并不是一层不变的,而是不断迭代,不断成长的。如果现有的设计系统确实无法解决项目中的某个特殊问题,那么我们只要扩展这个设计系统就好了。

误解2:缺乏创造力

误解:用各种设计系统做出来的页面都好像是从同一个模子里套出来的东西。

实际情况:这正是设计系统的优势——一方面这样可以提高设计效率,增加可维护性,另一方面,它保证了品牌视觉形象的一致性。之所以有人会认为这是一个缺点,那也仅仅是因为设计系统被滥用了。

比如,某个大公司为自己开发了一套设计系统,然后本着开源的精神发布到网上,供大家学习和使用,结果一瞬间成为了整个行业的标准,被大部分的公司作为自己的商业解决方案,那不可避免的就会出现滥用的结果,说到这里,各位是不是想到了Twitter的Bootstrap?虽然严格来说,BS这样的前端框架和设计系统之间还有那么一点点小差别,但是其实也没有什么本质的差异。

误解3:设计系统是一成不变的

误解:设计系统被建立起来之后,工作就结束了。

实际情况:设计系统是有生命的,这意味着应该对它进行持续的维护,并且一旦有需要,就应该进行改进。如果使用了设计系统,用户界面的各个组件都来自于设计系统,因此,你改进设计系统的同时,就改进了用户界面,从而降低维护的工作量。


以上是对设计系统的一个介绍。具体要怎么设计和构架一个设计系统,从篇幅上来说可以另外写一本书,而且这并不属于本书的讨论范围,所以以后如果大家感兴趣的话,我再另外开一个帖子写。

接下来,我们将给出一个真实的使用设计系统来构建Drupal主题的例子。他的甲方是美国纽约州最大的医院集团Northwell Health,乙方是Drupal圈子里鼎鼎大名的Phase2。Northwell Health拥有23家医院,550多个门诊部及66000多名员工, 包括15000多名护士和3900名医师,每年为超过200万人提供医疗健康服务。我们可以通过这个例子来更深入的了解设计系统、组件化主题开发流程为我们带来的全新的时代。

本书共83小节:

评论 (写第一个评论)