12580第三方服务UI+UE设计规范Word文件下载.doc
《12580第三方服务UI+UE设计规范Word文件下载.doc》由会员分享，可在线阅读，更多相关《12580第三方服务UI+UE设计规范Word文件下载.doc（14页珍藏版）》请在冰豆网上搜索。
l保持12580综合信息门户的所有产品的一致性和良好的连贯性，便于版本升级；
l简化您的产品设计文档和操作说明的撰写，因为很多界面和标准的交互行为的描述不再需要过多的解释；
l便于12580综合信息门户整体提升用户体验；
l保证所有12580综合信息门户合作业务产品的易用，友好，美观和强大；
1.2使用范围
12580综合信息门户合作业务的提供方即无限讯奇的合作伙伴的所有的产品开发人员，包括：
产品经理、UE工程师、文档工程师、UI工程师和其它相关技术开发人员。
1.3文档结构
UMESSAGEHUMANINTERFACEGUIDELINE 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 通用格式（CommonFormats） 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 日期选择（DatePicker） 10
4.11 显示和隐藏（HideandShow） 10
4.12 提示信息（InlineMessagingandTips） 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通用格式（CommonFormats）
l名称格式：
名称可以是中文、英文、数字、字符的组合，同一名称在不同页面及前后台要相同。
l地址格式：
地址采用级联形式显示，Forexample,street,city,stateandpostalcodemaybeincludedinasingleview-onlyfield,ortablecell.例如省份、城市，区域、街道、邮政编码，地址数据可在列表清单里选择，也可以对各级联数据单独输入。
l电话号码格式：
座机及小灵通格式为：
区号-电话号码；
手机号码默认为11位，否则视为无效号码。
l日期格式：
使用统一格式yyyy-mm-dd，更新的日期和时间应该限制使用者输入的数据以保证数据正确有效，日期范围为指定期限中的一个开始日期和结束日期，View-onlydaterangefieldsarealwaysplacedside-by-sideandseparatedbyadash.在用破折号分隔。
l时间格式：
统一采用24小时时间格式，由小时、分钟、秒组成，时分秒之间用冒号隔开，秒为可选项。
l数字格式：
负数格式为“-数字”，分数格式为“分子/分母”，小数应使用小数点隔开，数值范围之间应使用破折号，数字带单位域时应放在其后，例3%、3℃。
4.3色调（Colour）
12580产品系列识别色标准围绕电信蓝色为主：
Menu按钮色系
RGB:
R-115G-179B-210（电脑PC色）
#73B3D2
Button按钮色系
R-154G-211B-54（电脑PC色）
#9AD336
Hotspot热点色系
R-255G-102B-0（电脑PC色）
#FF6600
Bgcolor背景色系
R-255G-255B-235（电脑PC色）
#FFFFEB
R-250G-250B-253（电脑PC色）
#FAFAFD
标准蓝必须按照网站整体VI设计，主要标准色用色范围必须>
50%。
4.4文字（Font）
l使用统一字体，中文采用标准字体“宋体”，英文采用标准TimeNewRoman，不考虑特殊字体，保证每个用户使用起来显示都很正常。
样例：
中文宋体EnglishTimesNewRoman
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像素以内；
升级会员 