Pinapps
首发于Pinapps
Design Systems 02 - 什么是 Design Principles

Design Systems 02 - 什么是 Design Principles

上周我们开启了一个新的期刊系列「Design System」,第一期就收到了很多会员好评反馈。说实话有点超出了我的预期,没想到这么多人对这个主题感兴趣,感谢大家的支持,也欢迎大家继续给我提意见。

第一期我们主要介绍了 Design System 的组成,以及这些概念的定义。接下来的几周内我将继续以这些概念展开进行详细讲解,今天我们先从 Design Principle 开始。

声明:本系列周刊并非「Design Systems」的翻译,而是基于本书结构框架的读书笔记和经验总结。依然推荐大家阅读原书,周刊内容可以作为理解辅助。

Design Principle

Design Principle,其中文翻译是设计原则。在上期周刊中我们给出过定义:Principles 是一系列的规则、指导以及设计中的注意事项。它是我们构建一套 Design System 的起点,用于解决业务、用户体验中的问题,引导设计往既定的方向前进。

Principle 最为重要的目标就是确保所有参与到产品设计中的每一个人有着共同、明确的目标,并以此作为标准为产品推进过程中的每一个决策的判断依据。换句话说 Principle 是整个产品设计的起点,它应该被理解并融入到设计的过程中,比如 Component、Pattern。


Principles 之间的差异

如果你也关注 Design System,应该已经看过很多相关的案例。Material Design 、Lightning、Carbon、MailChimp… 这些不同 Design Systems 所提出的设计原则似乎有很多类似,但又有很多不同。哪一个才是正确的?哪一个适合自己?

这个问题的答案其实没有绝对,正如我们前面所提及的 Design Principle 是为了解决当前产品的问题而产生的。这里有一个很重要的信息,这个产品是什么?

通常情况下我们都是在考虑为自己所服务的产品来制定相应的 Principle,所以网络上每一个 Design System 所提出的 Principle 都具备参考意义,但不一定适合自己,我们更需要的是通过这些案例来理解的它们是如何推导以及形成的思路。

通常来说我会将 Design Principle 分为业务型和抽象型两类。比如 Visa、SAP 和 Material Design、Fluent。

上图右侧是 SAP 的 Fiori Design,它强调的基于角色、愉快的、一致连贯的、简单和适应的。如果你对 SAP 的业务有一些了解(甚至是它的用户),你应该不难理解这些关键词对于 SAP 用户的重要性。这些关键词与 SAP 的业务特性有着非常密切的关联,甚至说做不好这些点他们的用户将不会愿意继续选择他们的产品。

相比而言 Material Design 给出的 Principles 就比较抽象了,似乎很有道理但似乎又什么都没说。作为一款操作系统级的语言,它更多的是提供一个土壤,却又不知道下一个新出现的产品会是什么样。他们更需要的是赋予整个环境一个完整的世界观,一个经得起推敲(Material)的世界观。

Material Design 这类 Design System 很重要,我们需要去学习研究它,不过更多是站在其平台(iOS 也一样)进行产设计。对于 Principles 的研究,我们更应该放在这些偏业务的类型上。毕竟我们很难(也不一定需要)创建一个世界观,但做好一款产品是迫切需要的。

如何评判一个 Design Principles 的好坏

抽象型的 Principles 本就不多,它们大多都有着完整的世界观,是经得起推敲的。所以我们还是将重点关注到业务型 Principles 上。


01.来源于业务

既然是业务型,它们就必定会存在差异性。Visa 和 SAP 都有着自己完整的 Principles,但由于业务特性就会有着明显的差异。

Visa(上图右)在其新发布的 Design Systems 中提出了「Design Everywhere」的理念。作为一个国际化的产品,如何在全球用户的不同设备上快速、安全的完成支付、资金管理操作是他们最为重要的目标和方向。而 SAP 作为企业内部解决方案提供商则更关注于角色、操作的连贯性等目标。

简单、有效、轻量这些我们常见的关键词没有错,没有人会质疑这些在产品设计中的通用规则,这也是每一个产品都应该做到的。但一个称职的 Principles 首先是需要服务于业务及其用户的痛点,基于解决问题的角度出发。


02.实用可行

我们在前面提到过,Principles 的作用是给予解决问题的实际指导,能够用于作为产品设计决策中的依据。那么我们就不能只管推导产出,这把“尺”是否好用同样非常重要。书中有一个非常形象的案例,我们不妨再提出来分享一下。

