网页设计理论知识

以下就是网页设计理论知识等等的介绍，希望为您带来帮助。

[图片0]

网页是向网站访问者传达信息的人机交互界面，是网站的重要组成部分之一，是网站中的信息载体。网页以超文本和超媒体技术为基础，通过超文本技术可以在网页中嵌入超级链接，在浏览器中通过单击网页中的超级链接即可跳转到存储于其他任何地方的网页。

1.网页的功能即信息传递功能和信息的交互功能。

2.网站的分类:根据网站的性质我们可以把网站分为几大类，门户类网站，游戏类网站，搜索类网站，企业类网站，电子商务类网站，政府、组织类网站，个人网站。

门户网站:为访问者提供一站式的服务模式以及提供全面、综合网络信息或专业的网络信息等功能的web网站。门户类又分综合类门户网站和专业性门户类网站。综合类门户网站最大的特点是可以对庞大的信息进行整合，分类，是访问者能从中找到所需要的信息。这类网站在网站首页中提供了搜索引擎，电子邮件服务，聊天室，娱乐资询相关下载等服务功能，更对各种不同类别的的信息内容进行分类。专业性门户网站的特点是为那些在某个领域或行业具有专业性和权威性的企业提供信息发布平台。这类站点是为专门研究某个领域的访问群来提供专业信息，规模不一定很大，但信息针对性非常强。

游戏类网站:商业性网站中最富有活力的网站类型之一电子游戏在网络娱乐服务中有着巨大的市场空间。也最具有市场价值。

搜索类网站:以提供搜索功能为特点。访问者在搜索信息时，只要输入所要查找的信息的关键字，搜索引擎就可以把它与关键字有关的信息查找出来供访问者选择。

企业类网站:为宣传企业产品，展示企业形象，提供在线服务，发布企业信息等目的而建立的网站。

电子商务类网站:从分利用网络多媒体技术，可以让访问者从网站了解所需要购买物品的性能，价格信息。特别是网站中的商品可能因为进货渠道或销售方式等与实体购物市场不同，所以在价格上有更大优势。

政府类网站:主要以个人以及企业为服务对象，以为民服务，方便百姓办事提高行政办事效率为目的，提供权威的政府信息发布，行政服务和便民信息查询。

个人类网站:制作者根据自己的兴趣爱好而设计的网站它包括信息发布型和个人形象网两大类信息发布个人网站的信息内容丰富，制作者需要花大量的时间和精力，在资金上有较多投入网站建设者需要懂得网页制作，html语言，图形处理，网页发布等相关技术。

网页设计理论之如何使用纹理效果

纹理 VS 图案

在深入了解纹理之前，让我们先把这一对容易混淆的概念区分一下。这两个词通常会被当作一组同义词。图案通常会由一些细小的重复性的元素组成，具有一定的视觉节奏感。而纹理相对图案由更大的元素组成，也不一定有重复性。如果用集合来表示这两个概念，那么，纹理和图案就会是两个圆，只有小部分交集，其余部分都是相对独立的。

纹理的功能

人们喜欢在网页中使用纹理，基于设计的理由绝不能仅仅因为“看起来很美”就这样去做，而应该基于满足某种功能，而纹理的使用目的大部分都会在于增强网页的层次和视觉深度。还是让我们来看看纹理具体有哪些功能吧。

吸引用户点击操作

图标、按钮、标题等元素都能运用上纹理。它能吸引用户对相应元素进行点击操作。这也许就是纹理运用盛行的原因。

最低限度地使用纹理就是将纹理运用在元素上，以便让这些元素区别于网页中的其他元素。引导用户的视线进入我们预期的下一步。这种方式也可以重点突出网页中的品牌形象，例如在LOGO上使用纹理。

这里对LOGO使用纹理有两种方式:第一是为你的LOGO使用纹理而搭配清晰背景，第二是保持清晰LOGO而运用纹理背景。

增强信息的视觉展示规则

纹理既然可以用以引导视线，就如同线条、方框和对比一样，它也可以被用以排版，将内容按照某种视觉规则进行展示。与此同时，纹理的效果要运用得当，与其他的视觉规则方式协调使用，最终输出效果将会非常理想。

对于不同的内容选用不同的纹理，这也符合了对比法则。用户能根据不同的需求而进入下一步操作，而不至于在主页中层出不穷的信息中迷失了方向。

同时，纹理要完美搭配网站中的风格和主题，例如手工的网站就搭配布纹，绘画的网站搭配纸纹。所有这些元素都可以通过某种逻辑法则去体现网站的内容，强化整体的信息展示。

营造氛围和凸显个性

现在，越来越多的客户喜欢自己的网站能用界面设计来传达自身更多的信息，他们希望网站凸显出自己的个性，发挥品牌效应。纹理也许能在某种程度上达到这一预期。

上面这个网页可说是这方面的领衔之作。运用纹理去展示头像，每个元素都用纹理发挥，配合也非常协调。没有纹理，我想这个网页的设计也可能没有这样出色。

确实，纹理为网页界面设计增加一种“捉摸不定”的感觉，它带来一种视觉上的新鲜感，同时，也为网页增加了怀旧的魅力。

使用纹理的TIPS

虽然纹理的使用带来很多好处，但与此同时，使用时也有很多需要注意的陷阱。

保持易读性

易读性是一个网页必须要维持的底线，就算是做得再漂亮的网页，如果易读性不佳，用户也不会继续使用下去。一定要避免就像如下图所示的这种情况。

