微盟智慧餐饮B端收银POS产品界面UI设计项目升级复盘

雅座收银POS是微盟智慧餐饮业务矩阵中的一款基建产品，主要用于门店的点餐收银。随着业务和产品的发展需求，雅座收银POS迫切的需要进行一次体验优化升级。因此在保证存量客户的使用习惯前提下，我们将核心营业模块进行了升级改造。

本文将根据下图的叙事结构，从确定目标价值、构建设计体系、优化交互细节等几个方面来阐述雅座收银的体验优化之路，多角度体现雅座收银的产品性格–高效、简洁、可靠。

 

 

PART 01

—

 

背景与目标

 

项目背景

 

 

2021年由于业务与团队的迅速扩张，现有的收银POS难以承载持续增加的用户需求。并且由于历史问题产品缺乏设计规范，导致整个开发过程中基于此类的问题不断凸显出来。

而我们的用户对于产品体验也有了更高的诉求。基于这样的问题现状，可以直观感受到问题主要表现在4个显性维度：

 

【设计维度】：由于产品缺乏基础设计规范，在迭代过程中，用户体验无法保持一致性，用户学习成本会不断增加。并且没有前期的设计沉淀，设计侧在接新需求的时候要花更多的时间去应对项目。

 

【研发维度】：基于“设计维度”的规范缺乏问题，直接导致研发侧组件代码碎片化严重，存在重复造轮子的情况。并且多数组件并未封装开发，导致一个弹窗出现在5个地方长相都不同，产品的质量难以保证。

 

【测试维度】：基于前面两个维度做的不到位，导致测试每次迭代发版都需要重复走查，增加了很多工作量

 

【产品维度】：前面3个维度的问题直接就会导致产品的版本迭代效率低，也会导致用户需求排期时限不断拉长，不利于产品的快速成长。

 

所以通过分析得出，如果基础的标准化规范以及操作标准，未构建好并有效的落地，前期为了满足业务快速成长的需求，这样做看不出大问题。产品进入快速成长阶段后，就会发现这样的问题会严重影响到产品的迭代成长。

 

 

 

改版目标

基于以上问题，我们明确当前的改版目标从业务角度出发，要关注两个点

1.提升产品一致性2.提升用户体验度

 

 

 

 

 

 

PART 02

—

 

问题调研

 

 

对于一款进入稳定期的ToB 产品，决定做大规模的专项优化时，首要需要明确待解决的问题类型，即我们文说的改版目标，其次针对类型给出解决方案。因此，我们必须弄清楚3件事：

 

1.是谁在用———-了解用户2.有什么问题——-知己-产品拆解3.人家怎么做的—–知彼-竞品分析

 

 

1.了解用户

 

在项目初期，首先就同产品、运营等伙伴沟通用户的具体情况，我们了解到用户构成主要以年轻的女性群体为主，从用户使用产品时的工作环境、工作状态、工作情绪3个维度来了解实际使用场景，一句话概括：

 

门店服务员在嘈杂的就餐环境中使用产品进行门店运营，并且饭点期间的工作状态是忙碌而迅速，在此期间的工作情绪也是烦躁、压力大。

 

那么针对这些用户面临的问题，映射在产品优化里的时候也是我们需要关注的点。

 

 

 

 

2.知己–产品拆解

 

对于产品本身整体框架的拆解以及页面的梳理分析非常重要，我们在拆解的时候主要围绕三个维度进行拆解梳理，这样在问题梳理的时候可以更有侧重点的去发现问题。拆解前可以这样提问：

【交互】是否便捷高效？

【视觉】是否规范一致？

 

【体验】是否符合认知？

 

 

1.核心场景

 

本次优化，我们需要明确重点优化的核心场景链路，就是开台>点餐>结算这个流程。优化的侧重点也从这3个点切入。

 

2.问题归纳

明确了核心场景后，就开始问题梳理。去操作产品的每个步骤，记录问题点。可以是体验流程、交互细节或者是视觉问题。然后将其记录到表格当中，方便后期进行问题解决跟踪。

记录问题的同时也要思考已知的问题应该如何去优化。

 

 

3.视觉层拆解

我们将整个产品视觉层面分别从原子、分子、组件、页面类型四个维度进行拆解。通过这样的方式将颜色、字体等基础规范到弹框、导航、输入框等组件一一归纳。由此我们对现有的视觉层面的问题基本一目了然，后期优化侧重点也基本明确了方向。

 

 

 

 

 

