网站界面设计基础

网页包括：网站logo，导航栏，banner，内容栏，版尾。

logo的大小标准：88*31普通规格；120*60一般大小规格；120*90大型logo。

好logo所具备的条件：符合国际标准，精美独特，兼容网站风格，能提现网站类型。

导航栏是索引网站内容和快速访问所需内容的辅助工具。同级项目数以3~7项为宜。

banner是可由图像，文字，动画结合而成的网页栏目。主要作用是展示网站广告。

内容栏是网页内容的主体，由一个或多个子栏组成，包含网站提供的所有信息和服务项目。内容可以是文字，图像，或者两者相结合。

版尾可以申明版权，法律依据，以及各种提示信息。版权的书写应符合所在国家的法律依据，以及遵循一般书写习惯。

除此之外，版尾处可以提供一个导航条，为将页面滚动到底的用户提供一个导航方式。

成功的网页版式设计，有助于吸引用户对网页的注意，增进用户对内容的理解。因此，要使网页具有诱导力，突出诉求主题，就要通过对版式的空间层次，主从关系，视觉秩序，以及逻辑条理性的把握和运用来共同完成。

传统媒体是以线性方式提供信息，即根据信息提供者个人感受来传播。在web环境下，用户不再是被动接受者，而是以一个主动参与者的身份加入到信息的加工处理发布之中。

网页媒体使用的交互性，多维性，和多种媒体的综合应用，是网页版面设计的完美体现。即时的交互性是web成为热点的原因，也是版面设计需要考虑的问题。

多维性源于超链接，主要体现在导航的设计上。使用超链接，网页的组成结构会更加丰富。用户可自由切换，打破了传统的线性接收方式。但需注意页面之间的关系不能太复杂，这会给用户带来负担。

网页中所使用的多媒体视听元素主要有文字，图像，声音，视屏等。运用这些元素，可以满足和丰富用户的多种感官需求。

网页设计的装饰应该简洁化，功能与装饰应有效结合。复杂的装饰会影响加载速度，影响点击率。

网页设计要遵循和谐，均衡，重点突出的色彩规则。当人们的色彩经验与外界色彩刺激发生呼应，就会在心理上引发强烈的情绪。

1.网页的标题设计

好的标题设计可令人赏心悦目，能形成网页的整体风格。标题所在的栏目一般在网页的上方，并左右贯穿整个网页。标题的背景可以使用动态或静态的图片，主要由网页的交互式特性决定。

2.文字的编排

通常情况下，适合网页正文显示的文字大小在12磅左右。然而，在很多综合性网站中，由于在一个页面中安排的内容较多，字号通常采用9磅。

在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。从加强平台无关性的角度来考虑，正文最好采用默认字体。如果必须用到特殊字体，那么可以将文字制成图片。

通常字号与行距的比例应为：字号8点，行距10磅.即8：10.但对于一些特殊的版面而言，字距与行距的加宽或紧缩，更能体现主题的内涵。所以说字距和行距不是绝对的，得根据实际情况而定。

强调文字有三种常见形式：第一种是行首强调，又称为下坠式，有吸引视线、装饰和活跃版面的作用；第二种是引文强调，引文概括了一个段落、章节或者全文的大意，所以需要给予特殊位置来强调；第三种是个别文字强调，将个别文字作为页面的诉求重点，可以通过加粗、加下划线等强化文字的视觉效果。

3.图文的结合

在网页的版式设计中只应用文字也不适合人们长期阅读，所以网页在版式上采用图文结合的方式更为恰当。

图文结合主要有两种表现形式：1.文字匹配图片的形式，图形是网页的主体，文字是辅助存在。2.图形匹配文字的形式，要把握图形和文字的关系，根据不同类别的网站灵活搭配。

4.页面的节奏韵律

页面的韵律需要根据设计的风格和受众情感综合起来体会。一个音乐类的网站，给人的感觉是轻松欢畅的；一个新闻类网站，给人的感觉是快速律动的；而一个军事类网站给人的感觉是严肃庄重的。所以这就需要设计者根据内容来选择设计风格。

网页设计如果仅从网页版式构成进行分类，则主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型以及自由型十种。

1.骨骼型：是一种规范的、理性的设计形式，类似于报刊的版式。常见的骨骼有竖向和横向的通栏、双栏、三栏、四栏等。一般以竖向分栏为多，这种版式给人以和谐、理性的美。几种分栏方式结合使用，会使网页既有条理又有弹性。

2.满版型网页：以图像充满整版。页面主要以图像为诉求点，将少量文字嵌于图像之上，视觉传达效果直观而强烈。多见于强调艺术性或个性的网页设计中。美中不足的是，它对网络宽带有着一定要求。

3.分割型：把整个页面分为上下或左右两部分，分别安排图片和文案。令部分形成鲜明对比：有图片的部分感性而具有活力，文案部分则理性而平静。

