发布时间: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等。
上面的屏幕截图显示了布局如何主要包括以前客户的工作项。它还有一个关于组织本身的内容,屏幕有一个导航栏,即“联系人”按钮。它还使用黄金分割网格系统,并以独到的方式组织布局。
这里的示例鼓励您翻译网站并探索其内容,使内容在网格视图和不同大小的块形状中更加直观和有趣。因为用户可能在屏幕上观看内容(在平板上),所以在水平轴导航上也有分页编号。这是一种查看每一部分内容的新颖方法,它将用户界面作为一个整体。
黄金分割率自然会吸引用户的眼球到页面上的某个特定点。作为一个概念,它可以帮助您思考内容的布局,并有效地利用层次结构、组合布局、排版、颜色和总体原则。它将有助于提升你的设计水平到一个新的阶段。