关于「简洁」这个关键词,听来绝对没错,但应该如何去定义呢?基于它我们可以有两种不同的说法:Make it simple、No needless parts。

「Make it simple」 听起来很不错,没有人可以说它不对。简单、易用应该是每一个产品都应该努力的目标,但这似乎不够清晰。究竟多简单才是简单?我们如何去衡量它?

相较之下 「No needless parts」则更加的“有力度”。每一个元素(从大到小)都应该有存在的目的,为解决用户的问题而服务。如果你解释不了这个元素对于产品的正向作用,那么它可能就不应该出现在这里界面上。

“这个是否简单”,这个问题对于每个人都可能有不一样的答案,这会让整个判断变得不够客观。相反“这个是否必须?”则更容易判断,可以落实到界面上的每一个元素上。

我们需要 Principles 具备指导意义,所以它不应该只是一个好听的关键词,而是需要更实际的去表达它的意义,为设计的过程提供可操作的参考意见。


03.优先级区分

我们所接触到的 Principles 一般都会有 4 到 5 个关键词,它们代表着产品在不同维度上的目标。但这些标准之间也应该有着优先级的差异。试想一下如果当某个界面上效率和美观出现冲突时应该如何处理? 这个时候一个好的 Principles 应该同样也能给出答案。

最好的案例就是 Salesforce 的 Lightning Design System。Lightning 的 Principle 是清晰、高效、一致、美观,但对于这四个关键词他们定义了优先级,美观不能超越效率和一致性、清晰甚至成为他们绝对第一的关键词。

Principles 的目标是统一思想,也是提升决策的效率,但业务的复杂度往往会带来很多无法预估的情况。就像一个页面上的核心 CTA 不宜超过 2 个一样 Principles 也需要有优先级的差异,当出现“冲突”时最重要的那一个是需要最先被保障的。


04.易于记忆

问问团队里小伙伴,看看他们脑海中的 Principles 是什么。如果没有人能记住或是有所偏差则说明我们的定义是有问题的。要让大家能够牢记,首先 Principles 需要基于业务、问题来进行制定让大家能够产生共鸣;其次还需要我们在日常的讨论、决策中经常去使用它。

Airbnb 的 Principles 是(Unified、Universal、Iconic、Conversational),这个原则深深的植入了他们每一个设计中。每次涉及到新组件的设计,他们都会将这些关键词带入到设计中,看看自己的设计是否满足 Principles 的要求。

“When we design a new component, we want to make sure it addresses all four of those. If we didn’t have a set of principles it would be difficult to agree on things. We want to make sure each piece lives up to it.” — Roy Stanfield, principal interaction designer, Airbnb

人的记忆是有限的,通常一组关键词超过 4 个就会难以记忆。所以我们需要尽可能的控制在 3 到 5个,并且确保它们易于记忆。这方面 Spotify 做得很有意思,它们的 Principles 是 TUNE(tone、usable、necessary、emotive),翻译成中文是“曲子、曲调”,这个正好贴切与它们的业务,也非常的容易记忆。

前面我们讨论了什么是 Principles,如何去定义它的好坏,我们可以尝试着去理解、拆分你的业务或是竞争对手。在余下的全文中我们将继续讨论如何着手,开始创建符合自己业务的 Design Principles。

Design System 是 PinDesign 周刊的一个新系列,基于「Design Systems」这本书结构框架的读书笔记和经验总结。希望将自己的感受和经验分享给大家,辅助大家的阅读。

加入 PinDesign 会员,获取本期主题「什么是 Design Principle」的全文内容及前两期周刊的赠送。

点击领取 PinDesign 会员计划 50 元优惠券

Design System 系列已更新:

5key:什么是 Design Systemzhuanlan.zhihu.com图标5key:Design Systems 02 - 什么是 Design Principleszhuanlan.zhihu.com图标5key:Components 与 Patterns 究竟有什么区别zhuanlan.zhihu.com图标5key:你该为产品设计怎样的气质zhuanlan.zhihu.com图标5key:Design System 中的 Design Tokenzhuanlan.zhihu.com图标5key:Design Pattern 实例 - 用户通知与中断zhuanlan.zhihu.com图标5key:Design Pattern 组合实例 - 列表页设计思考zhuanlan.zhihu.com图标

点击下方链接,了解 PinDesign 会员计划详细信息:

PinDesign 互联网产品设计周刊
编辑于 2018-01-18

文章被以下专栏收录

    我推荐的不仅仅是apps,更是一种态度。 偶尔我也会聊聊和 apps 相关的设计,请保持关注! 微信搜索「Pinapps」