3.知彼–竞品分析

前文中我们对于产品的拆解已经完成，明确了问题的核心点。在具体方案设计前，我们可以带着在自我拆解过程中发现的已知问题，去做竞品分析。

 

竞品分析是选取行业内龙头企业的产品2-3个即可，梳理已被市场验证的页面结构、操作流程以及场景业态，思考哪些亮点是我们可以借鉴的。

 

经过针对性的竞品分析，我们可以提炼出一些不错的设计准则或者交互方式运用到我们的优化当中

比如分析过程中发现，常规的终端产品数字按键通常为方形，以及桌台、菜品等卡片设计采取的信息左对齐的方式，那么在后期优化的过程中就可以代入该方案。

 

问题汇总

 

通过以上的问题梳理后，大致的问题已经归类了出来。这时拉上产品、研发人员一起开会，阐述产品面临的问题，以及一些解决方案的初步设想。这样的目的主要是达成团队的共识，意识到项目体验优化这件事的价值。

 

 

经过整理分析，雅座收银的主要问题分为3大类

 

问题1.交互层–效率低

效率低下是B端产品要尽量避免的一点。我们在梳理产品的过程中可以发现很多操作就有这样的问题，最明显的就是弹框。

 

很多居中的弹框并不能承载过多的内容，因此在一些高频操作里就需要去滑动弹窗进行选择。

另外就是很多高频操作的操作路径过长。尤其是目前使用的终端机器屏幕很大，如果操作路径过长 很大程度上就会降低了操作效率。

 

问题2.视觉层–层级乱

层级乱主要是信息模块的划分过于混乱，这一点在最核心的点餐页面体现的尤为明显。总结下就是以下几点

●多数的信息卡片（桌台、菜品卡片）布局采用居中对齐的方式，导致各种字段无法合理排列
●旧有模式通过色块区分不同信息源，造成了不必要的视觉干扰

 

问题3.体验层–不明确

尼尔森十大设计原则里的第一条–反馈原则，是非常影响使用体验的一个点，然而在我们现有产品中，很多操作并没有给予明确的提示反馈。对于用户来说，使用困惑与学习成本无疑成倍的增加了。

 

因此，针对以上这些 显性问题，展开了对产品的体验优化工作。

 

PART 03

—

 

设计策略

 

 

对于现存问题达成一致认可后，团队又讨论定义了雅座收银的产品性格关键词，用3个关键词概括：高效、简洁、可靠。后期整个产品是优化方向会紧紧围绕3个关键词展开。

 

【高效】设计规范建立、组件封装开发，更少的滑动操作、更短的操作路径。

 

【简洁】信息模块重新布局、去除不必要的视觉元素，进行视觉降噪提升信息可读性。

 

【可靠】提升用户的操作体验，任何操作反馈明确可知，给予用户可控感。

 

PART 04

—

 

设计方案

 

高效–视觉层

 

高效的构建主要体现在两个层面，视觉层+交互层。因此前期构建产品的规范，保持产品一致性是需要首要完成的任务，所以先从基础规范的构建开始。

 

色彩规范

 

 

雅座的品牌色为口碑橙，颜色上还是沿用了原先的主色调，然后利用HSB取值方式，保持S和B不变，H的数值为15递增的方式，推导出24色带，然后进一步筛选后我们就可以得到基于品牌色明度、饱和度一致的16个辅助色板。

定义出最常用的色彩

原始色彩提取后，可以建立对应的拓展色板。整个产品所有用色都从拓展色板提取，保证了规范的一致性。并且前期优化的时候就可以让开发给每个颜色定义好相对应的名字（暂时只定义1、2、6、8的色值，其他的配色日常设计使用即可），方便开发过程中直接通过名字调用颜色

比如不同的黑色，我们可以取名Black15  Black25  Black45等等，使用时直接名字调用即可。

 

原子理论

 

为了使产品构建更具备规律可循，雅座收银POS运用了原子理论做设计，采用了8为最小模数进行布局设计，所有的模块、间距、大小遵循8的规律进行延展布局，使界面具备动态的韵律感。

并且在开发过程中，也遵循8的准则进行界面布局，使产品视觉层更具备一致性。在与开发沟通的过程中，也直接告知对方，所有的间距都是基本8的倍数设置，降低了沟通成本。

