12580第三方服务UI+UE设计规范

12580第三方服务UI+UE 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 规范 编程规范下载gsp规范下载钢格栅规范下载警徽规范下载建设厅规范下载 合作业务UI/UE设计规范 无限讯奇信息技术有限公司,12580综合信息门户 第三方合作业务产品UI/UE设计规范 Umessage Human Interface Guideline 无限讯奇UI/UE设计规范PAGE 1 OF 13 保存日期: 11/15/2012 526896151.doc 合作业务UI/UE设计规范 1 12580合作业务产品UI/UE设计规范概述 北京无限讯奇信息技术有限公司(以下简称“无限讯奇”)是中国移动12580综合信息服务门户的独家合作伙伴，公司承建中国移动的全国12580综合信息服务门户及运营支撑平台，并负责信息和服务运营。 12580采用的信息处理平台(DCP即Data Collection Platform)由讯奇提供，该平台承担着为不同渠道采集的信息进行筛选，导入，维护的工作，并要保证信息的准确性和丰富性以及信息覆盖范围的广域性。 合作伙伴是12580平台信息及合作业务产品的主要提供者。 全国范围的信息采集量需求的增加，信息分类需求的细化，无限讯奇对现有系统平台及查询信息的准确性，广域性，及时性提出了更高的要求。加强对合作伙伴的管理势在必行。 借助电子信息平台，可以规范，准确，高效的对合作伙伴及其提供信息进行管理。 1.1 制定目的 本规范是用来指导无限讯奇的合作伙伴的合作业务产品开发人员和视觉设计人员在开发或升级改版公司的相关产品的，本规范用以保证12580综合信息门户的产品的视觉和交互行为的一致性和兼容性。遵循这个规范可以获得很多好处，因为: , 新设计的产品的使用界面和操作习惯和原有的产品保持一致能够缩短用户使用 新系统的学习时间和学习成本; , 良好的用户交互设计系统能够帮助用户更快的达到目的; , 保持12580综合信息门户的所有产品的一致性和良好的连贯性，便于版本升级; , 简化您的产品设计文档和操作说明的撰写，因为很多界面和 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 的交互行为的 描述不再需要过多的解释; , 便于12580综合信息门户整体提升用户体验; , 保证所有12580综合信息门户合作业务产品的易用，友好，美观和强大; 1.2 使用范围 12580综合信息门户合作业务的提供方即无限讯奇的合作伙伴的所有的产品开发人无限讯奇UI/UE设计规范PAGE 2 OF 13 保存日期: 11/15/2012 526896151.doc 合作业务UI/UE设计规范 员，包括:产品经理、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 用户界面执行细则 ...................................................................................................................... 7 4.1 合作业务区 .......................................................................................................................... 7 4.2 通用格式(COMMON FORMATS) .......................................................................................... 8 4.3 色调(COLOUR) ................................................................................................................. 8 4.4 文字(FONT) ..................................................................................................................... 9 4.5 按钮(BUTTON) ............................................................................................................... 10 4.6 图形(FIGURE) ................................................................................................................ 10 4.7 表格(TABLE) .................................................................................................................. 11 4.8 框架(FRAME) ................................................................................................................. 11 4.9 鼠标(MOUSE) ................................................................................................................. 12 4.10 日期选择(DATE PICKER) ............................................................................................. 12 4.11 显示和隐藏(HIDE AND SHOW) ..................................................................................... 12 4.12 提示信息(INLINE MESSAGING AND TIPS) ....................................................................... 13 无限讯奇UI/UE设计规范PAGE 3 OF 13 保存日期: 11/15/2012 526896151.doc 合作业务UI/UE设计规范 2 用户界面设计准则 2.1 界面的易用性 产品界面菜单导航/按钮/名称应该使用容易理解的语言，用词准确，要与同一界面上的其他菜单导航/按钮易于区分，浅显易懂最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。始终提示用户所在位置并为其提供返回主页或开始状态的路径，避免用户出现任何迷惑和思考。 2.2 界面的规范性 产品界面设计遵循规范化的程度越高，则易用性相应的就越好的原则。保持操作方式的一致性和功能实现方式的一致性原则，使用统一样式控件、快捷键、菜单样式、配色等减少用户记忆负担和思考时间。 2.3 界面的合理性 屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置。合理的运用提示框，提示用户操作的方式及错误原因。 2.4 界面的独特性 如果一味的遵循业界的界面标准，则会丧失自己的个性.在框架符合以上规范的情况下，设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。 2.5 界面的美观性 界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。 3 用户界面交互准则 3.1 界面进入容易 无限讯奇UI/UE设计规范PAGE 4 OF 13 保存日期: 11/15/2012 526896151.doc 合作业务UI/UE设计规范 第三方业务不可出现在使用前需要进行系统登录的身份验证以便节省12580坐席人员操作时间。 在使用前需要进行系统登录的业务: 此类第三方业务在使用前需要坐席进行系统登录，给坐席操作时间带来不必要的浪费，甚至因为服务时间的延长造成用户体验下降。所以第三方业务不可以出现在使用前需要进行系统登录的使用限制。 3.2 界面使用简便 第三方业务如需进行交互操作时需要提供简便易懂的查询条件以便节省12580坐席人员操作时间。 以天气预报业务为例: 尽量使用符合用户需求的查询条件，查询条件不宜过多。在需要下拉选择时最 好可以同时支持下拉以及输入方式以便节省坐席操作时间。 3.3 界面内容清晰 第三方业务需明确体现业务种类以及用户查询需求，对于综合式互联网型的业无限讯奇UI/UE设计规范PAGE 5 OF 13 保存日期: 11/15/2012 526896151.doc 合作业务UI/UE设计规范 务需要按用户查询需求进行业务细分。 明确体现用户需求的业务以天气预报业务为例: 当坐席进入“天气预报”查询业务时可以非常清楚的体现出这个业务所以为用户提供的服务内容。 无法明确体现用户需求的业务: 此类业务当坐席进入后无法精确定位用户查询需求所属区域，势必造成坐席在定位用户查询信息时浪费过多的时间，此种不必要的时间浪费会造成坐席单位时间服务数量的降低，甚至因为服务时间的延长造成用户体验下降。此类业务需要按用户查询需求进行业务细分。 3.4 内容简练易懂 第三方业务内容需做到简练易懂以便12580坐席人员进行内容播报以及缩减短信下发字数。 以天气预报业务为例: 无限讯奇UI/UE设计规范PAGE 6 OF 13 保存日期: 11/15/2012 526896151.doc 合作业务UI/UE设计规范 在传统可视媒体中天气预报可以提供的信息非常之繁杂，如:穿衣指数、洗车 指数、开窗指数等等。但鉴于语音媒体与传统可视媒体之间的区别，12580中的天 气预报为了简化内容方便坐席播报，只提供相对简单但相对重要的信息内容，既满 足了用户需求又简化了坐席播报，同时缩短了通话时长。 4 用户界面执行细则 4.1 合作业务区 本区域功能是提供合作业务产品的用户界面以供用户进行相关服务。 尺寸:宽度，高度 = 770 ， 586 (单位:像素) 界面执行要求: , 合作业务产品的设计界面必须保证宽度控制在770像素以内，横向不允许出现 滚动条; , 合作业务产品的设计界面高度原则上要求控制在586像素以内，尽量避免出现 滚动条，对于某些确实需要超过586像素的页面高度的产品，经无限讯奇产品 部产品经理和UE设计师确认同意可以设置竖向滚动条; 具体样式参考: 无限讯奇UI/UE设计规范PAGE 7 OF 13 保存日期: 11/15/2012 526896151.doc 合作业务UI/UE设计规范 页面长度超过586，可以在页面的右方出现下 拉滚动条; 页面不可以超过770宽度; 4.2 通用格式(Common Formats) , 名称格式:名称可以是中文、英文、数字、字符的组合，同一名称在不同页面 及前后台要相同。 , 地址格式:地址采用级联形式显示，例如省份、城市，区域、街道、邮政编码， 地址数据可在列表清单里选择，也可以对各级联数据单独输入。 , 电话号码格式:座机及小灵通格式为:区号-电话号码;手机号码默认为11位， 否则视为无效号码。 , 日期格式:使用统一格式yyyy-mm-dd，更新的日期和时间应该限制使用者输入 的数据以保证数据正确有效，日期范围为指定期限中的一个开始日期和结束日 期，用破折号分隔。 , 时间格式:统一采用24小时时间格式，由小时、分钟、秒组成，时分秒之间用 冒号隔开，秒为可选项。 , 数字格式:负数格式为“-数字”，分数格式为“分子/分母”，小数应使用小数 点隔开，数值范围之间应使用破折号，数字带单位域时应放在其后，例3%、3?。 4.3 色调(Colour) 无限讯奇UI/UE设计规范PAGE 8 OF 13 保存日期: 11/15/2012 526896151.doc 合作业务UI/UE设计规范 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) , 使用统一字体，中文采用标准字体 “宋体”，英文采用标准Time New Roman， 不考虑特殊字体，保证每个用户使用起来显示都很正常。 样例: 无限讯奇UI/UE设计规范PAGE 9 OF 13 保存日期: 11/15/2012 526896151.doc 合作业务UI/UE设计规范 中文 宋体 English Times New Roman , 界面的正文文字颜色均为黑色(#000000)，其中重点标注的文字颜色为# FF6600。 样例: 界面文字颜色为#000000 重点标注文字颜色为# FF6600 , 菜单导航区二级菜单文字颜色为#FF6600，三级菜单文字颜色为黑色 (#000000)。 样例: 二级菜单文字颜色#FF6600 三级菜单文字颜色#000000 , 链接文字均需加下划线，默认颜色值为#0000CC，鼠标滑过时的颜色值为 #FF6600，鼠标按下后的颜色值为#000000。 样例: 链接文字默认状态 鼠标滑过时状态 鼠标按下后的状态 4.5 按钮(Button) , 同一界面的按钮风格要相似，颜色要统一，尺寸要和整体页面协调; , 按钮文字要简洁明了，文字数目尽量控制在4个以下; , 弹出页面应使用系统默认的按钮图标; , 按钮字体通常使用宋体10磅(12像素)，按钮设计视图如下: 4.6 图形(Figure) , 页面图片格式为“.jpg和.gif”，尺寸根据不同页面的功能来定义; , 彩信图片的格式为“.jpg和.gif”，最大尺寸为128×128，每条彩信的图片大小 不能超过40K。 无限讯奇UI/UE设计规范PAGE 10 OF 13 保存日期: 11/15/2012 526896151.doc 合作业务UI/UE设计规范 4.7 表格(Table) , 列表均采用表格或框架呈现，不允许出现横向滚动的表格; , 表格内的文字要整体对齐，达到美观协调; , 表头标题栏的底色为#79BDDD;外框线、内线颜色值为#C0C0C0;表格行背景 色由#FFFFFF和#FAFAFD间隔;热点聚焦背景色为# FFFFEB，边框颜色值为 #FF6600; 4.8 框架(Frame) , 界面设计不允许出现横向滚动条，界面宽度必须控制在770像素以内; , 当界面长度超过586像素后，应提供下拉滚动条; , 框架设计应该简洁明快，尽量少用无谓的装饰; , 应该考虑节省屏幕空间，各种分辨率的大小，缩放时的状态和原则，并且为将 来设计的按钮，菜单，标签，滚动条及状态栏预留位置; , 设计中将主菜单放在左边或上边，滚动条放在右边，状态栏放在下边，以符合 视觉 流程 快递问题件怎么处理流程河南自建厂房流程下载关于规范招聘需求审批流程制作流程表下载邮件下载流程设计 和用户使用心理; , 用户移动滚动条的时候不应对用户输入有任何影响; , 样例: 无限讯奇UI/UE设计规范PAGE 11 OF 13 保存日期: 11/15/2012 526896151.doc 合作业务UI/UE设计规范 4.9 鼠标(mouse) , 鼠标光标样式要统一，尽量使用系统标准。 , 当鼠标指针为不可点击状态时显示为“箭头”样式;当指针指在文本文字上时 显示为“，”样式，当鼠标指针指在链接文字和图片等可点击的链接上时均显 示为“手型”样式，当系统忙时显示为“沙漏”样式。 4.10 日期选择(Date Picker) , 日期显示格式一致，如 :yyyy-mm-dd; , 使用日期控件，尽量不采用手工录入; , 如需限制日期选择范围，则超出范围的日期应为灰色不可选状态; , 日期控件的设计应简洁明了，易用为主。 4.11 显示和隐藏(Hide and Show) , 在界面中允许部分内容在隐藏和显示之间切换; , 隐藏/显示应使用统一的格式来呈现; , 应使用显著的标识来提示信息可以显示和隐藏，如箭头、指针、加减号等; , 页签形式的隐藏/显示例图: , 箭头指针形式的隐藏/显示例图: 无限讯奇UI/UE设计规范PAGE 12 OF 13 保存日期: 11/15/2012 526896151.doc 合作业务UI/UE设计规范 4.12 提示信息(Inline Messaging and Tips) , 提示信息应用来防止用户出现错误，帮助引导用户正确操作; , 提示信息要简单明了，提示位置要符合用户阅读习惯; , 当信息在界面上显示不全时需有提示信息，例: , 当输入的数据有误时需有提示信息进行错误原因说明，例: , 当需要对录入框的数据进行说明时的提示信息，例: 无限讯奇UI/UE设计规范PAGE 13 OF 13 保存日期: 11/15/2012 526896151.doc