第三方服务设计标准规范.doc

无限讯奇信息技术有限公司－12580综合信息门户
第三方合伙业务产品UI/UE设计规范
Umessage Human Interface Guideline

1 12580合伙业务产品UI/UE设计规范概述

北京无限讯奇信息技术有限公司（如下简称“无限讯奇”）是中华人民共和国移动12580综合信息服务门户独家合伙伙伴，公司承建中华人民共和国移动全国12580综合信息服务门户及运营支撑平台，并负责信息和服务运营。
12580采用信息解决平台（DCP即Data Collection Platform）由讯奇提供，该平台承担着为不同渠道采集信息进行筛选，导入，维护工作，并要保证信息精确性和丰富性以及信息覆盖范畴广域性。
合伙伙伴是12580平台信息及合伙业务产品重要提供者。
全国范畴信息采集量需求增长，信息分类需求细化，无限讯奇对既有系统平台及查询信息精确性，广域性，及时性提出了更高规定。加强对合伙伙伴管理势在必行。
借助电子信息平台，可以规范，精确，高效对合伙伙伴及其提供信息进行管理。
1.1 制定目
本规范是用来指引无限讯奇合伙伙伴合伙业务产品开发人员和视觉设计人员在开发或升级改版公司有关产品，本规范用以保证12580综合信息门户产品视觉和交互行为一致性和兼容性。遵循这个规范可以获得诸多好处，由于：
l 新设计产品使用界面和操作习惯和原有产品保持一致可以缩短顾客使用新系统学习时间和学习成本；
l 良好顾客交互设计系统可以协助顾客更快达到目；
l 保持12580综合信息门户所有产品一致性和良好连贯性，便于版本升级；
l 简化您产品设计文档和操作阐明撰写，由于诸多界面和原则交互行为描述不再需要过多解释；
l 便于12580综合信息门户整体提高顾客体验；
l 保证所有12580综合信息门户合伙业务产品易用，和谐，美观和强大；
1.2 使用范畴
12580综合信息门户合伙业务提供方即无限讯奇合伙伙伴所有产品开发人员，涉及：产品经理、UE工程师、文档工程师、UI工程师和其他有关技术开发人员。
1.3 文档构造
UMESSAGE HUMAN INTERFACE GUIDELINE 1
1 12580合伙业务产品UI/UE设计规范概述 2
1.1 制定目 2
1.2 使用范畴 2
1.3 文档构造 3
2 顾客界面设计准则 4
2.1 界面易用性 4
2.2 界面规范性 4
2.3 界面合理性 4
2.4 界面独特性 4
2.5 界面美观性 4
3 顾客界面交互准则 4
3.1 界面进入容易 4
3.2 界面使用简便 5
4 顾客界面执行细则 5
4.1 合伙业务区 5
4.2 通用格式（Common Formats） 6
4.3 色调（Colour） 7
4.4 文字（Font） 8
4.5 按钮（Button） 8
4.6 图形（Figure） 9
4.7 表格（Table） 9
4.8 框架（Frame） 9
4.9 鼠标（mouse） 10
4.10 日期选取（Date Picker） 10
4.11 显示和隐藏（Hide and Show） 10
4.12 提示信息（Inline Messaging and Tips） 11

2 顾客界面设计准则
2.1 界面易用性
产品界面菜单导航/按钮/名称应当使用容易理解语言，用词精确，要与同一界面上其她菜单导航/按钮易于区别，浅显易懂最佳。抱负状况是顾客不用查阅协助就能懂得该界面功能并进行有关对的操作。始终提示顾客所在位置并为其提供返回主页或开始状态途径，避免顾客浮现任何困惑和思考。
2.2 界面规范性
产品界面设计遵循规范化限度越高，则易用性相应就越好原则。保持操作方式一致性和功能实现方式一致性原则，使用统同样式控件、快捷键、菜单样式、配色等减少顾客记忆承担和思考时间。
2.3 界面合理性
屏幕对角线相交位置是顾客直视地方，正上方四分之一处为易吸引顾客注意力位置，在放置窗体时要注意运用这两个位置。合理运用提示框，提示顾客操作方式及错误因素。
2.4 界面独特性
如果一味遵循业界界面原则，则会丧失自己个性.在框架符合以上规范状况下，设计具备自己独特风格界面尤为重要。特别在商业软件流通中有着较好迁移默化广告效用。
2.5 界面美观性
界面应当大小适合美学观点，感觉协调舒服，能在有效范畴内吸引顾客注意力。
3 顾客界面交互准则
3.1 界面进入容易
第三方业务不可出当前使用前需要进行系统登录身份验证以便节约12580坐席人员操作时间。
在使用前需要进行系统登录业务：

