利用渐进式设计思维，服务中后台的用户

利用渐进式思维，服务中后台用户

2018年｜类型：原创｜标签：经验沉淀

渐进式设计思维在设计理论早有体现，早在 2006 年，Nielsen 在文章中提到的渐进式呈现。随着产品设计的发展、用户的成长，可用性目标也会随之迁移。渐进式设计思维帮助设计师重新思考用户在整个旅程中所处的阶段，并为用户的进阶提供循序渐进的设计。

对于渐进式的了解，始于 2017 I/O 大会，Sam Birch 介绍了渐进式网络应用（Progressive Web App, PWA）。官网给出了如下的特征：

Reminded me of the term progressive was Progressive Web App (PWA) in Google I/O 2017. PWA was described as follow:

Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
Engaging - Feel like a natural app on the device, with an immersive user experience.

PWA满足了在不同网络环境、不同设备下也能实现即刻加载、响应及时、流畅动画的体验。这让我开始思考渐进在后台系统设计模式中的应用。

网站功能的增加，意味着网站承载的用户任务越来越多，界面中的信息也越来越多。

中后台管理的常规功能处于较为稳定的常态，包括账户系统、角色配置系统、权限系统、管理设置、数据呈现（概览、分析、报表）、消息推送、帮助支持、各系统及产品功能的CRUD。这一部分教育与学习成本随着用户使用逐渐熟练而逐步降低。

而后台管理提供的产品功能则是一个墒增的过程，在这个过程中，用户会不断接触新的产品功能，随之而来的对新用户的教育与学习成本也逐渐增高。

把网站功能以一揽子交易的方式呈现给所有不同阶段的用户，不但存在信息过载的危险，也拔高了网站的使用门槛，尤其在专业术语频次高的行业里，容易滋生用户的负面情绪。对于复杂庞大的网站功能，设计需要做好复杂性管理。通过将常规功能标准化、最小化，使常规功能的墒降低；同时为产品功能设定可拓展、可管理、用户可学习的途径。

学习成本随时间的变化

进阶式旅程。帮助不同阶段的用户理解网站功能，为逐渐进阶的用户优化使用体验。

由 PWA 可知，在初始化的过程中，设计可以将简单的线性流程（如新手任务）纳入考虑范围，通过异步加载实现用户在完成新手引导时加载 Content，并使用 Skeleton Screen 提升加载时的用户体验，同时考虑使用动态加载异步组件来显著降低初始化的成本。

预加载

根据用户进入网站的完成同一个任务随着时间的变化，可以将后台管理用户细分为：预备用户、新用户、经验用户。当用户频繁使用某些产品功能时，意味着他们在何处怎么使用这项功能。在这种场景下构建进阶式旅程。

对于预备用户而言，帮助用户熟悉核心功能。常见的如 “系统介绍”、“引导操作”、“帮助文档” 以及 “特性探索”。在业务功能复杂、数量庞大的场景下，还可以考虑 “学院课程” 的形式。

为预备用户提供

对于新用户而言，帮助用户完成新手任务。常见的如“引导用户完成首次创建”。

为新用户首次使用而提供

对于返回用户而言，帮助用户明确操作核心功能、了解次要功能。

对返回用户使用提供

有进则有退，和进阶式同样重要的还有后退。随着用户对功能的生疏而将后退式纳入考量范围，并在用户需要时提供必要的帮助。

与此同时，UI 设计师容易在产品雏形时就设定了一成不变的设计掌控力，大图标、小图标、大标题、标签有无、组合形式等等，并总是希望为返回用户提供设计。返回用户是不需要手把手教导的，设计可以追求极致的简约。但必须得承认有时产品在追求简约上过了头，造成了新用户的服务缺口。这个问题不是重申设计的解决方案是推向新用户还是返回用户，而是没有意识到用户随着时间序列而发生的偏差。如何引导非返回用户，从上手到熟悉，UI 会随着用户的熟练程度而实现进阶。

分步式任务。为用户提供平滑的切换并快速响应用户操作。

分步式任务是基于分步式呈现 ( Staged Disclosure ) 这一概念的。根据 PWA 在离线、加载的特点，设计需要对加载、缓存的内容进行构建。从宏观到微观依次可以分为：界面级加载缓存、模态级加载缓存、组件级加载缓存。用户触发任务后，借由平滑流畅的动效顺利进入任务的第一步，并逐步执行线性序列的步骤，如需要则在每个步骤下显示子集。每一个步骤目的明确，且每一个步骤都在其容器范围内遵循渐进式呈现的原则。在降低视觉干扰的同时，借助分步式呈现引导并教育用户。

界面级分步：如后台管理中最常见的就是创建单据，单据根据业务场景的不同，会存在不同种类、不同层级、内容复杂的表单，甚至在创建过程中还需要大量拉取数据、预览数据，单页分布执行或许是减轻用户心理负担的一种设计手段。为核心功能提供必要的缓存，提升创建表单过程响应快速的体验。

