新闻中心

谈一下致心零售POS收银端设计思路

产品新闻
来源:原创  2021-12-03

致心零售的beta测试马上就要完成了,作为我们自主设计开发的第一个大型的新零售项目,今天想在这里把当初设计的一些思路跟想法写下来,对个人作为一个沉淀,对他人算是一个分享。我主要从设计风格,布局,用户体验这3个方面来谈一下。
alt

设计风格

致心零售的整体设计风格还是沿用整个产品的设计风格,扁平化,抽像化,多用线性图标和圆角矩形表达一个圆润的感觉,少了一份犀利,多了一份亲合感。配色方面选用了产品logo中的主题亮黄色, 亮黄色也是今年潘通(PANTONE)流行色之一,非常有活力,辅以黑灰色,呈现一种简单明快的感觉。图标采用线性图标,选中状态为反色高亮,这也是一种常见的设计,简单直观。按钮采用全圆角设计,感觉圆润有亲合力,非选中状态只有一个边框效果,使整个UI呈现一个干净的效果,减少视觉疲劳感。选中状态是一个线性渐变色,增加一些设计上的活力和变化。在tab项目的选中效果为一个放大和加粗的字体,这是一种简化认识的做法,选中效果一看便知。同时下面增加一个主题色的条状元素,同时该元素也是圆角的,保持一个设计上的一致性,可惜后面开发说不好做,给毙掉了,搞了一个简单的矩形效果,非常可惜。 alt

布局

收银机POS的屏幕大小可以简单理解为一个平板,当年我们做iPad APP的经验就可以参考来用了,好消息是该应用是只应用于pos机的,并不需要同时兼容平板和手机,这样我们设计产品整体布局就简单多了。
布局的产品UI的骨架,设计的好,产品后续的操作逻辑才能一以贯之,不然会造成操作逻辑混乱和复杂,增加用户学习和认知成本。
我第一个想法是采用“3段式设计”,3段分别为菜单区,列表区,详情区。目前这种设计应用的也比较多,比如我们常见的微信桌面端,但是这个设计并不微信的首创,我感觉最早用这个设计的应该是Twitter的mac客户端。
“3段式设计”一个最大的好处的操作逻辑比较清楚,把UI拆分成一个我们日常生活中常见的树状结构,简化认知和理解,用户能够做到举一反三,降低学习成本。

用户体验

前面我有提到UI的整体布局的“3段式设计”,这个设计有一个好处是带来操作动线是线性的,不需要来回操作。以收银界面为例子,致心零售的操作动线是从左到右的,先选菜单区,手移右点击选择商品,再移动到右边查看编辑商品并结账,整个的操作动线是从左到右,从上到下的,减少收银员的手部动作,减少收银员的疲劳感。而某些收银软件就完全没有考虑过这个问题,这样收银员的手部会来回摆动,时间长了会增加人的疲劳感。 alt

数据显示,从事收银工作的员工普遍存在年龄偏大,学习能力不强的问题。致心零售UI设计上特意简化操作,比如商品搜索。一般的搜索会让用户输入中文,这样就会增加操作的复杂度。致心零售会自动生成商品名称的助记码,配合我们专门研发的虚拟键盘,最大化减少用户操作。

alt

后记

在整个致心零售的POS UI设计当中,有不少的遗憾。一是现在市场大部分收银机不支持高分屏而分辨率不高,这样的话整体显示效果非常不好, 希望以后有新的设备能支持高分屏。二是没有支持黑暗模式,可能有人会觉得黑暗模式可有可无,但是我们一直坚信设计还是以人为本的,用户在使用产品的时候能够感觉到你的设计,这个就是对设计人员的最大奖励。