由此，整个产品就像搭积木一样构建起来。

 

 

框架布局

用户的核心诉求就是迅速的开台>点餐>结算，因此页面的信息布局+功能架构上，我们紧紧围绕高效这个关键词展开优化。

在框架布局方面基本和之前类似，保持了一屏一列、一屏两列、一屏三列的布局模式。对比原来的布局方式，本次在整体结构的细节上做了更细致的调整。定义好模块的间距、模块与模块之间的距离，8的增量进行布局。

无论界面怎么变化，都是基于这样的三个框架规范去填充内容。

 

在开台界面，依旧是保持了一屏一列的模式，整体属于一块信息，里面切割成无数的小桌台卡片

进入到点餐页面的时候，就是一屏两列的布局。整体主要呈现了两块信息，购物车+菜品列表的操作模式。

下单成功后，就是常见的一屏三列。呈现了3块信息，从左往右操作步骤递增的模式。

 

栅格系统

 

 

原先的产品并没有运用栅格系统，导致在不断的迭代过程中，整个产品的规范逐渐偏离。在本次优化中，我们一并优化进去。

 

前面定义的最小原子为8，我们在构建栅格的时候在8的基础上8划分页面。边距和水槽都为24px。基于这样的设计规则，后面的产品迭代优化才能更具备规范性。

 

 

高效–交互层

弹框优化

 

弹框是产品使用过程中出现频率非常高的一个组件，原先的弹框都采用居中弹框的形式，那么居中弹框最大的问题就是，当前选择过多的时候，可展示区域是有限的，增加了滑动操作

 

针对这个问题，我们给出了这样的设计策略：保持弹窗的操作形式不变，将居中弹框改为侧滑弹框，这样可以最大化的利用屏幕空间，尽可能多的展示可选项，减少滑动操作。

 

 

在点餐环节选择菜品的做法规格等操作时，弹框内的按钮选择数量至多可增加33%以上，最大化的展示可选项数量，提高点餐人员的工作效率。

 

 

 

键盘优化

键盘是整个收银产品中使用频率非常高的一个组件。

原先的键盘都是圆形按钮，经过竞对分析，会发现常规的终端类产品按键都为方形。因此保持原先键盘的体积不变的前提下，优化后的按键可点击区域增加了50%，降低误操作的概率。

 

 

并且针对收款环节的操作习惯将数字布局进行重新调整，使其排列顺序更加符合收银场景下的数字排列方式，同时最大化收款按键面积，合理规划收银键盘的布局方式。

 

 

 

输入表单

在我们原先的产品里还有个问题，就是表格填写查看的过程中，由于表头未对齐，整个视觉动线一直在来回切换。

 

针对这个问题，本次优化的时候就将表头文字统一进行了右对齐，这样用户进行表单填写查看的时候可以一条直线由上而下的查看，快速定位到填写内容。

 

即使填写的表单内容很多，也能高效的填写与查看表单内容。

 

操作路径

 

原先产品里多处使用场景当中，组件选择的都不恰当，直接就导致了整个用户操作路径非常的长。

 

通过下图我们看到选择一个订单状态，操作路径基本是贯穿了整个屏幕。因此，我们将原先的居中弹框改为下拉选择弹框，直接将操作路径缩短了50%以上，减少用户在使用过程中手指移动的距离。

 

 

简洁

 

左对齐卡片设计

 

 

对于原有产品的界面，桌台和点餐界面的卡片都采用了居中对齐的方式，这样做直接导致很多信息排不下，并且会出现卡片上下左右四个角都是角标，降低了信息的可读性。

 

带着这样的问题，在竞品分析过程中，我们发现了采用左对齐卡片式设计的方式要优于原有的居中对齐方式。

 

因此我们将信息归类，菜品和桌台类字段居于左侧，而角标类标记全部位于卡片的右侧。经过这样的调整优化，整个信息的展示可读性高于原先的布局方式，并且字段和标签进行了分类，也不会拥挤在一起。

 

 

留白去线 视觉降噪

 

 

对于不同信息源，原有的处理方式是通过灰色背景的方式来区分，而这样做的问题是，当信息源过多的时候整个数据列表会失去重点，都是重点=没有重点。

 

 

