脱水版

本文经验基于创建响应式网页

1、创建适合电脑、平板、手机三种宽度的模板库，节省画线框图的时间，利于和其他成员交流

2、给模板库添加注释和说明，创建设计语言，并及时更新模板库和设计语言

正文

大约一年前，我在一家数字产品工作室工作的时候，我被要求简化我们的UX设计过程。 十二个月后，我写这篇文章分享，关于精益思想如何有效的提供UX设计效率。

1、挑战

当我开始在这个公司上班的时候，这个公司已经在各种项目中创建和使用线框图了。所有利益相关者（内部和外部）都理解线框图的目的，并了解其在数字产品体验方面的价值。

然而，该公司还是鼓励用户体验设计师“以自己的方式做事”，而不是指定一种统一的“工作方式”。这种自主性允许UX设计人员使用他们喜欢的工具和过程，但是这种“以自己的方式做事”的工作模式开始出现问题。

当您回顾并浏览过去的项目时，您可以看到不同的工具和流程，从低保真线框工具（如Balsamiq和Moqups.com）到中高保真输出从Axure和UX工具。

对于下单了多个项目的客户，缺乏一致性的线框交付件给他们带来了一定程度的混乱和迷失，客户必须记住多个URL和登录账号，同时还要学习如何导航各种交付件。

同时，对于该公司来说，缺乏标准化UX设计过程增加了时间和金钱上的成本。缺少跨项目的共享文件结构意味着，如果他们经常做的项目中的资源模式发生变化（这种情况经常发生），新的UX设计人员很难跟进。同时，许多日常任务在多个项目中不必要地重复。

所以我们需要制定一些规则和指导方针，以创造一个更具凝聚力的方法。我们需要设定一个新的方向，现在是时候开始了。

2、新的方向

在引入一个新的公司级的流程到线框图之前，我需要向UX团队强调，缺乏流程会导致哪些问题，以及如何建立标准化的流程可以帮助解决这些问题。

为了确保来自更广泛的利益相关者团体的支持，我一起聚集了UX团队，并向他们提出了挑战：

我们如何建立一个标准的画线框图的流程，使我们能够快速工作，同时改善项目之间的一致性？

当团队讨论这个问题时，我快速地在白板上绘制了线框图过程中的每个关键里程碑。 我们讨论了每个里程碑的潜在增强机会。 为了使增强被大家接受，它必须至少满足以下标准之一：

1、节省设计师的时间

2、提高线框一致性

3、促进高效快速工作

我们决定的可以增强的地方如下：

图1

3、创建标准文件模板

优点：节省时间，提高一致性。

通过引入模板文件，我们认为我们可以在项目初始设置期间帮助节省UX设计师时间。 模板文件将节约UX设计人员设置新项目的时间，比如创建响应视图，网格系统，文档结构，更改日志等。

我们还认为模板文件为定义项目文件的样式提供了基准。 我们相信文件模板将为线框文档建立核心的基础和结构，从而促进跨项目一致性。

我们创建的标准线框文件模板包括以下元素：

1、介绍页

欢迎利益相关者进入线框，解释如何导航线框文档并介绍更改日志。

2、组件库

所有组件和页面的分组到类别的列表，直接链接到较低级别的页面和组件（导航，表单等）。

3、文档结构

每种类型的线框页面的文件夹，帮助相关人员轻松地将页面布局与组件和用户历史记录从站点地图区分开。

4、预设分界点和网格系统

响应式页面宽度的分界点和网格系统。

图2：介绍模板文件能帮助创建项目和项目之间具有一致性的线框图文档

最难实现的可能是对我们的模板文件里的一组通用断点取得一致意见。在交互团队与其他内部的利益相关者经历过漫长的辩论之后，我们进行了以下总结：

1、线框图的目的是交流页面的功能，视觉层次以及交互。不是最终的视觉稿。

2、项目相关者关注电脑端、平板端和手机端上产品的布局。

3、不同端的线框图中页面宽度使用比较常见的尺寸，在后续的设计阶段再细致考虑具体的宽度。

在达成这个共识之后，我们决定产出3种常见宽度（电脑、平板、手机）的线框图作为模板。在设计阶段，结合浏览器的趋势和客户当前的网络分析数据，对页面宽度进行确定。

