产品设计网站(经典产品设计)

编辑导读:产品设计要满足产品通用化、系列化、模块化的标准发展要求。坚持创新与继承相结合的原则，在创新的基础上，提高产品设计的继承性和产品零部件的通用性。本文作者阐述了如何建立一个有效的设计标准化体系。

去年参与了公司设计体系的整体优化(设计原则、可视化规范、组件库、全局规则)。通过这次优化，我也意识到了之前的一些疑惑。虽然打磨了半年，还是有很多问题，但是没关系。任何公司的设计体系都需要不断的迭代和完善，只要团队善于发现问题、分析问题、解决问题。

“仰望星空空脚踏实地”。设计需要想象力空和反思总结的能力。

系统创建:

1.什么是设计体系？设计系统是为实现数字产品的目的而组织的一组相互关联的模式和共享的实践。

我们来看两个不相关的产品的界面。

1)商务智能产品

2)团队协作产品

这两个案例说明了如何选择不同的模式来达到不同的目的。

对于BI产品，目的是让数据分析更加透彻，提高数据分析效率；更好地整合数据，为企业提供报表，作为企业决策的依据；更好的帮助企业管理者管理企业，提升企业实力。

对于teambition来说，目的是方便地记录要做什么，并实时与合作伙伴同步进度。让对方对项目的整体情况和重点有一个清晰的认识，从而达到目标。

基于产品的用途，我们可以看到BI产品看重效率；Teambition更注重清晰度和易用性。产品的用途决定了它采用的设计模式会有所不同。我们来对比一下界面，看看基于用途的界面设计有什么区别。

3)商务智能产品

4）团队协作产品4)团队协作产品

BI数据分析产品的布局多由widgets组成，会方便用户进行多任务处理。界面设计会比较密集，整个界面承载了很多信息。它使用紧凑的间距，紧凑的控制，灵活的布局和排版。

1. 设计模式

设计模式的概念最早是由建筑师克里斯托弗·亚历山大在其开创性著作《建筑的永恒之道》和《建筑模式语言》中提出的。

建筑模式语言包含253种建筑设计模式，从城市和道路系统的布局到家庭住宅的照明和家具。

同样，当我们创建一个界面时，我们也在使用设计模式(组件)来解决常见的问题:使用选项卡将内容分成几个部分，并指明哪个选项对应当前页面；使用下拉菜单显示用户可以选择的相关选项。

1)标签页

2)下拉组件

设计模式分为两类:

第一类:功能模式(组件库)由界面上的特定模块表示，如按钮、标题、表单元素、菜单等。第二类:感性图案(视觉规范)是描述性的图案，直观地表达和呈现产品的个性，如配色、排版、图标、形状、动画等。功能模式有点像名词和动词，是界面具体的、可操作的部分；感知模式类似于形容词，它们是描述性的。

例如，按钮是具有显式功能的模块，它使用户能够提交操作。但是按钮上文字的样式，以及按钮本身的形状、背景颜色、填充、交互状态、过渡动画都不是模块，而是样式，样式描述了按钮是什么样子的。

2. 共享语言

唐·诺曼(Don Norman)在《设计心理学》一书中说，系统形象(界面)和用户模型(用户与界面交互形成的感知)之间存在差距。

设计团队内部也是如此，比如“范围输入框”组件。你能想象这是什么样的组件吗？我相信不同的人一定有不同的心智模型，因为这个组件不常用，这个命名的组件在ant design和arco.design组件库中都找不到，因为它是t design的产品。

每个公司都会根据自己的产品特点创造一些非常规的组件名称，这个时候就需要在所有参与产品创造的人之间共享。只有产品内部设计语言一致，才能培养出用户的心智模型，才能消除系统形象和用户模型之间的差距。

比如上面那个组件，大家需要知道这个组件叫“范围输入框”而不是“输入框”或者“数字输入框”。

3. 如何衡量设计体系的有效性

例如，teambition的目的是“轻松记录要做什么，并实时与合作伙伴同步进度”。

