pos系统的UI/UX设计

2017年2月以来，我开始负责这家公司的pos机系统的UI/UX工作，这套系统也是从0到1开发的，所以我面临许多挑战，也让我成长了许多。我将我在设计中的一些思考的整理成这篇文章，和大家交流交流，也希望和大家一起学习成长。

 

一、项目介绍

二、项目分析

三、风格设定

四、设计逻辑

五、深色模式

六、设计规范

七、个人小感

 

一、项目介绍

这家公司主要致力于研发pos机系统，通过自动读取读取在销售商品时直接读取商品销售信息（如商品名、单价、销售数量、销售时间、销售店铺、购买顾客等），并通过通讯网络和计算机系统传送至有关部门进行分析加工以提高经营效率的系统。

 

 

产品定位

1、开发定位：web应用；

2、用户群体：适用于大、中型超市、连锁店、大卖场、大、中型饭店及一切高水平管理的零售企业。；

3、功能定位：解决对销售、进货、调拨进行结算，使您在数据查询、分析时简捷、高效、准确；盘点、部门库存、商品类库存、供货商现存等的查询分析审查； 人事、工资管理系统。

 

 

二、项目分析

 

从前面的产品定位，可以得到以下三个关键词：web、收银、应用，同时根据这三个关键词可以延伸出一些问题，然后开始着手准备前期设计工作。

 

A、pos机设计注意事项

1、因用户在门店使用，需分离B端和C端区别系统，设计时要尊重现有的交互模式；

2、因为多数使用环境都比较多（灯光环境不一样），所以界面整体风格采用深色模式。

3、因为有很多用户都是线下交易，考虑到这一特点，在制作设计稿时字号不能太小。但是信息内容又多，字号大的话信息很难布局，这是一大问题；

4、安全性，涉及到很多交易的信息，如何体现安全性很重要；

5、整体风格上趋于严谨，因为是为收银设计的，颜色使用上相对来说要克制。

 

构成

B、web设计注意事项

1、最明显的是用触屏操作系统，触屏的交互方式多，因此手指之间的间隔功能要合理。

2、界面右上角带有退出按钮。同时自带后退、前进、关闭的按钮，有点类似于安卓系统自带返回键。这些功能影响着应用信息保存的交互问题；

3、布局问题，浏览器可自由伸缩，会影响页面的布局；

4、设计时不存在@2x、@3x这些问题，采用@1x设计就可以，可以给设计和开发带来不少便利，有些切图为适配高分辨率的屏幕需要切2倍3倍图。

 

 

C、中后台系统应用设计注意事项

1、中后台系统信息繁多，因此系统用起来体验好不好、效率高不高尤为重要，在医疗行业更是如此。如何用设计区分信息的层次，并且在有限的空间展示尽可能多的信息是设计的首要任务，为了展示正确的信息哪怕展示方式不对也比设计的好看而信息展示不全要好。

2、尽可能的优化操作流程，再精美的设计也不如优化一两个流程效率来的快一些；

3、交互点到为止，尽量少用复杂的交互方式，比如拖拽，双击和右键都尽量少用；

4、对颜色和icon的运用要谨慎一些，以免造成多余的认知障碍。由于文字能够传达清晰准确的信息，无疑是更好的设计元素。

5、即时反馈是提高效率的有效手段。

 

三、风格设定

A、布局

菲兹定律表明：越远难点击，越近越容易点击，靠近边缘更容易点击。点击菜单醒目而干净简约，这种操作用户所花的时间是最少的。而当菜单栏在上方时，会影响用户的操作，因此用户点击起来所花的时间更长，也容易操作失误。

 

B、色彩

收银产品采用色彩较多，深蓝具有科技、严谨的色彩象征，然后橙色是醒目、活力的象征，所以最后选择了一个深蓝色的色彩，比较符合现有的产品调性。另外因为工作环境不一，所以界面整体采用深色模式设计。

 

 

C、字体

我们最开始设计demo时，常用文字使用的字体大小是12，而用户试用后反馈字体太小。原来有很大一部分用户都是新手操作，12对于他们来说字体小了点，因此我们决定采用18作为主要字号，12作为辅助说明文字。

 