此类第三方业务在使用前需要坐席进行系统登录，给坐席操作时间带来不必要挥霍，甚至由于服务时间延长导致顾客体验下降。因此第三方业务不可以出当前使用前需要进行系统登录使用限制。

3.2 界面使用简便
第三方业务如需进行交互操作时需要提供简便易懂查询条件以便节约12580坐席人员操作时间。
以天气预报业务为例：

尽量使用符合顾客需求查询条件，查询条件不适当过多。在需要下拉选取时最佳可以同步支持下拉以及输入方式以便节约坐席操作时间。
3.3 界面内容清晰
第三方业务需明确体现业务种类以及顾客查询需求，对于综合式互联网型业务需要按顾客查询需求进行业务细分。
明确体现顾客需求业务以天气预报业务为例：

当坐席进入“天气预报”查询业务时可以非常清晰体现出这个业务所觉得顾客提供服务内容。
无法明确体现顾客需求业务：

此类业务当坐席进入后无法精准定位顾客查询需求所属区域，势必导致坐席在定位顾客查询信息时挥霍过多时间，此种不必要时间挥霍会导致坐席单位时间服务数量减少，甚至由于服务时间延长导致顾客体验下降。此类业务需要按顾客查询需求进行业务细分。
3.4 内容简洁易懂
第三方业务内容需做到简洁易懂以便12580坐席人员进行内容播报以及缩减短信下发字数。
以天气预报业务为例：

在老式可视媒体中天气预报可以提供信息非常之繁杂，如：穿衣指数、洗车指数、开窗指数等等。但鉴于语音媒体与老式可视媒体之间区别，12580中天气预报为了简化内容以便坐席播报，只提供相对简朴但相对重要信息内容，既满足了顾客需求又简化了坐席播报，同步缩短了通话时长。

4 顾客界面执行细则
4.1 合伙业务区
本区域功能是提供合伙业务产品顾客界面以供顾客进行有关服务。
尺寸：宽度Í高度 = 770 Í 586 （单位：像素）

界面执行规定：
l 合伙业务产品设计界面必要保证宽度控制在770像素以内，横向不容许浮现滚动条；
l 合伙业务产品设计界面高度原则上规定控制在586像素以内，尽量避免浮现滚动条，对于某些的确需要超过586像素页面高度产品，经无限讯奇产品部产品经理和UE设计师确认批准可以设立竖向滚动条；
详细样式参照：
页面长度超过586，可以在页面右方浮现下拉滚动条；
页面不可以超过770宽度；

4.2 通用格式（Common Formats）
l 名称格式：名称可以是中文、英文、数字、字符组合，同一名称在不同页面及先后台要相似。
l 地址格式：地址采用级联形式显示，For example，street，city，state and postal code may be included in a single view-only field，or table cell.例如省份、都市，区域、街道、邮政编码，地址数据可在列表清单里选取，也可以对各级联数据单独输入。
l 电话号码格式：座机及小灵通格式为：区号-电话号码；手机号码默以为11位，否则视为无效号码。
l 日期格式：使用统一格式yyyy-mm-dd，更新日期和时间应当限制使用者输入数据以保证数据对的有效，日期范畴为指定期限中一种开始日期和结束日期，View-only date range fields are always placed side-by-side and separated by a dash.在用破折号分隔。
l 时间格式：统一采用24小时时间格式，由小时、分钟、秒构成，时分秒之间用冒号隔开，秒为可选项。
l 数字格式：负数格式为“-数字”，分数格式为“分子/分母”，小数应使用小数点隔开，数值范畴之间应使用破折号，数字带单位域时应放在其后，例3%、3℃。
4.3 色调（Colour）
12580产品系列辨认色原则环绕电信蓝色为主：

Menu按钮色系
RGB：R-115G-179 B-210(电脑PC色)
#73B3D2

Button按钮色系
RGB：R-154 G-211 B-54(电脑PC色)
#9AD336

