MPOS（离线商店操作系统）视觉规范指南

前言

1.本视觉指南适用于MPOS WEB

2.这种视觉目的使前端学生能够参考自己的设计和开发，以缩短开发周期

3.本设计草案主要基于1024*768px设计，但由于终端版本的复杂性，请在设计中充分考虑适应性

4.除非另有规定，本视觉指南中的标记均为双数字以下的尺寸

5.为了更好的用户体验，请在设计和实现界面时严格参考本指南

布局容器

a、 基本布局

b、 电网系统

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

960至980像素是最适合人类视觉接受范围的宽度，与传统的1024×768像素显示分辨率相同，以最大限度地发挥其优势。

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

注意：当浏览器在一定范围内展开或收缩时，栅格的列宽将相应地展开或收缩，但槽的宽度是固定的。

颜色

a、 功能颜色功能颜色表示清晰的信息和状态，如成功、错误、失败、提醒、链接等。

b、 中性色中性色主要用于界面的文本部分。使用不同的中性颜色来表达内容的层次结构。

字体排版

a、 由于线下商店pos机器的版本，字体很复杂，中文和英文字体按优先级顺序显示，如下所示。

B、 字体大小app：16px：菜单栏、标题、选项卡；14px：下拉框；

13px：寻呼组件；12px：表格、按钮、窗体

图标图标

插图插图

按钮

a、 基本1）按钮大小不限制宽度。高度分为小高度和中高度。小尺寸用于常规表单和页面；Medium用于更醒目的CTA按钮，如登录按钮

当按钮文本为两个字符时，应在文本中间添加一个空白字符

2） 按钮位置和间距

返回按钮固定在页面底部，模块的save类按钮位于模块底部。

3） 禁用状态

4） 组合按钮

当表格容量有限且按钮太多时，可以考虑使用组合按钮

组合按钮未被禁用，不可用时不会显示

b、 主按钮

c、 辅助按钮表中的按钮通常使用辅助按钮

当页面上有两个或多个相同类别的按钮时，优先级较低的按钮可以根据按钮的优先级顺序定义为次要按钮

弹出消息框

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

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

提示消息

a、 提示反馈通常是由不中断用户操作的操作引起的轻量级提示模式。它显示在顶部中央，需要用户手动关闭；

结果反馈提示通常采用吐司的形式，并在3秒后自动消失（通常距离上边距20px）；

对于重要提示，建议使用对话框进行通知，以避免丢失信息。

b、 确认提示是由操作引起的反馈浮动层，

在与提示弹出窗口交互之前，用户不能对重要反馈执行任何其他操作，例如删除前的确认。

c、 波波（Popover）

当空间容量有限，但有更详细的描述和相关操作时，它们可以存储在卡中，并通过鼠标悬停显示。

与文本提示不同的是，它们可以携带更复杂的内容，如链接或按钮。

d、 工具提示通常用于在鼠标悬停时显示提示信息，并且不携带复杂的文本和操作。

e、 输入提示通常用于表单中，使用户能够及时发现并更正错误。它将随着用户的交互行为而改变，不会自动消失。

f、 加载提示会分散用户在等待过程中的注意力，并减少用户的等待感。

组件元素

a、 输入框

b、 单选框不应显示太多选项。如果选项太多，可以使用选择器；

需要更多注意的模块（如收银员）可以使用特殊样式进行切换。

c、 复选框单个通道