网页设计规则:网页设计中如何“黄金比例”

Post 3 of 943

黄金比例虽然是数学中经常运用到的一个比率,但其实它对网页设计中的美,影响也是非常巨大的。什么是黄金比例?黄金比例指的是建立平衡的一个数学比率,大约等于0.618:1,希腊字母Φ表示这个值。

由于黄金比例的呈现方式,大到布局、间隔、内容,小到图像、图形等都会用到,因此接下来我们就看看网页设计中如何“黄金比例”。

网页设计中如何“黄金比例”?

1. 布局:将尺寸设置成黄金比例

网页设计布局运用黄金比例的方法并不难,关键在于控制比例和尺寸,也就是把握好0.618:1的比例。网站布局合理运用黄金比例,会让整个界面看起来非常舒适且达到相对平衡的状态,从而提高网站的可读性。

 

网页设计规则:网页设计中如何“黄金比例”

网页设计规则

2. 间距:使用黄金螺旋布局

间距的控制实际和留白一样,都是网页设计中非常关键的元素。在基本的布局上,借助黄金螺旋调整界面的布局,透过多种不同的元素在同一页面上沿着黄金螺旋的轨迹运动,会让用户更自然地浏览内容。

 

网页设计规则:网页设计中如何“黄金比例”

网页设计规则

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

同样,黄金螺旋的轨迹对页面排版内容也起到重要的作用。内容沿着黄金螺旋的轨迹布局,会很好地引导用户的视线,让用户更自然地浏览网站上的内容。

 

网页设计规则:网页设计中如何“黄金比例”

网页设计规则

4. 黄金比例和三分法

对图片而言,布局自然是非常重要的,无论是用于传递信息还是呈现图像布局的美感。黄金比例都能让图片变得更加吸引眼球,同时也会让界面的重要信息更加突出。尤其是以三分法布局的界面,结合黄金比例,会让布局更加整齐舒适。

 

网页设计规则:网页设计中如何“黄金比例”

网页设计规则

5. 图形:黄金比例圆形

黄金比例可以用于创建矩形,同样它也能创建比例协调的圆形,产生和谐的比例,给让图形保持较高的一致性。

 

网页设计规则:网页设计中如何“黄金比例”

网页设计规则

运用黄金比例的网站设计案例

网站设计案例一:Yourlocalstudio.dk

“Your Local Studio”是一个基于设计和开发的网站,擅长用各种形式的视觉概念优化网页。

 

网页设计规则:网页设计中如何“黄金比例”

这个网站有两三个页面会运用到黄金比例,如网站的主页融合了传统网站布局与黄金分割来设计网站,并采用渐进式且组织分明,结构清晰的网格系统,以非常规的布局来吸引用户注意力。

 

网页设计规则:网页设计中如何“黄金比例”

网页设计规则

网站设计案例二:Mashable.com

 

网页设计规则:网页设计中如何“黄金比例”

网页设计规则

传统的内容类网站,大多会选用传统的网格布局,内容密集且毫无重点。但Mashable以黄金比例的方式来布局网站,可以整个版面的布局非常灵活,同时给予信息排版喘息的空间。

网站设计案例三:Jandk.fr

 

网页设计规则:网页设计中如何“黄金比例”

网页设计规则

Jackson & Kent是一个来自法国Web生产代理网站。整个页面使用黄金分割网格系统进行组织布局,向用户展示以往客户的工作项目、联系方式以及公司地址等。

 

网页设计规则:网页设计中如何“黄金比例”

网页设计规则

利用黄金分割的布局方式,不仅让界面内容看起来更加有趣,同时还能更好地引导用户的视线集中在页面的重点内容上,以及更流畅地体验网站的设计。

网站设计而言,黄金比例的布局方式可以说是网站布局的吸睛大法,虽然它是一个非常简单且常见的数学该那年,但效果非常显著。只要把黄金比例和网站字体、配色、设计加以搭配,会让整个网站的质量上升一个层次。

This article was written by admin

MENU
網頁設計公司