兰亭妙微ui设计公司分享:B 端产品如何做好移动化设计?实战经验总结

兰亭妙微ui设计公司分享:随着移动互联网全面普及,B 端业务早已不再局限于 PC 桌面端。如何做好 B 端产品移动化改造,真正匹配业务人员真实诉求,是很多产品与设计师需要面对的课题。本文将以门店通 —— 汽配门店管理系统为实战案例,梳理 B 端产品移动化完整设计思路与落地方法。

一、B 端产品移动化的时代背景

image.png

移动办公已经成为主流工作模式。根据艾瑞咨询相关行业报告,截至 2021 年 6 月,国内手机网民规模达 10.07 亿,占全体网民比例 99.6%。用户使用习惯的变迁,倒逼 B 端服务从桌面端向移动端延伸。

传统 PC 办公受地点、设备约束,很难满足随时随地办公的现实需求。而 B 端移动化的核心价值,就是以轻量化能力,打破时空限制,帮助企业降本增效,让业务人员可以随时随地完成工作。

但这里有一个关键认知:B 端移动端不是 PC 页面的简单缩小复刻。PC 端依靠大屏、键鼠,擅长处理复杂报表、批量配置、高复杂度业务;移动端优势在于灵活便携,适合碎片化、即时性业务。B 端移动化,应当聚焦高频的「查看信息」和「简易业务处理」,复杂权限校验、多步骤深度配置、海量报表处理,依旧留给桌面端完成。

B 端业务两大核心场景:查看与处理

image.png

抛开行业差异,绝大多数 B 端工作流程,都可以归为两类基础场景:查看信息、业务处理

  1. 查看:获取业务数据、读取业务状态,常见形式为表格、图表、数据面板、业务模型,帮助用户掌握经营、生产、销售等各类信息。
  2. 处理:完成业务操作,对应增删改查、流程审批、基础配置、数据分析等动作。

以汽配门店举例:管理者查看门店经营营收数据,员工查看生产工单信息;获取信息之后,二者再根据业务需要执行对应的业务操作。

二、B 端移动化四大核心设计原则

结合门店通项目实践,我们将 B 端移动端设计拆解为 4 大原则:保持一致、聚焦核心、保证易用、个性化适配

原则 1:保持一致 —— 多端体验协同,而非简单复制

image.png

一致性不等于直接照搬 PC 端界面框架。真正要调和的,是大屏 vs 小屏、键鼠 vs 触控、两套用户心智模型之间的矛盾,从视觉、交互、体验三个维度实现多端对齐。

  1. 视觉一致:守住品牌基因 保证 Logo、品牌色、字体、文案规范统一,强化品牌感知,提升用户信任感。 门店通以黄色作为主品牌色,移动端延续这套视觉体系;业务组件采用白、浅灰作为基底,品牌色做局部点缀;保留业务功能图标,在保证识别性前提下降低设计成本。image.png
  2. 交互一致:相同场景,相同结果 遵循尼尔森可用性原则中的一致性标准:相同业务场景,操作逻辑、输出结果保持统一。 门店通订单完整流程为「开单 > 施工 > 完工 > 质检 > 结算」,无论 Web 端还是移动端,业务流转逻辑完全不变。移动端受屏幕限制,会隐藏弱化非关键字段,但订单状态文案、核心操作按钮,和 Web 端完全对齐,避免用户跨端产生认知割裂。

    image.png

  3. 体验一致:尊重平台原生操作习惯 页面结构不必强求一模一样,但要适配设备原生交互范式。 Web 端空间充足,使用侧边导航平铺全部菜单;移动端空间有限,遵循手机系统设计规范,把功能归类收纳到「更多」模块。功能归类逻辑和 Web 端保持统一,同时适配移动端用户的使用习惯。

    image.png

原则 2:聚焦核心,做信息重构与层级强化

 

移动化切忌全盘搬运 Web 端功能。需要回归移动端真实使用场景,筛选高频核心能力,做信息重构。

① 信息重构:精简单页信息量

image.png

