如何在网页设计中使用黄金分割率?

发布时间:2019-10-29 09:55:00

黄金比例适用于平面布局的所有领域,特别是平衡文本内容的权重。它可以帮助设计师创建层次结构,并吸引用户对特定领域的注意力。

黄金比例适用于平面布局的所有领域,特别是平衡文本内容的权重。它可以帮助设计师创建层次结构,并吸引用户对特定领域的注意力。看看下面这个网站的例子,看看设计师是如何使用它的!

如果从这个金色矩形中剪切出一个矩形,则会留下另一个金色矩形:

你可以继续用更小的矩形做同样的事情,然后继续切片,无限循环,你会得到这个熟悉的图像:

斐波那契数列类似于黄金比率,但并不完全如此。这是一系列数字。序列中的下一个数是前两个数的和。例如:0,1,1,2,3,5,8,13,21,34,55,89,144,233,377…这个规则公式是xn=xn-1+xn-2。

假设我们从一个正方形开始,然后再添加另一个正方形,我们得到一个需要的矩形:

然后,我们添加另一个矩形,该矩形等于长矩形的总长度:

一次又一次:

这可以无限期地持续并产生相同的金色矩形效果,但这次是新的,而不是切片。黄金比率和斐波那契数列都能使我们得到有吸引力的比例。

YourLocalStudio是一个基于设计和开发的网站,位于丹麦哥本哈根。他们擅长使用任何形式的视觉概念和创造经验来优化网页。

这个网站有两三个页面,黄金比例。主页是对关键信息的概念性解释。但是,当您访问studio页面时,您会发现它结合了一点传统的web布局和黄金矩形,例如以下页面:

mashable是一个新闻网站,一个信息源,“互联一代”的知识和资源。

我使用黄金比率测试UX(用户体验)触发器来演示Masabess如何使用Fibonacci序列布局、灵活的内容布局、左标题和链接到更多的新闻,由网格分隔。

黄金比例在这里非常有效,因为它允许内容驱动的网站给信息排版提供喘息空间。类似的网站,使用传统的网格布局,似乎是密密麻麻的,但mashable显示黄金比例是非常有效的,甚至是看不见的。

jackson&kent是一家来自法国的网络制作代理。他们专注于数字服务,如HTML5、CSS3、Drupal、WordPress、PHP/MySQL、Flash等。

上面的屏幕截图显示了布局如何主要包括以前客户的工作项。它还有一个关于组织本身的内容,屏幕有一个导航栏,即“联系人”按钮。它还使用黄金分割网格系统,并以独到的方式组织布局。

这里的示例鼓励您翻译网站并探索其内容,使内容在网格视图和不同大小的块形状中更加直观和有趣。因为用户可能在屏幕上观看内容(在平板上),所以在水平轴导航上也有分页编号。这是一种查看每一部分内容的新颖方法,它将用户界面作为一个整体。

黄金分割率自然会吸引用户的眼球到页面上的某个特定点。作为一个概念,它可以帮助您思考内容的布局,并有效地利用层次结构、组合布局、排版、颜色和总体原则。它将有助于提升你的设计水平到一个新的阶段。


热门推荐

技巧精选

0571-88730320 联系我们,谈您的需求

立即咨询 立即建站