超详细的《Design Systems》读书笔记 - 优设网 - UISDC

超详细的《Design Systems》读书笔记

2018/04/01 8714评论区

合作作者 Hesivell 带来的读书笔记,关于我们曾经介绍过的《Design Systems》一书,并配有涂鸦笔记风格的手绘插图,强烈推荐。

这个体系像是渗透在产品中的一种语言,让产品人员、设计师、程序员用同一种语言交流,提升协作效率;又像是一个自动化智能化的工具,让整个团队进行自循环,尽量减少人工维护。

类比起来,有点像是阿里的中台。无论如何也是很前沿的一个方向。

一、什么是 design system

Design Systems 这本书的主线,讲的是一个叫做「设计体系」( design system )的工具。顾名思义,就是把整个产品「体系化」。

对于产品中比较成熟的那些模块(比如社区的 feed 卡片格式),统一进行组件化,设计层面和开发层面统一命名共享资源,应用到业务线的后续迭代。这部分成熟模块就可以在产品中自循环,无需设计师后续维护了。

而设计师的人工精力被解放出来,主要用于新功能的开发,新脑洞的爆炸,和产品方向的探索。

二、有规律的产品

其实我觉得每一款产品都有自己的规律。

当你从系统层面俯视一个产品,就像站在高楼顶上俯视建筑结构一样。

这时候可以看到在地面上看不到的一些规律。

如果产品中每个模块的信息量、动效、颜色、轻重、语调,都在一开始被赋予了使用场景和理由,后面只要从中选取或者做必要的补充,就会在秩序和效率上有很大提升。

三、原来产品的「气质」也是可以用系统化的方法去打造的

如果任意提取一个页面,去掉LOGO和其它产品信息,那么你能认出这是个什么产品么?

产品应该有一个清晰的「人设」才能给用户留下深刻的印象,要么风格鲜明,要么平易近人,总之设计要做得极致一些,才不会淹没在竞品群里。

不过看了这本书我才知道,产品的气质这种抽象不可触摸的东西,也是可以通过系统化理性的方式来打造的。

一种方法是自上而下定义品牌关键词,再融入具体样式;另一种方法是自下而上,梳理产品现有的与品牌关联的元素,比如配色、图标、版式,找出那些明显和品牌定位脱节的样式,梳理,精确化品牌调性。两种方法当然也可以结合,双向打通。

四、万变不离其宗

Patterns evolve,behaviors remain

有人说在设计之初就要定义好产品的基本组件样式,但也有人担心说一开始限制太多会影响后续的迭代发展,或者产品迭代了之后样式也会有比较大的改动,反而会增加不必要的工作量。这也是我之前一直觉得矛盾的地方。

这本书中的观点是,尽管随着时间的推移,基本组件的样式、组合方式、交互模式都会有所变化,但它们想要支持或者促进的「用户行为」是不变的。就比如无论用手机拍照,还是相机,都是为了支持拍照的行为。

所以在最初应该列出产品中核心的用户行为,并基于它们来对样式进行定义和分组,就会有主线可循。

另外:一个用户行为可以对应多个解决方案和样式。

五、几种不同的变体可以归为统一样式

类似的样式变体可以归为同一种样式,方便管理。

例如 book item,有用在发现页的,也有用在推荐位的。这时候它们的组成成分可能会有些不同。相同的部分,就是 book item 通用的基本组成元素,例如标题;不同的部分,就是切合使用场景的元素,例如推荐位的推荐语,或发现页的标签。

六、命名、共享和活用

1. 为什么要给组件命名?

主要是为了集体共享、方便识别和运用。比如在 Sketch 里,命名一个设计模块叫「视频 card-评论」,那么对应的开发代码库里,这段代码也要叫「视频 card-评论」,这样就保证设计师和程序员之间用一样的语言沟通,消灭代沟。

就像语言一样,其中的词汇,需要流传和使用,才能不断强化;但如果词汇本身比较艰深晦涩那就不容易流传开来。因此命名简单明确,才能保证之后的使用方便。

2. 那么为什么要共享?

还是比作语言,普鲁士语和我大清朝的满文消失了就是因为知道它们的人太少了。同理,如果团队里大多数人都不知道设计体系的用法,那么设计体系还有什么意义呢?

所以要让设计体系成为日常工具活用起来,提升效率,共享是最关键的。

七、关于这个读书笔记系列

随着阅读进度的深入,我发现我对 design system 的理解也越来越不一样。

本书分为两个部分,特别是读到两部分过渡的时候,感触非常深。

前面我还停留在浅层次或者相对泛的「产品要系统化」这种概念,然而确实,回顾这过程中记下来的每个点,比如产品要明确气质,比如拆分模块要以行为目的为导向,比如设计体系的重点不在构建而在使用……每一次,我都会用这些新的观点审视我之前的思路,或者反思哪里是不足,哪里需要修补;每一次,对于我来说都像恍然大悟,都是一个新的小起点。

八、就是今天

产品设计成体系之后,设计师会不会失业?

△ 图源:Salmorejo Studio 献给宇宙 / 以及茫然未可知而又充满了机遇的未来 / 以及猫控主页君 C7210

最后整理这一系列笔记的时候,在最初的介绍部分,我想到 design system 有点类似阿里的中台。而传说中,中台就是「一个可能会让设计师失业的系统」,因为大部分的设计流程到后面都可以集成化、模块化、自动产出。

那么,哪些设计师会随着设计的自动化趋势而失业呢?哪些又完全不会?我想这应该是我们所有设计师应该一直持续思考的问题。

我相信,这是一个开放式结局。

欢迎关注作者微信公众号:「Beforweb」

「学习组件化设计,你还需要这些」

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/design-systems-reading-notes

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里