微盟商家后台体验设计重塑全面解析

pic

👉

01全局视角出发，探索体验关键词设计目标定义 02整合统一，打造千人千面经营空间 03经营提效，全方位提升商户使用体验界面美学升级，信息展示更清晰聚焦全场景帮助引导体系，商户快速上手灵活拆解组合任务，提升流程效率可视化预览与智能助手，操作更顺畅搭建组件库体系，易学易用体验一致 04开放灵活助力生态共建开放的应用生态系统开放的开发者设计组件 05结语

微盟全新推出了中国企业服务领域内首个面向“去中心化时代”的WOS商业操作系统，旨在为未来的智慧商业提供一整套可快速迭代的基础设施，助力企业数字化经营可持续增长。其商家后台作为触达商家的最重要窗口之一，也同步进行了全面体验重塑。本文将深入介绍此次体验重塑的思路策略及优化实践，希望能为企业服务行业带来一些有意义的思考。

01全局视角出发，探索体验关键词

设计目标定义

设计需要有的放矢，在本次项目伊始，我们首先与各业务方、需求方一起进行了WOS系统的商业目标与产品目标的深入探讨与理解。

商业目标：整合微盟全部业务和技术能力，打造面向未来的去中心化新商业操作系统，以服务和技术链接商家、生态伙伴和开发者，共建中国数字商业生态，服务万千商家可持续增长与高质量发展。

产品目标：基于微盟现有产品及未来规划，搭建一套一体化、迭代快、集成强、可扩展、灵活自定义的商业操作系统，在全新的底层架构基础上稳定迁移，并升级产品功能。

探索体验关键词

可以看到，从全局角度，“整合”是本次升级的基本出发点，同时也兼具强生态开放诉求。在匹配商业目标与产品目标的同时，我们也基于旧系统中体验问题的全面收集与整理，最终确立了本次升级的体验目标。

体验目标：

为新系统设计一套完整的多层级、可扩展的产品框架，提供统一一致的产品使用体验。

对迁入新系统的产品进行体验重构，以提高商家的经营操作效率为首要目标，寻找设计机会点，提升易用性、美观度、愉悦度、使用满意度，保证平滑迁移。

基于全新设计语言，打造一套完整的设计规范与组件库，作为保证体验统一的基础构件，并将其纳入微盟开发生态。

在此基础上，我们提炼出了本次体验重塑的设计关键词，作为清晰简明的指导方向，即：“整合统一、高效友好、易学易用”，并基于WOS系统的生态化共建的目标，将“开放灵活”也作为关键词之一纳入其中予以考量。

02整合统一，打造千人千面经营空间

基于体验目标与设计关键词的定义，我们以“统一一致、灵活组合、贴合场景、运营增效”为主要方向，着手进行商家中心的产品框架以及工作台首页的重构。

统一一致又灵活多变的三维产品框架

以单个解决方案维度设计的产品框架，商家需要在多个后台来回切换使用，各产品缺少统一规划，存在数据没有打通、交互逻辑混乱、界面不统一等体验问题，大幅增加了商家使用成本。

为了解决这一痛点，我们基于商家的体验反馈与新云系统多年的经验积累，将“经营空间”的概念引入设计之中。通过“顶层应用 + 中层场景 + 底层功能”的三维设计思路，我们将原本单线程的产品框架进行了多层级重构，搭建起结构清晰的经营空间产品框架。

全新设计的“顶层应用导航”，将原本分散的各业务产品聚合在统一的产品框架之中，不仅数据互通、界面共享、切换顺畅，也兼具了灵活扩展性，可以根据商家已购应用与业态类型灵活组合，并支持操作人员根据具体场景和习惯进行排序重组。

▲根据场景灵活组合顶层应用

左侧“功能菜单”，则从信息架构与交互模式两方面做了升级。首先以“操作场景+产品功能”的思路，将菜单排列进行了信息结构重组，更加符合商家的心智与行动。同时将旧的“双列递进”的导航模式，升级为“多层级平铺”结构。双管齐下，不仅提升了菜单的可见性与记忆点，也减少了用户操作，降低了交互阻力，极大地提升了导航效率。除此之外，通过可折叠的设计，显示效率也大幅提升，提供了更专注的操作体验。

▲左侧功能菜单结构升级

当商家以不同角色进入后台时，我们的经营场景+组织节点+角色权限系统便会开启智能判断，通过“顶层应用+功能场景菜单+页面功能点”的灵活组合，展示出最匹配该角色的产品界面，真正地实现了整合统一却又千人千面的经营空间。