因此我们采用字号对比、画面留白等方式进行信息模块的区分，去除不必要的视觉干扰。

 

 

规范金额单位使用

 

在收银产品当中，涉及到金额展示的地方非常多。原先的展示规则比较随意，我们并不能找到金额单位的使用规律。问题集中出现的地方：

1.部分页面价格不带【￥】单位

2.价格确定到小数点几位不明确

 

3.单位与数字的大小比例关系随意

 

 

因此优化的时候对于金额单位我们也做了总结分类，大致可以分为3类，根据出现的类型定义好金额的使用单位。

 

 

可靠

 

容错&防错机制

 

根据尼尔森十大设计原则中对于容错原则的描述：无论错误场景设计的多好看，都不如在第一时间防止用户发生错误；该原则强调，产品需要有防错机制。

可靠这个特质对于B端产品来说是必不可少的。而在分析原先产品问题的时候就发现，产品的容错和防错做的不够到位。

 

因此，我们对于一些输入环节增加了信息预判，避免用户输入完成后才给出错误提示，降低用户误操作的成本。以及一些输入的操作，例如标签、选择后的优惠券等等，可直接删除已选标签，给予用户一定的容错能力。

 

 

 

 

操作可知  反馈明确

 

1、无论当下操作是在加载中还是加载失败，第一时间予用户明确的反馈，是非常重要的一件事，时刻给用户一种安全可靠的操作体验，明确当下的行为以及导致的行为结果。

 

所以在桌台选择的处理方式上，我们增加显示了已选中的桌台名称，桌台信息+执行动作，明确告知用户当前已选的桌台以及将要执行的动作

 

 

2、其次就是加载中的按钮的要给予一个明确状态。如果点击后的操作仍在执行中，我们没有给予反馈，就会使用户认为点击无效从而不停的点击，加重卡顿的情况。

 

 

文案描述精准

 

对于单一操作的确认文案，优化后更加精准。通过”确认XX”和“暂不XX”这样的文案融入到按钮当中，在执行的时候可以更加明确当前要执行的内容。

 

 

例如要选择使用一张优惠券，我们就可以描述为“确认抵扣”或者“暂不抵扣”，从字面理解上来说，也会比单纯的：确认、取消“描述更精准。

 

 

PART 05

—

 

设计沉淀

 

规范搭建

 

 

在设计过程中，我们搭建了一套雅座收银POS的产品设计组件、并制定了相应的设计规范。保证后期产品迭代的一致性。

 

 

 

 

开发提效

 

开发将常用的字号、色彩、圆角等属性定义好名字，在开发过程中直接通过名字调用构建样式。即使多人协作的情况下也能尽可能保证样式的一致性。

 

 

宣发创意视频

 

由于本次产品更新的点比较多，为了让商户以及我们的客服团队能够更好更快的理解产品更新点。还额外做了配套的宣发视频用于介绍。

 

 

△  雅座收银POS升级视频

PART 06

—

 

上线反馈

 

产品上线后，从视觉到交互得到了一次全新的提升，对比之前的版本系统性能和流畅度分别提升了14%和24%。

 

上线后来自内部和外部的反馈都是不错的。

 

对于商户来说，学习的成本很低。因为在优化的同时大部分保持原有的操作习惯，整体视觉的改版上的反馈也是清爽了很多，上手简单。

 

PART 7

—

 

项目小结

 

 

流程沉淀

项目做完后，在整个产品优化过程中，无论是前期的问题调研，初步基础规范样式构建，还是后期的交互细节优化落地，我们始终都是围绕着，如何做一款更易用的收银工具为设计核心，进行产品的优化升级。

整个优化流程看起来好像工作量比较多、比较复杂，其实我们通俗的理解，就好像去医院看病医院，一共分为4个步骤去理解，查病因>写病历>动手术>去复查。

 

然后针对每个关键步骤，拆解出细分的行动计划，对应到我们整个B端产品的优化流程当中逐个击破。

 

 

写在最后

 

微盟智慧餐饮的愿景是“数字餐饮，智慧生活”。

雅座收银作为全场景一体化数字化解决方案中非常重要的”根产品”，始终围绕着如何做一款更易用的收银工具为核心，让门店整体运营状态更高效，同时提升营业人员在工作过程中的使用体验。助力餐饮企业实现真正的降本增效，而这也是收银产研团队一直在共同践行的目标。

/ end /