Hotspot热点色系
RGB：R-255 G-102 B-0(电脑PC色)
#FF6600

Bgcolor背景色系
RGB：R-255 G-255 B-235(电脑PC色)
#FFFFEB

Bgcolor背景色系
RGB：R-250 G-250 B-253(电脑PC色)
# FAFAFD
原则蓝必要按照网站整体VI设计，重要原则色用色范畴必要>50%。
4.4 文字（Font）
l 使用统一字体，中文采用原则字体 “宋体”，英文采用原则Time New Roman，不考虑特殊字体，保证每个顾客使用起来显示都很正常。
样例：
中文 宋体 English Times New Roman

l 界面正文文字颜色均为黑色（#000000），其中重点标注文字颜色为# FF6600。
样例：
界面文字颜色为#000000 重点标注文字颜色为# FF6600

l 菜单导航区二级菜单文字颜色为#FF6600，三级菜单文字颜色为黑色（#000000）。
样例：
二级菜单文字颜色#FF6600 三级菜单文字颜色#000000

l 链接文字均需加下划线，默认颜色值为#0000CC，鼠标滑过时颜色值为#FF6600，鼠标按下后颜色值为#000000。
样例：
链接文字默认状态 鼠标滑过时状态 鼠标按下后状态

4.5 按钮（Button）
l 同一界面按钮风格要相似，颜色要统一，尺寸要和整体页面协调；
l 按钮文字要简洁明了，文字数目尽量控制在4个如下；
l 弹出页面应使用系统默认按钮图标；
l 按钮字体普通使用宋体10磅（12像素），按钮设计视图如下：

4.6 图形（Figure）
l 页面图片格式为“.jpg和.gif”，尺寸依照不同页面功能来定义；
l 彩信图片格式为“.jpg和.gif”，最大尺寸为128×128，每条彩信图片大小不能超过40K。

4.7 表格（Table）
l 列表均采用表格或框架呈现，不容许浮现横向滚动表格；
l 表格内文字要整体对齐，达到美观协调；
l 表头标题栏底色为#79BDDD；外框线、内线颜色值为#C0C0C0；表格行背景色由#FFFFFF和#FAFAFD间隔；热点聚焦背景色为# FFFFEB，边框颜色值为#FF6600；

4.8 框架（Frame）
l 界面设计不容许浮现横向滚动条，界面宽度必要控制在770像素以内；
l 当界面长度超过586像素后，应提供下拉滚动条；
l 框架设计应当简洁明快，尽量少用无谓装饰；
l 应当考虑节约屏幕空间，各种辨别率大小，缩放时状态和原则，并且为将来设计按钮，菜单，标签，滚动条及状态栏预留位置；
l 设计中将主菜单放在左边或上边，滚动条放在右边，状态栏放在下边，以符合视觉流程和顾客使专心理；
l 顾客移动滚动条时候不应对顾客输入有任何影响；
l 样例：

4.9 鼠标（mouse）
l 鼠标光标样式要统一，尽量使用系统原则。
l 当鼠标指针为不可点击状态时显示为“箭头”样式；当指针指在文本文字上时显示为“Ｉ”样式，当鼠标指针指在链接文字和图片等可点击链接上时均显示为“手型”样式，当系统忙时显示为“沙漏”样式。

4.10 日期选取（Date Picker）
l 日期显示格式一致，如 ：yyyy-mm-dd；
l 使用日期控件，尽量不采用手工录入；
l 如需限制日期选取范畴，则超过范畴日期应为灰色不可选状态；
l 日期控件设计应简洁明了，易用为主。

4.11 显示和隐藏（Hide and Show）
l 在界面中容许某些内容在隐藏和显示之间切换；
l 隐藏/显示应使用统一格式来呈现；
l 应使用明显标记来提示信息可以显示和隐藏，如箭头、指针、加减号等；
l 页签形式隐藏/显示例图：

l 箭头指针形式隐藏/显示例图：

4.12 提示信息（Inline Messaging and Tips）
l 提示信息应用来防止顾客浮现错误，协助引导顾客对的操作；
l 提示信息要简朴明了，提示位置要符合顾客阅读习惯；
l 当信息在界面上显示不全时需有提示信息，例：

l 当输入数据有误时需有提示信息进行错误因素阐明，例：

l 当需要对录入框数据进行阐明时提示信息，例：