一、设计模版的好处
使用模板的好处：第一对多个角色使用统一的设计描述，方便大家进行沟通，避免产生歧义；第二使用模板方式，降低了设计难度，而且可以进行并行设计，提供设计效率；第三是方便测试，模板中已经描述的客户使用的详细过程；第四是方便程序员理解用户的使用场景，全面考虑设计；
二、模版样式
【界面功能描述】
主要描述界面要完成的人机交互的功能，有多少功能在UI交互界面上呈现，有多少步骤需要不同的交互界面来完成，建议一个UI交互界面实现功能不超过三个。将UI界面分成不同的功能区进行功能的隔离，方式功能混杂在一起造成使用者的困惑，功能区布局一旦建立，所有的UI交互界面都应该按相同的功能分区进行展示，而不应有功能区的随意更换。
【内容】描述界面要显示的内容，人机交互的信息
【界面示意图 】通过 界面图片表示界面
【界面屏幕布局说明】详细说明界面每一部分的功能
【操作提示帮助信息】不容易操作和易出错的界面都需要有相关的帮助信息，减轻使用者使用的不便，增强体验
【操作说明】
将所有的操作过程描述出来，操作反应是什么，用户所有的操作进行穷尽说明，不能有遗漏。UI交互设计过程中，此过程是最重要的设计，用户的体验好和坏都和此环节有直接的关联，也是设计质量的直接反应；
【界面**方式】UI界面的进入的入口，有可能有多个入口
【界面关闭方式】退出界面或转入别的UI界面，有可能是UI 操作关闭，也有可能是业务流程关闭。
【输入按键说明】帮助信息
【相关流程说明】主要是UI驱动的后台业务执行的说明，主要是控制流的说明
【相关数据说明】UI驱动的数据交换，主要是数据流的说明
三、举例说明
整个的UI风格分为四个区域, 主题区域， 导航区，操作显示区，帮助信息显示区
1、界面中主题区显示一背景
2、导航区显示三项内容：扫码消费，定额消费，系统设置
3、操作区显示：
用户名输入框
密码输入框
校验码输入框（XXXX为校验码图片，可以换），
登录按钮
忘记密码
4、界面提示区显示：用户登录
1、界面进入
浏览器输入网址进入
2、界面操作过程中
没有用户登录的情况下，导航区选项不可选，不可操作；
用户输入用户名，密码，校验码，按回车键或鼠标键进行用户登录操作；
校验码图标 使用 换一张 进行变化；
登录用户不合法，弹出MESSAGE BOX提示，用户信息错误，MESSAGE BOX 关闭又回到用户登录界面；
登录用户合法，直接进默认消费业务（系统设置配置的默认业务）；
忘记密码，弹出MESSAGE BOX提示： 联系售后人员和服务电话，MESSAGE BOX 关闭又回到用户登录界面；
3、界面退出
关闭网页
用户登录合法检查，当用户信息输入有误的情况下，WEB SERVER直接返回失败，提示用户输入错误；当用户数据合法的情况下，浏览器侧进行两个动作，一个是用户关键数据请求获得，另外一个是类似POS终端签到的过程；
第一个过程：用户关键数据请求获取，加上POS**业务流程（使用签到协议），主要是将用户信息（商户ID, 门店ID, 机器SN,云端SN， 流水号初值，用户对应操作员ID等）和**（publicKey， signKey）从SERVER端获取放到浏览器缓存中；
第二个过程：签到过程，使用签到协议报文, 获得token;
这两个过程完成后页面进入到默认业务页面（服务器返回），如果执行失败，提示用户联系客服MESSAGE BOX
主题区显示商户店铺的信息
当日交易次数和当前操作员信息显示
操作区显示：
金额输入框
付款码输入框
交易结果
交易列表
1、界面进入
点击导航区扫码消费选项进入；
用户登录后默认业务页面；
网页进入后，导航区选项变为可操作；
2、界面操作过程中
金额输入框，按回车或TAB键焦点跳到付款码输入框处，也可以鼠标操作；
付款码输入框，可以使用键盘，扫码枪进入输入，按回车键，鼠标点击提交进行业务操作
交易结果：显示当前扫码的交易情况，交易成功的情况清空（金额清空，付款码清空，交易结果清空），交易失败的情况下，全都显示，移动焦点的操作才清空，交易过程中显示“支付中。。。”
交易列表：显示上几笔交易信息，扫码一笔，列表更新一笔，向上滚动；
交易总数数据刷新
3、界面退出
关闭/切换网页
用户提交调用商户主扫的报文协议进行通讯，获得当前扫码交易的状态结果，支付未知的情况，需要调用查询接口获取最新的交易状态，UI显示支付中。。。，用户可以打断进行新的扫码业务，显示交易列表中，显示支付中；
另外为显示交易列表，需要使用查询接口进行通讯，获取最近几笔交易的数据进行显示使用。
主题区显示商户店铺的信息
当日交易次数和当前操作员信息显示
操作区显示：
固定金额显示
付款码输入框
交易结果
交易列表
1、界面进入
点击导航区扫码消费选项进入；
用户登录后默认业务页面；
网页进入后，导航区选项变为可操作；
2、界面操作
付款码输入框，可以使用键盘，扫码枪进入输入，按回车键，鼠标点击提交进行业务操作
交易结果：显示当前扫码的交易情况，交易成功的情况清空（金额清空，付款码清空，交易结果清空），交易失败的情况下，全都显示，移动焦点的操作才清空，交易过程中显示“支付中。。。”
交易列表：显示上几笔交易信息，扫码一笔，列表更新一笔，向上滚动；
交易总数数据刷新；
3、界面退出
关闭/切换网页
用户提交调用商户主扫的报文协议进行通讯，获得当前扫码交易的状态结果，支付未知的情况，需要调用查询接口获取最新的交易状态，UI显示支付中。。。，用户可以打断进行新的扫码业务，显示交易列表中，显示支付中；
另外为显示交易列表，需要使用查询接口进行通讯，获取最近几笔交易的数据进行显示使用。