基础网站视觉设计

发布：2018-10-28 16:45:40 浏览：3882

在现代生活中，有一些基本的想法根深蒂固，以致我们很难发现它们的普遍性并且熟视无睹。“模块和程序”的概念-样式重复的规则构建块，当结合在一起时会创造出一个有序的整体一对我们的信息时代的生活的渗透度要远高于其对我们的祖先在由EliWhitney等制造业发明家发起的工业革命时代的生活的渗透度。

随着工业世界变得越来越复杂，19世纪中期的文档设计者们开始将模块程序应用到报纸、产品目录、财务会计以及其他的出版物中，现代页面样式诞生了。在20世纪早期，Bauhaus设计师们采用视觉逻辑元素-一这是由Gestalt知觉心理学家发现的，那些德国和瑞士设计师创造了现代图形设计)。

图形设计的主要目的在于:

●创建个清晰的视觉对比层级，这样就可以一眼看清什么是重要的以及什么是次要的。

●为页面定义功能区。

●对相关的页面元素进行分组，这样就可以看清内容的结构。

●一个简单的页面网格可以确立离散的功能区域，适度的负空间(negativespace)定义了页面的图形背景关系。使用页面样式的常见原则来设计页面，用户可以轻易地预测主要内容和功能元素的位置。

●拥挤的页面会因为创建了视觉纹理的模糊区域而让页面的图形背景关系变得混乱，其对比少而无法吸引浏览者的眼球，地标过少会不利于用户理解内容组织结构。

●拥挤的元素同时也造成了1+1=3的效果，增加了视觉混乱。

●在为菜单列表、内容列表、页面标题图形以及其他设计元素设计HTML和CSS时，要时常考虑在页面，上创建的图形的间距、分组、相似性以及整体视觉逻辑，这样才能容易地提供清晰的结构，而不是让人感觉混乱的细节。

相近以及统一-的连贯性是页面设计中功效最强大的Gestalt原则；在定义区城中经过分类的元素是内容模块和“分块”网络内容的基础，以便轻松浏览。一个组织良好且内容分类清晰的页面，用户一眼看去便可知道内容是如何组织的，它建立起了内容模块单元，进而组成了贯穿整个网站的各页面的可预见模式示。

一致性

创建一个用来处理文本和图形的布局网格和样式，然后一直使用该样式来创建贯穿网站页面的节奏和一致性。重复并不会令人厌烦；重复让你的网站拥有了一致的图形形象，它创建并加强了显著的“空间”感，网站会让人过目难忘。布局和导航采用一致性的方式，会让用户快速适应网站的设计并能自信地预测网页信息的位置以及导航控件的位置。

如果选择了一个图形主题，那么请将其贯穿于整个网站。Hiram学院网站首页横幅广告为网站设立了图形主题，并引人了独特的版式以及一系列导航标签。注意版式和导航主题是如何传递到内部的横幅广告的。在浏览整个网站时，你不会产生“这是谁的网站”的困惑。

对比

图形设计的主要任务是创建一个强有力的、一致的视觉层级效果，其中，重要元素会突显，内容也是以逻辑且可预测的方式进行组织的。图形设计是对视觉信息的管理，使用页面设计工具、版式以及插图来引导读者进行页面浏览。读者首先会把页面看成是图形和颜色的聚集体，包含着前景元素与背景的对比。然后，他们开始挑选特定信息，首先从现有的图形开始，并且在这之后，他们才会开始分析更难的文本媒介并开始阅读单个的词语和段落。

整体的图形平衡和页面的组织对吸引读者阅读网站内容至关紧要。一个全是文本的页面会因为其毫无差别的灰色而将读者拒之门外，这样的网页没有对信息架构的明显提示。一个设计不精或者充斥着过于醒目的图形或版式的页面，也会导致用户丧失寻求实效性内容的兴趣。你需要通过利用恰当的相邻物、分组、图形背景关系以及标题对比中的变化，达到使用视觉对比吸引读者眼球并提供一个清晰的架构之间的平衡。视觉平衡和适当性对预期的观众而言，是成功的设计决定的关键。对普通观众而言，最有效的设计就是使用相对小的图形来实现文本和链接之间的谨慎平衡。这些页面不仅能够快速下载，而且还拥有非常实质的图形效果。

