在现代生涯中，有一些根本的设法主意根深蒂固，乃至我们很难发明它们的广泛性而且熟视无睹。“模块和法式”的概念-样式重 复的规矩构建块，当联合在一路时会发明出一个有序的整体一对我们的信 息时期的生涯的渗入渗出度要远高于其对我们的祖先在由Eli Whitney等制作业创造家提议的工业革命时期的生涯的渗入渗出度。

跟着工业世界变得越来越庞杂，19 世纪中期的文档设计者们开端将模块法式运用到报纸、产物目次、财政管帐以及其他的出书物中，现代页面样式出生了。在20世纪早期，Bauhaus 设计师们采取视觉逻辑元素-一这是由Gestalt知觉心理学家发明的，那些德国和瑞士设计师发明了现代图形设计)。

图形设计的重要目标在于:

●创立个清楚的视觉比较层级， 如许就可以一 眼看清什么是主要的 以及什么是次要的。

●为页面界说功效区。

●对相干的页面元素进行分组，如许就可以看清内容的构造。

●一个简略的页面网格可以确立离散的功效区域，适度的负空间(negative space)界说了页面的图形配景关系。应用页面样式的常见原则来设计页面，用户可以随意马虎地猜测重要内容和功效元素的地位。

●拥挤的页面会因为创立了视觉纹理的隐约区域而让页面的图形配景关系变得凌乱，其比较少而无法吸引阅读者的眼球，地标过少会晦气于用户懂得内容组织构造。

●拥挤的元素同时也造成了1 + 1=3的后果，增长了视觉凌乱。

●在为菜单列表、内容列表、页面题目图形以及其他设计元素设计HTML和CSS时，要时常斟酌在页面，上创立的图形的间距、分组、类似性以及整体视觉逻辑，如许能力轻易地供给清楚的构造，而不是让人感到凌乱的细节。

邻近以及同一-的连贯性是页面设计中功能最壮大的Gestalt原则；在界说区城中经由分类的元素是内容模块和“分块”收集内容的基本，以便轻松阅读。一个组织优越且内容分类清楚的页面，用户一眼看去便可知道内容是若何组织的，它树立起了内容模块单位，进而构成了贯串全部网站的各页面的可预感模式示。

一致性

创立一个用来处置文本和图形的结构网格和样式，然后一向应用该样式来创立贯串网站页面的节拍和一致性。反复并不会令人腻烦；反复让你的网站拥有了一致的图形形象，它创立并增强了明显的“空间”感，网站会让人过目难忘。结构和导航采取一致性的方法，会让用户快速顺应网站的设计并能自负地猜测网页信息的地位以及导航控件的地位。

假如选择了一个图形主题，那么请将其贯串于全部网站。Hiram 学院网站首页横幅告白为网站设立了图形主题，并惹人了奇特的版式以及一系列导航标签。留意版式和导航主题是若何传递到内部的横幅告白的。在阅读全部网站时，你不会发生“这是谁的网站”的迷惑。

比较

图形设计的重要义务是创立一个强有力的、一致的视觉层级后果，个中，主要元素会突显，内容也是以逻辑且可猜测的方法进行组织的。图形设计是对视觉信息的治理，应用页面设计对象、版式以及插图来引诱读者进行页面阅读。读者起首会把页面算作是图形和色彩的集合体，包括着远景元素与配景的比较。然后，他们开端遴选特定信息，起首从现有的图形开端，而且在这之后，他们才会开端剖析更难的文本序言并开端浏览单个的词语和段落。

整体的图形均衡和页面的组织对吸引读者浏览网站内容至关紧要。一个满是文本的页面会因为其毫无差异的灰色而将读者拒之门外，如许的网页没有对信息架构的显著提醒。一个设计不精或者充满着过于能干的图形或版式的页面，也会导致用户损失追求实效性内容的兴致。你须要经由过程应用适当的相邻物、分组、图形配景关系以及题目比较中的变更，到达应用视觉比较吸引读者眼球并供给一个清楚的架构之间的均衡。视觉均衡和恰当性对预期的不雅众而言，是胜利的设计决议的症结。对通俗不雅众而言，最有用的设计就是应用相对小的图形来实现文本和链接之间的谨严均衡。这些页面不仅可以或许快速下载，并且还拥有异常本质的图形后果。

1.版式中的色彩和比较

