教你用摄影三分法来优化网页设计

   对于摄影师而言,取景布局三分法是非常熟悉的概念。尽管它是非常引人入胜的概念,但是在进行网页设计的时候,几乎没有人会拿三分法来说事儿。当然,这并不意味着不可能,只是这种跨领域的事情很少被注意到罢了。

  所以,在今天的文章里我想解释一下三分法,并且分享一些将其运用到网页设计时的技巧和经验。不过三分法并不一定适合所有人,毕竟提升设计和设计流程的技巧和方法有很多。不过作为一项基本的排版布局规则,三分法本身是绝对值得学习的,并且在网页设计中也颇为实用。

  为何三分?

  也许你会问,为什么一定要三分呢?这种奇怪的设定到底是从何而来?还好,我可以很高兴地告诉你这玩意和数学定理抑或复杂的逻辑推理都没有关系,也没有太多的必要在这个东西的来源上过度深究。

  三分法仅仅是来自于传统艺术,目前在摄影中运用得尤其多。纵横三分,整个布局被分为9个平均的区块,横向纵向各有2条分界线。三分法规定,为了尽可能吸引观者的注意力,视觉重心或者最吸引人的东西应该尽量靠近四条线相交处。

  你可以在WDD的这篇文章中找到绝佳的实例。很多时候非对称的布局常常能让整个页面更加富有生趣,但是这并不意味着着任何时候都得用非对称布局,因为在有的场合,对称布局会更有意思,而在这个时候,三分法则意义并不大。


  摄影的时候,最理想的目标是一独特的视角捕捉到一些能吸引人的场景,而非对称的布局使得视野中的一些元素比其他的更加突出,而这些突出的元素通常压在之前所说的四个交点上。

  那么重新回到网页设计的问题上,三分法和网页设计到底是如何结合到一起的呢?正如同摄影时三分法下的布局能够吸引观者一样,符合三分法的网页也一样能让浏览者更加关注焦点内容。


  了解三分法的栅格

  四条线,四个焦点,九个区块,这就是三分法下的栅格框架。许多网站的首页设计都符合F式布局或者Z式布局,用户也已经习惯了这样的浏览方式,通常视觉的起点都是左上角,这也是设计师需要关注的首个区块。


  这也就意味着,左上方的交点处应该与页面的某个重要内容相重叠。交点处并不是非要放置链接或者图片(当然非要放也并非不可),它更像是一个标记,用以区分布局的一个重要节点。比如页面标题的起始点可以与之重叠,整个标题与横向第一条线相齐平,然后在标题下放置Banner图之类的内容。

  值得注意的是,使用三分法来分析网页设计更多的是一个用户体验设计上的概念,而非一项完整的设计准则。所以,如果你想借助这一概念来分析网页设计的话,建议将网页在浏览器中打开之后截图分析处理,完整的网页太长,而且用户浏览永远是基于屏幕而非一次看完整个页面,所以也没有必要使用整个页面,截图足以。如果设计尚处于原型阶段,那么建议参考屏幕比例来截取分析。


  所以,你应该从用户的浏览习惯出发,结合三分法来进行分析优化。当用户浏览网页的时候会下意识注意到关键部位,正确的使用三分法来设计页面,你会发现这种3×3的栅格能帮你带来极具启发性的设计。

  小调整而非重设计

  了解三分法的栅格的运用方式之后,你还需要明白更重要的一点:三分法带来的并非是一个无可挑剔的网页设计架构,而是一个用来微调现有设计的布局测试框架。

  有太多的免费的栅格系统可以帮你设计网页,比如960GS之类的,但是三分法的九宫格栅格系统是一个帮你微调整个网页布局的,比如调整导航栏的高度,把Logo挪近一点或者远一点。


  值得庆幸的是,这种测试方法很实用,并且很简单,也不挑软件。你可以截图之后在PS里面画虚线来分析,诸如GIMP这样的开源免费软件也可以轻松帮你搞定,再不济你还可以直接用记号笔在屏幕上画一个九宫格来分析嘛……(话说当初打CS的时候盲狙也用过这等笨办法~)反正能帮你构建出九宫格分析的工具都能带你走向正确的设计方向。

  完成初稿,用三分法测试,然后走向下一步。随着时间的推移,你会更加清楚如何将视觉元素置于对的地方。

  处理对称性

  有的时候,在页面中适当地使用对称性的元素还是颇为有用的。不过如果在设计中哪哪儿都用对称式设计的话,这也未免太瞎了点。事实上,在艺术和摄影领域,非对称式布局的运用还是占据主流的,大小相对,远近相宜,更加令人赏心悦目,这也证明非平衡的视觉设计更能吸引我们的注意力。


  其实在版式设计中,也有类似的原则和规范。比如,当你在页面顶部使用大Banner图的时候,它通常会占据页面大概2/3的高,类似的,标题和正文的字体大小也需要大小对比,读者会自然而然地注意到更大的Banner图、标题和副标题。大小对比是一方面,另外一方面还需要考虑页面上图片和文字的位置。简单的使用三分法并不能确保构图的饱满,将九宫格置于页面上,适当地调整页面的元素的位置和中心之后,会好不少。

  三分法的优势在于它可以兼容非对称式布局,也可以用来优化对称式布局。两种布局灵活搭配,借助三分法来突出页面重点,也掌握页面平衡,如此才能调教出优秀的网页。

  最后的思考

  绝大多数的艺术形式其实并没有固定的规则,但是有规律可以参考,设计也正是基于这些规律而不断进步。掌握类似三分法这样的规律,了解这个规律的目的所在,深入理解,即使没有刻意去运用,它也会从你的设计中自然而然地展现出来,形同第二本能。这个时候,你就具备了打破规则的潜力了!

  虽然说设计和艺术有着根本的区别,但是两者并非对立的关系。诚然依着规则可以设计出更符合大众口味的作品,但是打破规则,充满个性和艺术感的设计作品又何尝不会令人印象深刻呢?

