用户界面的黄金分割

移动互联网时代，智能手机已经全民普及，各大手机厂商纷纷在摄像头📸模组不断叠加配置。不得不说，摄影摄像📹成为用户日常高频使用的功能之一。使用手机📲拍照，留住一切美好时光。今天，我们聊一聊关于【黄金分割】对于一名设计师而言，这个概念应该都不陌生吧！我们都知道，TA 能够引导视线聚焦于画面的重点部分，也是创造美的方法之一。

提到黄金分割，你还会想到什么呢？🤔其中，在用户界面（UI）设计中，我们也会应用到黄金分割法则，让设计更具美感，视觉更加平衡。

历经几个世纪，这个概念在艺术、建筑和设计等多个领域得到广泛应用。早在公元前 500 年左右，菲迪亚斯（Phidias）、柏拉图（Plato），以及后来的欧几里得（Euclid）就提出了类似的概念。TA 有多个别称，包括黄金平均值、黄金比例、黄金分割、神圣比例，也用希腊字母 φ（phi）表示。这个数学比例可以用方程 x² = x + 1 表示，其近似值为1.61803398874989482045。

为何称之为黄金分割？

《Artsper》杂志指出，作为艺术创作的重要法则，【黄金分割】能创造出赏心悦目的视觉平衡。TA 不仅体现了美学原理，更蕴含了和谐的比例与美的真谛。

黄金分割在自然界中普遍存在

值得一提的是，黄金分割也已经被大量应用在数字界面设计领域。作为一名界面视觉设计师，自然而然就会在设计数字产品界面时（包括，各种数字终端产品），就会思考如何营造视觉平衡，构建层次结构，以此引导用户关注👀核心内容。

接下来，我们一起探讨一下黄金分割在应用层面的优势，同时，分享一些如何将这一法则融入设计实践中的心得。

黄金分割在界面设计中的价值

1. 视觉和谐：黄金分割能在布局要素中营造视觉平衡，无论是网格布局、间距设置还是比例关系，都能彰显设计的和谐与连贯。

2. 契合自然比例：人体蕴含的自然比例与黄金分割数值相近。这种天然的关联赋予设计以自然亲和之美。

3. 层级与焦点：黄金分割与斐波那契数列密不可分。这一数列中的每个数都是前两数之和（0、1、1、2、3、5、8、13等）。大自然处处可见这一规律，从植物茎叶的排列到贝壳的螺旋纹理皆是明证。运用这一原理，我们可以构建清晰的层级结构，有效引导用户关注重点区域。

4. 心理共鸣：研究表明，遵循黄金分割的设计能激发用户积极的情感体验，从而提升用户满意度，增强界面互动效果。

黄金分割的优势远不止于此。以上这 4 点是其核心的价值，反正用就没错了！

黄金分割在界面设计中实践应用

在详解具体应用技巧和展示实例之前，让我们先来探索黄金分割的构建方法。众所周知，黄金分割与斐波那契数列有着密切关联，这一比例用希腊字母 φ（phi）表示，其值约为 1.61803398874989482045。接下来，展示一种简单明了的构建方法。

构建黄金分割的方法

观察图示，我们可以看到黄金分割在新矩形中的应用。依次在标号 1 至 6 的正方形内，从一个顶点绘制弧线至对角，由此便会呈现出优美的黄金螺旋，亦即斐波那契数列的几何表现。这一数列从零起始，依次为：0、1、1、2、3、5、8、13、21，循此规律延展。

如果觉得尚不够清晰，没关系，接下来的内容将逐步展开详解。

排版

黄金分割之美，不仅见于布局构图，更可巧妙运用于文字排版之中。在正文、行距及标题的设计上，恰当运用这一比例，便可营造出视觉上的和谐均衡，令界面既雅致清晰，又层次分明。

具体而言，若以 1.618 这一黄金比值调节字体尺度，便能在排版中缔造出天然的韵律之美。标题：26px；正文：16px；行距：26px…

排版中的黄金分割

布局

我们建立一个宽度为 1062 像素的画面区域。依循黄金分割法则，以此宽度除以 1.618，可得高度约 656 像素（精确值 656.37）。接下来，依图示说明如何将此布局划分为双列结构。

构建黄金分割

看👀，运用黄金分割法则的网站。

苹果（Apple）网站

Coursera 网站

观察苹果（Apple）与 Coursera 等优秀网站的设计，你会发现黄金分割所构建的螺旋动线，巧妙地引导访客视线，从主标题与号召性按钮（CTA），自然流转至其他设计元素。

你是否注意到大多数元素都组织得很好，TA 们之间的留白也很均衡？运用黄金分割法则不仅能帮助用户第一眼就捕捉到网站上最重要的元素，更能创造出和谐的外观与视觉平衡。

内容与间距

同样，黄金分割也有助于组织网站上的内容或元素，并通过合理的间距创造和谐平衡的视觉效果。

Bregenzer Festspiele 海报

如你所见，标志位于右上方，艺术作品位于左下方。当你在上面绘制黄金分割线时，你会注意到各个元素之间的距离或间距，比如顶部标志的位置以及艺术作品与底部之间的间距，这创造了视觉焦点，并留出足够的留白来建立视觉平衡。

构图法则：三分法与网格系统

使用【三分法】则是另一种按黄金分割比例裁剪图片的方法。TA 的效果很接近黄金分割。三分法则将图像按1:1:1的比例划分成垂直和水平线构成的网格。这有助于将图像的重要元素围绕中心矩形对齐，理想情况下是在四个角落处。

你好，我的名字是Tim

使用三分法则来按黄金分割比例裁剪图片

在上述两个例子中，通过运用三分法则专门裁剪图片，并运用黄金比例布局，使网站或照片看起来更有趣，并创造了视觉焦点。

你可以将这种技巧应用于照片处理和界面设计中，使TA们更具吸引力，特别是可以引导视线关注重要信息。

结语

打造一款成功的数字界面设计，核心在于解决用户痛点并提供优质解决方案。这包括巧妙引导用户关注界面中的重要元素，确保他们能轻松找到所需内容。

黄金分割、三分法则和网格系统为内容编排提供了有效的设计工具，能带来显著成效。运用这些原则可以创造出视觉平衡、美观和谐且结构严谨的设计。然而，深入理解并恰当运用这些规则至关重要，因为如果使用不当反而会让用户感到困惑或分散注意力。最后，通过巧妙运用这些设计原则，你定能打造出引发用户共鸣的卓越体验。加油！

...

该文章部分观点和图片均来自网络，内容为个人职场生涯或阅读国外文章的所思所想。如在阅读过程中发现错误与疏漏之处，欢迎广大粉丝家人不吝指出，

文章转自  @三分设

— END —

注：交互设计学堂公众号接受投稿啦，如果你有好的原创设计类文章，可联系客服。别让灵感溜走，快来投稿吧~~