《设计体系:数字产品设计的系统化方法》读书笔记

书引

《设计体系:数字产品设计的系统化方法》作者研究过各类公司建立设计体系的经验,向我们展示了如何通过构建设计体系以支撑数字产品的设计,在符合团队文化的基础上,确保设计体系能够帮助实现产品目标。

本书面向的读者:尝试将设计体系融入组织中的中小型团队

△ [英] 阿拉 • 霍尔马托娃,2019

本书简介

「 应当先做设计再出规范,还是先出规范再做设计?」

「如果老板的意见与设计师自己的想法相左,设计师应该坚持己见吗?」

这些都是工作中常常会遇到的问题,它们很难被彻底解决,为了改善它们,一些优秀的设计团队开始以更为系统的方式展开设计工作——构建一套设计体系。谈到设计体系,最容易想到的是各种控件组成的 library,但这些仅仅是设计模式或者说是样式指导,我们需要将其纳入更大的体系之中,让这些模式之间紧密相连,形成一个整体,以确保设计体系能够有效帮助实现产品目标。

建立设计体系的优势:

  • 通过清晰的设计语言,明确产品调性
  • 提高设计决策、设计与开发沟通的效率
  • 让团队更加稳固

如果你对设计体系的理解还不是很清晰,可以先看看下面这些成熟案例:

1. 平台级设计体系

APPLE 的 Human Interface Guidelines:
https://developer.apple.com/design/human-interface-guidelines/

Google 的 Material Design:https://material.io/

Microsoft 的 Fluent Design System:https://www.microsoft.com/design/fluent/

2. 公司级的设计体系

Atlassian 的设计体系:https://atlassian.design/

IBM 的 Carbon 设计体系:https://www.carbondesignsystem.com/

蚂蚁金服的 Ant Design:https://ant.design/

设计体系

何谓设计体系,从设计实践的角度来说,它包含三个层级:

第一层级:组件库

界面中所有被复用的组件。比如按钮、文本框、标签页等,指导设计师及前端工程师高效开展工作。

第二层级:设计语言

设计语言是将产品塑造得独特且风格统一的一套法则。组件库仅仅提供了对同一类元素的约束,缺少不同类元素之间的联系。而通过设计语言,你可以明确元素之间的结构关系。

优秀的产品都会打造属于自己的设计语言,统一自身的风格且区别于其它产品。比如很多优秀的产品,剥离开它的 Logo,你依然能看出这是它的产品。

△ 反例——前一秒多么炙手可热,后一秒就多么朴实(图例来自知乎小螳螂品牌服务机构)

△ 认出是哪款车了嘛

△ 特色白

第三层级:设计体系

组件库和设计语言定义了产品该是怎样的(what&how),却没有说明为什么是这样构建和定义的(why)?设计体系则包含以下内容:设计目的、设计原则、组件库、样式指南,以及设计与开发的工作流程的实用工具。它是构建设计语言和设计模式的底层基础。

书籍概述

全书共分为两个部分。

第一部分讨论设计体系的基础——模式与实践。

模式指的是可复用的元素,它们之间相互关联,构成了界面的设计语言。

实践则是指创建、使用和共享这些模式的方法,比如确立一个使用原则和构建一个模式库。

第二部分侧重于阐释建立和维护设计体系的实际步骤和实用技术。

规划任务,编写界面清单,建立模式库,以及创建、记录、发展和维护设计模式等。

设计体系不是一夜之间就构建出来的,而是通过日常的实践逐渐形成的。为了让这个体系在团队中运行更有成效,我们需要理解它是如何运行的,它包含什么,出现问题的原因是什么,而团队的组织架构、企业文化、设计方式等都会影响设计体系。

第一部分要点概述

第一部分的要点:设计目标、设计原则、共享设计语言、建构设计模式。

1. 目标

建立设计体系的目的是为了实现产品的目标。

无论是团队的运作方式或是设计模式,都应该针对这个产品目标进行设计与优化。