时间: 2024-09-19 09:24:32

教你用摄影三分法来优化网页设计的相关文章

教你使用热点图优化网页设计

  如果内容为王的话,那么设计就是城堡.对于企业而言,好的网页设计不仅包含了能够引起访客兴趣的内容,吸引目标用户,而且包含有直观而漂亮的UI设计,促进销售.许多设计师喜欢将自己认为创意爆棚的UI设计直接应用到客户的网站上,但并没有考虑过这种设计是否符合网站的产品,是否符合目标用户群所需要的体验与需求,从这个角度上来说,这样的设计真的合适么? 所以,当你在设计企业和商务类网站的时候,你需要自省.多问问自己,这样的设计是否合理,站在需求方和用户的角度上仔细考量一下,你的创意和设计是否真的靠谱.在接下

卢松松:SEO优化 网页设计很重要

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 搜索引擎优化(SEO)是目前站长圈中最为热门的话题,对于一个网站来说,不仅内部连接和外部链接很重要,如果将网站的页面设计得符合SEO规范,同样可以起到提高排名的效果. 遵循标准,采用DIV设计网页. 在XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种内容的定位.DIV是HTML语言中的一个常用元素,而DIV

6招教你学做餐饮美食类网页设计

  吃货们有福啦!今天的话题与美食有关,而且是非常实在的经验分享,掌握这些技巧要素.你将会学做一个餐馆及饮食类网站.而且这类网站能给自由设计师提供不错的报酬.如果你打算进行此类设计,那么不妨花上几分钟,看看这篇文章,保证您有所收获. 实践方能得真知,本文通过大量生动的案例来进行深入观察,剖析出那些餐饮类网页设计的亮点所在. 1.图像意味着一切 Site: The Claw Bar 图像意味着一切,虽然略有夸张,但是是句实在话.质量垃圾的.丑陋的图像虽然能在常规网站上将就着看,但是在餐饮类网页中行