▲千人千面的经营空间

运营视角工作台，多层次提升经营效果

工作台首页作为商家后台最重要的起点页面，我们着重思考的是如何最大化地提升使用效率，并且为商家与运营人员提供更多价值。通过对不同阶段、不同场景进行调研分析后，从效率与易用性两方面出发，我们将工作台以“经营周期”的维度进行了重新组织，划分为“新手场景”、“日常经营”、“中长期经营”、“长期成长”4个阶段场景进行了重新设计。

▲运营视角的工作台

新手场景

主要由“新手任务”模块承担，涵盖商家在新阶段必做之事，如授权、店铺装修，直至商品上架，让商家在熟悉系统的同时快速开张店铺。而后续系统有重大功能升级或商家加购其他应用时，其对应的新手任务也会随之展现，不会遗漏任何新功能。

▲新手场景

日常经营

在该模块中，我们提供了待办事项、店铺数据以及常用功能，帮助运营快速、高效地进入每日的经营工作，保证商家不错过每一笔生意。同时各模块均可自定义，方便操作人员根据自己的习惯进行配置，进一步提升使用效率。

▲日常经营：待办、数据、常用功能

中长期经营

一家成功的店铺是需要有阶段性经营规划的，为此我们结合微盟的大数据与行业热点，为不同行业的商家提供了针对性的经营建议作为参考，并推荐高质量的渠道与优质应用，在日常经营的需求之上，进一步辅助商家开展经营规划。

▲中长期经营：经营建议、渠道与应用推荐

长期成长

我们以微盟的学习中心为触点，将微盟深耕SaaS行业多年的经验积累，以高质量系统化的经营课程呈现，让运营人员在日常的工作之余，也能进行充电学习，不仅自身获得进步与成长，也能在工作中为企业的成长产生更大的助力，获得双赢。

▲长期成长：学习中心

03经营提效，全方位提升商户使用体验

在整合统一的全新框架之上，如何提升经营效率，是B端商户后台体验关键的衡量指标之一。在对旧有系统进行全面的走查与评估后，我们将WOS系统体验升级的重心，聚焦到“易用性”与“操作效率”两方面的提升。

界面美学升级，信息展示更清晰聚焦

界面UI升级带给商户的是最直观的视觉感受。我们从自然美学中汲取设计灵感，从形、色、字、构、动等维度，呈现出WOS系统商家后台全新的视觉语言。

图形规范：精细打磨图标与元素的细节，以自然至简的形态表意准确、灵活通用，满足不同场景需求的同时，保证了系统感知的简约、一致。

色彩和谐：通过色相、明度、对比等参数的细节调校，构建出和谐自然的全局灰阶与色板，并优化色彩使用指南，在保证识别性、美观度的同时，降低视觉疲劳。

文字标准：优化了字号阶梯，加大基础字号，聚焦内容信息的可识别性；并引入了全新设计的数字字体，展示数据更醒目美观。

架构清晰：通过背景层、导航层、内容层、插件层、模态层等界面元素，构建起清晰的三轴层次架构，在统一布局规范的基础上可以自由灵活搭建，适配友好。

动效灵动：在元素展示、界面跳转等转瞬即逝的节点，融入细腻灵动、符合直觉的动效反馈，使整个系统的操作体感更加流畅自然。

▲字体、图形、色彩、动效

全场景帮助引导体系，商户快速上手

通过全新的全场景帮助引导体系，我们希望能帮助商户快速熟悉并玩转各种功能。从商家中心首页的“新手任务”开始，到初探菜单时的“功能介绍页”、“新功能介绍层”，以及页面级的“功能点气泡”、“帮助指引”，再到重新设计的“帮助中心”，帮助引导系统几乎覆盖了商户操作的所有节点。它有效地提升了产品的易用性与任务的自助完成率，并让商户通过使用过程中的引导和学习，得到快速成长。

▲丰富的新手引导形式

灵活拆解组合任务，提升流程效率

通过对旧系统体验问题的全面归纳与分类，结合体验原则与科学方法，我们针对表单型流程冗长、难懂、关联性割裂等问题，提出了系统性的优化方案——“简、拆、合、联”四法，灵活应用于体验优化的实践当中。

简：简化字段，缩短表单

以频次、常用、缺省等维度整理字段，在保证核心逻辑流程的基础上，精简不合理的字段，并采用响应展示、默认赋值等方式，优化非重要字段，从而缩短流程，提升单个表单填写效率。

