12580第三方服务UI+UE设计规范Word文件下载.doc

1、l 保持12580综合信息门户的所有产品的一致性和良好的连贯性，便于版本升级；l 简化您的产品设计文档和操作说明的撰写，因为很多界面和标准的交互行为的描述不再需要过多的解释；l 便于12580综合信息门户整体提升用户体验；l 保证所有12580综合信息门户合作业务产品的易用，友好，美观和强大；1.2 使用范围12580综合信息门户合作业务的提供方即无限讯奇的合作伙伴的所有的产品开发人员，包括：产品经理、UE工程师、文档工程师、UI工程师和其它相关技术开发人员。1.3 文档结构UMESSAGE HUMAN INTERFACE GUIDELINE1112580合作业务产品UI/UE设计规范概述21

2、.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通用格式（Common 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

3、.12提示信息（Inline Messaging and Tips）112 用户界面设计准则2.1 界面的易用性产品界面菜单导航/按钮/名称应该使用容易理解的语言，用词准确，要与同一界面上的其他菜单导航/按钮易于区分，浅显易懂最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。始终提示用户所在位置并为其提供返回主页或开始状态的路径，避免用户出现任何迷惑和思考。2.2 界面的规范性产品界面设计遵循规范化的程度越高，则易用性相应的就越好的原则。保持操作方式的一致性和功能实现方式的一致性原则，使用统一样式控件、快捷键、菜单样式、配色等减少用户记忆负担和思考时间。2.3 界面的

4、合理性屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置。合理的运用提示框，提示用户操作的方式及错误原因。2.4 界面的独特性如果一味的遵循业界的界面标准，则会丧失自己的个性.在框架符合以上规范的情况下，设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。2.5 界面的美观性界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。3 用户界面交互准则3.1 界面进入容易第三方业务不可出现在使用前需要进行系统登录的身份验证以便节省12580坐席人员操作时间。在使用前需要进行系统登录的

5、业务：此类第三方业务在使用前需要坐席进行系统登录，给坐席操作时间带来不必要的浪费，甚至因为服务时间的延长造成用户体验下降。所以第三方业务不可以出现在使用前需要进行系统登录的使用限制。3.2 界面使用简便第三方业务如需进行交互操作时需要提供简便易懂的查询条件以便节省12580坐席人员操作时间。以天气预报业务为例：尽量使用符合用户需求的查询条件，查询条件不宜过多。在需要下拉选择时最好可以同时支持下拉以及输入方式以便节省坐席操作时间。3.3 界面内容清晰第三方业务需明确体现业务种类以及用户查询需求，对于综合式互联网型的业务需要按用户查询需求进行业务细分。明确体现用户需求的业务以天气预报业务为例：当坐

6、席进入“天气预报”查询业务时可以非常清楚的体现出这个业务所以为用户提供的服务内容。无法明确体现用户需求的业务：此类业务当坐席进入后无法精确定位用户查询需求所属区域，势必造成坐席在定位用户查询信息时浪费过多的时间，此种不必要的时间浪费会造成坐席单位时间服务数量的降低，甚至因为服务时间的延长造成用户体验下降。此类业务需要按用户查询需求进行业务细分。3.4 内容简练易懂第三方业务内容需做到简练易懂以便12580坐席人员进行内容播报以及缩减短信下发字数。在传统可视媒体中天气预报可以提供的信息非常之繁杂，如：穿衣指数、洗车指数、开窗指数等等。但鉴于语音媒体与传统可视媒体之间的区别，12580中的天气预报

7、为了简化内容方便坐席播报，只提供相对简单但相对重要的信息内容，既满足了用户需求又简化了坐席播报，同时缩短了通话时长。4 用户界面执行细则4.1 合作业务区本区域功能是提供合作业务产品的用户界面以供用户进行相关服务。尺寸：宽度高度 = 770 586 （单位：像素）界面执行要求：l 合作业务产品的设计界面必须保证宽度控制在770像素以内，横向不允许出现滚动条；l 合作业务产品的设计界面高度原则上要求控制在586像素以内，尽量避免出现滚动条，对于某些确实需要超过586像素的页面高度的产品，经无限讯奇产品部产品经理和UE设计师确认同意可以设置竖向滚动条；具体样式参考：页面长度超过586，可以在页面的

8、右方出现下拉滚动条；页面不可以超过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

9、位，否则视为无效号码。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

10、。4.3 色调（Colour）12580产品系列识别色标准围绕电信蓝色为主： Menu按钮色系RGB: R-115G-179 B-210（电脑PC色）#73B3D2Button按钮色系 R-154 G-211 B-54（电脑PC色）#9AD336Hotspot热点色系 R-255 G-102 B-0（电脑PC色）#FF6600Bgcolor背景色系 R-255 G-255 B-235（电脑PC色）#FFFFEB R-250 G-250 B-253（电脑PC色）# FAFAFD标准蓝必须按照网站整体VI设计，主要标准色用色范围必须50%。4.4 文字（Font）l 使用统一字体，中文采用标准字体

11、 “宋体”，英文采用标准Time New Roman，不考虑特殊字体，保证每个用户使用起来显示都很正常。样例： 中文 宋体 English Times New Roman l 界面的正文文字颜色均为黑色（#000000），其中重点标注的文字颜色为# FF6600。界面文字颜色为#000000 重点标注文字颜色为# FF6600l 菜单导航区二级菜单文字颜色为#FF6600，三级菜单文字颜色为黑色（#000000）。二级菜单文字颜色#FF6600 三级菜单文字颜色#000000l 链接文字均需加下划线，默认颜色值为#0000CC，鼠标滑过时的颜色值为#FF6600，鼠标按下后的颜色值为#0000

12、00。 链接文字默认状态 鼠标滑过时状态 鼠标按下后的状态4.5 按钮（Button）l 同一界面的按钮风格要相似，颜色要统一，尺寸要和整体页面协调；l 按钮文字要简洁明了，文字数目尽量控制在4个以下；l 弹出页面应使用系统默认的按钮图标；l 按钮字体通常使用宋体10磅（12像素），按钮设计视图如下： 4.6 图形（Figure）l 页面图片格式为“.jpg和.gif”，尺寸根据不同页面的功能来定义；l 彩信图片的格式为“.jpg和.gif”，最大尺寸为128128，每条彩信的图片大小不能超过40K。4.7 表格（Table）l 列表均采用表格或框架呈现，不允许出现横向滚动的表格；l 表格内的文字要整体对齐，达到美观协调；l 表头标题栏的底色为#79BDDD；外框线、内线颜色值为#C0C0C0；表格行背景色由#FFFFFF和#FAFAFD间隔；热点聚焦背景色为# FFFFEB，边框颜色值为#FF6600；4.8 框架（Frame）l 界面设计不允许出现横向滚动条，界面宽度必须控制在770像素以内；