界面级分步

模态级分步：模态通常包含 Dialog、Popover、ActionSheet 等，都属于比较重的沟通形式，需要用户下意识去聚焦到某一区域并完成下一步操作。用户主动触发任务，必须针对模态作出回应才能进行下一步。模态的设计跟随内容而提供不同的样式，设计需要针对不同场景设定简单易记并且一致的使用规则。以结构较深内容较多的嵌套下拉菜单为例，通过扩大容器范围，借助大面积的模态来帮助用户下意识地聚焦。

模态级分步

组件级分步：在原子设计中，将 “原子” 组合成 “分子” 、 “分子” 组合成 “组织” 的过程中，思考组合过程中是否会发现 “有趣” 的化学反应——两种元素有可能不只是组合拼接的过程，而是在某些条件下化学键断裂，形成了新的 “分子” 或者 “组织” 。设计可以为化学键断裂提供条件——分步式的设计思考，有多个元素组合在一起时，用户是如何操作的。以搜索为例，当用户需要时跃至最高层级，并通过联想及时响应用户标签。

组件级分步

基于这三类加载缓存，为容器内的 Content 提供模块化的设计，借由原子设计的理念实现界面解耦与器物分离。从 App Shell + Content 模型中分别通过代码组件的可复用性来降低成本。

渐进式区块。帮助用户快速聚焦界面内核心信息。

渐进式区块是基于渐进式呈现 ( Progressive Disclosure ) 这个概念的，任务唯一性则继承了渐进式呈现的思想，突出重要任务。区块，承载着容器范围内的内容，可以泛指整个界面，也可以是原子设计中的组织、模块、分子等。

随着网站功能的堆砌，有一种常见的现象——提出这部分功能的人员出于高效的目的往往想把所有功能都摆在台面上。相近的概念、模糊的语义、散落一地的操作，将后台管理的界面推入了一种“伪高效”的局面。功能的堆砌带来墒增，“用户自定义界面”就会涌现，这对于返回用户是一个不错的选择。回顾用户旅程，对于预备用户和新用户而言，似乎并不友好。对于一个庞大复杂的后台管理系统的用户而言，他们即需要强大的功能、足够的选项来满足他们对于常规功能和产品功能的要求；但同时，他们也需要简单地、低学习成本地使用网站功能。除了为用户设计进阶式旅程外，为界面、组织、模块等区块提供渐进式呈现是一个不错的出发点。向用户提供核心功能，将次要功能推迟至次要区域、乃至隐藏区域呈现，仅在用户触发时才公开更高级的任务流和信息内容。这对于预备用户和新用户而言，避免犯错，并减少了在不必要的功能上所花费的时间。这对设计提了两个标准：

为初始、常用、高级与辅助进行合适的拆分。为初始显示明确的指引，为常用提供经常需要的所有内容，为高级与辅助提供清晰可见的入口。为容器设置划分，渐进聚焦，分层显示特性，制定模块间的拼接以及模块的设计是基本要求。
为高级与辅助提供合适、易理解的跃进。为用户的下一步操作明确需要关注的信息，并聚焦当前任务。同时，每一步跃进都必须是用户易理解的、并且进一步加深理解的。上下文与关键信息的呈现，以及冗杂信息的清除，是优化提供沉浸式的体验的常用手段。

以数据报表为例，通过循循善诱地方式引导用户一步一步去操作，了解数据的故事。设计前后的对比：

设计前后对比

渐进式简约。设计迭代适应用户成长。

随着产品功能的增加以及 B 端用户的成长，设计提供的价值转向了降低用户能够感知的复杂性。渐进式简约的理念很简单：可用性是一个不断变化的目标。用户对产品的理解会随着时间的推移而逐步加深，产品界面应该适应用户而及时更新。

设计任何用户界面时，一个重要的平衡点就是产品功能和简单。功能的增多带来了愈发繁忙的界面。用户的学习意愿是用户接受产品复杂性的重要衡量因素。如果用户对界面非常的兴奋，他们会花更多时间去探索更多功能。但实际上，尤其是后台管理系统，用户对界面的参与度较低，他们只希望快点完成任务离开。用户不想花时间去学习，只想花时间去完成任务。这个被称之为活跃用户的悖论。这个问题，尼尔森团队似乎已经给出了答案：尽量减少功能，不惜一切代价追求简单。“内容优先”提供了用户不受任何干扰使用产品的环境，为降低复杂性提供了思路。Complexion Reduction 便是近两年较为明显的流行语言，它有如下特征：

克制用色：黑白色以外，基本只有一种颜色，用来引导用户
更大、更粗、更黑的标题：突出字体的厚重感
简单、纤细、易辨的图标：通用的图标，尽量不要使用颜色
更多的留白空间：大量使用白色
明亮的品牌标志：从品牌标志突出品牌

