中国联通电子渠道系统方案建议书-VI设计分册.docVIP

AsiaInfo 项目文档 中国联通电子渠道系统项目 网站VI设计分册 技术方案建议书 编 写 XXX 编写 时间 2007-12-12 审 核 审核者姓名（及其职务） 审核 时间 审 批 审批者姓名（及其职务） 审批 时间 文档管理 页码 共 页 修订次数 共 次 版本 V1.0 编号 目 录 1 引言 1 1.1 项目名称和需求 1 1.2 相关术语与缩略词解释 1 1.3 参考文献 2 2 外观设计 3 2.1 总体设计原则 3 2.2 颜色和布局 3 2.2.1 颜色选择 3 2.2.2 布局规划 5 2.3 内容和表现 7 2.3.1 文件格式说明 7 2.3.2 文件命名方式 7 2.3.3 站点表现形式 8 2.4 兼容性考虑 9 2.4.1 操作系统兼容性 9 2.4.2 浏览器兼容性 9 2.4.3 分辨率兼容性 9 2.4.4 移动终端兼容性 10 3 功能设计 11 3.1 服务与信息分离 11 3.2 区分用户登录入口 11 3.3 针对不同用户的页面呈现 12 3.4 多元化的服务整合 12 3.5 方便的网上营业厅 13 3.6 丰富多样的网上商城 13 3.7 方便的帮助和导航 14 3.8 更多用户信息的获取 14 4 A版本页面设计详解 15 4.1 整体设计风格 15 4.2 区分用户登录 15 4.2.1 个人用户登录入口 15 4.2.2 企业用户登录入口 16 4.2.3 联通集团入口页面 16 4.3 针对不同用户的页面呈现 17 4.3.1 如意通用户页面 17 4.3.2 新势力用户页面 17 4.3.3 世界风用户页面 18 4.3.4 企业用户页面 18 4.4 网上营业厅页面设计 19 4.4.1 话单查询页面 19 4.4.2 积分查询页面 19 4.4.3 帐单智能分析 20 4.4.4 在线客服页面 21 4.4.5 用户控制面板 22 4.5 网上商城页面设计 23 4.5.1 网上商城首页 23 4.5.2 手机推介页面 23 4.5.3 套餐推介页面 24 4.5.4 号码推介页面 24 4.5.5 购物流程页面 25 4.5.6 方便的比较功能 25 4.5.7 动态的搜索页面 26 4.5.8 购物车功能说明 27 4.6 联通集团新闻页面 28 4.7 联通品牌宣传页面 28 5 B版本页面设计详解 29 5.1 整体设计思路 29 5.2 区分用户登录 30 5.2.1 站点主入口 30 5.2.2 个人用户首页 30 5.2.3 企业用户首页 31 5.2.4 联通集团首页 31 5.3 针对不同用户的页面呈现 32 5.3.1 如意通用户页面说明 32 5.3.2 新势力用户页面说明 32 5.3.3 世界风用户页面说明 33 5.4 网上营业厅页面设计 33 5.4.1 网上营业厅入口 33 5.4.2 积分查询页面 34 5.4.3 余额查询和充值 34 5.5 网上商城页面设计 35 5.5.1 网上商城首页 35 5.5.2 手机推介页面 35 5.5.3 手机列表页面 36 5.5.4 套餐推介页面 36 5.5.5 号码推介页面 37 5.5.6 充值卡销售页面 37 5.5.7 购物车功能说明 38 5.6 联通品牌宣传页面 38 6 其他说明 39 6.1 联通公司标志使用说明 39 6.2 站点图片使用及版权说明 39 6.3 站点图标使用及版权说明 39 6.4 两种不同的设计风格和整合 39 引言 项目名称和需求 项目名称：中国联通电子渠道项目 设计需求：通过良好的VI设计方便用户使用，充分体现运营商的用户应用服务门户的设计思路。同时，进一步聚合网上营业厅和电子商城功能，为用户提供更加多元化的服务。 相关术语与缩略词解释 JPG/JPEG：JPEG( JointPhotographicExpertsGroup)是最常用的图像文件格式，广泛用于互联网上的图片文件表现，但由于采用有损压缩，因此将使最终解压缩后恢复的图像质量明显降低。 PNG：PNG (Portable Network Graphic Format，PNG)是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。PNG使用从LZ77派生的无损数据压缩算法，加上各种浏览器对PNG的支持越来越好，PNG格式的图像文件因此已经被越来越多的应用在互联网上。 Flash：Flash是美国Macromedia公司所设计的一种二维动画软件。被大量应用于互联网网页的矢量动画文件格式。 使用向量运算﹙Vector Graphics﹚的方式，产生出来的影片占用存储空间较小。是Macromedia提出的