所以，我们可以看看产品，设计系统在实现这个目标的过程中发挥了多大的作用，这些设计实践的效果如何。如果视觉和交互混乱，导致无法实现上述目标，那么这种设计体系可以视为无效。

以上介绍了设计体系的内容，下面我们将详细介绍:

二、设计原则1. 有效设计原则特征

b端的朋友应该都知道蚂蚁设计，但不知道有多少朋友认真看过蚂蚁设计的设计原则。可能有朋友会问这种设计原理有什么用，但我一开始并不觉得有什么用。后来我在参与设计系统优化过程中，发现这个原理就是金字塔尖。

蚂蚁设计:

例如，如果用户没有完成表单，是否可以单击表单的提交按钮？是设置灰好，还是按下后弹出提示好？

比如你可以编辑一个表格，你就要放一个钢笔图标表示可以编辑，或者用鼠标触发，输入框就会出现，指针变成文本。

日常工作中，我们总是对这些细节争论很久，美其名曰“打磨设计”。事实上，在很多情况下，团队内部并没有就设计原则达成一致。为了避免上述问题，我们应该建立一套基本的价值观和原则。在一些公司，尤其是处于起步阶段的公司，很难试图建立一套通用的标准。设计原则无法量化，因此可能需要多次迭代来定义它们。

关于原理是什么，可能会有一些争议。有些公司的设计原则注重品牌，有些注重团队文化，有些注重设计流程。

比如Pinterest的设计原则就是以品牌为中心。

Atlassian公司没有针对子团队或个别产品的原则。

他们的目标是在客户能接触到的每一个点上体现一些核心价值。比如“大胆”、“乐观”、“踏实但不枯燥”都是价值观的体现。但是，虽然各地的价值观都一样，但体现的程度不一样。

比如官网会更“大胆”，但不在产品上。正如Atlassian公司设计经理凯文·科菲(Kevin Coffey)所说，“没有人想要一个‘大胆’的服务支持页面”。

Atlassian 官网截图Atlassian官网截图

亚特兰蒂斯设计系统

1)设计原则真实、恰当。

让我们以TED为例。TED的设计原则之一就是“追求永恒，而不是时尚”。永恒这个词不仅体现在ted的界面上，也体现在TED的整个品牌和设计方法上。

这意味着他们不会为了追随潮流而采用新技术或引入新的设计元素。

2)设计原则具有实用性和可操作性。

比如定义“简化”原则(让产品尽可能简单，简单到你几乎感觉不到它的存在)。这个原则既不实际，也不可操作。

团队里的每个人怎么理解？

剔除无用部分。每个设计元素，无论大小，都必须有一个目的，并遵循其所属元素的目的。如果你不能解释为什么一个元素会在那里，那么它很可能就不应该在那里。这个定义就清晰多了。

再比如:设计原则定义为“有用”。什么是“有用”？

从需求入手。不知道用户需要什么，就做不了正确的事情。做研究，分析数据，和用户沟通，而不是做假设。

3)设计原则可以帮助我们确定优先级。

好的设计原则也可以帮助我们确定优先级和平衡点。

Salesforce公司闪电设计系统的原则是“清晰、高效、一致、美观”。

这些原则的优先顺序必须遵循上述顺序。“美”不应该高于“效率”和“一致性”，而“清晰”永远是第一位的。以这种方式对原则进行排序，可以让团队明确在做设计决策时应该优先考虑什么。

4)设计原则是引起共鸣，容易记忆。

当Atlassian和Airbnb的团队成员被问及他们的设计原则时，他们都脱口而出，没有片刻犹豫。没有人表现出犹豫，也没有人想翻看品牌宣传册上的原则。为什么他们能把原理记得这么牢？因为他们的原理足够简单，足够实用，容易引起人们的共鸣。

Airbnb的四大设计原则(统一性、普遍性、风格化和对话性)深深植根于其设计过程中。

每当我们设计一个新组件时，我们都会确保它完全符合四项原则。没有这套原则，我们就很难在各种问题上达成一致。-Airbnb首席交互设计师

