河源高端建站：如何创建设计语言简化UX设计过程

河源高端建站大约一年前，在数字代理机构工作期间，我的目标是简化我们的用户体验设计流程。十二个月后，本文分享了我对精益思想如何帮助我们在UX设计过程中提高效率的想法和经验。

挑战

当我到达该机构时，线框已经被创建并用于各种项目。赢得线框生产的倡导者不是问题。所有利益相关者（内部和外部）都了解线框的目的，并赞赏他们在塑造和建模数字体验方面的价值。

然而，到目前为止，该机构并没有指定一种推广的“工作方式”，而是鼓励用户体验设计师“以他们的方式做事。”虽然这种增加的自主权曾经让UX设计师能够快速工作，使用他们喜欢的工具和流程，它现在开始产生问题。

当你退后一步和整个过去的项目看，你可以看到不同的工具和流程的行动，从低保真线框工具，如Balsamiq工作室和Moqups.com，到中期的高保真输出，从工具，如Axure和UX引脚。

对于进行多个项目的客户来说，缺乏一致的线框可交付成果令人困惑和迷失方向，客户必须记住多个URL和登录，同时还要学习如何导航各种输出。

同时，对于该机构而言，缺乏标准化的用户体验设计流程在时间和金钱上都是昂贵的。跨项目缺乏共享文件结构意味着，如果项目中的资源模式发生了变化（他们经常这样做），那么新的UX设计师很难找到他们的同行停止的地方。与此同时，许多项目中不必要地重复许多例行任务。

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

一个新的方向

在引入新的公司范围的线框图流程之前，我需要向UX团队强调缺乏流程导致我们出现问题以及如何建立标准化流程可能会有所帮助。

为了确保从更广泛的利益相关方群体中获得支持，我将UX团队聚集在一起并向他们展示了挑战：

我们如何建立一个标准的线框图流程，使我们能够快速工作，同时提高跨项目的一致性？

在团队讨论这个问题时，我迅速在白板上绘制了线框图过程中的每个关键里程碑。我们讨论了每个里程碑的潜在增强机会。要接受增强功能，必须符合以下标准之一：

• 节省UX设计师的时间。

• 提高线框一致性。

• 促进快速工作。

我们决定的增强功能如下：

创建标准文件模板

好处：节省时间，提高一致性。

通过引入模板文件，我们觉得我们可以帮助在项目的初始设置期间节省UX设计人员的时间。模板文件将使UX设计人员不必完成设置新项目所带来的例行任务（创建响应视图，网格系统，文档结构，更改日志等）。

我们还认为创建模板文件将为工作项目文件的外观定义基线。我们相信文件模板将为线框文档建立核心基础和结构，从而促进跨项目的一致性。

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

• 介绍页面。欢迎利益相关者参与线框，解释如何浏览线框文档并介绍更改日志。

• 组件主机。列入类别的所有组件和页面的列表，包含指向较低级别页面和组件的直接链接（路标，表单等）。

• 文件结构。每种类型的线框页面的文件夹，帮助利益相关者轻松区分页面布局与组件和用户旅程与站点地图。

• 预设断点和网格系统。标准响应线框断点和网格系统。

同意我们的模板文件的一组公共断点可能是最难完成的任务。在与UX团队和其他内部利益相关者进行了长时间的辩论后，我们得出以下结论：

• 线框的目的是传达页面功能，可视层次结构和交互。它不是提供最终产品的像素完美表示。

• 项目利益相关者最感兴趣的是看看布局如何响应桌面，平板电脑和移动设备。

• 线框内展示的断点仅具有代表性，稍后将在设计阶段再次考虑。

在达成此共享协议后，我们共同决定生产线框来代表利益相关者感兴趣的三个常见断点（桌面，平板电脑和移动设备）。在整个设计阶段，我们将考虑最终断点，因为我们考虑了浏览器趋势和客户当前的网络分析数据。

我们为模板文件确定了以下网格和断点：

介绍设计语言

优点：节省时间，提高一致性，促进快速工作。

我们确定的下一个也是最重要的增强是引入我们自己的线框设计语言的想法。

对于那些不熟悉设计语言的人来说，设计语言提供了一套统一的用户体验和设计规则，可以促进各种媒体输出的和谐。与为可接受的字体，颜色，图像和语音（一种设计语言）创建规则的样式指南不同，它为UI模式创建规则，提供有关布局，用户输入，动画和反馈的指导。

近年来，由于引入了Google的Material Design，设计语言变得越来越流行。但是，像BBC和IBM这样的公司已经开发了数字资产，这些资产在一段时间内都遵循完善的设计语言。

您期望在设计语言中看到的典型元素是：

• 网格系统

• 辅助功能指南

• 布局原则

• 排版和图标

