用户界面设计报告

精品welcome用户界面设计报告封面：文件状态：【√】草稿【】正式发布【】正在修改文件标识：SD-MODULE当前版本：1.0作者：L集团全体成员完成日期：2010-12-16目录：引言………………………………………………………….101文档介绍…………………………………………………………102项目背景…………………………………………………………103读者对象…………………………………………………………104参考文献…………………………………………………………205术语与缩写解释…………………………………………………206界面设计规范……………………………………………………207界面关系和工作流程图…………………………………………208主界面……………………………………………………………309子界面……………………………………………………………410美学设计…………………………………………………………511网页配色基本概念…………………………………………….512网页设计理念………………………………………………...5精品welcome引言：电子商务网站是人类商业发展一种全新模式。而要令这种全新模式真正化去实行和运作，则需要进行软件化的设计制作。对于此类电子商务网站来说，用户界面设计尤其重要。故针对用户界面得设计中，此设计报告能真正的方便于其电子商务网站的界面开发。01文档介绍：该文档为MP4电子商务网站用户界面设计报告说明文档。02文档目的：此文档的编写目的是为了让界面设计人员能通过该文档以明确的界面设计规划来实现项目此方面的要求，方便使客户、电子商务网站总软件设计人员、软件开发人员和整合测试人员了解设计方案的具体界面分配，方便其他功能的制作。同时也为界面设计的制作工作提供了直接文档说明。03项目背景：针对商务网站界面设计需求，以及方便日后买家的审美需要。随着市面上各风格网站的诞生，根据本公司做的电子网站资料需求用到的界面所在，有必要地对此界面的诞生。04参考文献：【A】李梅、钟阳晶、李冬睿、李振军、杨颖、廖福保共同编著《WEB程序设计》，广东农工商职业学精品welcome院出版，2010-6【B】李德奇，《Windows程序设计案件教材（C#）》，大连理工大学出版社，2008-1【C】郝安林SQLServer2005基础教程与实验指导清华大学出版社2008.1105术语与缩写解释：缩写、术语解释SDUI交互界面06界面设计规范：本界面制作应遵循互联网电子商务网站使用标准，界面设计制作合法化、理性化，既符合大众的市场所需也做到不侵权不盗版的原则要求。07界面关系和工作流程图：经客户要求及小组讨论，本接口学习网站各个界面关系图如下：精品welcome设计流程：确定网站的整体风格：由于我们设计的是买卖网站，所以采用大方得体的风格。网页色彩的搭配：蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。确定网页设计的工具：用Dreamweaver来设计整个网站的界面设计，用Photoshop来设计背景、框架等，用Fireworks来对已经设计好的图片进行切割成模块，以便插入Dreamweaver中，用Flash进行美工设计、网页配色，制作CI、LOGO、Banner等网页动画制作。编写JSP语言08主界面：为了页面导航的清晰，本网站采用了框架式页面设计。页面头放在上框架，课程介绍模块放中框架，下框架是放接口技术相关图片。功能导航、登陆界面放在右框架。课程介绍模块设计该模块利用photoshop软件制作，制作边框，结合图片文字，对接口技术课程做个简单的介绍。主界面分类搜索登陆注册商品购买注册用户在线聊天生成订单放入购物前台显示精品welcome09子界面：（后台界面、登录界面）后台界面：精品welcome登录界面设计:效果如下：进入登陆模块输入用户名、密码注册新用户注册界面公共用户界面验证是否有效注册成功用户管理员登陆成功用户界面精品welcome10美学设计：确定网站的整体风格：由于我们设计的是学习网站，所以采用大方得体的风格。网页色彩的搭配：蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。11网页配色基本概念（1）白纸黑字是永远的主题，谁都说不出不好来。（2）网页最常用流行色·兰色——蓝天白云，沉静整洁的颜色。·绿色——绿白相间，雅致而有生气。·橙色——活泼热烈，标准商业色调。·暗红——宁重、严肃、高贵，需要配黑和灰来压制刺激的红色，（3）颜色的忌讳·忌脏——背景与文字内容对比不强烈，灰暗的背景令人沮丧！·忌纯——艳丽的纯色对人的刺激太强烈抗议，缺乏内涵。·忌跳——再好看的颜色，也不能脱离整体。脱离群众是自取其辱！精品welcome·忌花——要有一种主色贯穿其中，主色并不时面积最大的颜色，而是最重要，最能揭示和反映主题的颜色，就象领导者一样，虽然在人数上居少数，但起决定作用。·忌粉——颜色浅固然显的干净，但如果对比过弱，整得苍白无力了，就象病夫一样无可救药。·蓝色忌纯，绿色忌黄，红色忌艳。（4）几种固定搭配·蓝白橙：蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。·绿白兰：绿为主调。白底，绿标题栏，兰色或橙色按钮或ICON做点缀。·橙白红：橙为主调。白底，橙标题栏，暗红或桔红色按钮或ICON做点缀。·暗红黑：暗红主调。黑或灰底，暗红标题栏，文字内容背景为浅灰色。12网页设计理念（1）内容决定形式先把内容充实上，再分区块，再定色调，再处理细节。（2）先整体，后局部，最后回归到整体。全局考虑，把能填上的都填上，占位置。然后定基调，分模块设计。最后调整不满意的几个局部细节。（3）功能决定设计方向看网站的用途，决定设计思路.商业性的就要突出赢利目的；政府型的就要突出形象和权威性的文章；教育性的，就要突出师资和课程。