2. 怎么定义设计原则

每个团队都有不同的方法来建立自己的设计原则:有些团队会举行几轮研讨会，有些团队可能会征求CEO或创意总监的意见。但是，无论采取哪种方式，都离不开以下几点:

1)从目的入手

TED网站的主要目的可以用一句话来表达:“尽可能广泛地传播讲座。”所以TED网站的精神和价值观就是要接触到尽可能多的人，降低使用门槛，让产品有很高的兼容性和可及性。这意味着优化性能和提高可访问性比添加华而不实的功能更重要，清晰的文案比大胆的设计更重要。

2)寻求共识

如果你还处于定义设计原则的阶段，那么一个有效的方法就是让团队中的部分或者全部人(取决于团队的规模)来回答关于设计原则的问题。比如在他们眼里，你的产品什么样的设计才是好的设计？他们将如何用既实用又易懂的五句话向团队新成员解释设计原理？

3)面对正确的受众

不知道设计原则是写给谁看的，肯定会写模糊的原则。有朋友说我们领导喜欢“美”，那么我们是不是把“美”放在第一位？一定要搞清楚你是给谁写的。

3. 原则到模式

作为设计师，你定义设计原则可能不难，但我觉得把原则、品牌价值、组件结合起来，如何在设计模型中体现出来，才是挑战。

对TED来说，信息的清晰比美观更重要。可能很难尝试把每一篇演讲都提炼成一个短句，所以有时候标题可能会很长。截短标题很容易，但对他们来说，语音信息的优先级是最高的。

因此，他们没有选择相对容易的标题截断方案，而是确保他们的设计模式能够适应长标题。

三。功能模式(组件)功能模式是界面中有形的组件(形式)。它们的目的是使用户能够完成某些行为(填表)或者激励用户完成某些行为。

功能模式可以是简单的(标签词、输入框、按钮)，也可以组合成更复杂的模式(搜索组件)。

单词、输入框和按钮

搜索组件由标签词、输入框和按钮组成。

1. 模式在变，行为不变

随着产品的发展，模式也在不断发展。包括风格，甚至功能和交互都变了。然而，它们的目的基本上是一样的。

让我们以顶部导航为例:

顶部导航由logo、搜索定位框、文本下拉框、图标功能按钮和通知按钮组成。导航栏中的每个模块都有自己的用途:搜索定位框告诉我们如何快速找到想要的东西；引导我们浏览全局，引导我们去想去的地方；后面的图标按钮让我们可以快速找到它。

总的来说，这些模块有一个共同的目的:引导用户快速浏览和使用。随着产品的发展，模式也在不断发展。

例如，随着越来越多的产品功能，导航中可能会添加新的设置功能，允许用户自己安排常用功能。再比如，我们可能会重新排列导航，将导航按模块分类，按带标签的页面显示。将更多功能放在子页面左侧的模块下面。虽然我们不断迭代模式，但我们希望它能更好地实现各自的目的，或者激励用户更有效地使用它。

在设计之初明确模式的用途，可以避免产品开发过程中的重复性工作。

目的决定了其他一切:模式的结构、内容和表示。理解模式的目的可以帮助我们设计和构建更健壮的模块。如果功能模式是界面中的一个组件，那么感知模式更像是一种风格——它描述了组件是什么样的，以及它给人的感觉如何。接下来，我们将讨论感知模型。

四、感知性模式（视觉规范）

想象一下，我们每个人都有一栋房子，每栋房子都有以下家具:一张桌子、几把椅子、一张床和一个衣柜。然而，虽然有所有这些家具，但每个房子给人的感觉完全不同:可能是因为家具的风格、材料、颜色和质地不同，也可能是因为床罩的面料、装饰品的风格、房间的布置和灯光，甚至是房间里播放的音乐不同。

这些属性被称为感知模式。因为他们，也许你的房子像地中海风格的小窝，而我的像仓库。

数字产品的感知模式的例子包括情绪、排版、颜色匹配、布局、插图和图标风格、形状和纹理、间距、意象、交互或动画，以及在界面中组合和使用这些元素的具体方式。