高效的设计体系中,不同的子体系会因为同样的目标而相互连接,协调一致,如果设计体系发生割裂,会导致用户体验的割裂。

2. 原则

坚实的原则是任何设计体系得以良好运转的基础。

不同公司有着不同的原则,有的侧重于品牌,有的侧重于团队文化,有的侧重于设计流程。设计原则很可能只适用于某一段时期或特定项目。

如何制定有效的设计原则:

  • 从目的开始。设计原则必须遵循产品的目的,传递产品的精神。
  • 寻找共识。如果是在定义阶段,让团队成员各自回答关于设计原则的问题,从中寻找共识,确立优先级。
  • 设计原则的描述要真实且贴切,实用且可操作

模糊的设计原则:明确

实用的设计原则:「第一优先级只有一个,什么是你希望用户最先看到的或最先用到的」

模糊的设计原则:简单

实用的设计原则:「把界面做到牢不可破,就像儿童玩具一样,确保用户可以随意探索,不会因为错误操作而崩溃。」

模糊的设计原则:有用

实用的设计原则:「从需求开始,去做调研、去分析数据,去与用户交流,而不是做假设。」

3. 共享设计语言

设计模式需要通过设计语言连接起来,语言是协作的基础;

设计语言是整个团队为了打造有效而统一的用户体验而建立的,团队成员对于实现目标会有着相似的心智模型,才能更有效地进行设计创造。团队成员不仅要对语言形成共识,还要对语言的用法形成共识,包含如何创建模式以及使用设计模式的方法和原则。

建立设计语言的好处在于,它可以让我们较少地关注模式,而更多地关注用户,通过有效的设计语言弥合系统模型与用户模型之间的差距。

在确定设计语言的时候需要注意,要确保你的设计语言,可操作,可重现,见下图。

△ Tom Osborne的「视觉音量指南」

具体实践:

  • 让团队成员清晰理解品牌愿景,将设计体系作为入职培训的一部分
  • 共享(在团队内宣贯及培训)设计方法、前端架构
  • 细化工作细节:比如设计与开发统一命名;打造典型的界面库;定期进行模式库的更迭与维护
4. 设计模式

设计师常遇到的问题是,如何将高层次的概念,比如设计原则、品牌价值等,物化为具体的用户界面元素。其实关键在于建立一种「优先级」的意识,比如对于 TED 来说,信息的清晰比美观更重要,因此在界面设计上,我们可以看到它们选择了更容易容纳长标题的布局方案,而没有妥协于美观度选择文字截断的方式。

△ TED网页设计

我们设计界面的目的有两个,实现某种目标以及创造某种感受,因此会产生两类模式,功能性模式和感知性模式。

功能性模式

功能性模式是界面中有形的组件,帮助用户或者激励用户完成某种行为。它的执行、内容、交互方式和显示效果可能会变,但是它所鼓励的核心行为保持相对稳定。团队需要充分理解模式的目的,才能确保它和用户的预期一致。

感知性模式

感知性模式则更像样式,它用来描述组件是什么类型的,给人的感受如何。比如两套结构相同的房子,传递出来的感受可以千差万别——一个温柔居家一个冰冷工业风。感知性模式可以让系统更为连贯,好的设计体系能够在品牌的一致性、创造性表达以及业务需求之间取得平衡,设计师无需过于拘泥于一致性。

由于数字设计已发展多年,大多数的设计模式都已打造成型并为人所熟知,设计师无需在此花费太多时间。如今,设计师和开发人员都希望建立动态的模式库,包含设计模式及其对应代码,见下图为 ant motion 的动态组件库。

△ ant motion动效组件库

具体的实践方式将在第二部分进行详述。

欢迎关注作者微信公众号:「二楼自习室」

本站所有素材均来自网络,如果侵犯了您的版权,就随时联系我们的客服。你还可以关注我们的微信公众号与微博公众号随时获取我们最新动态。
UI社 » 《设计体系:数字产品设计的系统化方法》读书笔记

良凡设计-专注高端品牌企业官网建设--UI社官方推荐

立即查看 咨询客服