根蒂根基网站视觉设计

在现代糊口中，有一些基本的设法根深蒂固，乃至咱们很难发现它们的广泛性而且熟视无睹。“模块和程序”的观点-样式重 复的规则构建块，当连系在一块儿时会缔造出一个有序的总体一对咱们的信 息时代的糊口的浸透度要远高于其对咱们的祖先在由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”的成效。

有助于将页面内容从显示屏上的其余程序和窗口的“喧闹声”中隔离出来一切的图形设计从基本上而言都是对空缺区域(页面上一切图形元素后面的背景)的管理。要想了解图形设计，你需求去体会，页面元素周围的背景区域是与页面上任何图形元素同样有用且首要的设计部分。将页面上的空缺区域填满就比如抽暇了一个房间的一切氧气一这或许是对空间的逐个种有用应用体式格局，但毫无疑难这是很难让人习气的。

样式

不要想着为你的开发网站一个“样式”，在惹人另外一网站或是印刷品的图形元夙来装饰你的页面时也要慎重。在对内容和页面规划进行一致和得当的处置时，网站的图形和编纂样式也应跟着这一天然的过程有所蜕变。多运用传统而非乖僻的气势派头，毫不要让框架压倒了内容，并记住最好的样式就是读者永远不会注重到的样式一每样东西都让人觉得那末有逻辑且惬意(以至是大度)，而笨手笨脚的设计毫不会让用户领有如许的体验。

简略

一切用户城市受益于明晰且致的网页设计，而对某些用户而言这相当首要。对付那些不足空间线索，运用完全差别且需求针对每一个站点从头进修的导航体式格局，有视觉障碍的用户会很容易发生紊乱或者在网页中迷失。对那些在认知上有缺点的人而言，诸如记忆或进修有障碍的人，这一难度会被放大不少倍。