PC 大屏可以平铺全部字段,移动端用户很少主动翻阅屏幕之外的内容。核心信息必须做到一屏可见。

  • 非必要字段折叠收纳,放在「更多信息」内,减少页面信息噪音;
  • 字段数量过多时,使用步骤条拆分长表单,分步完成操作。

门店通表单录入场景,将次要信息折叠收起,避免表单过长带来的视觉压力,简化填写流程,提升操作效率。

② 信息突出:建立清晰信息层级

image.png

筛选完信息之后,还要区分信息优先级。利用字号、颜色、权重,把用户最关心的内容凸显出来。 以订单详情页为例:Web 端可以平铺全部字段;移动端优先强化订单状态、订单金额、核心车辆信息,次要信息弱化展示,降低用户信息获取成本。

原则 3:保证易用,适配移动场景的特殊条件

移动办公常常伴随单手操作、环境嘈杂、网络不稳定等现实情况,设计需要充分包容这些极端场景,从操作、输入、反馈三方面优化体验。

① 操作便捷,适配单手触控

image.png

根据移动设备握持行为研究,手机底部与中部是拇指舒适操作区。重要操作按钮、高频控件,尽量放置在拇指可轻松触及的区域;把低频危险操作放在难触达的顶部区域。

② 尽可能减少手动输入

image.png

手机虚拟键盘输入效率远低于键鼠,设计要尽可能降低打字输入。 可以采用这些方案:扫码录入、选择器、滑块、步进器、关键词模糊联想匹配,用点选、扫描替代手动打字,减少输入负担。

③ 及时响应与状态反馈

image.png

用户操作后需要得到明确反馈,理想情况下操作反馈控制在 100ms 以内。移动场景还要考虑弱网、加载卡顿问题。

  • 过渡反馈:骨架屏、加载动画,缓解用户等待焦虑;
  • 结果反馈:Toast 提示告知操作成功失败;高危操作使用弹窗二次确认;
  • 兜底状态:设计空页面、异常缺省组件,应对无数据、网络异常等场景。

原则 4:个性化设计,匹配不同角色用户

B 端产品一个设备往往对应多角色账号,管理者、一线员工关注的数据、功能完全不一样,需要做权限与使用习惯的个性化。

  1. 内容个性化:按角色权限分发数据 门店通首页数据面板,根据账号权限展示不同指标:

    image.png

  • 门店管理者:查看营收、结算金额等经营类指标;
  • 一线员工:只展示进厂、出厂、工单等生产类数据; 员工个人中心还可以查看个人绩效、提成统计,做到千人千面。
  1. 行为个性化:支持用户自定义配置 面向付费门店,开放首页九宫格功能入口编辑权限。不同岗位员工,可以把自己高频使用的功能置顶,调整功能排序,适配个人工作习惯,进一步提升工作效率。

    image.png

三、拓展:发挥移动端独有优势,补充 PC 端短板

移动端除复刻业务能力之外,还可以利用手机硬件、生态能力,补足桌面端的局限。

1. 硬件能力拓展

image.png

充分调用手机摄像头、GPS、蓝牙、推送、相册等硬件能力:

  • 扫描车牌,自动识别车辆档案;
  • 拍照上传施工、接车过程照片留存业务凭证;
  • Push 推送,实时推送新订单、工单变更提醒。 这些能力是 PC 端很难便捷实现的。

2. 生态联动拓展

image.png

打通软硬件与第三方生态,实现场景联动:

  • 硬件:连接蓝牙打印机,现场完成电子签字、单据打印;
  • 软件生态:系统消息推送、微信公众号、小程序联动;顾客可以通过小程序查看车辆施工进度,接收保养提醒。

写在最后

B 端移动化不是把 PC 功能照搬到手机上,核心是取舍与适配:分清哪些业务适合移动端,哪些依旧留给 PC;在多端保持业务逻辑统一的前提下,针对小屏触控场景重构信息与交互;同时善用手机硬件与生态,创造桌面端无法实现的业务价值。

 

 

转载:优设

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档