《12580第三方服务UI+UE设计规范.doc》由会员分享，可在线阅读，更多相关《12580第三方服务UI+UE设计规范.doc（13页珍藏版）》请在三一文库上搜索。
1、推荐精选无限讯奇信息技术有限公司12580 综合信息门户第三方合作业务产品 UI/UE 设计规范Umessage Human Interface Guideline推荐精选1 1258012580 合作业务产品合作业务产品 UI/UEUI/UE 设计规范概述设计规范概述北京无限讯奇信息技术有限公司（以下简称“无限讯奇” ）是中国移动 12580 综合信息服务门户的独家合作伙伴，公司承建中国移动的全国 12580 综合信息服务门户及运营支撑平台，并负责信息和服务运营。12580 采用的信息处理平台（DCP 即 Data Collection Platform）由讯奇提供，该平台承担着为不同渠道采
2、集的信息进行筛选，导入，维护的工作，并要保证信息的准确性和丰富性以及信息覆盖范围的广域性。合作伙伴是 12580 平台信息及合作业务产品的主要提供者。全国范围的信息采集量需求的增加，信息分类需求的细化，无限讯奇对现有系统平台及查询信息的准确性，广域性，及时性提出了更高的要求。加强对合作伙伴的管理势在必行。借助电子信息平台，可以规范，准确，高效的对合作伙伴及其提供信息进行管理。1.1 制定目的制定目的本规范是用来指导无限讯奇的合作伙伴的合作业务产品开发人员和视觉设计人员在开发或升级改版公司的相关产品的，本规范用以保证 12580 综合信息门户的产品的视觉和交互行为的一致性和兼容性。遵循这个规范可
3、以获得很多好处，因为：新设计的产品的使用界面和操作习惯和原有的产品保持一致能够缩短用户使用新系统的学习时间和学习成本；良好的用户交互设计系统能够帮助用户更快的达到目的；保持 12580 综合信息门户的所有产品的一致性和良好的连贯性，便于版本升级；简化您的产品设计文档和操作说明的撰写，因为很多界面和标准的交互行为的描述不再需要过多的解释；便于 12580 综合信息门户整体提升用户体验；保证所有 12580 综合信息门户合作业务产品的易用，友好，美观和强大；1.2 使用范围使用范围推荐精选12580 综合信息门户合作业务的提供方即无限讯奇的合作伙伴的所有的产品开发人员，包括：产品经理、UE 工程师
4、、文档工程师、UI 工程师和其它相关技术开发人员。1.3 文档结构文档结构UMESSAGE HUMAN INTERFACE GUIDELINE.1112580 合作业务产品合作业务产品 UI/UE 设计规范概述设计规范概述.21.1制定目的 .21.2使用范围 .21.3文档结构 .32用户界面设计准则用户界面设计准则 .42.1界面的易用性.42.2界面的规范性.42.3界面的合理性.42.4界面的独特性.42.5界面的美观性.43用户界面交互准则用户界面交互准则 .43.1界面进入容易.43.2界面使用简便.54用户界面执行细则用户界面执行细则 .54.1合作业务区.54.2通用格式（CO
5、MMON FORMATS）.64.3色调（COLOUR） .74.4文字（FONT）.84.5按钮（BUTTON）.84.6图形（FIGURE）.94.7表格（TABLE）.94.8框架（FRAME）.94.9鼠标（MOUSE）.104.10日期选择（DATE PICKER）.104.11显示和隐藏（HIDE AND SHOW）.104.12提示信息（INLINE MESSAGING AND TIPS） .11推荐精选2 用户界面设计准则用户界面设计准则2.1 界面的易用性界面的易用性产品界面菜单导航/按钮/名称应该使用容易理解的语言，用词准确，要与同一界面上的其他菜单导航/按钮易于区分，浅显
6、易懂最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。始终提示用户所在位置并为其提供返回主页或开始状态的路径，避免用户出现任何迷惑和思考。2.2 界面的规范性界面的规范性产品界面设计遵循规范化的程度越高，则易用性相应的就越好的原则。保持操作方式的一致性和功能实现方式的一致性原则，使用统一样式控件、快捷键、菜单样式、配色等减少用户记忆负担和思考时间。2.3 界面的合理性界面的合理性屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置。合理的运用提示框，提示用户操作的方式及错误原因。2.4 界面的独特性界面的独特
7、性如果一味的遵循业界的界面标准，则会丧失自己的个性.在框架符合以上规范的情况下，设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。2.5 界面的美观性界面的美观性界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。3 用户界面交互准则用户界面交互准则3.1 界面进入容易界面进入容易推荐精选第三方业务不可出现在使用前需要进行系统登录的身份验证以便节省 12580 坐席人员操作时间。在使用前需要进行系统登录的业务：此类第三方业务在使用前需要坐席进行系统登录，给坐席操作时间带来不必要的浪费，甚至因为服务时间的延长造成用户体验下降。所以第三方业
8、务不可以出现在使用前需要进行系统登录的使用限制。3.2 界面使用简便界面使用简便第三方业务如需进行交互操作时需要提供简便易懂的查询条件以便节省 12580坐席人员操作时间。以天气预报业务为例：尽量使用符合用户需求的查询条件，查询条件不宜过多。在需要下拉选择时最好可以同时支持下拉以及输入方式以便节省坐席操作时间。3.3 界面内容清晰界面内容清晰第三方业务需明确体现业务种类以及用户查询需求，对于综合式互联网型的业务需要按用户查询需求进行业务细分。推荐精选明确体现用户需求的业务以天气预报业务为例：当坐席进入“天气预报”查询业务时可以非常清楚的体现出这个业务所以为用户提供的服务内容。无法明确体现用户需
9、求的业务：此类业务当坐席进入后无法精确定位用户查询需求所属区域，势必造成坐席在定位用户查询信息时浪费过多的时间，此种不必要的时间浪费会造成坐席单位时间服务数量的降低，甚至因为服务时间的延长造成用户体验下降。此类业务需要按用户查询需求进行业务细分。3.4 内容简练易懂内容简练易懂第三方业务内容需做到简练易懂以便 12580 坐席人员进行内容播报以及缩减短信下发字数。以天气预报业务为例：推荐精选在传统可视媒体中天气预报可以提供的信息非常之繁杂，如：穿衣指数、洗车指数、开窗指数等等。但鉴于语音媒体与传统可视媒体之间的区别，12580 中的天气预报为了简化内容方便坐席播报，只提供相对简单但相对重要的信
10、息内容，既满足了用户需求又简化了坐席播报，同时缩短了通话时长。4 用户界面执行细则用户界面执行细则4.1合作业务区合作业务区本区域功能是提供合作业务产品的用户界面以供用户进行相关服务。尺寸：宽度高度 = 770 586 （单位：像素）界面执行要求：合作业务产品的设计界面必须保证宽度控制在 770 像素以内，横向不允许出现滚动条；合作业务产品的设计界面高度原则上要求控制在 586 像素以内，尽量避免出现滚动条，对于某些确实需要超过 586 像素的页面高度的产品，经无限讯奇产品部产品经理和 UE 设计师确认同意可以设置竖向滚动条；具体样式参考：推荐精选4.2 通用格式（通用格式（CommonCom
11、mon FormatsFormats）名称格式：名称可以是中文、英文、数字、字符的组合，同一名称在不同页面及前后台要相同。地址格式：地址采用级联形式显示，例如省份、城市，区域、街道、邮政编码，地址数据可在列表清单里选择，也可以对各级联数据单独输入。电话号码格式：座机及小灵通格式为：区号-电话号码；手机号码默认为 11 位，否则视为无效号码。日期格式：使用统一格式 yyyy-mm-dd，更新的日期和时间应该限制使用者输入的数据以保证数据正确有效，日期范围为指定期限中的一个开始日期和结束日期，用破折号分隔。时间格式：统一采用 24 小时时间格式，由小时、分钟、秒组成，时分秒之间用冒号隔开，秒为可选
12、项。数字格式：负数格式为“-数字” ，分数格式为“分子/分母” ，小数应使用小数点隔开，数值范围之间应使用破折号，数字带单位域时应放在其后，例3%、3。4.3 色调（色调（ColourColour）页面长度超过 586，可以在页面的右方出现下拉滚动条；页面不可以超过 770 宽度；推荐精选12580 产品系列识别色标准围绕电信蓝色为主： MenuMenu 按钮色系按钮色系RGB:RGB: R-115G-179R-115G-179 B-210(B-210(电脑电脑 PCPC 色色) )#73B3D2#73B3D2ButtonButton 按钮色系按钮色系RGB:RGB: R-154R-154 G
13、-211G-211 B-54(B-54(电脑电脑 PCPC 色色) )#9AD336#9AD336HotspotHotspot 热点色系热点色系RGB:RGB: R-255R-255 G-102G-102 B-0(B-0(电脑电脑 PCPC 色色) )#FF6600#FF6600BgcolorBgcolor 背景色系背景色系RGB:RGB: R-255R-255 G-255G-255 B-235(B-235(电脑电脑 PCPC 色色) )#FFFFEB#FFFFEBBgcolorBgcolor 背景色系背景色系RGB:RGB: R-250R-250 G-250G-250 B-253(B-253
14、(电脑电脑 PCPC 色色) )# # FAFAFDFAFAFD标准蓝必须按照网站整体 VI 设计，主要标准色用色范围必须50%。4.4 文字（文字（FontFont）使用统一字体，中文采用标准字体 “宋体”，英文采用标准 Time New Roman，不考虑特殊字体，保证每个用户使用起来显示都很正常。样例： 中文 宋体 English Times New Roman 推荐精选界面的正文文字颜色均为黑色（#000000） ，其中重点标注的文字颜色为# FF6600。样例：界面文字颜色为#000000 重点标注文字颜色为# FF6600菜单导航区二级菜单文字颜色为#FF6600，三级菜单文字颜色
15、为黑色（#000000）。样例：二级菜单文字颜色#FF6600 三级菜单文字颜色#000000链接文字均需加下划线，默认颜色值为#0000CC，鼠标滑过时的颜色值为#FF6600，鼠标按下后的颜色值为#000000。样例： 链接文字默认状态 鼠标滑过时状态 鼠标按下后的状态4.5 按钮（按钮（ButtonButton）同一界面的按钮风格要相似，颜色要统一，尺寸要和整体页面协调；按钮文字要简洁明了，文字数目尽量控制在 4 个以下； 弹出页面应使用系统默认的按钮图标；按钮字体通常使用宋体 10 磅（12 像素） ，按钮设计视图如下： 4.6 图形（图形（FigureFigure）页面图片格式为“.
16、jpg 和.gif” ，尺寸根据不同页面的功能来定义；彩信图片的格式为“.jpg 和.gif” ，最大尺寸为 128128，每条彩信的图片大小不能超过 40K。4.7 表格（表格（TableTable）推荐精选列表均采用表格或框架呈现，不允许出现横向滚动的表格；表格内的文字要整体对齐，达到美观协调；表头标题栏的底色为#79BDDD；外框线、内线颜色值为#C0C0C0；表格行背景色由#FFFFFF 和#FAFAFD 间隔；热点聚焦背景色为# FFFFEB，边框颜色值为#FF6600；4.8 框架（框架（FrameFrame）界面设计不允许出现横向滚动条，界面宽度必须控制在 770 像素以内；当界
17、面长度超过 586 像素后，应提供下拉滚动条；框架设计应该简洁明快，尽量少用无谓的装饰；应该考虑节省屏幕空间，各种分辨率的大小，缩放时的状态和原则，并且为将来设计的按钮，菜单，标签，滚动条及状态栏预留位置；设计中将主菜单放在左边或上边，滚动条放在右边，状态栏放在下边，以符合视觉流程和用户使用心理；用户移动滚动条的时候不应对用户输入有任何影响；样例：4.9 鼠标（鼠标（mousemouse）鼠标光标样式要统一，尽量使用系统标准。推荐精选当鼠标指针为不可点击状态时显示为“箭头”样式；当指针指在文本文字上时显示为“”样式，当鼠标指针指在链接文字和图片等可点击的链接上时均显示为“手型”样式，当系统忙时
18、显示为“沙漏”样式。 4.10日期选择（日期选择（DateDate PickerPicker）日期显示格式一致，如 ：yyyy-mm-dd；使用日期控件，尽量不采用手工录入；如需限制日期选择范围，则超出范围的日期应为灰色不可选状态；日期控件的设计应简洁明了，易用为主。4.11显示和隐藏（显示和隐藏（HideHide andand ShowShow）在界面中允许部分内容在隐藏和显示之间切换；隐藏/显示应使用统一的格式来呈现；应使用显著的标识来提示信息可以显示和隐藏，如箭头、指针、加减号等；页签形式的隐藏/显示例图：箭头指针形式的隐藏/显示例图：推荐精选4.12提示信息（提示信息（InlineInline MessagingMessaging andand TipsTips）提示信息应用来防止用户出现错误，帮助引导用户正确操作；提示信息要简单明了，提示位置要符合用户阅读习惯；当信息在界面上显示不全时需有提示信息，例：当输入的数据有误时需有提示信息进行错误原因说明，例：当需要对录入框的数据进行说明时的提示信息，例： （注：可编辑下载，若有不当之处，请指正，谢谢!）