网页设计调研报告

网页设计调研报告•随着经济的发展，电脑已经成了生活必备品，当上网变成一件很平常的事情，网站的发展就会日新月异了，而网页设计作为一种视觉语言，不仅影响到视觉，还慢慢的渗透到听觉，甚至嗅觉。一个好的网站必定拥有优秀的网页设计，好的网页设计首先必须符合人的视觉需求，而相应的排版布局，色彩搭配也要符合人们的心理需求，在这个商业与个性遍布的时代，网页设计能否突出企业或个人的形象是摆在大家面前的一个问题，网页的设计也涵盖了很多方面，需要多方面的了解和调查，在设计网页之前先做一番调查和思考非常有必要。包设0814班尹祎雯网页设计的基本知识点•1.网页设计的要点•2.网页设计的工具•3.网页设计的版式和色彩•4.网页设计的理念•5.网页设计需要注意的问题网页设计的要点•网页设计的两大要点是：整体风格和色彩搭配。•一、确定网站的整体风格•1．将你的标志logo，尽可能的放在每个页面上最突出的位置。•2．突出你的标准色彩。•3．总结一句能反映贵站精髓的宣传标语！•4．相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！•二、网页色彩的搭配•1．用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。•2．用两种色彩。先选定一种色彩，然后选择它的对比色。•3．用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。•在网页配色中，还要切记一些误区：•1．不要将所有颜色都用到，尽量控制在三至五种色彩以内。•2．背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。网页设计的工具•1.dreamweaver,用与编辑HTML、ASP、JSP、PHP时的辅助工具•2.Frontpage跟dreamweaver一样，不过个人感觉还是dreamweaver好。•3.FLASH网页需要画面流动时的首选择•4.PS图象处理软件，一般网页都需要有图片相搭配，PS是款很强大的工具。•5.FW跟PS一样都是图象处理软件，但FW偏向与对网页的处理。[个人喜欢PS]网页设计的版式•网页布局类型•网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型，下面分别论述。•1、“国”字型：•也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。•2、拐角型：•这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。•3、标题正文型：•这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。•4、左右框架型：•这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。•5、上下框架型：•与上面类似，区别仅仅在于是一种上下分为两页的框架。•6、综合框架型：•上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。•7、封面型：•这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。网页设计的色彩•一）网页配色基本概念•（1）白纸黑字是永远的主题，谁都说不出不好来。•（2）网页最常用流行色•·兰色——蓝天白云，沉静整洁的颜色。•·绿色——绿白相间，雅致而有生气。•·橙色——活泼热烈，标准商业色调。•·暗红——宁重、严肃、高贵，需要配黑和灰来压制刺激的红色，•（3）颜色的忌讳•·忌脏——背景与文字内容对比不强烈，灰暗的背景令人沮丧！•·忌纯——艳丽的纯色对人的刺激太强烈抗议，缺乏内涵。•·忌跳——再好看的颜色，也不能脱离整体。脱离群众是自取其辱！•·忌花——要有一种主色贯穿其中，主色并不时面积最大的颜色，而是最重要，最能揭示和反映主题的颜色，就象领导者一样，虽然在人数上居少数，但起决定作用。•·忌粉——颜色浅固然显的干净，但如果对比过弱，整得苍白无力了，就象病夫一样无可救药。•·蓝色忌纯，绿色忌黄，红色忌艳。•（4）几种固定搭配•·蓝白橙——蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。•·绿白兰——绿为主调。白底，绿标题栏，兰色或橙色按钮或ICON做点缀。•·橙白红——橙为主调。白底，橙标题栏，暗红或桔红色按钮或ICON做点缀。•·暗红黑——暗红主调。黑或灰底，暗红标题栏，文字内容背景为浅灰色。网页设计的理念•（1）内容决定形式•先把内容充实上，再分区块，再定色调，再处理细节。•（2）先整体，后局部，最后回归到整体。•全局考虑，把能填上的都填上，占位置。然后定基调，分模块设计。最后调整不满意的几个局部细节。•（3）功能决定设计方向•·看网站的用途，决定设计思路.商业性的就要突出赢利目的；政府型的就要突出形象和权威性的文章；教育性的，就要突出师资和课程。网页设计需要注意的问题•１、页面内容要新颖•网页内容的选择要不落俗套，要重点突出一个“新”字，这个原则要求我们在设计网站内容时不能照抄别人的内容，要结合自身的实际情况创作出一个独一无二的网站。我们在设计网页时，要把功夫下在选材上。选材要尽量做到“少”而“精”,又必须突出“新”•２、网页命名要简洁•３、要及时更新网页•４、注意视觉效果•设计Web页面时，一定要用1024*768的分辨率来分别观察。许多浏览器使用1024*768的分辨率，尽管在1280*1024高分辨率下一些Web页面看上去很具吸引力，但在1024*768的模式下可能会黯然失色。作一点小小的努力，设计一个在不同分辨率下都能正常显示的网页。•5、网页内容要易读•6、善用表格来布局•不要把一个网站的内容象作报告似的一二三四地罗列出来，要注意多用表格把网站内容的层次性和空间性突出显示出来，使人一眼就能看出你的网站重点突出，结构分明。网页设计需要注意的问题•7、少用特殊字体•8、多学习和使用HTML•9、尽量少用Java程序•不要使用大幅面的Java程序,能够用javascript替代效果的则尽量不要使用java.因为目前来讲java的运行速度实在慢的让人无法忍受，往往使浏览者没有耐心等页面全部显示出来，这样你的精心设计便毫无效果啦。•10、少放网站地图网页设计需要注意的问题•１1、要为图片附加注释文字•12.不宜多用闪烁文字•１3、每个页面都要有导航按钮•１4、避免长文本页面•１5、网页风格要统一•你网页上所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。这样子读者看起来舒服、顺畅，会对你的网站留下一个“很专业”的印象。•16、动画最多只用一个•２０、善用图像•用户在网上四处漫游，你必须设法吸引和维护他们对你的主页的注意力。主页上最好有醒目的图像、新颖的画面、美观的字款，使其别具特色，令人过目不忘。图像的内容应有一定的实际作用，切忌虚饰浮夸。注意图画可以弥补文字之不足，但并不能够完全取代文字。制作主页时，必须注意将图像所连接的重要信息或联接其他页面的指示用文字重复表达几次，同时要注意避免使用过大的图像，如果不得不放置大的图像在网站上，就最好使用Thumbnails软件，把图像的缩小版本的预览效果显示出来，这样用户就不必浪费金钱和时间去下载他们根本不想看的大图像。网页设计需要注意的问题•２１、网站导航要清晰•２２、最好不用记数器•２３、不能忽视错别字•２４、不要用框架•２５、使用著名的插件•２６、使网站具有交互功能•一个静态网页始终给人一种呆板的感觉，缺少一种活力和生气。最好在网站上提供一些回答问题的工具以及其他具有交互性能的设计，使得访问者能从网站上获得交互的信息，从而使访问者有一种参与网络建设的新鲜感和成就感。进度表•2011年11月3日—2011年11月10日收集整理资料•2011年11月11日---2011年11月18日调研•2011年11月18日---2011年11月25日设计草图•2011年11月26日---2011年12月1日定稿•2011年12月1日---2011年12月10日总结制作PPT•2011年12月11日---2011年12月25日制作网页资料分析•我搜集了一些自己比较喜欢的网站做了分析，我打算用插画的形式做网页设计，所以搜集的大多是插画风格的网站，而风格大多是简洁风格，一目了然。可爱风格•这个网站属于可爱风格的网站，运用插画做背景，风格清新简洁，颜色运用不大明显的对比色，既和谐又有对比。导航一目了然，结构清晰。主体突出现代时尚风格•这是国外的一个个人网站，很有特色，背景是低调的黑色，字体用高级灰，既醒目对比又不会太强烈，而当用户开始浏览时字体则变成了白色，在灰色字体中很醒目便于查找，导航的设计很有创意，整个设计风格时尚现代。个性风格•这也是国外的一个个人网站，网页设计的很有个性，页面背景都是一样的，改变的只是照片和旁边的文字，设计简洁，操作简单，很有个人特色。源画堂个人网页设计赏析•源画堂的个人网页设计是非常简洁的，首页就是网站名称、图和menu•这是二级页面，是个人作品展示，用一些整齐的小方格来排列自己的作品，虽然方便浏览，但是稍显单调，如果有大有小会比较有律动感，也不会让人觉得乏味。•这是最后一级页面，是个人的资料，也是从上至下的排版方式，简洁明了，也很有个人风格。网页设计草图•这是主页面，由三个部分组成，一个是关于我个人的介绍，一个是我的插画集，还有一个是我的摄影集网页设计草图•这个是介绍我个人的页面，点返回可以回到主菜单网页设计草图•这个是我的插画集，我只链接了一个页面，点击古风少年可进入下一个页面观看我的插画，点击左上角的返回可回到主页。网页设计草图•这是插画集的内页，点击返回可回到插画集主页面网页设计草图•这个是我的摄影集，点击右边的导航可进入内页观看照片，我只设置了一个链接网页设计草图•这是摄影集的内页，照片的大图浏览，点击返回可回到摄影集主页。总结•通过这次对网页设计的调研和制作，我掌握了如何排版，如何切片并将PSD格式转换成WEB格式，学会了如何制作链接，网页设计看起来简单，制作起来却需要花大量的时间，并且熟练的使用PS和DW，我相信有了这一次的学习，下一次制作网页会更加完善。