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

合作业务 UI/UE 设计规范 无限讯奇无限讯奇 UI/UEUI/UE 设计规范设计规范 3245c40308c981bf7450aa556d76a6a3245c40308c981bf7450aa556d76a6a 8.pdf8.pdf PAGEPAGE 1 1 OFOF 1313 保存日期保存日期: : 6/5/20206/5/2020 无限讯奇信息技术有限公司12580 综合信息门户 第三方合作业务产品 UI/UE 设计规范 Umessage Human Interface Guideline 合作业务 UI/UE 设计规范 无限讯奇无限讯奇 UI/UEUI/UE 设计规范设计规范 3245c40308c981bf7450aa556d76a6a3245c40308c981bf7450aa556d76a6a 8.pdf8.pdf PAGEPAGE 2 2 OFOF 1313 保存日期保存日期: : 6/5/20206/5/2020 1 12580 合作业务产品合作业务产品 UI/UE 设计规范概述设计规范概述 北京无限讯奇信息技术有限公司（以下简称“无限讯奇” ）是中国移动 12580 综合 信息服务门户的独家合作伙伴，公司承建中国移动的全国 12580 综合信息服务门户及 运营支撑平台，并负责信息和服务运营。 12580 采用的信息处理平台（DCP 即 Data Collection Platform）由讯奇提供，该平 台承担着为不同渠道采集的信息进行筛选，导入，维护的工作，并要保证信息的准确 性和丰富性以及信息覆盖范围的广域性。 合作伙伴是 12580 平台信息及合作业务产品的主要提供者。 全国范围的信息采集量需求的增加，信息分类需求的细化，无限讯奇对现有系统 平台及查询信息的准确性，广域性，及时性提出了更高的要求。加强对合作伙伴的管 理势在必行。 借助电子信息平台，可以规范，准确，高效的对合作伙伴及其提供信息进行管理。 1.1 制定目的制定目的 本规范是用来指导无限讯奇的合作伙伴的合作业务产品开发人员和视觉设计人员 在开发或升级改版公司的相关产品的，本规范用以保证 12580 综合信息门户的产品的 视觉和交互行为的一致性和兼容性。遵循这个规范可以获得很多好处，因为： 新设计的产品的使用界面和操作习惯和原有的产品保持一致能够缩短用户使用 新系统的学习时间和学习成本； 良好的用户交互设计系统能够帮助用户更快的达到目的； 保持 12580 综合信息门户的所有产品的一致性和良好的连贯性，便于版本升级； 简化您的产品设计文档和操作说明的撰写，因为很多界面和标准的交互行为的 描述不再需要过多的解释； 便于 12580 综合信息门户整体提升用户体验； 保证所有 12580 综合信息门户合作业务产品的易用，友好，美观和强大； 1.2 使用范围使用范围 合作业务 UI/UE 设计规范 无限讯奇无限讯奇 UI/UEUI/UE 设计规范设计规范 3245c40308c981bf7450aa556d76a6a3245c40308c981bf7450aa556d76a6a 8.pdf8.pdf PAGEPAGE 3 3 OFOF 1313 保存日期保存日期: : 6/5/20206/5/2020 12580 综合信息门户合作业务的提供方即无限讯奇的合作伙伴的所有的产品开发人 员，包括：产品经理、UE 工程师、文档工程师、UI 工程师和其它相关技术开发人员。 1.3 文档结构文档结构 UMESSAGE HUMAN INTERFACE GUIDELINE.1 112580 合作业务产品合作业务产品 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 合作业务 UI/UE 设计规范 无限讯奇无限讯奇 UI/UEUI/UE 设计规范设计规范 3245c40308c981bf7450aa556d76a6a3245c40308c981bf7450aa556d76a6a 8.pdf8.pdf PAGEPAGE 4 4 OFOF 1313 保存日期保存日期: : 6/5/20206/5/2020 2 用户界面设计准则用户界面设计准则 2.1 界面的易用性界面的易用性 产品界面菜单导航/按钮/名称应该使用容易理解的语言，用词准确，要与同一界面 上的其他菜单导航/按钮易于区分，浅显易懂最好。理想的情况是用户不用查阅帮助就 能知道该界面的功能并进行相关的正确操作。始终提示用户所在位置并为其提供返回 主页或开始状态的路径，避免用户出现任何迷惑和思考。 2.2 界面的规范性界面的规范性 产品界面设计遵循规范化的程度越高，则易用性相应的就越好的原则。保持操作 方式的一致性和功能实现方式的一致性原则，使用统一样式控件、快捷键、菜单样式、 配色等减少用户记忆负担和思考时间。 2.3 界面的合理性界面的合理性 屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意 力的位置，在放置窗体时要注意利用这两个位置。合理的运用提示框，提示用户操作 的方式及错误原因。 2.4 界面的独特性界面的独特性 如果一味的遵循业界的界面标准，则会丧失自己的个性.在框架符合以上规范的情 况下，设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁 移默化的广告效用。 2.5 界面的美观性界面的美观性 界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意 力。 合作业务 UI/UE 设计规范 无限讯奇无限讯奇 UI/UEUI/UE 设计规范设计规范 3245c40308c981bf7450aa556d76a6a3245c40308c981bf7450aa556d76a6a 8.pdf8.pdf PAGEPAGE 5 5 OFOF 1313 保存日期保存日期: : 6/5/20206/5/2020 3 用户界面交互准则用户界面交互准则 3.1 界面进入容易界面进入容易 第三方业务不可出现在使用前需要进行系统登录的身份验证以便节省 12580 坐席 人员操作时间。 在使用前需要进行系统登录的业务： 此类第三方业务在使用前需要坐席进行系统登录，给坐席操作时间带来不必要 的浪费，甚至因为服务时间的延长造成用户体验下降。所以第三方业务不可以出现 在使用前需要进行系统登录的使用限制。 3.2 界面使用简便界面使用简便 第三方业务如需进行交互操作时需要提供简便易懂的查询条件以便节省 12580 坐席人员操作时间。 以天气预报业务为例： 尽量使用符合用户需求的查询条件，查询条件不宜过多。在需要下拉选择时最 合作业务 UI/UE 设计规范 无限讯奇无限讯奇 UI/UEUI/UE 设计规范设计规范 3245c40308c981bf7450aa556d76a6a3245c40308c981bf7450aa556d76a6a 8.pdf8.pdf PAGEPAGE 6 6 OFOF 1313 保存日期保存日期: : 6/5/20206/5/2020 好可以同时支持下拉以及输入方式以便节省坐席操作时间。 3.3 界面内容清晰界面内容清晰 第三方业务需明确体现业务种类以及用户查询需求，对于综合式互联网型的业 务需要按用户查询需求进行业务细分。 明确体现用户需求的业务以天气预报业务为例： 当坐席进入“天气预报”查询业务时可以非常清楚的体现出这个业务所以为用 户提供的服务内容。 无法明确体现用户需求的业务： 此类业务当坐席进入后无法精确定位用户查询需求所属区域，势必造成坐席在 定位用户查询信息时浪费过多的时间，此种不必要的时间浪费会造成坐席单位时 间服务数量的降低，甚至因为服务时间的延长造成用户体验下降。此类业务需要 按用户查询需求进行业务细分。 3.4 内容简练易懂内容简练易懂 第三方业务内容需做到简练易懂以便 12580 坐席人员进行内容播报以及缩减短 合作业务 UI/UE 设计规范 无限讯奇无限讯奇 UI/UEUI/UE 设计规范设计规范 3245c40308c981bf7450aa556d76a6a3245c40308c981bf7450aa556d76a6a 8.pdf8.pdf PAGEPAGE 7 7 OFOF 1313 保存日期保存日期: : 6/5/20206/5/2020 信下发字数。 以天气预报业务为例： 在传统可视媒体中天气预报可以提供的信息非常之繁杂，如：穿衣指数、洗车 指数、开窗指数等等。但鉴于语音媒体与传统可视媒体之间的区别，12580 中的天 气预报为了简化内容方便坐席播报，只提供相对简单但相对重要的信息内容，既 满足了用户需求又简化了坐席播报，同时缩短了通话时长。 4 用户界面执行细则用户界面执行细则 4.1合作业务区合作业务区 本区域功能是提供合作业务产品的用户界面以供用户进行相关服务。 尺寸：宽度高度 = 770 586 （单位：像素） 界面执行要求： 合作业务产品的设计界面必须保证宽度控制在 770 像素以内，横向不允许出现 滚动条； 合作业务产品的设计界面高度原则上要求控制在 586 像素以内，尽量避免出现 滚动条，对于某些确实需要超过 586 像素的页面高度的产品，经无限讯奇产品 部产品经理和 UE 设计师确认同意可以设置竖向滚动条； 具体样式参考： 合作业务 UI/UE 设计规范 无限讯奇无限讯奇 UI/UEUI/UE 设计规范设计规范 3245c40308c981bf7450aa556d76a6a3245c40308c981bf7450aa556d76a6a 8.pdf8.pdf PAGEPAGE 8 8 OFOF 1313 保存日期保存日期: : 6/5/20206/5/2020 4.2 通用格式（通用格式（Common Formats） 名称格式：名称可以是中文、英文、数字、字符的组合，同一名称在不同页面 及前后台要相同。 地址格式：地址采用级联形式显示，例如省份、城市，区域、街道、邮政编码， 地址数据可在列表清单里选择，也可以对各级联数据单独输入。 电话号码格式：座机及小灵通格式为：区号-电话号码；手机号码默认为 11 位， 否则视为无效号码。 日期格式：使用统一格式 yyyy-mm-dd，更新的日期和时间应该限制使用者输 入的数据以保证数据正确有效，日期范围为指定期限中的一个开始日期和结束 日期，用破折号分隔。 时间格式：统一采用 24 小时时间格式，由小时、分钟、秒组成，时分秒之间 用冒号隔开，秒为可选项。 数字格式：负数格式为“-数字” ，分数格式为“分子/分母” ，小数应使用小数 点隔开，数值范围之间应使用破折号，数字带单位域时应放在其后，例 3%、3。 页面长度超过 586，可以在页面的右方出现下 拉滚动条； 页面不可以超过 770 宽度； 合作业务 UI/UE 设计规范 无限讯奇无限讯奇 UI/UEUI/UE 设计规范设计规范 3245c40308c981bf7450aa556d76a6a3245c40308c981bf7450aa556d76a6a 8.pdf8.pdf PAGEPAGE 9 9 OFOF 1313 保存日期保存日期: : 6/5/20206/5/2020 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） 使用统一字体，中文采用标准字体 “宋体”，英文采用标准 Time New Roman， 不考虑特殊字体，保证每个用户使用起来显示都很正常。 合作业务 UI/UE 设计规范 无限讯奇无限讯奇 UI/UEUI/UE 设计规范设计规范 3245c40308c981bf7450aa556d76a6a3245c40308c981bf7450aa556d76a6a 8.pdf8.pdf PAGEPAGE 1010 OFOF 1313 保存日期保存日期: : 6/5/20206/5/2020 样例： 中文 宋体 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” ，最大尺寸为 128128，每条彩信的图片大 合作业务 UI/UE 设计规范 无限讯奇无限讯奇 UI/UEUI/UE 设计规范设计规范 3245c40308c981bf7450aa556d76a6a3245c40308c981bf7450aa556d76a6a 8.pdf8.pdf PAGEPAGE 1111 OFOF 1313 保存日期保存日期: : 6/5/20206/5/2020 小不能超过 40K。 4.7 表格（表格（Table） 列表均采用表格或框架呈现，不允许出现横向滚动的表格； 表格内的文字要整体对齐，达到美观协调； 表头标题栏的底色为#79BDDD；外框线、内线颜色值为#C0C0C0；表格行背 景色由#FFFFFF 和#FAFAFD 间隔；热点聚焦背景色为# FFFFEB，边框颜色值 为#FF6600； 4.8 框架（框架（Frame） 界面设计不允许出现横向滚动条，界面宽度必须控制在 770 像素以内； 当界面长度超过 586 像素后，应提供下拉滚动条； 框架设计应该简洁明快，尽量少用无谓的装饰； 应该考虑节省屏幕空间，各种分辨率的大小，缩放时的状态和原则，并且为将 来设计的按钮，菜单，标签，滚动条及状态栏预留位置； 设计中将主菜单放在左边或上边，滚动条放在右边，状态栏放在下边，以符合 视觉流程和用户使用心理； 用户移动滚动条的时候不应对用户输入有任何影响； 样例： 合作业务 UI/UE 设计规范 无限讯奇无限讯奇 UI/UEUI/UE 设计规范设计规范 3245c40308c981bf7450aa556d76a6a3245c40308c981bf7450aa556d76a6a 8.pdf8.pdf PAGEPAGE