无线城市展现门户 客户端UI UE规范V2.3(wap节选).pptxVIP

通用UI/UE规范应用界面规范图标规范统一门户客户端概述附件-规范更新记录Chapter1Chapter3Chapter6Chapter4Chapter5Chapter2User Interface User Experience Guidelines概述Chapter1概述定位：清晰梳理中国移动企业品牌传播，明确无线城市在中国移动企业发展中的定位，有利于理解无线城市UI/UE的整体性和全局性规范。设计目标：通过规范、图标、应用界面、门户框架、通用组件，为各省的无线城市应用开发和改造提供设计规范依据，以保证无线城市门户的用户体验一致性。通过规范前端代码设计，提升产品终端兼容性。为各省无线城市应用接入提供界面审核标准。设计原则：该规范文档遵循《中国移动无线城市标识VI手册》和《无线城市统一门户（客户端、wap、www）设计规范》，着重打造清晰的UI/UE设计参考规范。读者对象：目标读者为产品经理、视觉设计师、交互设计师、开发人员等。??User Interface User Experience Guidelines图标规范Chapter2图标规范原则icon基本样式说明：要素：尺寸、形状、质感比例：1:1尺寸：12px、24px、32px、48px、64px、72px、128px图标样式设计原则：图示表意要清晰易懂，符合用户认知习惯；经常被用到的图标需要统一并固定下来；图标尺寸要有一定规则，防止出现过多尺寸类型；符号类图标，在视觉上需要与按钮类图标有区分。72px128px12px48px64px24px32px应用图标设计规范应用图标设计规范：图标背景为单色系，4px圆角。图标主体图形为纯色图形，#FFFFFFF，图标存储为png 格式，24位色透明底，最大不大于6K，最小不低于1K。图标图形设计含义必须符合应用名称。应用图标说明：应用图标不只具有表意功能，还具有按钮的作用，可实现链接功能。分类图标分类图标设计规范：www尺寸：24x24px客户端尺寸：60x60px(可选)、72x72px、90x90px（可选）分类图标说明：与文字一起组合显示，突出分类名称，帮助用户理解分类含义；www版使用灰色，在“应用中心”，应用分类列表展示；客户端使用彩色，在“应用中心”，应用分类列表展示。User Interface User Experience Guidelines应用界面规范Chapter3AA应用界面规范BBBCCwap应用接入方式（拉取头尾）www应用接入方式1（拉取头尾）www应用接入方式2（iframe内嵌）各省基地C1应用界面规范A2基地提供：统一门户页头页尾供各省应用拉取；应用详情页面iframe模板内嵌各省应用。3A页头页尾41. 页头内容（logo、用户信息、网站导航）2. 面包屑3. 应用简介（收藏、分享）C5wwwwap：拉取头尾方式其他www： iframe内嵌方式4. 应用评论（评论提交、列表、打分）5. 页尾内容（页底导航、版权信息）6. 相关应用7. 排行榜 应用界面规范各省负责应用详情界面（示例图B部分）改造：B需遵循整体UI/UE规范色彩框架布局文字控件组件需要遵循本UI/UE规范第五章节通用UI/UE规范，P125、P126示例说明。需遵循前端开发编码规范样式表html应用界面规范-前端代码（html）页面名称所有页面名称都必须以小写名称命名。页面内容每一个页面必须声明DTD，标识出符合w3c的规范。!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd页面标题所有客户能浏览到的页面必须使用title标签，如：title****/titleMETA语句所有客户能浏览到的页面必须使用meta标签。1. keywordsMETA name=keywords content=关键字1，关键字2，关键字3，关键字4，关键字5，关键字6，关键字7，关键字8，关键字9 … /2. descriptionMETA name=description content=描述1，描述2，描述3，描述4，描述5，描述6，描述7，描述8，描述9 … /html页面编码方式所有html页面必须使用下面的格式标识出页面的编码方式。统一用UTF8格式。META http-equiv=Content-Type content=text/html; charset=utf8页面样式必须使用css文件定义页面样式，如需单独定义页面元素的样式时必须使用style属性或classname属性定义其样式，杜绝使用其他属性定义标签样式，如:bgcolor等等。JavaScript脚本页面使用