第一部分:基础。设计系统
设计系统
在网络社区中,“设计系统”并没有一个标准的定义,人们以不同的方式使用这个术语。在本章中,我们将定义什么是设计系统以及它由什么组成。
设计系统是一套相互关联的模式而且共享的实践为服务于数字产品的目的而有条理地组织起来的。模式是我们用来创建界面的重复元素:比如用户流、交互、按钮、文本字段、图标、颜色、排版、缩微。实践是如何我们选择创造、捕捉、分享和使用这些模式,尤其是在团队中工作时。
看看这两个不相关产品的屏幕。一个来自汤森路透(Thomson Reuters)的交易和市场分析应用Eikon;另一个来自FutureLearn,一个开放教育社交学习网站。
来自汤森路透Eikon的屏幕(左)和FutureLearn的屏幕(右)。
在每个示例中,这些模式一起工作以实现不同的目的。对汤森路透来说,关键在于处理数据、实用功能、快速扫描和多任务处理;对于FutureLearn来说,它是关于深思熟虑的阅读、非正式的学习、反思以及与志同道合的人建立联系。的目的产品的形状取决于它所采用的设计模式。
汤森路透的布局是基于面板和小部件的,允许用户进行多任务处理。设计是密集的,适合大量的信息在屏幕上。密度是通过紧凑的间距、紧凑的控制、灵活的布局和排版选择来实现的,比如浓缩的字体和相对较小的标题。另一方面,FutureLearn的布局要宽敞得多。每个屏幕通常都集中在一个单一的任务上,比如阅读一篇文章,参与一场讨论,或完成一个互动练习。这里的布局主要是一个单列;有高对比度的排版,大标题,粗壮的控件和大量的空白。1
设计模式的选择受很多因素的影响。他们中的一些来自域产品属于,并从其核心功能:这些是功能模式.例如,要使用交易和市场分析软件,你需要习惯任务栏、数据字段和网格、图表和数据可视化工具。对于一个在线学习网站,它可以是文章、视频、讨论线程、进展指标和互动活动。一个电子商务网站很可能包括产品显示、列表过滤器、购物车和结帐。
的精神一个产品(或品牌,取决于你对品牌的定义)也形成了模式,这些模式共同决定了产品是如何被感知的;在本书中,我将把它们称为知觉模式.我指的是声音的语调、排版和颜色的选择、图标风格、间距和布局、特定的形状、交互、动画和声音。如果没有感知模式,您就不会感觉到同一领域内具有相似功能的产品之间有那么大的差异。
虽然HipChat和Slack有着相似的目的和功能,但它们给人的感觉却截然不同,这在很大程度上是因为它们在界面上表达品牌的方式不同。
模式也由平台约定形成。由于特定于平台的设计语言,产品可以明显地呈现出web风格或应用风格。一个产品的iOS应用程序的行为和感觉可能与Android应用程序完全不同。
在创建数字产品时,有很多种模式在起作用。这就是为什么设计很难。模式需要交互、连接,但仍然无缝地协同工作。让我们仔细看看它们。
设计模式
设计模式的概念是由建筑师克里斯托弗·亚历山大在他的著作中提出的,永恒的建筑方式而且模式语言.贯穿全书的一个问题是,为什么有些地方让人感觉如此有活力、如此美好,而另一些地方却让人感觉沉闷、毫无生气。根据亚历山大的说法,地方和建筑给我们的感觉不仅仅是由于主观情绪。这是某些有形和特定模式的结果。即使是普通人也可以学习并使用它们来创造人性化的建筑。
模式是一种重复出现的、可重用的解决方案,可应用于解决设计问题。
每个模式都描述了一个在我们的环境中反复出现的问题,然后描述了该问题解决方案的核心。——克里斯托弗·亚历山大,《模式语言》
模式语言包含253个建筑设计模式,从较大的,如城市和道路系统的布局,到最小的,如家庭住宅中的照明和家具。
类似地,在创建界面时,我们使用设计模式来解决常见问题:我们使用选项卡将内容分隔为部分,并指示当前选择的选项;我们使用下拉菜单根据用户的请求显示选项列表。2
Bootstrap的一些模式,Bootstrap是开发响应式网站的前端框架。
我们使用模式来提供反馈,显示流程中还剩下多少步骤,允许人们彼此交互,查看和选择项目。设计模式可以激发和鼓励,使任务更容易,创造一种成就感或控制的幻觉。
说服性模式的例子“识别胜于回忆”UI模式3..
大多数设计模式都已建立并为人们所熟悉。他们利用人们的心理模型,让设计被直观地理解。全新的模式需要用户先学习并采用它们——它们相对较少。4使产品区别于竞争对手的不是它使用的模式的新颖性,而是如何执行和应用这些模式,以及它们如何相互连接以实现设计目的。一组相互连接的模式形成设计语言你的产品界面。
设计语言在我们设计产品的过程中出现。我们并不总是知道这种语言是什么。有时候,有效而有趣的设计是基于直觉,我们很难明确地表达它们是如何以及为什么会起作用。设计人员和开发人员可能本能地知道它,但直觉并不总是可靠或可扩展的。在他的文章中研究设计系统”,7设计师Dan Mall指出,设计系统的主要目标之一是“扩展创意方向”。如果你需要让一群人始终如一、可靠而连贯地遵循一个创造性的方向,那么就需要模式铰接和共享.
当你清楚地表达你的设计语言时,它就变得可操作和可复制。你开始着手设计时要考虑到一个系统。例如,与其讨论如何调整一件商品以使其更加突出,不如制定一套促销模式,每一种模式都针对不同的视觉突出程度。的视觉响度指南6Tom Osborne的作品就是一个关于如何系统地处理按钮和链接的例子。它们不是单独列出,而是作为一个套件呈现,每个套件都有不同的“体积”,对应于其预期的视觉突出程度。
汤姆·奥斯本的视觉音量指南。
清晰地表达你的语言可以让你在系统中获得更多的控制权。你可以用更深远的方式影响它,而不是做一些小的调整。如果您发现一个小的设计更改对用户体验产生了积极的影响,您可以将其应用到整个系统的模式中,而不是一个地方。与其花几个小时设计下拉菜单,你可以把时间花在用户和领域专家身上,首先找出是否需要下拉菜单。当设计语言成为共享知识时,您可以不再关注模式本身,而是更多地关注用户。
在整本书中,我们将讨论很多关于为数字产品阐明、共享和记录模式语言的内容。我们将特别介绍两种类型的设计模式:功能模式和感知模式。功能模式表示为界面的具体模块,如按钮、标题、表单元素、菜单。感知模式是一种描述性的风格,它在视觉上表达和传达产品的个性,比如颜色和排版、图像、形状和动画。
将这个类比扩展到语言,功能模式有点像名词或动词——它们是界面中具体的、可操作的部分;然而知觉模式与形容词相似——它们是描述性的。例如,按钮是一个具有明确功能的模块:允许用户提交操作。但是按钮标签中的排版风格、形状、背景颜色、填充、交互状态和过渡都不是模块。它们是风格;它们描述了种类这是一颗钮扣。从前端的角度来看,模块总是以HTML为基础,感知模式通常是CSS属性。
设计系统包含许多其他类型的模式:用户流(例如带有错误和成功消息的表单的完成)、面向领域的设计模式(如EdTech系统的学习模式和电子商务模式)和有说服力的UX模式。本书的重点是将功能模式和感知模式作为设计系统的核心构建模块。
但是,当然,重要的不仅仅是模式本身,还有它们是如何演变、共享、连接和使用的。
共同语言
语言是合作的基础。如果您在一个团队中工作,您的设计语言需要在参与产品创建的人员之间共享。如果没有共同的语言,一群人就不能有效地一起创造——每个人对他们试图实现的目标都有不同的思维模式。让我们回到按钮的例子。即使是这样一个基本的界面单元也有不同的含义。按钮到底是什么?一个可以点击的轮廓区域?页面上链接到某处的交互元素?允许用户提交一些数据的表单元素?
在她的书中如何理清混乱, Abby Covert建议,在考虑接口之前,通过讨论、审查和记录我们的语言决策,应该建立一个共享的语言。这个想法可以应用于描述高级概念,以及我们用来谈论设计决策的日常语言。拥有共享的语言意味着我们有相同的方法来命名接口元素和定义设计模式,或者在设计文件和前端架构中使用相同的名称。
即使这样也可能不够。有时,一个群体中的人认为他们已经达成了相互理解,因为他们拥有相同的词汇并将其用于表达,但他们在理解上仍然保留着根本的差异。例如,在将术语“场景”作为项目中的关键概念使用了一年之后,您可能会发现不同的人正在以完全不同的方式解释它。这不仅仅是开发一种共享的语言,我们还需要开发一种共享的语言语言的使用.仅仅对这个术语有共同的理解是不够的按钮.人们还必须知道为什么和如何使用按钮,在什么情况下使用按钮,以及按钮的用途。
假设我们在接口中使用一个名为“Sequence”的元素。通过将其表示为“序列”,我们的目标是向用户传达这些步骤应该以特定的顺序来看待。
“Sequence”模块示例。
理想情况下,参与产品创建的每个人都应该知道这个元素是什么:它的名称和用途,为什么要这样设计,以及应该如何和何时使用它。7这种共享的知识越强,就越有可能被恰当地使用。设计师和前端开发人员应该具备这些知识,但如果来自其他学科(内容、营销、产品管理)的人也有一些想法,这将会有所帮助。
每个人都应该知道它是“序列”,而不是“向导控制”或“花式气泡”。如果设计师将其称为“花式气泡”,开发人员将其称为“向导控件”,用户将其理解为一组可选选项卡,那么您就知道您的语言不起作用。为什么用户的解释很重要?我们可以记住唐·诺曼的开创性工作,日常事物的设计,他谈到了系统映像(界面)和用户模型(用户通过与之交互形成的对界面的感知)之间的鸿沟。如果用户对交互的心理模型与设计团队提供的系统图像不相符,那么用户将不断受到来自系统的意外行为的挑战。有效的设计语言可以在系统映像和(假定的)用户模型之间架起桥梁。
随着您的语言变得越来越丰富和复杂,您需要一种有效的方法来捕获和共享它。在当今的web上,模式库是支持设计系统的良好实践的关键示例之一。
模式库及其局限性
设计系统不仅由模式组成,而且还由模式组成技术和实践用来创造、捕捉、分享和发展这些模式。模式库是一种收集、存储和共享设计模式以及如何使用它们的原则和指南的工具。尽管模式库最近才在web上流行起来,但是以各种形式记录和共享设计模式的概念已经存在很长时间了。
帕拉第奥的建筑建筑四书1570年在威尼斯首次出版,是最重要和最有影响力的建筑书籍之一。它也是最早的系统文档示例之一。帕拉迪奥从希腊罗马建筑中汲取灵感,为设计和建造建筑提供了规则和词汇,包括原则和模式,并对其工作原理进行了详细的说明和解释。
楼梯类型:螺旋楼梯、椭圆形楼梯和直线楼梯。帕拉迪奥描述了如何以及何时使用每种类型;例如,螺旋楼梯适用于“非常受限的位置,因为它们比直楼梯占用的空间更小,但更难上去。”
在现代平面设计中,系统也早已被记录在案,从早期的排版和网格系统,到包豪斯设计原则。在过去的几十年里,公司以品牌手册的形式记录了他们的视觉身份,1975年美国宇航局的图形标准手册是比较著名的例子之一。
NASA图形标准手册中的布局指南。
在网络上,模式库最初是作为扩展的品牌标识文档,专注于标识处理、企业价值观和品牌风格,比如排版和调色板。8然后它们扩展到包括接口模块,以及它们的使用指南。Yahoo的模式库是最早记录界面模式的例子之一。
Yahoo的模式库是最早记录界面模式的例子之一。
对于那些没有雅虎那么有资源的公司来说,模式库通常存在于PDF或wiki中,这意味着它是静态的,很难保持最新。今天,许多设计人员和开发人员的愿望是一个更动态的或“活的”模式库,其中包含设计模式,以及用于构建它们的活代码。一个活生生的风格指南或模式库不仅仅是一个参考文档——它是用于为数字产品创建界面的实际工作模式。
MailChimp的模式库9是网络上最具影响力的生活模式库的早期例子之一。
模式库的局限性
模式库有时被认为是可与设计系统互换的。但是,即使是最全面和最活跃的模式库也不是系统本身。它是一种工具,有助于使设计系统更有效。
模式库并不能保证更有凝聚力和一致性的设计。它可能有助于纠正小的不一致或使代码库更健壮,但单独的工具对用户体验的影响很小。没有模式库可以修复糟糕的设计。模式仍然可能被设计得很糟糕、被误用或以不能作为一个整体的方式组合。正如TED的UX架构师Michael McWatters在一次采访中所指出的:“即使是一个SquareSpace模板也可能被草率的设计思维毁掉。”相反,即使没有全面的模式库,也可以创建具有一致用户体验的产品(正如我们将在第6章TED设计系统示例中看到的那样)。
活跃的模式库与更好的协作相关联。然而,您最终可能会遇到这样的情况:只有一小群人使用它,或者由于团队之间缺乏沟通,可能会有太多不连接的模式。在最新的情况下,模式库是共享语言的术语表。但这并不意味着没有解读的空间。这是讨论周围解释通常是模式库成功或失败的关键。
另一方面,模式库有时被指责扼杀了创造力,导致网站看起来很普通。但是,模式库反映了它背后的设计系统。如果您的系统从根本上是严格的和受限的,那么模式库可以揭示和强调这种严格。如果它允许大量创造性的实验,那么一个好的模式库可以使实验更容易。
现在有了所有可用的自动化工具和样式指南生成器,可以比过去更快地设置组件库。但是如果没有集成这些模式的一致设计系统的基础而且做法,其影响将是有限的。当模式库被用来支持坚实的设计语言基础时,它就成为了一个强大的设计和协作工具。在此之前,它只是网页上的模块集合。
如何打造有效的设计系统
设计系统的有效性可以通过其不同部分协同工作以帮助实现产品目的的程度来衡量。例如,FutureLearn的宗旨是“激励每个人、任何地方的终身学习。”我们可能会问,界面的设计语言在帮助我们实现这一目标方面有多有效,团队的实践有多有效?如果界面令人困惑,人们不能达到他们的目标,那么设计语言是无效的。如果因为每次都必须从头创建模式而需要花费很长时间来构建站点的新区域,那么我们知道我们的实践可以得到改进。当一个设计系统结合了设计过程中的成本效益,以及与产品目的相关的用户体验的效率和满意度时,它就可以被认为是有效的。
共同的目的
在系统思考多内拉·梅多斯(Donella Meadows)解释说,系统最重要的品质之一是它们是如何连接和组织的:子系统聚集到更大的系统中,而子系统又构成更大系统的一部分。肝脏中的细胞是器官的一部分,器官是你作为有机体的一部分。没有一个系统是孤立存在的。你的设计系统中可能有一个较小的子系统:控制页面布局的编辑规则;或者它可能包括一个方法,以某种方式响应缩放你的标志。同时,它也是其他更大系统的一部分:你的产品、你的团队、你的公司文化。
惠特尼美国艺术博物馆的标志是“动态W”,10是一个简单而又具有非凡适应性的系统。W响应周围的艺术品和文字,允许巨大范围的灵活布局的可能性。
在高效的系统中,我们看到子系统被连接起来并朝向一个共享的目标:设计方法反映在前端架构中;设计模式遵循指导原则;模式语言在设计、代码和模式库中的应用是一致的。我们在这些系统的运作方式中看到了和谐:他们的工作流程更高效,他们产生的用户体验更有意义和连贯。
识别问题
当有缺口时,也很容易看到它们。碎片化的设计系统会导致碎片化的用户体验,充斥着相互矛盾的信息。我们希望用户注册我们的通讯,但我们也希望他们检查我们的最新产品。我们希望他们完成这些步骤,但我们也需要确保他们对每个食谱进行评分。“序列”用于预览站点某个区域的步骤;在另一种情况下,它突然变成了一个选项卡导航。该界面充满了相同颜色的各种深浅和相同按钮的多个版本。团队的工作效率也会受到影响:由于代码混乱,即使是最微小的更改都是费时费力的。设计师把时间花在复制像素和重新设计解决相同问题的方案上,而不是理解和解决真正的用户需求。
我们如何减少差距,使我们的设计系统更有效?通过理解它是什么以及它是如何工作的。我们将以一个简单的虚构的十分钟食谱网站为例,首先看看模式语言如何在新产品中发展。
例子:十分钟食谱网站
想象一下,我们正在创建一个网站,与那些喜欢健康食品但不想花太多时间做饭的人分享食谱。如果我们在脑海中有一个系统,并在早期定义设计模式,那么我们应该从哪里开始呢?在我们开始之前,让我们做一些假设。我们了解烹饪领域,并且已经做了足够的研究来为我们的设计决策提供信息。所以我们要做的不是弄清楚体验应该是什么,而是看看我们如何为这个新网站建立设计系统思维。
宗旨及价值观
我们要做的第一件事就是试着了解我们的用户是谁,他们的目标、需求和动机。为了简单起见,假设我们知道他们是忙碌的专业人士,他们的目标是得到一顿美味、健康的饭菜,而不是麻烦和花费数小时做饭。我们有很多方法可以帮助他们实现这一目标:将他们与厨师联系起来,将食物送到家门口,创建一个对话应用程序。但我们想通过一个包含十分钟食谱的网站来实现这一目标。
如果我们要用一句话来表达这个目的,它应该是这样的:激励和授权人们在不超过十分钟的时间内做出美味健康的饭菜。这个目的是产品的核心,它应该为设计和开发决策提供信息。团队应该认识到这个目标,并相信它——它不应该被强迫。
另一个重要因素是精神这抓住了我们试图通过网站描绘的价值观和精神。对我们来说,它可以是简单的健康食品和普通配料的实验。对于其他烹饪网站,它可以是高级烹饪和烹饪技巧的掌握。
设计原则
为了确保我们所做的每一件事都能清楚地表达产品的目的,我们需要建立一些基本原则和价值观。它们可以被非正式地讨论,也可以被写成宣言——重要的是,参与产品创建的人都同意这些价值观,并致力于这些价值观。
例如,十分钟烹饪食谱网站团队的每个人都明白时间的价值。他们的动机是对食谱有时间限制,因此他们都努力使网站上的互动简短、简单、快速和流畅。这一原则不仅会通过设计模式来表达,还会通过网站的性能、声音的语调,甚至团队的运作方式来表达。
这些原则可能不一定是正式的,甚至也不一定写下来。但是在团队中达成一致并意识到他们是什么对于保持每个人的努力和优先级同步是至关重要的。它还可以帮助决策:从首先构建哪个功能和使用哪种方法,到制定用户体验流程,或按钮应该如何外观和字体的选择。11
行为和功能模式
我们会制定出一些我们希望鼓励或支持用户的关键行为,以帮助他们实现目标。
- 我们希望人们总是选择健康的家常菜,而不是快餐或微波食品。这意味着我们的食物需要看起来美味和健康,比微波食物更诱人。令人难以抗拒的美味,但看起来简单的食物可以帮助我们在这里。
- 我们希望能让人们在十分钟内达到良好的效果。这意味着我们需要在几个简单的步骤中呈现食谱。步骤应该简短、清晰、有重点。也许我们可以在每一步上设置一个计时器,以确保我们遵守10分钟的承诺。
- 我们希望鼓励人们随心所欲,觉得他们可以随时准备一些东西。从你已经拥有的开始,而不是你需要得到的——不需要购买奢侈的食材。在UI方面,这可以通过带有清晰标签的易于选择的成分缩略图来支持。
- 最后,我们希望鼓励人们发挥创造性和自发性,并从中获得乐趣。展示哪些成分是可选的,哪些是可以替换的。展示一些意想不到的组合,这可能是有趣的尝试。12
当然,随着我们在站点上的工作,设计细节会发生变化,但那些关键行为将保持不变。这些行为会告诉核心功能模块和交互该网站:成分缩略图,食谱卡,步骤序列,定时器。
美学和感知模式
大约在同一时间,我们需要弄清楚我们希望别人如何使用十分钟烹饪食谱网站。我们是简单而接地气,还是富有魅力而老练?我们是严肃的还是好玩的?大胆还是克制?功利还是感性?什么样的美学能够捕捉到我们想要通过界面呈现的个性和气质?我们开始考虑品牌。
我们对健康食品充满热情,所以我们希望它能通过网站传播。也许它会有一种有机的、温暖的、健康的感觉。我们也相信烹饪不需要太多的计划和准备;它可以是自发的和有趣的,你可以在十分钟的时间限制内进行实验和创新。
在这一点上,我们可能会制作一些情绪板,并开始尝试视觉效果,直到品牌感觉正确为止。13一旦我们实现了这一点,我们就可以定义核心视觉品牌元素,如排版、调色板、语调和品牌的任何显著特征;例如,插图、图像风格、特定形状、独特的交互,这些都能捕捉到我们服务的精髓,并以最佳方式呈现内容。
假设我们想出了一个温暖的、朴实的调色板、手绘图标、注重可读性的排版、健康食品的高质量摄影,以及一些简单的界面元素和控制。这些款式将成为我们的知觉模式.
共同语言
在这个过程中,我们将通过选择以某种方式引用概念来做出语言决定。什么是“食谱”?我们所说的“步骤”是什么意思?是什么造就了“令人愉悦的简单”互动?我们选择的词语会影响团队的思维方式。间接地,他们将塑造设计。
首先,模式和语言选择将非正式地共享。但随着我们团队和产品的发展,语言也会随之发展。最终,我们将需要一种更结构化的方式来捕获、共享和组织我们的设计词汇表。14
现在我们已经通过一个虚构的站点简单地了解了设计过程,我们可以使用现实世界数字产品和公司的例子来研究系统是如何发展的。
- - - - - -
- 选择FutureLearn上的模式是为了支持反思性学习。学习者需要专注于手头的任务,而不是被替代活动分散注意力。我们的目标是创造一种平静和沉思的氛围。
- 该网站UI模式是一个很好的公共设计模式的来源,按目的和它所解决的设计问题分组。要全面阅读UI模式,我还推荐设计界面:有效交互设计的模式jennifer Tidwell著。
- http://smashed.by/patternsrecognition
- 在滑动手势成为一种移动模式之前,没有人知道如何使用它。现在我们看到整个产品都建立在这种模式上(比如Tinder)。利用人们已知的知识和探索新事物的过渡是非常微妙的;产品的生死取决于它们何时以及如何这样做。
- http://smashed.by/researchingsystems
- http://smashed.by/visualloudness
- 挑战也不是强加一个“序列”的定义或概念,而是理解和使用它的上下文,例如,UX团队可以在一个连贯的框架内支持不同类型的排序(对于FutureLearn,课程、运行、步骤、用户操作等的排序)。
- 也许这就是我们区分样式指南和模式库的方法。风格指南传统上关注的是风格,比如颜色和排版。模式库可以包括样式、功能模式和设计原则等。
- http://smashed.by/mailchimppatterns
- http://smashed.by/whitneyidentity
- 在下一章中,我们将更详细地讨论有效设计原则的品质,以及它们如何构成设计语言的基础。
- 有关了解人们想要什么,并为新产品塑造愿景的进一步阅读,请参阅“我们这里不卖马鞍Slack首席执行官斯图尔特•巴特菲尔德(Stewart Butterfield)的回答。
- 更多关于定义感知模式的过程在第4章。
- 在第5章中,我们将看到有效的名称和协作命名过程如何成为设计语言系统基础的一部分。在第10章中,我们将看到模式库作为捕获语言选择和建立共享词汇表的一种方式。