拆：拆分任务，分步引导

将原本冗长复杂的单一任务页面，根据场景与心智模型，重新拆解成多个分组、多个步骤，减少用户在单页面的操作压力，也通过步骤引导方式，让用户渐进式地轻松完成复杂任务。

合：合并任务，强化逻辑

针对部分割裂的细碎流程，基于产品逻辑和操作逻辑，对其进行合并与重新设计，整合成为相关性更强、逻辑更合理的任务或任务步骤组，让商户能更集中地完成任务，同时也让任务本身更易懂易用。

联：关联引导，流程互通通过对经营场景的具体分析，关注任务间的关联关系，在一个流程结束后，强化对相关性流程的引导机制，让流程以场景化任务的思路进行串联，让商户的操作更为顺畅，也极大地提升了场景内整体的经营效率。

▲流程优化示意

可视化预览与智能助手，操作更顺畅

在任务流程的优化中，我们也引入了一些贴心的小工具，让商户用得更顺畅舒心，其中较为重要的是“实时可视化预览助手”和“智能填写助手”两项。

实时可视化预览

在实际经营中，商家后台的许多配置操作都会导致C端店铺的变化。在旧系统中，商户的一大痛点就在于大部分流程都只能通过手机打开C端进行预览，操作诸多不便。因此，我们通过统一规划与设计，在任务页面增加了可视化预览模块，可实时进行C端的高保真预览，并覆盖了至少80%的任务场景。通过这一个小小的模块，为商户的操作体验与效率带来了极大的提升。

▲可视化预览：会员中心配置

沉浸式表单+智能填写助手

在部分复杂的流程任务中，我们还应用了一套沉浸式表单框架。它精简了页面结构，精简了容易干扰的元素，并提供了“智能填写助手”模块。它会根据用户当前光标定位的字段，动态展示出规则、建议，帮助用户更好地完成填写，减少错漏；当表单提交时，它则会汇聚展示所有错误字段，方便用户通过锚点迅速定位，提高纠错效率，进一步为用户提供了高效专注的表单填写体验。

▲智能填写助手：发布商品流程

搭建组件库体系，易学易用体验一致

本次商家后台的体验重塑，涵盖微盟大部分核心业务产品的迁移。为了在时间紧、任务重的的情况下完美地落地既定的设计目标，我们搭建了一套界面清晰、交互流畅、易学易用的PC端组件库Klein，作为设计落地时体验一致的保证。

Klein组件库以微盟多年的SaaS平台经验为基础，通过大量的商户操作行为研究，应用原子设计理论，提炼出更符合商户心智模型的设计与交互模式，产出了设计规范、基础组件与业务组件等几大组成部分，大幅地提升了设计与开发的质量与效率。

Klein组件库

其中，业务组件这一创新概念，通过对真实业务场景的梳理与抽象，将商户高频使用的复杂组合操作，进行了规范化封装，设计出商品选择器、优惠券选择器等30多个业务组件，可以在不同的产品流程中直接复用，在界面与交互逻辑上保持高度一致，大幅降低了商家学习使用的成本，让良好一致的体验得到了延续。

▲业务组件：商品选择器

04开放灵活助力生态共建

▼

在全局视角中也提到，共建数字商业生态是WOS系统的商业目标之一，而体验重塑也是生态化的重要一环，主要体现在商户和开发者两方面。

开放的应用生态系统

从商家的感知上，本次商家后台一个重要生态化的体现，便是增强了第三方应用与装修模版、组件系统。原有独立的应用市场与模版市场在全新设计升级后，有机地融入到了商户后台，方便商户直接浏览选购数以千计的第三方应用，或是丰富多彩的C端店铺装修模版、组件。让商户可以更快更直接地从开放生态中受益，进一步地提升经营效率与质量。

丰富的模版市场与第三方组件

开放的开发者设计组件

而在开发者层面，Klein设计组件库无疑是微盟开放生态的一个重要助力。在组件库规划时，便希望借助微盟多年的体验设计经验为SaaS行业赋能。因此在组件库设计时，充分考虑到了通用性、普适性，同时也考虑到了适配各种业态的灵活性、扩展性。在代码层面提供了丰富的配置项与扩展接口，以适应不同业务的差异化需求；同时开放了快速配置风格的能力，让开发者在共享WOS系统提供的良好用户体验的同时，能打造出符合自身行业特色、品牌特色的生态应用，更好地满足商户个性化定制需求。