- 设计理论 -

黄金比例在界面版式设计中的指导作用

作者:姜正 原文出处:海盐社
2018-08-21

25.jpeg

曾经很长一段时间因为界面版式设计的问题困扰着我,在工作中我只能凭自己的视觉感受来安排界面中的元素位置,缺乏合理可靠的依据!

通过查阅资料和分析优秀设计作品,让我渐渐掌握了一些利用黄金比例为原则的界面版式设计的方法,首先我会和大家简单介绍一下黄金比例,其次我们会从界面的X轴和Y轴的角度去分析黄金比例在页面中运用,并在最后告诫大家在使用当中所要避免的一些坑。

目录

1.什么是黄金比例

2.黄金比例在版式设计中的应用

3.黄金比例应用注意事项

4.总结


什么是黄金比例

黄金比例我们可以理解为人类视觉最舒适的比例分割。公式:a/b=0.618...或a+b/a=1.6:1

WechatIMG22.jpeg




黄金比例在版式设计中的应用


黄金比例的作用

黄金比例能帮助我们营造界面设计中的内在秩序,安排界面元素的主次位置,让界面看起来整齐有序富有层次感,且能突出重点。


我们以淘票票和支付宝的首页为例,通过图解,我们一眼就可以看出红色区域是我们所看到页面的首要功能和视觉中心。


WechatIMG23.jpeg


如何确定黄金比例风格线


在设计工作中,我们面对各种各样的设计需求,所以在计算黄金比例分割线的时候,我们要根据我们所需的“设计尺寸”进行计算!


公式理解为:h(设计尺寸)×0.618=黄金比例分割线位置


WechatIMG24.jpeg


帮助确认界面中整体的版式分割

在界面设计工作中,我们可以通过的黄金比例分割来帮助我们确定页面中整体的版式分割,确定页面整体版式中的上下比例关系。

我们以“淘票票”为例进行图解分析


WechatIMG25.jpeg


这里我选用了iPhone7的尺寸为例,h(1334px)×0.618=824.412px,这里我们取近似值820px,另一部分则是514px,两者的交界线则是黄金分割线。


通过分析图我们可以发现,页面整体上下的比例维持在1:1.6的黄金比例的分割线上,使得页面看起来主次分明,井然有序。


在复杂页面中的应用

上面的例子都比较简单,通过简单的计算就可以得出黄金比例分割线,从而确定界面整体的版式分割,但是如果换成复杂的页面呢?


其实同样我们也可以借助黄金比例来划分页面内的元素分布,确定视觉重心的位置。这里我们拿我们以京东金融运营页面为例子:


WechatIMG26.jpeg


京东金融发现页面中,在整体的界面中上半部分功能区和下半部分的运营区域的比例近似“1.6:1”,符合黄金比例。


在上半部分主内容区中我们依旧可以参考黄金分割来去安排其中元素的位置,通过分析我们发现其中蓝色主标题区和下面的辅助内容的上下版式面积的比例为1.6:1,符合黄金比例。


在简单Banner设计中的运用

在Banner设计中,我们同样可以运用黄金比例分割来确定运营区域文字和图片或图形的摆放位置,达到一个最佳的视觉分割。


我们拿支付宝的Banner作为例子从X轴的角度进行分析:


WechatIMG27.jpeg


通过图解我们可以观察到,文字区域与图片区域的比例维持在1.6:1,符合黄金比例。


这里我们可以在一些简单的运营组件设计中融入黄金比例的概念,为之后的运营设计提供快速的复盘应用。


在复杂Banner设计中的运用

在一些较为复杂的banner设计中,我们同样可以借鉴黄金分割。这里我们以网易音乐中的运营广告banner为例,我们可以从X轴和Y轴两个角度进行分析:


WechatIMG28.jpeg


首先在X轴中,左边标题的位置和右边图片的位置维持在“1:1.6”的黄金分割线上,其次我们从Y轴的角度来看,上半部分的文字标题和下半部分的展示图片的比例同样也是“1:1.6”,符合黄金比例。


黄金比例应用注意事项

1.黄金比例在设计中具有参考指导意义,我们在取黄金分割线时取近似值,以偶数为主,避免奇数的出现。

2.设计中要根据实际情况考虑到到画面中各个元素的视觉平衡,切勿单一借鉴理论。

3.要灵活运用,在界面中整体和局部设计中灵活运用。


总结

对于黄金比例,我们通过实际的设计尺寸来计算黄金比例分割线的位置,并取近似值。同时我们从X轴和Y轴的角度去分析它在界面设计中的使用方法,在简单页面和复杂页面我们要灵活运用,计算得出的数据具有参考意义不要过分参考,切勿当做唯一标准。而且通过黄金比例能帮助我们建立简单的规范库。在工作中我们要从实际业务出发参考黄金比例,避免生搬硬套,做了本末倒置的事情。


26.jpeg

海盐社.jpeg



喜欢就分享
精选评论