我们确定了以下的网格和页面宽度：

图3：线框图宽度分类

4、介绍一种设计语言

好处：节约时间，提升一致性，方便快捷的工作

接下来最重要的是介绍我们自己的线框图设计语言。

对于刚接触设计语言的设计师来说，一套设计语言提供了一个统一的用户体验和设计规则，来促进跨平台展示的和谐。与创建字体规则、颜色、图片和语音语调的设计样式指导不同，设计语言创建布局、输入、动效和反馈的UI控件样式。

近些年来，接着谷歌材料设计的风口，设计语言变得越来越流行。然而很多公司像BBC和IBM早已经开始创建并且遵守设计语言了。

设计语言里常见的设计元素有如下几部分：

1、网格系统

2、可用性指导书

3、布局原则

4、排版和图标

5、交互指导书

6、UI组件

图4： 设计语言的例子

通过引入设计语言，我们相信我们能确保项目之间具有一致的外观和感觉，同时提醒UX设计师使用通用的组件。

为了使UX设计人员能够轻松地使用设计语言，我们将设计语言转化为组件库，设计师可以在他们工作时使用它们，从而允许他们快速构建项目线框图。

为了定义我们的设计语言，我们列出了在最新的4个项目中常用的组件。 然后，我们将这些组件按照网格系统进行排版，并将其构建成组件库。

我们的组件库由最初的30个组件，慢慢扩展到超过100个组件，部分组件如下图所示：

图5：我们赖以生存的axure组件库

5、设计你自己的设计语言

如果你正想创建自己的组件库，我推荐你叫上你的整个团队一起参与。这样能确保最终组件库里的内容是大家都同意的，这个组件库也是大家共同努力的结果。

有一点需要注意的是，建立设计语言的目标是协助和支持UX设计师的项目，不是设计所有项目时必须严格遵循规则。 否则，所有项目将最终看起来太相似，而且未必适合不同项目的目标用户。

5.1 做一个设计语言研讨会

要运行“设计语言”研讨会，最好在团队日历中固定一天，把大家聚在一起，准备一些零食，便利贴，荧光笔和纸张等等。

图6：准备材料

5.2介绍

以下面的问题作为研讨会的开始：

作为UX团队，我们需要建立一种设计语言，以便我们能够快速工作并确保项目间的一致性。

5.3展开

展示一些知名的示例，例如：

Google：https://www.google.com/design/spec/material-design/introduction.html

BBC：http://www.bbc.co.uk/gel

IBM：https://www.ibm.com/design/language/

5.4团队合作

根据您的受众群体的大小，分成四到六个组。 使用笔和便利贴，绘制您在最近的Web项目中使用的常见UI组件，并且给组件添加一个合适的名称。

一旦你勾画了每个组件，把他们贴在墙上。 当每个人都画完他们的组件，花一些时间将它们按照主题进行排列，常见的主题有导航、体验、转换、浏览等，删除重复的组件。

图7：按照主题给控件分类，并讨论这个控件样式的可用性

5.5回顾

获取组件列表后，就每个组件大家展开讨论，讨论的问题可以但不局限于以下：

1、我们用在哪里？

2、这个怎么工作的？

3、它应该是什么样式？

4、它包含了什么内容、信息？

5、它的关键功能，约束和限制是什么？

6、它在更小的屏幕尺寸下应该如何？

5.6优先级，优先级，优先级

在研讨会结束时，您应该已经获得了一个常用的UI组件列表，可以使用这个列表来构建您的设计语言。 最初，尽量保持此列表简洁，最多约20至30个组件。

从这里，您将需要一种媒介，让整个团队可以访问这个组件库，并允许他们以后可以协作。

我们使用Trello（https://trello.com）

板共享我们从研讨会获取的所有组件，并且分组显示这些组件。 创建了一个额外区域，允许任何团队成员想这个区域上传新组件。这些组件将在以后的团队会议中讨论。

图8：我们根据组件的用途对组件进行了分类

能够在Trello中整合所有的内容，方便我们讨论哪些组件将构建到我们的设计语言中，以及优先级。任何不是核心要求的事情都可以往后排。