色彩和比较是通用可用性的症结构成部门。文本的可读性取决于读者区分字体和配景的才能。色彩变更重要取决于通亮度和饱和度。白色配景上的黑色文本拥有最强的比较度，这是因为黑色没有通亮度而白色是全明度。色调也是一个身分，诸如蓝色和黄色如许的互补的色彩，会发生最强的比较。确保色彩选择不会让读者难于区分文字和配景。同时，万万不要忘却差不多有10%的男性读者在区分精致的红绿色暗影时有必定艰苦。

2.比较的可变性

应用移动装备显示的网页，平日会因移动情况而做出妥协:小屏幕，小字号，缺少幻想的屏幕分辩率和色彩，假如在户外情况下，阳光或其他照明装备所发出的光还会下降网页的可读性。现实上，许多的便携式电脑的显示屏并不克不及显示很好的色彩差异或明暗度差异，经由过程电脑投影仪看到的页面上的色彩平日也会变淡。请应用分歧的装备和便携式电脑，并在分歧的情况中检测你的设计，尤其是当你应用奥妙的色彩来界说主要的页面功效或内容的时刻。总的来说，最好采取一个更有用、高比较度的版式色彩计划。

3.避免过度比较

程度标尺、润饰性图形项目符号、明显的图标，以及其他视觉标识，都拥有各自的特别场所的用处，不外每一-样都要尽量地罕用(假如真要用的话)以避免涌现不折衷及凌乱的样式。图形强调对象十分壮大，应该只是少量应用以获取最年夜的后果。过度应用图形增强后果将发生“小丑裤子”(矫枉过正)的后果，即所有的一切都是那么夸耀，反而没有任何重点可言了。

从年夜天然中遴选出来的色彩调板几乎是绝对靠得住的色彩调和的领导，尤其是当你并非一个受过练习的图形设计师的时刻。奥妙的、不饱和度的色彩是配景或次要元素的最佳选择。避免应用能干的、高饱和度的红色、黄色、蓝色，除非在针对最须要增强的区域，但即就是这时也应谨严应用。

空白区域

现今，我们拥有更年夜的显示屏以及更为庞杂的图形界面，是以你的网页很可能会与许多其他窗口和桌面元素共享.个显示屏。 请应用空白区域以避免让阅读器窗口的边沿挤满了页面内容的主要元素。在固定宽度的结构中，可以斟酌将页面德存在阅读器窗口的中心。假如你的页面宽度合理，这种办法将会让你的页面看上去有视觉放松的后果，即就是在一个拥挤的电脑显示屏上，如图7-13a所示。对“弹性的”结构而言，可以斟酌应用90% ~ 95%的屏幕年夜小的页面来代替100%的全屏页面，让页面功效区域四周留些配景以到达视 觉放松的后果，避免与阅读窗口外的元肃互相感化发生不胜利的“1+ 1=3”的后果。

有助于将页面内容从显示屏上的其他法式和窗口的“嘈杂声”中隔离出来所有的图形设计从基本上而言都是对空白区域(页面上所有图形元素后面的配景)的治理。要想懂得图形设计，你须要去体会，页面元素四周的配景区域是与页面上任何图形元素一样有用且主要的设计部门。将页面上的空白区域填满就比如抽闲了一个房间的所有氧气一这或许是对空间的一一种有用运用方法，但毫无疑问这是很难让人习惯的。

样式

不要想着为你的网站开辟一个“样式”，在惹人另一网站或是印刷品的图形元素来装潢你的页面时也要谨严。在对内容和页面结构进行一致和适当的处置时，网站的图形和编纂样式也应跟着这一天然的进程有所演化。多应用传统而非怪僻的作风，毫不要让框架压服了内容，并记住最好的样式就是读者永远不会留意到的样式一每样器械都让人感到那么有逻辑且舒畅(甚至是英俊)，而笨手笨脚的设计毫不会让用户拥有如许的体验。

简略

所有效户都邑受益于清楚且致的网站设计，而对某些用户而言这至关主要。对于那些缺少空间线索，应用彻底分歧且须要针对每个站点从新进修的导航方法，有视觉障碍的用户会很轻易发生凌乱或者在网页中迷掉。对那些在认知上出缺陷的人而言，诸如记忆或进修有障碍的人，这一难度会被放年夜许多倍。