有时候，人们会把这个特征当做产品的风格，或者说皮肤，是最外层。但要想有效，它们不仅要存在于表面，更要存在于品牌的核心，随着产品的发展而发展。只有这样，感知模型才能成为让产品脱颖而出的强大力量。

1. 感知性模式的作用

同一个领域的产品，即使有相似的模块，给人的感觉也不一样。感性模式通过界面传达品牌，让品牌被记住。

看下面的图片。你能认出它们是什么产品吗？

这两张图里面并没有太多的信息，你只能看到排版的样式、一些图形和颜色以及一些图标。然而这些视觉上的线索极具辨识度，所以你仍然很有可能看出它们分别属于什么产品（即钉钉和飞书）。这两张图信息不多。您只能看到印刷样式、一些图形和颜色以及一些图标。但这些视觉线索的辨识度很高，所以你还是很有可能能看出它们分别属于哪个产品(即钉钉和飞本)。

这些视觉元素通过有意识的重复使用形成模式，这就是为什么我们可以在没有上下文的情况下识别它们。

2. 感知性模式让系统更为连贯

在一个模块化的系统中，实现视觉上的连贯性可能是一件棘手的事情。不同的人出于不同的目的创建模块。然而，由于感知模式渗透到系统的所有部分，它们可以连接系统的不同部分。如果这种连接是有效的，用户会感受到模块之间的统一性。

例如，舒菲和腾讯对相同的功能有不同的组件感知模式，因此两家公司的设计系统不能混合使用。

3. 探索感知性模式

如果功能模块反映了用户的需求和愿望，那么感知模型则侧重于用户的直观感受或行为。

在《感性的网站设计》一书中，作者提出了一种通过创造“设计角色”来捕捉产品关键个性品质的简单方法。这里有一些帮助探索感知模式的提示。

1)情绪板

情绪板是探索不同视觉主题的绝佳工具。你可以创建数字化的情绪板(Pinterest或Petals是创建数字化情绪板的常用工具)。

如果你目前做的产品需要体现:科技、质感、智能，那么上图应该可以满足这些条件。你可以通过这张图和领导沟通达成一致，然后从中提炼出一些色彩、元素、材质，这样大方向就不会有太大问题。只需润色细节。

2)风格层压

在您定义了大方向之后，您可以使用模式层压来更详细地探索各种可能性。层压的概念是由萨曼莎·沃伦(Samantha Warren)提出的，她将其定义为“由字体和颜色等界面元素组成的能够传达网页视觉品牌本质的设计交付物。”

像情绪板一样，风格层压可以为用户和产品团队提供有价值的讨论点，并呈现他们对特定设计方向的最初反应。

Arco.design Home这张图可以理解为风格层压。比较不同部件类型的叠片有助于准确找到设计方向。

4. 迭代与改进

当功能模型和感知模型建立后，我们会将它们融入到产品流程中，它们也会进化。因为在真实的界面中，模块、交互、样式的交互下会出现新的问题，这是正常的，是典型的迭代过程。这个过程会一直持续下去，直到最终形成设计语言。像蚂蚁设计和arco.design，应该都经历过这个过程，只是我们不知道而已。否则，在他们被释放之前，不需要几年的时间来润色。

1)平衡品牌和一致性

过于注重一致性也会扼杀品牌。矛盾的是，设计的完美一致性并不能保证它仍然有一个强大的品牌。有时候，这会削弱品牌——一致性和统一性之间有微妙的区别。

英国开放大学的创意总监曾说，“当你专注于产品的一致性时，一些创造产品质感的重要细微差别可能会丢失。

感性模型需要给设计师打破常规的力量，鼓励他们积极探索更多的可能性。一个好的设计系统可以在品牌一致性和创意表达之间取得平衡。

2)小规模试验

如果后期发现风格不能满足，如何将新的风格引入设计体系？