1.版式中的颜色和对比

颜色和对比是通用可用性的关键组成部分。文本的可读性取决于读者区分字体和背景的能力。颜色变化主要取决于明亮度和饱和度。白色背景上的黑色文本拥有最强的对比度，这是因为黑色没有明亮度而白色是全明度。色调也是一个因素，诸如蓝色和黄色这样的互补的颜色，会产生最强的对比。确保颜色选择不会让读者难于区分文字和背景。同时，千万不要忘记差不多有10%的男性读者在区分精细的红绿色阴影时有一定困难。

2.对比的可变性

使用移动设备显示的网页，通常会因移动环境而做出让步:小屏幕，小字号，缺乏理想的屏幕分辨率和颜色，如果在户外环境下，阳光或其他照明设备所发出的光还会降低网页的可读性。实际上，很多的便携式电脑的显示屏并不能显示很好的颜色差别或明暗度差别，通过电脑投影仪看到的页面上的颜色通常也会变淡。请使用不同的设备和便携式电脑，并在不同的环境中检测你的设计，尤其是当你使用微妙的颜色来定义重要的页面功能或内容的时候。总的来说，最好采用一个更有效、高对比度的版式颜色方案。

3.避免过度对比

水平标尺、修饰性图形项目符号、显著的图标，以及其他视觉标识，都拥有各自的特殊场合的用途，不过每一-样都要尽量地少用(如果真要用的话)以避免出现不调和及混乱的样式。图形强调工具十分强大，应当只是少量使用以获取最大的效果。过度使用图形加强效果将产生“小丑裤子”(过犹不及)的效果，即所有的一切都是那么炫耀，反而没有任何重点可言了。

从大自然中挑选出来的颜色调板几乎是绝对可靠的颜色协调的向导，尤其是当你并非一个受过训练的图形设计师的时候。微妙的、不饱和度的颜色是背景或次要元素的最佳选择。避免使用醒目的、高饱和度的红色、黄色、蓝色，除非在针对最需要加强的区域，但即便是这时也应谨慎使用。

空白区域

现今，我们拥有更大的显示屏以及更为复杂的图形界面，因此你的网页很可能会与很多其他窗口和桌面元素共享.个显示屏。请使用空白区域以避免让浏览器窗口的边缘挤满了页面内容的重要元素。在固定宽度的布局中，可以考虑将页面德存在浏览器窗口的中央。如果你的页面宽度合理，这种方法将会让你的页面看上去有视觉放松的效果，即便是在一个拥挤的电脑显示屏上，如图7-13a所示。对“弹性的”布局而言，可以考虑使用90%~95%的屏幕大小的页面来取代100%的全屏页面，让页面功能区域周围留些背景以达到视觉放松的效果，避免与浏览窗口外的元肃相互作用产生不成功的“1+1=3”的效果。

有助于将页面内容从显示屏上的其他程序和窗口的“嘈杂声”中隔离出来所有的图形设计从根本上而言都是对空白区域(页面上所有图形元素后面的背景)的管理。要想理解图形设计，你需要去领会，页面元素周围的背景区域是与页面上任何图形元素一样有效且重要的设计部分。将页面上的空白区域填满就好比抽空了一个房间的所有氧气一这或许是对空间的一一种有效应用方式，但毫无疑问这是很难让人习惯的。

样式

不要想着为你的网站开发一个“样式”，在引人另一网站或是印刷品的图形元素来装饰你的页面时也要谨慎。在对内容和页面布局进行一致和恰当的处理时，网站的图形和编辑样式也应随着这一自然的过程有所演变。多使用传统而非古怪的风格，绝不要让框架压倒了内容，并记住最好的样式就是读者永远不会注意到的样式一每样东西都让人感觉那么有逻辑且舒服(甚至是漂亮)，而笨手笨脚的设计绝不会让用户拥有这样的体验。

简单

所有用户都会受益于清晰且致的网站设计，而对某些用户而言这至关重要。对于那些缺乏空间线索，使用彻底不同且需要针对每个站点重新学习的导航方式，有视觉障碍的用户会很容易产生混乱或者在网页中迷失。对那些在认知上有缺陷的人而言，诸如记忆或学习有障碍的人，这一难度会被放大很多倍。