• 互动指南

• UI组件

通过引入设计语言，我们相信我们可以确保整个线框的外观和感觉一致，同时还提醒用户设计师注意常见的响应式UI模式。

为了使UX设计人员能够轻松地与设计语言保持一致，我们希望将我们的设计语言转换为设计师可以在工作时使用的响应式线框库，使他们能够快速构建响应式线框。

为了定义我们的设计语言，我们慢慢开始在最近的四个主要项目中汇总一个常用的UI模式列表。然后，我们将这些与新的响应式网格系统对齐，并将其构建为响应式线框库。

我们的响应式线框库迅速成为我们生活和呼吸的设计语言。我们最初从一小部分30个组件开始，然而，随着时间的推移，现在已扩展包含超过100多个响应式UI元素，其中一些您可以在下面看到。

创建自己的设计语言

如果您希望创建自己的线框设计语言，我强烈建议您尽早让整个团队参与进来。在这样的冒险中尽早接受人们的投入可以帮助证明和塑造这个命题。它还有助于确保结果是一项协作工作，所有UX设计人员都支持最终解决方案。

这里需要记住的关键事项是，设计语言的目标是通过提醒他们常见的UI模式适合于消化内容的媒体来协助和支持UX设计人员。其目的不是制定所有项目必须遵循的严格规定。否则，所有项目最终看起来都太相似了。

运行设计语言研讨会

要运行“设计语言”研讨会，阻止团队日历中的一天，将所有人与Sharpies，小吃，便利贴，Blu-Tack和纸张一起收集起来。

介绍

通过以下问题简介开始新的一天：

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

勘探

展示来自网络的示例，例如：

• 谷歌

• BBC

• IBM

在团队中工作

根据受众的规模，分为四到六组。使用笔和Post-it，勾勒出您在最近的Web项目中使用的常用UI元素，随时为组件添加合适的名称。

绘制完每个组件后，将其放在墙上。当每个人都完成他们的组件时，花一些时间将它们分成共同的主题（即导航，体验，转换，浏览），随时删除任何重复项。

评论

获得UI组件列表后，将组合在一起并重新关注每个项目以鼓励对话，例如：

• 我们应该在哪里使用它？

• 它是如何工作的？

• 它应该如何设计？

• 它包含哪些信息？

• 它的主要功能，约束和限制是什么？

• 它应该如何在较小的屏幕尺寸下表现？

确定优先级，确定优先级，确定优先级

在研讨会结束时，您应该有一个可用于构建设计语言的常用UI组件列表。最初，尝试保持此列表简洁，最多约20至30个组件。

从这里开始，您需要一种媒介来将您的组件捕获到整个团队可以访问的共享位置，并允许他们进一步协作并满足新的需求。

我们使用Trello板来传达我们从研讨会中捕获的所有组件，并在他们的分组中显示它们。创建了一个额外的“创意”专栏，以提供一个空间，任何团队成员都可以在其中添加新组件，并将在即将举行的团队会议中进行讨论。

能够在Trello板内的综合视图中查看内容，使我们能够讨论并优先考虑将构建到我们的设计语言中的组件。任何不是核心要求的东西都会转移到后期阶段。

我们与UX团队沟通的关键是我们的设计语言将成为一个随着时间推移而延伸的“生活图书馆”。因此，我们的设计语言的初始阶段将是一个MVP，我们将使用UX团队的反馈来向前推进库的形状。

注意： Trello是一个非常轻量级的工具，用于管理和分配小团队中的任务。但是，如果您的组织有JIRA帐户，我建议您使用此帐户作为管理此流程的主要工具。JIRA具有比Trello更多的功能，允许访问诸如开发报告和所请求和添加的组件之类的功能。您还可以监控在工作上花费的时间，这可能对报告管理链中的进度非常有用。

构建您的设计语言

我们始终致力于将我们的设计语言构建为UI工具包，UX设计师可以在整个创作过程中使用该工具包。为实现这一目标，我们将设计语言转换为“响应式Axure Widget库”。

在选择适合您业务的线框工具时，需要考虑以下因素：

• 易于使用。初学者掌握的容易程度如何？是否需要进行任何培训？如果是，有哪些支持和培训资源？

• 可访问性/可伸缩性是否允许多个UX设计人员在单个文档上协作？它如何处理具有多个页面修订的大型文档？

• 特色。它有哪些内置功能？你能创建响应式线框，粘贴标题和视差滚动吗？

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

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

但是，由于其陡峭的学习曲线和许可安排，Axure可能不是您业务的最佳选择。关键信息是在选择线框工具时，您应该考虑您的业务需求。

大多数线框工具现在支持包含自定义库UXPin，Justinmind和Sketch等等。可悲的是，Adobe XD还不支持自定义库，但根据Adobe的博客，这个功能有望在不久的将来出现。

