第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

干货分享: 几何设计学原理の黄金分割在网页设计中的应用(2)

时间:2017-12-01 16:37来源:A5企业专栏 作者:跌名 点击: 我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
间距和留白一样,是设计中十分关键的元素。合理的间距有利于突出网站核心内容,让网站布局更加协调,而不恰当的间距则会影响用户体验,影响网站的

  间距和留白一样,是设计中十分关键的元素。合理的间距有利于突出网站核心内容,让网站布局更加协调,而不恰当的间距则会影响用户体验,影响网站的品牌形象。与此同时,在网站中做好合理间距常常需要花费很多时间。那么怎样才能快捷、高效的安排网页间距呢?使用黄金螺旋就是一种很好的选择,借助图形合理放置每项元素,让网站间距按精心计算过的比例排版,而不单单是直觉。另外,如果你正在同时处理多个元素,你也可以将黄金螺旋分层,让网页的比例设计更加协调。

  

undefined

  Moodley 设计工作室就是一个栗子,它为布雷根茨艺术节设计了海报、节目单以及Logo等品牌标识。节目单的整体设计采用了摄影图片拼贴的方式,有大量的留白,而其中各种元素的设计比例、位置和留白就是借助黄金螺旋来布置的。

  

undefined

  新加坡的Lemon Graphic设计公司在给Terkaya财富管理公司进行视觉形象设计时同样也借助了黄金螺旋的布局方式。卡片上的三个元素:小鹰、文本和大鹰的位置摆放都是有合理的依据的。

  

undefined

  3、内容:沿着黄金螺旋的轨迹

  除了借助黄金螺旋安排网站的间距以外,我们还可以运用它来决定网页内容的位置。根据黄金螺旋的定理来看,人眼总是会不自觉的注意螺旋处的中心,因此我们应该重视螺旋的中心地带,将用户可能感兴趣或最重要的内容放在此处,让访客在获取信息上更加容易。另外,比较重要的信息要放在螺旋线的内部,这样比较醒目。下面是有关的三个栗子:

  以国家地理杂志的网页为例。如果你仔细观察它的首页,你就会发现它的内容就是按照黄金螺旋的轨迹来安排的。由于人们可能会下意识注意这个轨迹的中心,因此国家地理杂志在这放置了它的logo,再次突出强调品牌形象。网站中的其他重要元素也为螺旋线所囊括。

  

undefined

  下面Tim Roussilhe设计师的网站也是一样。虽然网站的内容很多,信息量很大,但网站的整个布局显得十分紧密、信息组织很有条理,元素多而不乱。左上角的内容就是跟随黄金螺旋的轨迹来设计的,访客在登入的一瞬间会先看到"Bonjour My Name is Tim"的文字,然后是详细的文本,菜单按钮,再到左上角的Logo。在用户注意到充分的留白之前他们已经浏览完了所有必要的信息,这正是设计的目的所在。

  

undefined

  Helms 工作室 为Fullsteam Brewery进行品牌设计时,也同样借助黄金螺旋安排网站内容。各种不同的元素被放在不同的区块中,访客可以沿着中心人物、印章、ABV字符、产商所在地的轨迹去浏览。这样的浏览体验很自然、方便。

  

undefined

  4、图片:黄金比例和三分法

  图片的构成也是很重要的,无论图片是服务于信息传递或美感呈现的目的。在图片中使用黄金比例和三分法可以使用线条和交点构建视觉中心,让它们更吸人眼球,更能突出重要的信息。在图片中使用黄金比例是指将图片分成3个不相等的区块,3个区块的比例应该是1:0.618:1,也就是说第一列和第三列的宽度为1,而第二列的宽度为0.618,水平区域也是同理。这样一来,我们可以通过这些线条或交点合理安排图片的位置和大小,看看怎样更能吸引用户注意力,增添趣味和活力。除了黄金比例以外,我们还可以利用三分法对图片进行切割。三分法从某种意义上来说算是黄金分割的一种变体,在使用上更加简单。它是将图片三等分,比例为1:1:1,这样的图片是完全平衡和均匀的。这样我们可以将重要的元素围绕中心的矩形排列开来。

  Complex杂志的封面是女星Solange Knowles的特写照,它就使用了黄金比例来合理安排图片中正空间和负空间,人物的鼻子和眼睛正好落在线条的交点处,是吸引访客注意的理想位置。

  

undefined

  Jason Mildren 为Pilot 杂志设计封面时,采用三分法来构建视觉重心,图中模特的眼、拇指和手臂轴心都处在视觉重心上,人物位置靠右下,留白靠左上,在布局上既突出重点,又做到了和谐统一。

  

undefined

  5、图形:黄金比例圆形

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