D、图标和圆角

为了更好的搭配深色模式，我们决定图标采用面性图标（后文会讲解）。图标和按钮的圆角也采用了直角硬边风格代替了常见的有圆角风格。硬朗的图标有一种精确性、科技感，更符合产品调性。

 

四、设计逻辑

 

A、层次清晰

中后台系统有信息繁多，这就需要设计来区分信息的层次，引导用户去关注最重要的东西，“偷偷地”给用户一种高效的体验。这里根据《写给大家看的设计书》当中的四大原则：对比、对齐、亲密性、重复，来区分信息的层次。

 

B、即时反馈

人机交互时，系统及时给出反馈非常重要，反馈能够给用户确定性和安全感。如果用户操作了系统，得不到相应的反馈，用户往往觉得系统是不是出错了，就会给用户造成一种负面使用体验。常见的反馈形式有确认反馈、警告反馈、错误反馈、状态反馈。本系统中从交易、系统智能分析、计算审核、保存打印，各个步骤都应该有确认反馈、警告反馈、错误反馈、状态反馈，只是反馈的形式可能是弹窗，可能是颜色的变化，可能是符号的提示等等。这里举例最基本的按钮一定要有normal、hover、click、disable，不然用户不知道自己的操作是否起作用了，给用户造成认知障碍。

 

C、简单有效

奥卡姆剃刀原理讲究设计时避重趋轻、避繁逐简、以简御繁、避虚就实，因此在设计时，我们会和产品经理商量有些功能是否真的有必要放上去，或者有些信息是不是可以隐藏。

 

五、深色模式

 

前文提到，根据收银产品的特性以及用户的使用环境，我们的系统采用深色模式。然而深色模式并不是简单的背景色使用深色那么简单，因为背景变成了深色，相应的字体的颜色、图标的风格、元素的布局等等都会产生微妙的变化，以下列出一些深色模式要注意的一些事项。

 

颜色

1、深色的选取尽量不要直接选用纯灰色，可以往冷色系偏一些；

2、白色背景上不会用纯黑文字，同样的深色背景上不要直接使用白色，否则会产生强烈的刺眼感，但是一些按钮还是要使用白色；

3、字体的中性颜色深浅建议使用白色的透明度变化来制作深浅，原因有两个：一是透明度变化能够让字本身投射出背景色的色调，做到自带色调的效果，能够让页面更自然协调；二是利于设计和开发理解记忆，有一个量度去衡量。虽然通过透明度变化有时会碰到没有背景色的问题，但是这种情况很少，而且也很好解决，增加一个背景就可以了。

 

 

六、设计规范

 

原子设计理念

原子设计理论由设计师Brad Frost首先提出，我觉得这套理论能够很好的组织构建设计规范，也有利于团队成员理解与协作，于是我把这套理论践行于这套系统中。在原子设计理念中，一切设计都是由最小的原子组成，然后原子可以演变成分子，组织，模板，页面。

 

1、原子

为UI设计构成的基本元素，文字、颜色、图标、图片、调色板、进度条、分割线、开关、单选框、复选框，也可以为抽象的概念，例如色调等。特点是不可再分割。

 

 

2、分子

由原子构成的简单UI组件。按钮、标签、导航、输入框、搜索框等。

 

 

3、组织

相对分子而言，较为复杂的构成物，由多个简单的UI组件构成。弹窗、表单、列表、卡片、数据图表等。

 

 

4、模板

以页面为基础的架构，将以上元素进行排版。例如消息模块、列表模块、项目模块、表单填写相关模块。

 

 

 

 

 

 

5、页面

页面就是高保真设计稿，由于项目原因这里就不放出来啦~

 

七、个人小感

设计这套系统，让我学到了很多东西，对很多东西的理解也更加深刻了。包括设计理论的运用，问题的分析方法，方案的探索等等。参考了设计网站的很多知识，还有很多平时阅读的一些文章，借鉴了一些他们的观点，特别是当你研究的时候不太敢确定真相是不是这样的，但是当看到其它大神也碰到同样的问题时，你会更加肯定自己的研究。反正设计这条路，只有认真才能走下去.....