有节制的使用纹理

在印刷品设计时，纹理效果通常都比较夸张。而在网页中，我们就需要有所节制，不要大面积的使用，以免干扰到用户对主要内容的注意力。

练习就是升级

在使用纹理时，多进行尝试。只有经过试用后，你才知道最终效果。把纹理放置于你不曾想到的地方，也许就会有不同的发现。

有目的性地使用它

在为实际项目进行设计前，你也需要大量的练习。通常，我们在习作时，往往会因为某个纹理好看就用上。这不利于设计的最终目的。如果你无法判断这个元素为何使用纹理的目的，那就放弃这样做。

有目的性且意味着有重点，它的出现是为了烘托主题。如果过度使用造成抢镜的情况，那么也要放弃纹理。同时，我建议尽量使用比较弱的纹理图案，若隐若现，这样的效果会让纹理的优势发挥更好。

为最终效果服务

经验告诉我们，设计时玩纹理玩得过火是常有之事，而时刻记得最终我们要实现的效果就能克服这一点。比如，我们设计一个网页，运用上满意的弱纹理背景后，如果已经符合了最终效果，那就继续设计下一个元素。

平时收集资源

为了在设计时节省大量时间，相信我，在平时做好后备资源是最好的解决方式了。那种下载、收集资源的时间如果用于设计过程，恐怕会让你面临时限的压力。

使用蒙版

纹理可以结合蒙版一起使用，可以创作出更多的新奇效果。

不要为了缩短加载时间而在纹理品质上打折扣

有很多缩短页面加载时间的办法，因此，纹理还是要保持高保真。使用无缝的重复小图案作为纹理平铺开来是最佳的选择，这样就能避免了大的图片加载。

使用纹理的理由

当然，选用某个纹理，尽量选择和你整个设计存在某种内部联系的纹理。就好像我在该篇文章中的一个例子，钓鱼俱乐部的网站，那么他们就大量使用了船木作为背景纹理。

网页设计之色彩学问

网页设计涉及到的技术至关重要，它实质上更多的是一门艺术。出色的网页设计能够给用户留下深刻的印象，包括整个页面的布局，图片展示以及内容编辑等，都影响着用户对网页的评价，但是所有的网页元素设计都离不开色彩的搭配学问，因为网站的整体格调，版面效果等是由颜色决定的，也是用户产生视觉共鸣的第一要素。

我们经常所说的一个新颖充满创意的网页往往不是因为它真的有多特别，而是因为它用色彩搭配改变了人们对它的整体印象，带给用户的视觉冲击力极强引起的惊叹。有时候，光有一个不错的设计形态是很难得到用户的肯定的，只有用色彩方案赋予网页该有的品质才是一个好的网页设计。

[图片1]

色彩搭配虽然是一种抽象的东西，但它对于网页设计来说并不是那么困难，相信大多数用户对某种网站的主题和颜色的印象已经形成了一种定向，搭配起来容易得多。即使没有足够的理论知识和经验，甚至是色感，只要遵循以下几个方面，就可在网页上运用自如。

网页配色选择

用户对颜色的认知绝大多数是类似的，无论是哪一类的网页，如果太过花哨不仅不会带给用户视觉的享受，还会干扰视觉，那么很明显，网页在显眼的颜色方面配色最好不要超过三种，以免造成页面视觉体验的混乱。

许多人认为不懂颜色搭配，就应找专业的颜色搭配来参考，从网络上搜集大量的配色工具来帮助设计，事实上这种方式会阻碍配色思维的发挥，甚至被误导。

对于主色，只要选择色相差异明显的，在对比色、临近色、冷暖色调之间能够达到互补就可以了，或者在自己选择好的主色中参考类似网站案例，就可以简单完成配色。

灵活运用色调变换技巧

在选择的颜色当中，善用透明度、柔光，颜色加深等方法来调试颜色的搭配，哪怕只选择黑白色，也可通过这种方式让颜色看起来不失光彩。

给颜色加上特效

颜色特效包括阴影，扭曲渐变，高光，线条映衬等，注重颜色的细节往往还是配色的成功之道，颜色种类尽管单调，但在特效上运用得当，也能彰显网页艺术特性。

当然，在网页设计选择色彩之前，一定要先综合考量网站的特性，前期工作固然不可忽略，免得最终设计的效果与用户的期待不相符，造成用户体验不佳的结果。

说到这个，也即是网站的定位和受众目标的考虑，例如:科技类的网站用户印象中都是充满神秘的，那么黑色，蓝色估计是比较容易接受的网站风格，最好迎合用户的认知习惯;再如，生态环保类网站，用户可能首先想到的是绿色，那就不能选择出入太大的颜色作为主色调。

网页设计配色学问，说难不难，说其容易也不简单，选择对的颜色搭配或许是成功的一半，它能抓住用户对网站的第一感觉，传递信任感，让用户更容易记住。

网页色彩搭配的技巧

文章写到这里，有心急的网友要问了:"到底用什么色彩搭配好看呢?你能不能推荐几种配色方案?"别急，这里有一点技巧，可以帮助你迅速成为调色大师:)

1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将 色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。

2.用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。

3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿;或者土黄，土灰，土蓝。确定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中选择"自定义"，然后在"色库"中选就可以了:)

4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。

在网页配色中，忌讳的是:

1.不要将所有颜色都用到，尽量控制在三种色彩以内。

2.背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容