手机支付业务客户端UI设计规范Word文件下载.docx
《手机支付业务客户端UI设计规范Word文件下载.docx》由会员分享，可在线阅读，更多相关《手机支付业务客户端UI设计规范Word文件下载.docx（75页珍藏版）》请在冰豆网上搜索。
QB-D-011-2009
手机支付业务规范总册及远程支付分册
[2]
QB-E-049-2011
手机支付业务客户端规范
[3]
[4]
QB-F-003-2011
手机支付业务客户端安全技术规范
本标准由中移技﹝2011﹞274号印发。
本标准由中国移动通信集团公司数据部提出，集团公司技术部归口。
本标准起草单位：
中国移动通信研究院
本标准主要起草人：
丁丽娟、任鹏、任晓明
1.范围
本标准提供了手机支付客户端的用户界面指南。
为了提升未来的数据业务，需要合作厂商和合作单位共同推进终端用户界面的友好性，因此需要合作厂商在生产相关的终端设备时参照该标准。
在本标准中，所有相关的流程以及交互行为等应按照本标准的规定执行。
需注意，这份标准中包含了手机支付客户端用户界面的结构和构想，但并不包含手机支付客户端界面的所有目录和行为。
2.规范性引用文件
下列文件中的条款通过本标准的引用而成为本标准的条款。
凡是注日期的引用文件，其随后所有的修改单（不包括勘误的内容）或修订版均不适用于本标准，然而，鼓励根据本标准达成协议的各方研究是否可使用这些文件的最新版本。
凡是不注日期的引用文件，其最新版本适用于本标准。
表2-1规范性引用文件
《手机支付业务规范总册及远程支付分册》
《手机支付业务客户端规范》
《手机支付业务客户端安全技术规范》
3.术语、定义和缩略语
在手机支付业务中，主账户中的余额分为两类，分别为可提现和不可提现余额；
在界面展现上分别体现为现金账户和充值卡账户；
在本规范中使用了“必须”、“推荐”、和“可选”等词汇来描述对客户端要求的强调程度。
“必须”项是指客户端UI所必须提供的功能或交互要求；
“推荐”项是指在标准中未作硬性要求，但建议客户端UI提供的功能或交互要求；
“可选”项指在目前看来是中国移动需求的发展方向，或客户端UI在目前阶段可不提供的功能或交互要求。
目前阶段：
从本版本发布之日截至到下一个版本发布日期。
表3-1规范术语说明
术语
术语说明
1
屏幕描述
表示该界面中必须包含的信息内容，例如界面中的文字排布，显示信息等，硬性要求的文本均以双引号标注。
表3-1规范术语说明（续）
2
用户输入
表示该界面必须包含的用户输入项，例如：
密码输入框。
具体控件根据终端界面风格选择。
3
功能区
表示该界面中所需要实现的全部功能操作，具体实现方式由终端界面风格决定。
在某些终端界面风格中，功能区的全部操作均可显示在选项菜单中；
但也允许功能区内的某些操作可置于界面之上。
例如“返回”功能。
4
优先级如序号排列
表明这些交互组件必须按照优先级的顺序排列。
优先级高，表明用户经常进行的任务（相对优先级低的），必须在界面上以某种方式与优先级低的有所区别，例如优先级高选项放在菜单的前部，优先级低选项放在菜单的后部等。
5
通用界面模板
指在手机支付应用中通用界面模版，为方便起见，统一说明。
例如【查询界面】、【高级查询】等
6
TAB页签
类似如下的交互控件：
或其它类似于TAB页签的形式，（类TAB页签指的是，类似TAB可以实现信息层叠的交互组件）
4.规范说明
流程图说明：
（必须）手机支付业务客户端流程必须按照各章节流程图设计，流程必须包含规范内所述流程、及涉及的界面，标明可选的除外。
其他说明：
本规范没有涉及之处，不做规范要求。
规范中，界面图例仅为示意，不做规范要求。
规范中，通用界面模板是指为功能类似，界面布局一致的界面提供通用的模板示例。
规范中，除了明确指明为“推荐”、“可选”外，均为必须要求。
规范中，界面功能入口表明在该界面中需要提供该功能入口，可以为触屏触区，也可以为硬键，或菜单入口。
规范中，所有屏幕描述中表明的内容，标明该功能入口或界面元素必须存在。
但无特别说明的，对功能入口和界面元素的表现方式不做规范要求。
规范中，所有功能区入口的优先级使用时符合终端平台原则，如，某些终端按照从上到下优先级降序。
5.手机支付客户端ＵＩ总体要求
5.1.程序图标及登录入口
（必须）手机支付应用图标，必须使用下图所示图标（图5-1手机支付业务图标）；
（必须）手机支付应用在终端的登录入口（登录入口指的是，在手机终端中调起该应用的入口，例如某些终端，登录入口置于主菜单下）必须使用下面图标，其名称为“手机支付”。
图5-1手机支付业务图标
5.2.通用要求
以下内容均为手机支付业务中最基本的UI需求，如无特殊提示，此规范均需遵守以下规则。
（必须）所有界面必须提供返回上一级界面的功能入口，如果界面的上一级为中间跳转界面，则此时应返回至中间跳转界面之前的界面。
（必须）若界面出现“是”与“否”的操作，则“是”与“否”的具体界面名称和终端界面风格保持一致，例如“确定”与“取消”。
提示语也可根据终端界面风格做少量变更。
（推荐）在任何含有查询项的界面【账户明细】、【交易记录】、【缴费记录】、【话费记录】、【付款记录】、【收款记录】等，用ICON视觉方式提示用户各查询项的类别。
5.3.通用界面模板定义
5.3.1通用界面模板——查询界面
该界面（图5-2查询界面模版）作为【账户明细】、【交易记录】、【缴费记录】、【话费记录】、【付款记录】、【收款记录】、【提现记录】的设计模版进行参考。
界面设计示意：
图5-2查询界面模版
屏幕描述：
1、（必须）显示当前界面的标题，比如：
账户明细。
2、（必须）用列表形式显示用户所需查询的相应信息。
3、（必须）列表的排序默认按照时间顺序排列。
功能区（优先级如序号排列）：
表5-1查询界面操作说明表
入口名称
入口要求程度
入口说明
以下为功能区中包含的所有操作，其中某些功能可以被置于屏幕上。
功能区的入口优先级如序号排列。
查看详情
必须
至相应查询结果的详情页面
高级查询
至【5.3.2通用界面模版——高级查询】
5.3.2通用界面模版——高级查询界面
该界面（图5-3高级查询界面模版）作为【账户明细】、【交易记录】、【缴费记录】、【话费记录】、【付款记录】、【收款记录】、【提现记录】等的高级查询界面的设计模版进行参考。
图5-3高级查询界面模板
2、（必须）内容区显示起始日期和结束日期（结束日期默认为当天日期）的输入区；
3、（必须）在部分缴费界面提供筛选框（比如，缴费项目）供用户选择要查询的类别；
用户输入：
1、（必须）输入起始和结束日期；
表5-2高级查询界面操作说明表
查询
5.3.3通用界面模版——生活缴费
该界面作为（图5-4生活缴费模版）
【缴水费】、【缴电费】、【缴煤气费】、【通讯费】等生活缴费界面的设计模版进行参考。
图5-4生活缴费模板
缴水费。
2、（必须）显示用户现金账户的余额；
3、（必须）显示收费地区、单位等需要在缴费填写或选择的项目（缴水费根据地区不同会有两种缴费形式，参见图5-4）；
表5-3生活缴费界面操作说明表
缴费
至【5.3.4通用界面模版——缴费支付】
5.3.4通用界面模版——缴费支付
该界面（图5-5缴费支付界面模板）作为【缴水费】、【缴电费】、【缴煤气费】、【通讯费】等的支付界面的设计模版进行参考。
图5-5缴费支付界面模板
2、（必须）显示用户现金账户的余额、用户自己输入的缴费项目、号码、单位等信息；
3、（必须）支付密码输入框；
表5-4缴费支付界面操作说明表
确定
提示用户支付成功或失败
5.3.5通用界面模版——修改密码界面
该界面作为【登录密码】、【支付密码】的设计模版进行参考。
图5-6修改密码界面模版
修改登录密码。
2、（必须）显示输入旧密码、新密码、确认新密码的输入框；
3、（必须）显示相应密码格式的提示语内容；
（必须）用户需要依次输入旧密码、新密码、确认新密码；
表5-5修改密码界面操作说明表
修改
提示用户修改密码成功或失败；
6.启动手机支付客户端
6.1启动手机支付客户端的界面
图6-1启动手机支付客户端的界面
（必须）手机支付图标、手机支付文字、表示动态进度的交互控件，加载数据提示语。
其中，用户必须能够从交互控件中读出加载的情况。
6.2选择接入点（可选）
界面设计示意图：
图6-2选择接入点
（可选）提供可供选择的接入点：
WLAN（当前已接入WLAN连接），CMNET，CMWAP；
表6-1选择接入点界面操作说明表
选择
至【7.2登录界面】，根据选择接入点的不同，如果选择的是CMWAP的方式，则会获取用户手机号到手机号输入框内；
7.登录
7.1登录的主要流程图
图7-1登录流程
7.2登录界面
图7-2登录界面
1、（必须）手机支付图标、手机支付文字；
2、（必须）手机号码输入框；
如果是通过CMWAP连接，则手机号码已经显示在登录框内；
3、（必须）登录密码输入框；
用户输入:
1、（必须）手机号码；
2、（必须）登录密码；
3、（推荐）自动登录，默认不勾选；
功能区（优先级如
升级会员 