我们与UX团队沟通的关键是，我们的设计语言将成为一个能经受时间考验的“活的图书馆”。 因此，初始阶段的设计语言将是一个MVP，我们将使用来自UX团队的反馈来推进库的前进。

5.7构建您的设计语言

我们希望将设计语言构建成UI设计师可以在整个创作过程中使用的UI工具包。 为了实现这一点，我们将我们的设计语言转换为“Axure Widget库”。

当选择适合您业务的线框工具时，有很多因素需要考虑：

1、容易使用：

初学者如何容易掌握？ 是否需要任何培训？ 如果可以，提供哪些支持和培训资源？

2、辅助功能/可扩展性：

它是否允许多个UX设计人员在单个文档上协作工作？ 如何处理具有多个页面修订的大型文档？

3、特征：

它有什么内置功能？ 你能创建响应线框，粘性标题和视差滚动吗？

4、保真度：

典型输出是什么样子？ 例如，基于草图的页面布局或高保真交互式原型？

我们选择Axure作为我们的线框工具，由于其丰富的功能集，处理大文档的能力，协作功能和支持第三方窗口小部件库的能力。 更不用说，所有的UX设计师都有使用该工具的经验。

然而，Axure可能不是您的业务的最佳选择，考虑到axure陡峭的学习曲线和许可安排。所以，当选择您的线框工具，你应该考虑你的业务需求。

大多数线框工具现在支持包括自定义库UXPin，Justinmind和Sketch等等。 可悲的是，Adobe XD还不支持自定义库，不过根据adobe博客的信息，这个功能预计会在不久的将来出现。

6、标准化文档和注释

优点：节省时间，提高一致性。

我们加强版新流程的最后一点是为文档和注释创建一些指南。 过去，根据项目的规模和时间表，已经采取了各种方法来编制文件。 例如：

1、In-Page（高级功能注释）

线框的每一页应清楚地描述组件在其中的作用。

2、Isolated（低级功能规范注释）

将每个原子组件描述到分钟级别的细节（CMS编辑器可以编辑或更新的信息，以及限制，限制和响应行为）。

3、Wiki（功能规格）

从功能角度创建记录整个项目的维基。 包括所有页面和组件功能以及其他项目的规则，例如网站分析，浏览器支持，角色，权限和治理。

图9：不同的文档和注释样式

当作为一个研发团队讨论注释时，我们认为，尽管项目经理倾向选择isolated（低级功能规范注释）方式，他们认为这种方式比较节省时间，但这种方式通常会产生比解决的问题更多的问题。

这种isolated方式的缺点是：第一，项目团队中唯一可以访问和更新规范的成员是会使用线框图工具的UX设计人员。 第二，这种形式的组件库不允许跨团队协作（例如来自其他团队的测试或项目管理人员的输入）。

考虑到团队合作，我们一致认为：

·我们将只使用in-page注释来传达组件的功能。

·元素，组件级规范将始终通过功能规范以Wiki格式提供。

·我们将为功能规范维基使用一个共同的结构。

我们为功能规范维基设置的结构如下：

1.介绍

这是团队其他人员会访问的地方，并介绍在这里大家可以找到什么内容。 此部分中的典型子页面将包含项目的角色，项目的范围，站点地图和更新记录。

2.页面模板

这里我们把所有的页面模板分组排列，并识别静态页面和动态页面。 例如，内容页面就是静态页面，搜索结果页面或产品页面是动态页面。 对于每个页面模板，我们将描述页面作用和页面特定功能，以及抓取屏幕内容到线框的图的链接。

当页面模板使用公共组件（即站点导航，面包屑）时，我们将链接到组件页面，而不是多次重新记录组件。 这不仅减少了文档，还使得使用文档的团队其他成员者能够轻松地浏览和浏览所需的内容。

3.组件

这是我们将所有UI组件组合在一起的地方。 对于每个组件，我们需要确定CMS用户可用的内容区域，内容是手动还是自动的，以及定义验证规则和交互行为。

4.特别注意事项

这是我们列出了与项目相关的所有其他更广泛的需要记录的主题，但不是特定于任何给定的页面。 本节中的典型主题是：

