UI设计中,黄金比例可以归结为美学——创造和激发通过比例与和谐产生的艺术美感。金字塔、巴黎圣母院、艾菲尔铁塔、蒙拉丽莎,这些世界闻名的事物,看似没有任何联系,其实却有着设计的共同点,就是它们的设计都运用了黄金比例。那么,什么是黄金比例呢?

什么是黄金比例

黄金比例,指的是把一条线段分为两部分,较短部分与较长部分长度之比,等于较长部分与整体长度之比。

如何计算黄金比例

计算黄金比例的公式,其实很简单。根据黄金比例的定义,可以列出方程:(1-X)/X=X/1,得出答案是一个无理数,取其前三位数字的近似值是0.618。

设计中使用黄金比例的5种方法

布局

黄金比例,可以看作是设计中确定空间布局的实用指南。在布局中应用黄金分割非常简单的方法,就是将矩形的长宽比设为1:1.618。例如:960像素是非常典型的画布宽度,用这个宽除以1.618,得到一个594像素的数值,把它设置为高度,就是一块完美的画布。

然后,再使用黄金比例把它分成两列。一列为正方形,一列为长方形,一个结构协调的黄金比例设计布局就出来了。这样的两栏式布局非常适合网页设计为读者提供了视觉上愉悦、层次分明的阅读体验。

间距

间距是设计中的重要元素。设计作品选择合适的间距,同样会让视觉效果和用户体验得到提升。其实你只要想一下,如果一大堆字拥挤在一起,你是不是连想读的欲望都没有,然后就能明白间距的重要性了。

运用黄金比例,来确定设计元素的位置,可以轻松控制元素的间距,让你的设计更加富有条理,看上去也更高级。更重要的是,用户不但看起来很舒服,而且也更容易看懂内容。如果你需要同时处理几个元素,也可以运用多个黄金比例,来保持设计作品的整体连贯性。

内容

黄金螺旋可以帮你确定内容的位置。我们的视线会自然的落到螺旋的中心,这个位置可以放置重点要强调的元素。在做设计时,我们一定要非常关注螺旋的中心位置以及螺旋走过的视觉空白区域。

你在设计中用到这样的布局,用户的视线就会很自然的随着这个轨迹来浏览,关键的点和位置都落在黄金螺旋的轨迹上。按照这个轨迹来设置内容,就会更有条理,即使多也不会乱。

图像

无论是传达重要信息还是创建一个美观的图像,结构对图像来说都很重要。黄金比例可以帮助设计师搭建结构,引导读者注意到设计作品中重要的位置和信息。

运用黄金比例1:0.618:1三分法,可以先将一张图像横向、纵向分割成不等的三个空间,再运用线条和相交的点去创建结构。然后这些线和交点,就可以吸引读者的注意力向这些位置集中。这些元素可以形成一种张力,增加设计结构的趣味性和力量。

图形

黄金比例不仅可以用来创建比例协调的正方形和矩形,它还可以用于创建黄金比的圆。每一个正方形中的圆都与其邻近的圆成1:1.618的比例,这就是完美的圆。使用黄金分割圆不仅能创建和谐、均衡的设计,同时可以保持格式的一致性。

黄金比例会自然吸引用户的眼睛到页面上某个特定的点。它可以帮助你思考内容的布局,以及如何有效利用层次结构、排版和总体原则,帮助你的设计水平提升到一个新的阶段!

UI设计绝佳工具

俗话说,“工具用得好,下班下得早”。进行 UI 设计时,选对好的工具,再加上在实际操作软件时,掌握实用的方法技巧,提高每一步的操作效率,可以快速提升你整体的设计水平!Pixso新一代设计工具,设计功能强大完善,支持Figma、Sketch文件导入,支持创建响应式的动态框架自动布局、智能化选择,并提供全新的钢笔工具、画板工具和形状工具,大大提升你的设计效率。马上打开Pixso,开始你的黄金比例设计提升之旅吧!

Pixso