中国电信翼校通业客户端UI设计要求--优化版 - 副本.doc

目次 目次 I 1 基本要求 1 2 Logo应用规范 1 3 登陆界面规范 1 4 主界面规范 3 5 信息列表页规范 4 6 详细内容页规范 6 7 导航设计规范 7 8 操作设计规范 7 基本要求 本设计要求是基于前期下发的《中国电信翼校通业务规范-客户端分册（试行）》一个集中平台的实例，各省客户端默认界面需以此UI为准。翼校通客户端主要以480*800分辨率为基础进行设计。 Logo应用规范 翼校通Logo a) Logo图标：集团市场部最终下发Logo图标如图A.1所示。 登陆界面规范 主要元素：LOGO，用户名输入框，密码输入框，记住密码选项，登陆按钮。 LOGO和用户名输入框的最小距离、LOGO和屏幕顶部的距离均不能小于LOGO高度的1/4； Logo必须放置在顶部，其他元素位于其下方。 登录界面规范布局图 登录界面效果图 主界面规范 主要元素：个人信息区、应用图标区。 包括个人的头像、名字等信息，位于顶部。 应用图标区： 应用图标区展现客户端所具备的各项功能的图标，占据屏幕主要显示区域； 应用图标区按功能分成三个栏目（家校互动、交流园地、特色应用）。每个栏目中的图标采取横向方式排列，每行3个： 家校互动——通知公告、家庭作业、成绩信息、日常表现、出勤记录、课表； 交流园地——班级成员、班级相册、家校微博； 特色应用——有道词典、全球眼、天翼阅读、网易公开课、百度知道、百度百科（以上应用是示例性说明，各省根据具体需求引入第三方应用，后期将进行优质教育应用的推荐）、更多应用（链接指向翼校通平台的教育资源与应用，建设完成后链接地址另文下发）。 操作方式：应用图标区超过一屏采用滚屏方式展现，左右滑动可切换栏目。 主界面规范布局图 主界面效果图 信息列表页规范 主要元素：标题导航区，列表区，菜单区。 内容区的屏幕边距不能小于10dip； 信息标题文字大于等于18dip，小于等于48dip，当字数总宽度超过内容区宽度时，超出文字省略，用三个点号代替； 每条信息的高度不能小于50dip。 信息列表页规范布局图 信息列表页效果图 详细内容页规范 主要元素：标题导航区，列表区，菜单区。 标题文字的字号和信息列表页的字号一样，自动换行，行距1.5em； 内容的文字大于等于12px，小于等于18px；行距1.5em。 详细内容页规范布局图 详细内容页效果图 导航设计规范 位于内页顶部，高度不能小于50dip。 功能切换栏 位于屏幕底部，按功能的数量来均分宽度，最多同时显示5个功能，超出时可通过对该栏左右拖动进行滚动。 操作设计规范 物理按键操作规范 Menu键：调出关联菜单； 返回键：返回前一页面； 单击：打开，导航。 手势操作规范 左划：后一个，后翻页。手势示意如图A.10所示。 左划手势示意图 右划：前一个，前翻页。手势示意如图A.11所示。 右划手势示意图 上划：向上滚。手势示意如图A.12所示。 上划手势示意图 下划：向下滚，刷新。手势示意如图A.13所示。 下划手势示意图 长按：弹出关联菜单。手势示意如图A.14所示。 长按手势示意图 YD/T 200×—×××× YD/T 200×—×××× I Q/CT X—2011 3 保密等级：公开发放 中国电信集团公司 发布 2011-××-××实施 2011-××-××发布 中国电信翼校通客户端UI设计要求 （修订稿） Q/CT X-2011 中国电信集团公司企业标准