先进行一些小范围的实验还是挺有效的。如果某些元素运行良好，我们会逐渐将它们集成到其他界面中。比如，当学习者完成一个步骤时，纯功能的开关按钮缺乏庆祝和成就感。因此，我们将以前的按钮替换为圆形样式、跳跃动画和复选标记图标的按钮。

虽然新的按钮样式受到了学习者的欢迎，但它与设计系统的其他元素不兼容。后来，我们开始在网站的其他部分应用圆形图案、跳跃动画和勾号图标。如果不这样做，那么整个设计体系就会给人一种支离破碎的感觉。

5.共享设计语言的数码产品都是团队创作的。团队中的每个人都有自己特定的目标和期限。这意味着不可避免地会有仓促的模式，重复或错误的模块。

即使有很多人一起工作，也能保证一个产品的一致性和统一性吗？只要我们的团队对自己的设计体系和运作模式有共同的认识，我们就可以做到这一点。

这意味着我们遵循相同的指导原则，我们对品牌愿景的理解是相同的，我们在设计和前端架构方面有共同的方法，我们知道什么模型是最有效的，以及它们是如何工作的。换句话说，创建一个统一的设计系统需要共享设计语言。

许多伟大的建筑(如圣家族大教堂、沙特尔大教堂、阿尔罕布拉宫)并不是由一位首席建筑师在绘图板上苦心创造的，而是由一群人建造的，他们对能够使这些建筑成为现实的设计模式有着深刻的共识。

“几组人可以通过遵循一种共同的模式语言，在现场构思他们的大型公共建筑，就像他们共用一个思维一样。”

——克里斯托弗·亚历山大《建筑的永恒之道》

我们可以用类似的想法制造数字产品。语言让人们创造出具有整体感的产品，即使不同的人负责不同的部分。

1. 为模式命名

如果一个接口上的元素没有合适的名称，团队中众所周知的名称。那么这个元素就没有成为你设计体系中的有效单元。一旦你给一个物体命名，你就塑造了它的未来。

比如你给了一个表现型的名字，那么以后就会受到样式的限制:“蓝色按钮”只能是蓝色的。

例如，如果您给一个状态属性的名称:“Ghost Button”，它的特征是一个按钮形状的透明按钮，但有一个薄的实心边框，常用在彩色背景上。

2. 将团队融入设计语言

仅仅命名不足以构建一个共享的设计语言。整个团队都应该沉浸在设计语言中，让它无处不在。

使设计模式可见:

有条件的话可以在墙上开一个空专门展示设计系统的房间，称之为“图案墙”。

让你的设计体系更加开放，人们会觉得你欢迎他们加入进来，欢迎他们提出问题甚至贡献。

1)引用事物的名称

所有语言的共同特点是，只有不断的使用，才能保持生命力。

它需要成为日常对话的一部分:

这就是为什么有意识地使用约定的名称来指代这些模式是很重要的——不管这个名称听起来有多奇怪。把设计体系作为入职培训的一部分，把设计体系的内容作为入职培训的一部分，新员工会更容易理解设计体系。当新员工加入工作时，他们将学习设计指南是如何创建的，以便他们能够理解为什么以及如何做出决策。在英国开放大学内部，他们创建了一个介绍性的在线课程，其中有一章专门介绍模式库，还包括一些小测验和小课程，可以帮助新员工更好地理解设计系统。

2)定期组织设计系统会议。

每个人都讨厌开会。但是，如果你想让每个人都跟上设计系统的发展，就有必要组织一次关于设计系统的会议。这是所有设计师和开发人员关注设计系统的时候了。起初，它可以每周举行一次。等团队找到节奏，可以两周开一次。团队可以利用例会时间就产品的整体模型(比如图标和排版)达成一致。同时，这也是一个很好的机会来分享新的模块，并讨论其目的，用途和可能出现的问题。

设计体系不是一夜之间建立起来的，而是通过日常实践逐渐形成的。

作者:夜莺耶；；来源:优秀设计

原文链接:https://www.uisdc.com/build-design-system

本文由@南丁格尔耶授权发布。人人都是产品经理，未经作者允许，禁止转载。

来自Unsplash的图像，基于CC0协议。