用户界面设计报告.doc

111111111 PAGE 用户界面设计报告 封面： 文件状态： 【√】草稿 【 】正式发布 【 】正在修改 文件标识： SD-MODULE 当前版本： 1.0 作者： L集团全体成员 完成日期： 2010-12-16 目录： 引 言………………………………………………………….1 01文档介绍…………………………………………………………1 02项目背景…………………………………………………………1 03读者对象…………………………………………………………1 04参考文献…………………………………………………………2 05术语与缩写解释…………………………………………………2 06界面设计规范……………………………………………………2 07界面关系和工作流程图…………………………………………2 08主界面……………………………………………………………3 09子界面……………………………………………………………4 10美学设计…………………………………………………………5 11网页配色基本概念…………………………………………….5 12网页设计理念………………………………………………...5 引言： 电子商务网站是人类商业发展一种全新模式。而要令这种全新模式真正化去实行和运作，则需要进行软件化的设计制作。对于此类电子商务网站来说，用户界面设计尤其重要。故针对用户界面得设计中，此设计报告能真正的方便于其电子商务网站的界面开发。 01文档介绍：该文档为MP4电子商务网站用户界面设计报告说明文档。 02文档目的： 此文档的编写目的是为了让界面设计人员能通过该文档以明确的界面设计规划来实现项目此方面的要求，方便使客户、电子商务网站总软件设计人员、软件开发人员和整合测试人员了解设计方案的具体界面分配，方便其他功能的制作。同时也为界面设计的制作工作提供了直接文档说明。 03项目背景： 针对商务网站界面设计需求，以及方便日后买家的审美需要。随着市面上各风格网站的诞生，根据本公司做的电子网站资料需求用到的界面所在，有必要地对此界面的诞生。 04参考文献： 李梅、钟阳晶、李冬睿、李振军、杨颖、廖福保共同编著《WEB程序设计》，广东农工商职业学院出版，2010-6 李德奇，《Windows程序设计案件教材（C#）》，大连理工大学出版社，2008-1 郝安林 SQL Server 2005 基础教程与实验指导 清华大学出版社 2008.11 05术语与缩写解释： 缩写、术语 解释 SD UI 交互界面 06界面设计规范： 本界面制作应遵循互联网电子商务网站使用标准，界面设计制作合法化、理性化，既符合大众的市场所需也做到不侵权不盗版的原则要求。 07界面关系和工作流程图： 经客户要求及小组讨论，本接口学习网站各个界面关系图如下： 主界面 主界面 分类搜索 登陆注册 商品购买 注册用户 在线聊天 生成订单 放入购物 前台显示 设计流程： 确定网站的整体风格：由于我们设计的是买卖网站，所以采用大方得体的风格。 网页色彩的搭配：蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。 确定网页设计的工具：用Dreamweaver来设计整个网站的界面设计，用Photoshop来设计背景、框架等，用Fireworks来对已经设计好的图片进行切割成模块，以便插入Dreamweaver中，用Flash进行美工设计、网页配色，制作CI、LOGO、Banner等网页动画制作。 编写JSP语言 08主界面： 为了页面导航的清晰，本网站采用了框架式页面设计。页面头放在上框架，课程介绍模块放中框架，下框架是放接口技术相关图片。功能导航、登陆界面放在右框架。 课程介绍模块设计 该模块利用photoshop软件制作，制作边框，结合图片文字，对接口技术课程做个简单的介绍。 09子界面：（后台界面、登录界面） 后台界面： 登录界面设计: 进入登陆模块 进入登陆模块 输入用户名、密码 注册新用户 注册界面 公共用户界面 验证是否有效 注册成功 用户 管理员 登陆成功 用户界面 效果如下： 10美学设计： 确定网站的整体风格：由于我们设计的是学习网站，所以采用大方得体的风格。 网页色彩的搭配：蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。 11网页配色基本概念 　　 （1）白纸黑字是永远的主题，谁都说不出不好来。 　　 （2）网页最常用流行色 　 　·兰色——蓝天白云，沉静整洁的颜色。