Web界面设计.docx

《Web界面设计.docx》由会员分享，可在线阅读，更多相关《Web界面设计.docx（3页珍藏版）》请在三一办公上搜索。

1、Web界面设计1100310120 潘飞达 一 实验目的和要求 1) 熟悉Web站点的信息交互模型和结构 2)熟悉Web界面设计的基本思想和原则 3)掌握Web界面设计的工具和技术 二 预备知识 Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。Web界面设计与站点外观直接相关，站点的界面外观是否友好直接关系到是否能吸引人的关注。人性化的设计是Web界面设计的核心，如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。 (1) Web信息交互模型 模型涉及到信息的三种类型 1)数据：当一条信息被反复、简单的提供时称为数据，比如机票价格。 2)

2、复杂信息：而用来叙述事件时称为复杂信息，如多媒体信息。 3)过程性信息：在信息有明确目标，并相互作用时称为过程性信息，如在线练习、在线测试等。 模型涉及到信息的两种特性： 1)动态性：信息在不断的变化，具有动态性； 2)一致性：信息元素的组织方式具有一致性 (2)Web信息设计模型 设计模型中要考虑到信息的两个方面： 1)第一是应该呈现或略去什么信息。 2)第二个方面指的是信息该如何被表现。 (3)Web界面设计基本原则 Web界面设计 1) 了解浏览者的心理状态 2) 内容与形式的统一 3) 减少浏览层次 4) 特点明确 5) 统一整体的形象 6) Web界面设计的3C原则 (4)Web界面

3、概要设计 1)Web界面框架设计：Web网站规划 、建立原型系统、详细设计、正式实施 2)Web界面的内容与风格的设计:网站内容设计的原则、Web界面的风格 3)Web界面设计的语言与文化：网站应设置多语言选择，在网站设计和建设中进行跨文化研究 (5)Web界面设计要素 n Web界面布局 n Web界面的色彩 n Web界面的字体 n Web界面的动画与多媒体 n Web界面的导航 (6)Web界面设计技术与工具 主要的技术包括超文本标记语言HTML、客户端脚本语言JavaScript、JavaApplet、服务器端脚本语言。 三、实验内容 1、选择界面设计工具：Dreamweaver ，辅

4、助工具Photoshop 2、设计内容：糗事百科网页 本网站内容充实，在主页的设计上运用了模板，框架等。分页面上运用了导航条。专业机构的研究表明，彩色的记忆效果是黑白的3.5倍，所以网站要色彩丰富。本网站的底色为浅棕色，配以白色和棕色的文字，色彩搭配非常适宜。 在导航条中，链接处显得简单明确，分类合理，让人一目了然。整个界面简单大气，毫无冗余和凌乱之感，十分赏心悦目。 3、Web网站设计的原则： 简洁。因为做的是以笑话为主题的网站，所以特点鲜明，导航放在网页的最上方，版本及设计者信息放在网站最下方，所用的字体为微软雅黑，整体的颜色浅棕色，页面上所有的元素都有明确的含义和用途。 一致性。各个页面都使用相同的页边距、文本，图形之间使用相同的间距；主要图形、标题和符号旁边留下相同的空白，在每页都放有导航图标。页面中的每个元素与整个页面以及网站的色彩和风格上保持了一致，图标都采用了相同的设计风格。文字的颜色同图像保持了一致。 此网站的目的是建立一个笑话网站主页，主要目的是进行发帖，让用户浏览信息，所以网站的功能都放在导航页上。本网站的用户都是追赶潮流的年轻人，所以会加一下特效，而本网站的风格和现在个人网站的主流风格类似，所以用起来比较上手。