4.中轴型：沿着页面的视觉中轴将图片或者文字进行水平或者垂直方向的排列。水平排列的页面，给人稳定、平静、含蓄的感觉；垂直排列的页面，给人舒畅的感觉。

5.曲线型：将图片或文字在页面上作曲线的编排，这种编排方式能产生韵律感与节奏感。

6.倾斜型：将页面主题形象或多幅图片、文字进行倾斜编排，从而造成页面强烈的动感，引人注目。

7.对称型：页面版式给人以稳定、严肃、庄重、理性的感觉。它分为绝对对称、相对对称以及四角形三种。一般采用相对对称的手法，避免版式呆板。而四角形对称手法是在页面四个角安排相应的视觉元素，这种构成方式也能很好使页面产生安定感。

8.焦点型：通过对视线的诱导，使页面具有强烈的视觉效果。常见的几种方式有：一是将对比强烈的图片或者文字置于页面视觉中心；而是视觉引导浏览者视线向页面中心聚拢，形成向心的版式；三是视觉元素引导浏览者视线向外辐射，形成离心的网页版式。

9.三角型版式：网页视觉元素是三角型排列。正三角形具有最稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又有动感。

1.缺乏主色调

在网页经常可以看到这样的网站，元素色相众多，令人眼花缭乱，给人一种复杂混乱的视觉效果，使访问者无法明确地识别重点内容。

这是一个国外从事汽车产业方面的公司，所以在页面上方选用了和网页同色系的一辆红色跑车，这是网页上的一处亮点。深浅不同的灰色对整个网页的区域进行了划分。整个网页版式设计条理清楚，色彩简单不呆板，体现了工业产品的特点。

这是松下家电制造公司的网站。以金属灰为主色调，与家电产品的主体相吻合。页面采取了一分为二的设计，上半部分展示公司的各大产品，下半部分主要是子目录，其中包括新闻、其他产品、广告等等。

2.文字能见度低

网页上的色彩或者图片通常结合在一起，要么成为文字的背景色，要么成为文字本身的颜色，这就出现了文字的色彩的对比问题。对浏览者来说，最重要的是文字，因此，画面色彩运用就必须注意文字的可识别性，也就是文字的易见度。

.在高明度的背景上，低明度的文字易于识别，如果背景和文字名都接近，就容易出现难以辨别的问题，如遇到图文叠印的网页，文字可以采用白色或者反白色处理；或者使用与背景同色系，不同饱和度的方式来处理。

3.增加视觉负担

网页配色要尽量少用视疲劳度高的色调，一般来说，高明度、高纯度的颜色刺激强度高，疲劳度也大。无色系中，白色的明度最高，黑色明度最低；有色系中，最明亮的是黄色，最暗的是紫色。

用明度太高的色彩作为背景看起来很刺眼，所以设计师们要尽量减少高明度背景的使用。反之，使用少量的高明度颜色作为点缀，会大大激发浏览者的探究欲望。

1.人性化

网页设计在遵从艺术规律的同时，还要考虑到人的心理特点。色彩搭配合理，则给人一种和谐、愉快的感觉，因此应避免采用高纯度、刺激性强的单一色彩，否则容易造成视觉疲劳。

这是一个休闲游戏的网站，连接每组连接点都绘制出一个完整的图案。绿色和黄色的搭配让游戏者看着很舒服，搭配一个简单的按钮，让网页看起来比较人性化。

艺术源于生活，又高于生活，通常情况下，生活中常见的东西没有必要在网页上再次重复。人的感觉是喜新厌旧的，总会偏向于一些新奇的东西，因此，一个新奇的创意或者有感染力的色彩，平面构成会更勾起访问者的兴趣。

这是一个阿根廷漫画家的个人网站，很有生活创意。作者有着新奇的想象力和出色的构成表现能力。虚拟与现实相结合，将漫画家的生活进行了记录，生动有趣。

2.符合网站风格和主题

不同类型的网站就要使用不同的色彩和视觉元素，达到内容和形式上的统一，这样做更符合人们的认知习惯。

例如珠宝首饰类的网站就要使用看起来贵重、豪华的配色，如黑色、金色。总让人联想到财富，黄金。遇到购物类等女性网站可利用粉色来表达女性站点的柔美性。

3.个性鲜明

每个网站都有自己独特的个性和气质，缺乏个性就很难让访问者记住这个网站，千篇一律的设计只能让浏览者感到乏味。通过色彩组合以及元素构成能很好的实现网页的个性化。

法国DJECO玩具设计工作室主要以设计儿童玩具为主营业务，DJECO设计工作室网站场景设计温馨精美，强烈的儿童插画风格与儿童玩具的设计定位扣合。网站风格活泼可爱，站点的亮点是极具特色的动画元素设计，在整站中起到了非常好的点缀作用。