前言

1、本视觉指导适用于MPOS WEB端

2、本视觉目的使前端同学可以参考自行设计开发，减短开发周期

3、本设计稿主要基于1024*768px设计，但由于终端版本复杂，请在设计时充分考虑适配性

4、本视觉指导中的标注若非特殊标注皆为二倍图下尺寸

5、为了更好的用户体验，请相关同事在设计及实现界面时能严格参照本指导

布局 Container

a.基本布局

b.栅格系统

去掉两边页边距后，操作区宽度为黄金标准宽度960px。

960到980像素是最适合人眼视觉接受范围的宽度，且和传统的1024×768像素的显示器分辨率相匹配，能最大限度的发挥其长处。

将页面均分成24列，且固定安全距离=1/2槽，得出公式24n-i=940；

注：浏览器在一定范围扩大或缩小，栅格的栏宽度会随之扩大或缩小，但槽的宽度值固定不变。

色彩 Colour

a.功能色

功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。

b.中性色

中性色主要被大量的应用在界面的文字部分。通过运用不同的中性色，来表现内容的层次结构。

字体 Typography

a.字体

由于线下门店pos机版本复杂，中文&英文字体按下图排列优先级顺序显示。

b.字号

应用：16px：菜单栏、标题、Tab； 14px：下拉框；

          13px：分页组件；12px：表格、按钮、表单

图标 ICON

插画 Inset

按钮 Button

a.基本

1）按钮尺寸对宽度不进行限制，高度分为 small 和 medium 两种，small 尺寸用于常规的表单和页面；medium 则用于更加醒目的CTA按钮，例如：登录按钮

当按钮文字是两个字的情况，文字中间要添加空白字符

2）按钮位置及间距

返回按钮固定在页面底部，保存类针对模块的按钮紧随在此模块底部。

3）禁用状态

4）组合按钮

当表格容量有限，而按钮个数又过多时，可以考虑使用组合按钮

组合按钮没有禁用状态，当其不可用时则不予显示

b.一级按钮

c.二级按钮

表格中的按钮通常采用二级按钮

当页面存在很多两个及两个以上同一类别的按钮时，可根据按钮的优先级顺序，将优先级靠后的按钮定义为二级按钮

弹窗 MessageBox

弹窗用于消息提示、确认消息和提交内容。

根据终端尺寸和分辨率进行响应式布局，宽度通常占页面的43%-80%，高度占页面的80%以下

提示 Message

a.提示反馈

通常为一个操作引发的不打断用户操作的轻量级提示方式，位于顶部居中显示，需用户手动关闭；

对于结果反馈类的提示通常采用toast的形式，3秒后自动消失（通常距上边距20px）；

对于比较重要的提示，建议改用对话框的形式进行通知，以避免用户遗漏信息。

b.确认提示

通过一个操作引发的反馈浮层，位于页面中心，可通过确认或取消按钮进行关闭，

在对提示弹窗进行交互前，用户不可进行其他任何的操作，用于重要的反馈，例如删除前的确认。

c.气泡卡片（Popover）

当空间容量有限，却存在较为详细的描述和相关操作时，可以将其收纳到卡片中，通过鼠标hover进行展示。

与文字提示的区别是可以承载更复杂的内容，比如链接或按钮等。

d.文字提示（Tooltip）

常用于展示鼠标 hover 时的提示信息，不承载复杂文本和操作。

e.录入提示

通常用于表单中，通过提示让用户及时发现并纠正错误。随着用户的交互行为而改变，不会自动消失。

f.加载提示

分散用户在等待过程中的注意力，减少用户的等待感。

组件 Element

a.输入框

b.单选框

不宜展示过多选项，若选项过多，可使用选择器；

需要提高注意力（例如收银）的模块，可以使用特殊样式进行切换。

c.复选框

单个复选框可以表示两种状态之间的切换。

d.开关

表示两种相互对立的状态间的切换

e.计数器

仅允许输入标准的数字值，可定义递增递减的步数控制

f.时间日期选择器

为用户提供了一种直观的方式去浏览和选择一个日期或者日期范围。

可以在同一个选择器中选择时间和日期，也可以分别选择。

g.滚动条

当将页面及表单高度固定为限定值时，未展示完全的部分通过拖动滚动条展示；

尽量避免页面和表格同时使用滚动条，造成滚动条嵌套；

当因表格过长而造成内容显示不全时将滚动条放置在表格内，固定表格宽度；

若页面剩余表格显示区域过小时，将本页表格内容显示全，而滚动条则放置于页面上。

h.标签

可通过添加按钮或下拉菜单添加，通过自身的删除icon移除

i.分页

当数据量过多时，可以通过分页来分解数据

j.折叠面板

通过折叠面板收纳内容区域，可同时展开多个面板，面板之间不影响。

导航 Navigation

a.导航菜单

采用灵活的侧边导航，更易于向下扩展，类目数量不限，易可配合滚动条使用，适合mpos这种信息层级较多、切换频率较高的应用。

b.面包屑导航

面包屑导航可以显示通往当前页面的路径，快速返回之前的任意页面。

注： 1. 层级过深时，建议做隐藏处理，页面显示保持在三级以内，最多不宜超过五级；

        2. 如果当前页面的导航能清晰的告诉用户他在哪里时，尽量不要使用面包屑导航。

c.标签页（tabs）

通过把大量信息进行分类展示，得以在有限的显示区域内展示更多信息，

用户可以方便地切换标签，而不必跳转页面进行比较浏览，分类标题长度为 2-6 个中文字。

d.步骤条（Steps）

引导用户按照流程完成任务的导航条，可以帮助用户对操作流程长度和步骤有预期，并且知道自己当前在哪个步骤，同时也可以对用户的任务完成度有明确的度量。

步骤多于 2 步时使用, 但建议不超过 5 步，每阶段文字长度保持在 12 个字符以内。

表格 Table

a.概述

当页面容量有限而表格内容过多时，可以配合滚动条一同进行操作；通过固定列或固定表头来方便用户进行对照寻找数据。

非特殊情况，文字尽量不换行

b.动态显示

将鼠标移至可进行动态显示的表格表头的分割线，悬停出现编辑按钮，表格宽度可以自由拉伸。

c.表格组合

当出现可同时针对表格的所有行进行的操作时，为避免按钮重复，可将表格与全选组件进行组合使用