2024年网页的设计法则 篇1
平面设计的三个法则是什么？
有朋友说间距、对齐、留白。
有朋友说色彩、图形、版式。
有朋友说三大构成。
有朋友说虚实、排斥/吸引、间距
.........
我说，这些都是平面设计需要注意的东西，但都还够不上成为法则的档次，更谈不上经典二字。
言归正传，我所知道的平面设计最基本的三大经典法则是：Van de Graaf canon——范德格拉夫标准（注意，canon是标准的意思，可不是你家的打印机。）
golden section——黄金分割比例
Fibonacci Sequence——斐波那契数列
罗列出这三个名称之后，可能有朋友会纳闷，第一个范德格拉夫标准知道的人不多，黄金分割跟美术、建筑、音乐等等艺术行业扯得上关系，跟平面设计自然也联系得到一起，可斐波那契数列是个什么鬼？它就是数学专业中的一个数列而已，怎么会跟艺术类的平面设计扯上关系？其实它们的关系大了去了，且听我依次慢慢道来！一、Van de Graaf canon——范德格拉夫标准
传说，在书籍装帧设计中，有一种排版方式可以创造出“完美”的书籍，20世纪最伟大的设计宗师Jan Tschichold（扬·奇肖尔德）称之为“A method to produce the prefect book”。这个方法就叫Van de Graaf canon，从名称中不难看出，这个标准的发明人就叫Van de Graaf（范德格拉夫），全名叫J. A. van de Graaf。我学设计的时候，老师讲授这段课程时也仅仅只是提到名字，至于国籍、生卒年月、学历、成就等等都无从考证，这么多年我也多次在网络上查找过，但都没有结果。唯一知道的是，在欧洲中世纪时期，这种Van de Graaf canon已经开始流传并被广泛使用。我们现在接触的这条法则，包括它的版式参考线方式，都是Jan Tschichold加以整理并在在他自己的书《书籍的形式》中进行推广的。
在《书籍的形式》中，Jan Tschichold是这样说的：“页面比例2：3。页边距比例1：1.5：2：3”，他的这句话是根据欧洲中世纪手稿中的一张比例图得来的，这张比例图就是下面这个样子：
咋一看，不明所以。没有标注任何尺寸或者比例关系，很难明白所谓的2：3或1:1.5:2:3是什么概念。好在Jan Tschichold整理出了一张更直观的比例图，如下：
在这张图中，我们假设矩形ABCD是一本翻开的书，分左右两个页面，即ASED是一个页面，BCES又是一个页面，SE就是书的中缝。
首先我们确定的是AS：AD=2：3，即上面说到的页面比例。然后连接矩形ABCD的两条对角线（红色线），接下来连接AE和BE（绿色线），这个时候AE就会交BD于点H，BE交AC于F点，然后过F点做垂线垂直于CE，垂足为G点（深蓝色线），连接GH交BE于点T（紫色线），过T点做水平线交AC于J点，过J点做垂直线交BE于K点（浅蓝色线）。通过这一连串的划线，我们就可以确定T、J、K三个点的位置了，然后过这三个点做矩形TJKL，用同样的方法也可以做出左边的矩形MNOP（灰色区域），这两个矩形就是我们在版面设计中可以放文字和图片的区域，其他区域则是留白的区域。
这个时候我们观察矩形TJKL四周的留白就会发现，左右之比是2:4的关系，上下之比是3:6的关系，即左:上:右:下=2:3:4:6=1:1.5:2:3，这个比例就是上边说到的页边距比例。
这个时候有朋友就会质疑了，实际运用中，不可能画这么一大堆线条来确定版面比例吧。当然不会，因为我说过，这是Van de Graaf canon的标准比例图，大多数时候是用于理解学习这个概念的，实际运用中，我们有一个更简便的方法可以操作。
在这张图中，我们不用复杂的去绘制那么多的线条。我们只需要随手画一个矩形，然后复制出一个9X9阵列，然后拉动这个阵列让他布满一个宽高比为2:3的页面，上边留一行，下边留两行，右边留一列，左边留两列，中间灰色部分就是我们需要确定的放置内容的区域。（这张图片是书籍左边页面的比例，如果是右边的页面，则将左右留白对调一下即可。）
讲到这里，其实Van de Graaf canon已经讲得很清楚了，它就是一个确立版面内容与留白占比的法则。通过这个法则，一方面我们可以得到一个放图片和文本的区域，而这个区域从视觉上来说，应该是视觉汇集的主要区域，这样的位置和比例，能够让读者看着很舒服。另一方面，也是Van de Graaf canon法则诞生的初衷——书刊设计需要考虑读者在阅读时的情景，摊开的书刊，最左边、最右边和下边留白更多，这些位置恰恰也是读者拿书时手指会放置的位置，如果留白过少，手指可能就会遮挡一部分内容，不方便阅读（如果有朋友要抬杠说我不拿着书看，我放桌子上看呢？那我也无话可说了）。
需要注意的是，首先，Van de Graaf canon仅仅只是给我们提供了一种版面设计的方式，并不是说任何版面设计都必须要使用这一法则。其次，也并不是说在一本书刊设计中，使用了这一法则，就必须要在每个页面中都使用。同时，我们在使用了这一法则以后，也并不是说图片或者文字必须要放在这个框内，留白区域一定就不能放东西，其实这些都是灵活运用的，在这个基础上破而后立才叫灵活运用，最后，Van de Graaf canon诞生的初衷只是为了设计更合理的书籍，Jan Tschichold在推广这一法则时也主要是针对书籍设计，但其实这一法则不仅仅只能用于书籍设计，在今天的设计行业中，很多版面我们都可以使用这个法则，比如海报等。有些时候，作为设计师，我们在软件中建立好画布，对着空白的画布大脑也一片空白，无从下手，这个时候我们不妨先画画这个比例图，也许在这个过程中，我们的思路就打开了！二、golden section——黄金分割比例
说到黄金分割比例，恐怕上过两天学的人都能说的上来，至少0.618这个数字都能说得出来！
某百科词条对黄金分割的定义是：将整体一分为二，较大部分与整体部分的比值等于较小部分与较大部分的比值，其比值约为0.618。这个比例被公认为是最能引起美感的比例，因此被称为黄金分割。
关于黄金分割，网上搜一下多的能让你犯密集恐惧症，所以在这里也就不再多说它了（当然，这也不是重点），我们可以聊聊在平面设计中关于黄金分割得运用，很多朋友可能在设计中运用黄金分割的时候，仅仅把它局限在了长宽高或者留白的比例分割上，其实，抛开这些运用，在色彩上我们也可以运用黄金分割。
一方面，各个色块在版面中占据的比例可以通过黄金分割来优化；
另一方面，色彩搭配也可以通过黄金分割来进行。比如一个版面，我们有基本色、主配色和强调色三种颜色，一般运用的比例大致是7：2.5：0.5到6.5：3：0.5的样子。基本色是一个版面构成的最基本元素之一，它决定了整个版面的色调，读者看到它第一眼的色彩印象，占比在65-70%之间比较舒服。主配色则能够弥补基本色的不足，同时拉开层次感，让整个版面层次分明，占比在25-30%之间不叫合适。至于强调色，则起到画龙点睛的作用，很多时候我们做出来的版面，感觉已经很协调了，色彩上面也没什么大问题，可就是感觉画面不跳，缺少一丝丝灵气，其实这个时候可能就是缺少了这么一点点强调色，有了它，拉开主次关系，很可能就能让整个版面跳了起来，占比大致在5%左右。
三、Fibonacci Sequence——斐波那契数列
关于斐波那契数列，知道的朋友可能都能说得头头是道，不知道的朋友，可能在这里一时半会儿我也给你讲不清楚，毕竟这玩意儿可是属于数学领域的东西，有兴趣的朋友可以去网上搜来看看。某百科关于斐波那契数列的解释说得就很清楚。
很多时候我们会发现，说到黄金分割的时候，必然少不了会说到斐波那契数列，说到斐波那契数列的时候，也少不了会说到黄金分割，其实两者讲的都是一个道理，只不过是通过了不同的方式表达出来而已。黄金分割是运用比例的方式阐述的，而斐波那契数列则是运用数列的方式来阐述的。
斐波那契数列是一个自然数的数列，数学上却用无理数来表达，当这个数列中的数字越多的时候，前一项与后一项的比值越接近黄金分割比（即比值越接近0.618），比如1÷1=1，1÷2=0.5，2÷3=0.666，3÷5=0.6，5÷8=0.625，55÷89=0.617977，144÷233=0.618025，46368÷75025=0.6180339886…...越到后面，这些比值越接近黄金比，所以在平面设计中，要理解了黄金分割，能够灵活运用黄金分割，其实也就算是运用好了斐波那契数列。
讲到这里，基本上也就算了讲完了。我上学时学到的和后边这么多年总结到的，所谓的平面设计最基本的三大法则就是Van de Graaf canon、golden section和Fibonacci Sequence这三个。当然，开篇说间距、对齐、留白、色彩、图形、版式、三大构成、虚实、排斥/吸引、间距等等这些东西，其实简单来说也就是这三大法则的具体体现，在这些方面运用好三大法则，很容易就能做出“高端大气上档次”，“低调奢华有内涵”的设计作品了。最后，我需要强调几点：
1、任何法则或者方法技巧，要灵活使用，不可生搬硬套，明明设计已经做好了，突然想起来我还没用黄金分割，全盘推翻从头再来，非得用一下黄金分割，这就成了笑话了！
2、在设计中，尤其是多个页面的作品，比如折页，画册，书刊等，适当的使用这些法则可以灵活版式，但切记连篇累牍的使用相同的比例关系或构图关系，尤其Van de Graaf canon，如果一整本书都采用这种方式，新颖过后就是死板，毕竟Van de Graaf canon诞生于中世纪，Jan Tschichold推荐它也是上个世纪的事了，现代社会无论是艺术设计行业，还是印刷行业亦或是人们的审美观念，都有了很大的变化，所以很多时候并不能把这类方法当做金科玉律，丝毫不差的生搬硬套。此外，Van de Graaf canon中讨论的适合放置图片或文本的那块区域，并不是说图片文字就一定非得放在那个范围内，不能越过丝毫，有些时候图片伸出来可能比死板的放在那个范围内更有灵性一些，至于空白区域，也并不是说一定就不能放别的东西，比如一些页眉、页码、图标之类装饰性大于实用性的小元素，适当的在这些留白区域点缀一下，也能起到画龙点睛的作用，总之，还是那句话，有破才有立。
3、黄金分割和斐波那契数列都是数学问题衍生出来的运用，在数学上0.618就是0.618，数学是严谨的，不能有丝毫偏差，但在艺术设计中，没必要非得跟0.618这个数字较劲，有些时候在版面设计中，0.63或者0.66等等接近于0.618都可以。比如说2:3在，做出来的画面好看，设计者就可以称这是你这个版面的黄金比例了，比如很多国家的国旗，长宽比就是2:3，也叫的是黄金比例。我曾经在培训学校见过一位学生，想到用黄金比例，就真的打开计算器算数字，精确到毫米，然后非得把图形拉到那个位置，真的没必要这样，说得好听这叫强迫症，说得难听，这就是脑子缺根弦，这样的人不适合做设计，可以尝试去研究数学类的理科专业。
4、除了设计中用到这些法则以外，其实设计师在给客户提案交稿时也能用得到，具体作用就是——装逼！经常在网上看见网友调侃，说有的客户会抱怨：“我给你出这么多钱，你给我留这么多空白”，“标志放大的同时占比小一点”“这块内容往左一点，再左一点.....多了，往右一点，哎呀，还是原来的样子吧.....”，很多时候我们仅仅只是调侃一下，把这些话当成是笑话，可有没有人思考过，如果有一天我们真的碰到这么一个客户，跟我们这样抱怨，我们怎么回复他呢？如果你告诉他这就是设计，这样设计最好看，这样的回答是不是显得苍白无力，但如果你扯上黄金分割或者斐波那契数列甚至Van de Graaf canon，很可能你这些专业名称就能打消他无休止改稿的念头。比如“我给你出这么多钱，你给我留这么多空白”，就告诉他，我这个内容和空白是严格按照黄金分割比来来设置的，这样的设置最符合审美，更合理。如果客户对黄金分割不感冒，就可以扯出斐波那契数列或Van de Graaf canon了，大部分人听到这两个名字就会觉得很NB，很高大上了！拿这种感觉很深奥很科学的东西堵他们嘴，远比你扯一大堆视觉理论或者色彩理论者来说服他们显得更专业，更局有说服力也更具有效率！
5、最后一点，看了这篇文章的朋友劳驾点个赞或者点个关注，查资料打字写文章不易，而且我正在申请认证，需要帮助，希望能给个支持，感谢！
2024年网页的设计法则 篇2
第一、先进、网站设计解析
所谓网站设计，就是设计者将网站的相关主题和策划内容，有效结合自身的艺术手法来进行表现，从而对访问者的注意起到极为有效的吸引力，让访问者获得一定的视觉愉悦感，从而达到网站所要传达的目的。
第二、网站设计的基本原则
一个网站在被打开的瞬间，是否能够有效达到网站设计者的目的，是否能够立刻引起访问者的共鸣和兴趣，是否能够传达网站的中心内容等，这些实际存在的问题都会对网站的运营和效果产生巨大的影响。在设计网站的过程中，总是会存在一定的设计原则。掌握这些原则对于设计网站来说具有非常重要的作用。
1、明确网站的内容
在设计一个网站的较初阶段中，要*先对网站所要表达的内容进行明确，其中包括了网站的相关功能、所面对的访问人群等等，整个网站的设计工作都应当以这些内容为主导，这样才能设计不会偏离主方向。
2、有效抓住用户
设想一下，如果用户在进入网站的时候速度过于缓慢，操作较为繁杂的话，这样的网站设计无疑是不成功的例子，所以，在设计网站的时候，有效抓住用户是网站得以顺利运营的基础条件，千万不要让用户对网站失望。
3、优化网站内容
网站所展示的内容是网站运营的核心，即便网站在其他方面的设计更加贴心，但是如果网站的内容空洞乏味，访问者要花费更多时间才能获得自己想要的内容，那这样的网站也不是成功的网站。所以，对网站内容进行有效的优化，提升访问者对网站的满意度，是非常重要的。
4、加速度下载
盯着屏幕等待页面的下载，相信这是人们较痛苦的事情。进行网站设计的时候，快速下载是设计者们不可忽略的重要事项之一，一般说来，优质网站的网页加载时间应当控制在15秒之内。
5、网站升级
对于网站的运行情况，应当时刻进行注意，当网站被更多人访问的时候，运行缓慢的情况往往会影响用户的直接体验，所以，为了能够保持网站访问者的数量，对于网站的升级一定要提前做好准备和规划。
网站的设计是网站得以有效运营并且获得良好效果的基础，掌握设计基本原则，才能在设计的过程中更好的去运用技巧，通过有效的多方融合，充分发挥网站的诸多功能，让网站获得成功。