首页 > 其他分享 >!function(){console.log(12);}()

!function(){console.log(12);}()

时间:2022-11-29 14:57:45浏览次数:35  
标签:function 12 console 商家 商户 体验 场景 微盟 设计

小结:

1、

 

 

微盟商家后台体验设计重塑全面解析 https://mp.weixin.qq.com/s/et8KW1PvP_n4WYtU7fTwcA

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

原创 微盟用户体验部 WEMO Design 2022-11-23 11:35 发表于上海 微盟全新推出了中国企业服务领域内首个面向“去中心化时代”的WOS商业操作系统,旨在为未来的智慧商业提供一整套可快速迭代的基础设施,助力企业数字化经营可持续增长。其商家后台作为触达商家的最重要窗口之一,也同步进行了全面体验重塑。

本文将深入介绍此次体验重塑的思路策略及优化实践,希望能为企业服务行业带来一些有意义的思考。图片

 

#01

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

 

设计目标定义

设计需要有的放矢,在本次项目伊始,我们首先与各业务方、需求方一起进行了WOS系统的商业目标与产品目标的深入探讨与理解。商业目标:整合微盟全部业务和技术能力,打造面向未来的去中心化新商业操作系统,以服务和技术链接商家、生态伙伴和开发者,共建中国数字商业生态,服务万千商家可持续增长与高质量发展。产品目标:基于微盟现有产品及未来规划,搭建一套一体化、迭代快、集成强、可扩展、灵活自定义的商业操作系统,在全新的底层架构基础上稳定迁移,并升级产品功能。

图片



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

图片

 

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

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

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

在此基础上,我们提炼出了本次体验重塑的设计关键词,作为清晰简明的指导方向,即:“整合统一、高效友好、易学易用”,并基于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系统提供的良好用户体验的同时,能打造出符合自身行业特色、品牌特色的生态应用,更好地满足商户个性化定制需求。

图片

通用普适的底层能力

结语


体验之路,任重道远。此次WOS系统的商家后台的体验重塑,便是我们迈出的一小步。它离不开微盟用户体验团队、产品与开发团队的合作与努力,在此也感谢微盟产研对体验设计工作的重视与支持。后续,我们将在更多业务场景的扩展支持、更多产品与生态伙伴的迁入适配,以及组件库的升级迭代等等方面,坚持不懈,持续迈进。

微盟集团董事会主席兼首席执行官孙涛勇指出,“微盟将借助WOS这一全新的商业操作系统,为企业构建去中心化商业基础设施,打破多系统无法相融相通的掣肘,筑牢智慧商业底座,驱动数字资产沉淀和价值释放。同时聚拢万千生态伙伴,推动中国商业服务行业生态发展和产业升级。”希望本次WOS系统B端商户后台的体验升级实践,也能为整个商业服务行业与生态,带来一些有价值的案例参考,成为探索体验之路上的有力推动。

 

标签:function,12,console,商家,商户,体验,场景,微盟,设计
From: https://www.cnblogs.com/rsapaper/p/16935377.html

相关文章