网页设计中的“负空间”

  在学设计的过程中,老师可能告诉过你一个网页中的空间分类,如果你不知道的话,是不是上课没有好好听讲-好吧,如果你不知道的话,那我们就换个话题得了-哈哈,逗你玩的,今天我们还是要来说一说"负空间"这个概念,它到底是什么呢?有什么作用?在网页中占多大的分量呢?如果想知道的话,就好好看下面的文章. 什么是负空间? 可能有些童鞋还不知道负空间和正空间的基本概念是什么,今天正好天朗气清,就让我们来聊一聊-众所周知,在设计领域空间有两种类型,分别是正空间和负空间.正空间包含网站里的所有元素,比如

网页设计就是戴着锁链跳舞

中介交易 SEO诊断 淘宝客 云主机 技术大厅 在网页设计初期,我们会先收集大家对设计方向的期许,我们经常收集到这样的建议: 产品经理:要易用,要简洁 设计总监:要特色,要亮点 部门经理:要大气,要统一 -- 设计师要三头六臂,左右逢源,顾此又顾彼. 首先,对网站而言,视觉和体验是一体的,相辅相成携手共赢.视觉上的统一要求体验上的一致,体验上的创新也要求视觉上的突破,然而某些需求的字眼本身就是自相矛盾或难以捉摸的,如何又简洁又特色又兼顾统一?对工具类网站的设计,大方向是力求简洁精炼的,作为辅助手

从零开始教你打造网页设计中的极简风格

  什么是极简设计 极简设计,严格上讲不能算作一种视觉风格,而是一种设计哲学.它在保持了基本的骨架内容的基础上,剔除掉多余的元素.装饰.色彩和纹理,是通过不断思考而进行化繁为简的设计过程.这样做的结果是突显了主题内容.所以,它是扎根于设计思想根部的概念. 极简主义起源于苏格兰,当时在各个文化领域都掀起了极简的风潮:平面设计.建筑.音乐.文学.绘画等.直到现在,也开始在网页设计中盛行. 尽管极简设计风格在十年间并未得以足够的关注度,早先的互联网领域中根本看不到它的影子,样式复杂的LOGO和广告,艳

网页设计中优化图片的6大技巧

  例如,在网页设计中更常使用基于像素或栅格的文件格式,诸如JPG.GIF或PNG.相反,在平面设计领域像logo这样的图形可能会用到不同尺寸,因此使用最多的格式则是EPS和AI这样的矢量格式.然而,用于网页的矢量格式,如SVG或HTML5 Canvas则不能广泛应用,也不会被所有浏览器所支持. 另外,用于web端的图形有基于它们自身的相关处理方式.其中一条便是你要时刻注意文件的大小,因为你需要使你的网页加载越快越好.作为一名网页设计师,你应当尽量减少HTTP对图像的请求次数--无论通过减少图片

Fireworks优化网页图像详解

网页|详解|优化  网页图像的要求是在尽可能短的传输时间里,发布尽可能高质量的图像.因此在设计和处理网页图像时就要求图像有尽可能高的清晰度与尽可能小的尺寸,从而使图像的下载速度达到最快.为此,必须对图像进行优化. 在Fireworks 中,所有的优化操作都可以利用"Optimize"面板在工作环境中直接进行,优化设置仅用于输出图像.因此,用户可以自由地对图像进行优化并调整其优化设置,而不必担心会损坏原图.并且可以通过预览不同的优化结果,随时根据需要对图像进行修改.另一种简便快捷的优化方

网页设计者应该从三个方面优化网页

随着带宽的提高,网页上的对象也越来越多,因此加快网页打开速度还是一个重要的课题.加快网页的打开速度,有三个路径,一是提高网络带宽,二是用户在本机做优化,三是网站设计者对网页做一定的优化.这篇文章站在一个网站设计者的角度,分享一些优化网页加载速度的小技巧. 一.优化图片 几乎没有哪个网页上是没有图片的.如果你经历过56K猫的年代,你一定不会很喜欢有大量图片的网站.因为加载那样一个网页会花费大量的时间. 即使在现在,网络带宽有了很多的提高,56K猫逐渐淡出,优化图片以加快网页速度还是很有必要的. 优