分析需求

SEO要求

第三方工具

分类和标记内容

内容类型

断点（网页宽度变化的节点）

浏览器支持

角色和权限

工作流

7、回顾

重新思考我们的UX工作流程，使我们能够节省时间和成本。通过在可能的情况下引入关键模板，我们能够减轻UX设计人员在每个项目上完成繁琐日常任务的工作量，同时促进跨项目一致性。

新工作流程的一个组成部分是引入我们的设计语言，设计语言改变了我们完成项目线框图的方式。 介绍设计语言使我们能够精益工作，使我们能够快速构建响应式线框图。

能够更快地建立60％-70％的页面布局意味着设计概念可以更早地向利益相关者展示，并获得反馈，为UX设计人员节省出更多时间来完善项目中让人感到惊喜的复杂细节，而这些细节往往是赶工期情况下会被牺牲的。

8、最后的想法

不要害怕完全标准化？！

设计语言应该用于帮助在项目的早期阶段形成页面和组件，而不是整个项目期间。

每个项目都是独一无二的。它具有自己的用户，要求，期望和挑战。在任何web项目中，早期阶段会带来很多不确定性。我们越早的从利益相关者那里得知做什么，不做什么，为什么，越能设计出接近客户目标的最终产品。

此外，您的设计语言不是“设置它，忘记它”工具。您的设计语言应该是UX设计过程中的一个部分，随着技术变化和新的交互模式的出现，随着时间的推移，要更新和调整设计语言。您的设计语言应该始终根据UX设计师，客户和用户的反馈随时间进行调整。

8.1示例

下面您可以看到新闻网站的首页和一个以产品为中心的网站（基于Vessyl）的着陆页（landing page）的概念图。 这两个概念图都是使用Axure RP 8作为响应线框生成的。

能够利用响应式Axure库（作为介绍设计语言的一部分）意味着这些以前花了一天时间完成的概念图可以在一个半小时内完成。 不仅如此，现在不同宽度的页面利用相同的视觉呈现元素，如图像和视频，具有一致性。

能够快速生成交付件意味着可以花更多的时间跟客户讨论关于外观，感觉，布局和响应处理组件的初步想法。 您还可以花时间在较小的细节，如喜欢与评论功能，分类，内容优先级，（手动策划与自动反馈）等。

8.2首页示例

这是一个新闻和媒体类的网站概念图，网站内文章的内容跨越多个类别，从技术到健康和营养。 这个网站的目的是提高用户参与度和忠诚度，希望用户在一周内能多次回到这个网站。 因此，保持内容新鲜且推送用户感兴趣的内容很关键。

图10 这个首页使用了我们的axure控件库

8.3着陆页示例

这个概念是展示Vessyl的着陆页的简化版本。 这个页面的作用是教育和建立用户对Vessyl产品的兴趣。 请注意，这可能是用户看到的关于产品的第一个页面，他们可能从各种新闻或公关网站链接到这个页面。 因此，本页应该使用讲故事方式，让产品有生命力，使用户了解使用产品将有益于他们的日常生活。

图11 使用axure控件库的着陆页例子

8.3延伸阅读

有关设计语言和建立标准化UX工作流程的更多信息，请参阅以下材料：

“Google Material Design“, Google---https://www.google.com/design/spec/material-design/introduction.html

“BBC GEL“, BBC’s Global Experience Language (GEL), 2016----http://www.bbc.co.uk/gel

“IBM Design Language“, IBM’s Design Language---http://www.ibm.com/design/language/

“Designing Spotify’s Design Language System“, Stanley Wood, Medium, 2016----https://medium.com/@hellostanley/design-doesnt-scale-4d81e12cbc3e

“Best Practices From 5 Years of Distributed Design“, Marcin Treder, YouTube, 2016----https://www.youtube.com/watch?v=Ih1jQYuJ9rk&feature=youtu.be

原文作者：Kyle Cassidy

原文地址：https://www.smashingmagazine.com/2016/12/how-creating-a-design-language-can-streamline-your-ux-design-process/

更多文章请关注http://www.youjiaohu.com，或者关注微信公众账号友交互：

每篇文章都有脱水版总结，让你的阅读更高效。