标准化文档和注释

好处：节省时间，提高一致性。

我们新流程的最终增强功能是为文档和注释创建一些指南。过去，根据项目的规模，规模和时间表，已采取各种方法来制作文件。例如：

• 页内（高级功能注释）。线框的每一页都应清楚地描述组件的作用。

• 隔离（低级功能规范注释）。描述每个原子组件的细节（CMS编辑器可以编辑或更新的信息，以及限制，限制和响应行为）。

• Wiki（功能规范）。从功能角度创建记录整个项目的wiki。包括所有页面和组件功能以及围绕其他项目的规则，例如Web分析，浏览器支持，角色，权限和治理。

在作为一个团队讨论注释时，我们认为，尽管项目经理将线框内的“低级功能规范注释”视为减少文档时间线的一种方法，但这通常会产生比解决更多的问题。

首先，它意味着项目团队中唯一可以访问和更新规范的成员是可以访问线框工具的UX设计人员。其次，该文档不允许跨团队协作（例如来自其他团队的输入，即QA或项目管理）。

在作为一个团队讨论之后，我们在前进时达成一致：

• 我们只会在线框内使用页内注释来传达组件的角色。

• 原子，组件级规范将始终通过Wiki格式的功能规范提供。

• 我们同意我们的功能规范wiki的通用结构。

我们为功能规范Wiki确定的结构如下：

1.简介 这是我们向项目的利益相关者介绍并解释整个规范中可以找到的内容的地方。此部分中的典型子页面将包含项目角色，项目范围，站点地图和changelong。

2.页面模板

这是我们将所有页面模板组合在一起并识别静态页面与动态页面的位置。例如，内容页面与搜索结果页面或产品页面。对于每个页面模板，我们将描述页面的角色和页面特定的功能，以及整页屏幕抓取和线框的链接。

在页面模板使用公共组件的情况下（即，站点导航，面包屑，英雄），我们只需链接到组件页面，而不是多次重新记录组件。这不仅减少了文档，而且还允许利益相关者审阅文档，以便轻松地查看他们需要审阅的内容。

3.组件

这是我们将所有UI组件组合在一起的地方。然后，对于每个组件，我们确定CMS用户可以使用哪些内容字段，内容是手动还是自动，以及定义的验证规则以及交互行为。

4.特别注意事项

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

• 分析要求

• SEO要求

• 第三方工具

• 分类和标记内容

• 内容类型

• 断点

• 浏览器支持

• 角色和权限

• 工作流程

回头看

从头开始重新思考我们的UX工作流程，使我们能够在UX团队中节省时间和成本。通过尽可能引入关键模板，我们能够减轻我们的UX设计人员在每个项目中需要执行的一些繁琐的例行任务，同时促进跨项目的一致性。

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

能够更快地建立60％-70％的页面布局意味着可以更早地向利益相关者展示概念以获得反馈，从而为UX设计人员提供更多时间来思考项目的复杂细节，这些细节令人惊喜和愉悦。在要求项目最后期限出现时，往往会牺牲那些小细节。

最后的想法

害怕完全标准化？不要！

设计语言应该用于帮助在项目的早期阶段形成页面和组件，而不是完整地指定所有组件功能。

每个项目本身都是独一无二的。它具有自己的一组用户，要求，期望和挑战。在任何网络项目中，早期阶段都会带来很多不确定性。我们越早制作诸如线框之类的工件，我们就越快地向利益相关者学习哪些有效，哪些无效，更重要的是为什么。正是这种理解有助于指导和引导未来的适应性以及最终产品。

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

例子

您可以在下面看到新闻网站主页和以产品为中心的网站（基于Vessyl）的登录页面的概念。这两个概念都是使用Axure RP 8生成的响应式线框。

能够利用响应式Axure库（作为引入设计语言的一部分而构建）意味着以前需要一天才能完成的这些概念可以在一个半小时内完成。不仅如此，它们现在看起来一致，利用相同的视觉呈现方式来处理元素，例如图像和视频。

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

主页示例

这是一个基于新闻和媒体的网站的概念，该网站根据技术，健康和营养等多个类别生成基于文章的内容。该网站的目的是提高参与度和忠诚度，用户希望在一周内多次返回此网站。因此，保持内容新鲜并与最终用户相关是推动重复约定的关键。

着陆页示例

此概念是Vessyl上显示的登录页面的简化版本。此页面的作用是教育和建立对Vessyl产品的兴趣。请记住，这可能是用户看到该产品的第一页（因为它们可能是从各种新闻或公关网站链接）。因此，本页面应利用讲故事的原则以及社交校对，将产品变为现实，让用户了解如何使用该产品将有益于他们的日常生活。

河源高端建站