今天来分享一下什么是设计系统。
1
现在有什么问题
我们都希望通过设计系统来解决问题,那么,我们现在有什么问题呢?
首先是,团队重复工作,带来的效率问题:我们都很讨厌重复的工作,但是像这样的日常问题我们经常会遇到;当我们需要复用某块设计去完成一个非常相似的需求时,我们需要找到负责这块设计的设计师,拿到设计稿之后,我们还需要将它的结构融入新的设计。在很多情况下,这几乎等于重新设计了一次,在开发阶段这种情况也不少见。
1.2 用户体验不一致
这样一来,许多相似却又不完全一样的设计,就一路进入到了生产环节,导致了第二个问题,用户体验不一致。
这种场景,我们也非常熟悉,也就是说,重复工作不仅为我们带来了效率的折损,也为用户带来了更多的疑惑,甚至让代表品牌形象的品牌色显得模糊不清,而当这些模糊不清的规范和组件越来越多构成在我们的产品当中,我们就会面临一个更重要的问题:产品难以迭代。
1.3 产品难以迭代
也就是说,即使我们产品的格局,已经发生了数次重大的转变,我们在 N 年前做的设计和写的代码仍然存在于我们的产品当中。而这些设计和代码,甚至相互交叉依赖,为我们局部的更新和迭代形成了巨大的障碍。这导致我们几乎只能寄希望于「全新版本」或者「全面重构」来一次性的解决问题。
但是,如果我们继续使用不合理的架构,又怎么能保证这一次版本不是在构建更大的障碍呢?
为了防止我们的工作逐渐失控,也为了让我们回到更有创造性的工作环境,让我们有足够的时间和空间,可以去真正的解决用户需求,提供更好的用户体验,我们就必须弄清楚这个问题的根源在哪。
我们先从一个简单的故事开始:
这个故事叫巴别塔,在当时,人们想要兴建一座能够直通天堂的高塔,但是上帝看见了人类的骄傲,为了阻止这个计划,他把人类的语言打乱,让人类彼此不能交流,巴别塔计划后来就失败了。
接下来,我们再来看上面的部分,也就是语言被打乱后继续保持建造的场景。
我们可以看到,从自从语言被打乱之后,整个后半部分,都朝着混乱的方向在发展,最终导致荒废。
虽然单独看其中的每一个部分,都继续保持着对工艺的基本追求。
但因为彼此不能听懂对方的语言,它永远不可能完成预期的任务,更可怕的是,看起来也没有什么修复的可能。
在设计领域,我们也一直在寻找更统一的生产和协作语言,来消除我们在协作中的面临信息损耗,我们从规模化的印刷系统开始,一路走到在大型城市中,通过简单的设计规则,建立庞大的识别系统,让我们生活得效率更高。
一直到今天,数字行业的设计师们,也没有停下探索的脚步,我们的方法也从最初的设计语言,进化到了今天的设计系统。
接下来,我将带大家看一下,什么是设计系统,设计系统会给我们带来什么好处。
2
什么是设计系统
我们来看看,一个流行的设计系统,会是什么样的结构。
一个流行的设计系统,一般包括:品牌,内容,基础,组件和模式,一共 5 个主要部分;然后各个企业会根据自身的业务不同,调整其中的重心。
在这 5 个部分中,除了我们已经熟知的设计规范、组件库等内容以外,还包括了不太常见的品牌指南,内容规范和设计模式等等内容。
2.1 品牌
我们先从品牌开始;品牌部分,主要承担了向设计师解释「我们是谁」,这样看似哲学问题,还包括向团队同步我们的使命和价值观。
品牌部分还记录和指导了我们应该怎么在设计中做出正确的决策。
一个好的品牌指南和设计原则,能让我们从更高的企业使命、价值观和设计原则出发,去思考我们的设计,最终达到让设计服务于团队共同愿景的目的。
2.2 内容
第二个部分是内容,内容包括了我们在界面文案中,使用的语气和语调,以及写作风格的规范。
同时,也将向我们的团队成员提供词汇表这样的内容参照,防止在使用文案时出现不确定性,甚至出错。就像我们的视觉和交互一样,我们的内容也应该帮助整个产品设计工作流建立更高的清晰度和一致性。
在这些基础的功能之外,内容的规范还有更多有趣的应用场景。
例如我们可以用更容易理解的语言,来替换掉一些机械化的语言;我们也可以在和用户对话的时候,根据产品性格选择合适的表达方式,例如 bilibili,就大量采用了一种适合自身性格的内容风格。
2.3 基础
接下来,我们看第三部分,基础,基础就是最小粒度颗粒的合集;简单来说,我们将一个设计不断拆解,直到不能再拆到部分,就是我们基础部分的构成。
比如字体,颜色,图标和间距,等等一系列设计的基础元素。
2.4 组件
第 4 个部分是组件,主要可以分为设计组件库和代码组件库两个大的部分。在这两个部分中,我们希望每个组件都能被精心的设计,满足特定的交互需求,并且像这样,通过严格的响应式设计,确保每个组件都尽可能可以用在复杂语境当中。
2.5 模式
最后一个部分,叫做模式,模式这个概念出现产品设计当中还比较新,不过我们可以简单的理解为交互规范的延伸。
模式,可以理解为,用户在我们的产品当中,如何完成一项特定任务的通用解决方案,模式还包括,我们向用户传递大段信息时使用的信息模型,让用户能使用相同的信息模型来获取信息,从而减少学习成本。
记录和使用模式的意义在于:让我们有机会可以集中的优化这些设计和交互,最终减少用户的学习成本,让用户可以更加愉悦的完成各种任务。
2.6 工作流
最后,我们回过头来看看我们的设计系统,从本质上来说,这 5 个部分的作用,都是为了记录和使用更多的准确信息来设计产品,减少我们出错的机会,同时,让这些信息拥有灵活性和扩展性。
为了保证这些信息的时效性以及新的信息能够被及时的记录进来,我们就必须设计一套机制,让这些信息流动起来,我们以文档为主要的载体来储存我们所有的准确信息,以及他们的使用和更新的方法。
当这些信息通过文档、设计资源库、代码库等形式与我们的产品,设计,开发人员连接起来,就形成了我们的工作流,我们可以叫它设计系统工作流。
2.7 一个按钮的旅程
我们以一个按钮在工作流中的旅程来举例,来看一下,设计系统工作流有什么不同。
在设计时,我们借助设计工具提供的能力,帮助大家使用按钮的镜像版本来做设计,从而防止出错。
即使在过程中,这些按钮的镜像版本被不小心改掉,也都会在产品上线前,从代码组件库当中拉取到唯一正确的版本。
3
行业与我们
3.1 行业
在过去的几年时间里面,我们可以观察到设计系统社区正在蓬勃的发展。
也能在高度重视效率的金融领域,看到高盛这样的企业在积极推进设计系统。
即使在非常传统的公共服务领域,我们也看到了像 GOV.UK 这样的组织,在积极的推进设计系统;甚至他们的设计系统,已经为他们带来了丰厚的“回报”:每年政府节省 1700 万英镑的公共资金。
3.2 小红书
在2020年下半年,我们启动了小红书的设计系统项目,像前面讲到的结构一样,我们最终的目标是搭建一套完整的设计系统体系,来为产品设计服务。
我们期待小红书设计系统,会像先行者们一样,帮助我们实现产品设计效率的巨大飞跃,让我们能够更加专注的解决用户问题。
同时,也能让我们有有多机会,向市场推出更多有趣的产品和设计,让我们的工作变得更加鼓舞人心。
目前,我们正在推进文字和颜色相关的规范和工作流,在设计和开发环境中落地。
在工具和平台的部分,我们看到了像 Figma 这样的明星工具,仅仅在刚刚过去的 2020 这一年的时间里面,为我们实践设计系统,带来了非常多伟大的功能和想法,让我们有机会搭建出更加灵活的组件库。
结束语
谢谢?
主讲人:林恩
视频制作:假发、小小兔
创意指导:Abbie、一凡
平面设计:空松
编辑:Glendon
本篇文章来源于微信公众号: 小红书DER