Complexion Reduction 这种“内容优先”的策略优势突出，但其鲜明的语言特征也直接抹杀了产品个性，令产品的体验不再是独特的。但视觉仍然可以继承 Complexion Reduction 在颜色、字体、布局、图标上的设计思考。以创建档案为例。

Complexion Reduction

除此之外，后台管理也因为用户任务的机械性而缺乏情感，随着 2B 业务的扩展，越来越多的普通用户成为了后台管理的使用者，产品功能可以通过情感化的设计来补齐体验缺口，与用户友好地进行沟通。 “矢量插画” 与用户建立了可解释、易传达的情感连接，为用户沟通提供了视觉表达。比起高质量图片以及高清照片，svg ( Scalable Vector Graphics ) 在网页中有着不可比拟的 “易缓存、加载快” 的强大优点。矢量插画通常在新用户引导、产品描述、空白状态等情况下使用。除此之外，还可以从情感化的角度来为用户提供有价值的矢量插画：

用户感到迷茫，受到挫折
为用户感到高兴
文字太多，用户难以解读
希望以更加友好地形式与用户沟通

以数据中心机房提供服务为例，将通俗的口语词汇转化为形象的、友好的插画，通过图文进一步帮助用户理解机房服务。

矢量插图

矢量插画的策略除了拉近与用户的距离，也传达了品牌价值。但也需要克制使用，以免造成信息冗杂。在合适的场景，为需要的用户提供情感支持是使用矢量插画的参考依据。

成长式沟通。利用内容策略为用户生产有效内容。

什么是内容策略？Brain Traffic 把内容策略定义为指导有用的，可用的内容的创建，交付和管理。内容策略可以从两个方向四个角度来进行分析。从内容设计上，在用户需要的时候，网站需要基于用户的需求、偏好以及期望提供相应有效的内容。以他们期望的方式，使用加载的数据和呈现的信息为用户提供所需内容的过程。从系统设计上，提供系统的架构、模块、界面以及数据来满足具体需求。从可复用性的结构确保内容的整体性，从一致化的标准和内容效果评估来实现对内容的创造、交付与管理。

内容策略

Cleve Gibbon 在 CMS Build Project Path 一文中提到了十年前网站设计搭建的传统方法，交付后的网站内容在长时间段内死气沉沉，难以更新。这里 Cleve 提到了设计网站需要一并设计 CMS 来帮助网站保持生机勃勃。后台管理似乎不是内容策略的产品，但利用内容策略，可以提升界面的可理解性，强化品牌调性，更友好地帮助用户理解业务流程，并帮助产品人员实现内容的管理与维护。基于 Brain Traffic 定义的内容生态系统，结合中后台界面设计的特征进行了调整，可以从宏观上了解整个产品业务在体验设计和内容策略上的契合点，实现跨团队共创。

内容生态系统

在内容编辑上，基于平台品牌的目标，建立文风指南 ( Style Guide )，并提供相应的口吻与调性 ( Voice & Tone ) 标准。平台与用户的沟通将遵循这一标准。
在内容体验上，在用户中心旅程的指导下，针对后台管理设计网页元素、界面模板、标准流程，并从标题、一级标题、二级标题、替代文字、按钮、表单、超链接等含有文字的元素引导用户。
从内容结构上，基于 App Shell + Content 模型，为 App Shell 提供可拓展的组织形式，运用用户研究的工具对功能特性进行合理的分类并命名。针对分类后的类别进行内容建模，根据场景不同，演绎不同的内容类型。结合业务特性，将内容类型实例化。还可以基于技术提供如个性化、AI 、动态交付等的功能特性。
在内容处理上，通过内容管理系统 ( Content Management System, CMS ) 实现对内容的规划、交付与管理。内容随着功能的迭代和增长而相应改变。它不再是静态的，而是动态、可搜索的、可发现的、可定制的、个性化的、本地化的、可翻译的等等。随着技术的发展，内容的增长需要 AI 技术的支持。

小结

在今年支持过的中后台项目中，亦是循序渐进地了解并应用了渐进式。虽然执行过程中，会因为沟通断链、技术预研不足、开发周期较短等原因而不能完全实现，但弥足珍贵的是在这个过程中逐步形成了渐进式的设计思维。让人兴奋的是，这种设计思维本身也是渐进式的，会随着技术的进步而有更多思考的空间。基于现有的项目经验，汇总渐进式设计思维在现阶段的思考点：

基于进阶式旅程

优化用户中心旅程中的初始化与加载中
为逐渐进阶的用户优化使用体验

基于分步式任务

从界面级、模态级、组件级构建分步任务流
借由原子设计的理念实现界面解耦与器物分离

基于渐进式区块

为容器内的区块内容提供渐进式呈现

基于渐进性简约

从颜色、字体、布局、图标上简化设计语言
利用情感化设计，利用矢量插画建立情感连接

基于成长式沟通

利用内容策略，为用户生产有效内容