所有分类
  • 所有分类
  • 未分类

黄金比例在UI设计中的运用!

黄金比例在UI设计中的运用!

前言

我们都知道黄金比例的比值是一个无理数,取其前三位数字的近似值是0.618。由于按此比例设计具有很强的美感,因此称为黄金比例。这个数值的在绘画、雕塑、音乐、建筑等艺术领域有着不可忽视的作用。

但是很多UI设计师在设计页面却很少运用黄金比例,设计完页面总是感觉差点意思,但又不知道哪里出了问题,这是为什么呢?还有临摹别人的作品,总是感觉自己的差强人意,除非把所有尺寸、间距都调成跟人家的一样才会看的舒服。那么问题出在哪里呢?

你可能不擅长运用黄金比例做设计!

笔者近期研究了数十个app,惊奇的发现很多口碑app在UI设计上都运用了黄金比例,例如iOS11系统、全民k歌、支付宝、QQ音乐、UC浏览器、一个、知乎、西瓜视频、掌上生活、优酷、壹心理、等等。今天就跟大家分享并思考黄金比例在UI设计中的应用!

文章最后教大家一个根号2(√2)黄金比例画法!

案例分享

a、苹果iOS11信息页面

标示1、“信息”的位置,恰到好处的放在了黄金比例分割线上,这样视觉更集中有力度。

标示2、“搜索”文字跟搜索图标并没有像微信那样放到中间,而是在黄金螺旋线的位置,黄金比例的效果就出来了,看起来也就会更舒服。

黄金比例在UI设计中的运用!

b、全民k歌

顶部分别都用了黄金比例,可以证明设计师是有意这样设计!

黄金比例在UI设计中的运用!

c、支付宝

页面跟黄金线虽然差了几个像素,但这也是黄金比例,UI设计师都知道我们设计尺寸最好都是偶数,这样有利于开发人员的换算。

黄金比例不是说必须一点不差才叫黄金比例,只要接近黄金比例的尺寸都是黄金比例!

黄金比例在UI设计中的运用!

d、uc浏览器

左图蓝色部分加上间距正好构成黄金比例,且并不影响下面内容板块,下面图片上下间距也都是26px。

标示1、如果蓝色背景填充到黄金线,“标示1”就不会显示出来,从交互上讲就不会起到内容引导作用!

黄金比例在UI设计中的运用!

e、知乎

首页推荐每一个栏目都是一个黄金比例尺寸。

黄金比例在UI设计中的运用!

f、一个app

一个app的banner图就是黄金比例尺寸,这样有个好处是banner图内容也能更好的运用黄金比例来设计。

但并不是适合每一个app,毕竟黄金比例横行填满banner是很占面积的。

黄金比例在UI设计中的运用!

g、壹心理

悬浮banner图同样运用了黄金比例尺寸。

黄金比例在UI设计中的运用!

h、西瓜视频

小视频栏目每个视频尺寸都是黄金比例。

黄金比例在UI设计中的运用!

l、优酷app

一样的都是上下不同颜色比值1:1.618的黄金比例。

黄金比例在UI设计中的运用!

j、掌上生活

黄金比例区分内容板块。

黄金比例在UI设计中的运用!

k、QQ音乐和腾讯手机管家

最后来一个iPhone X的黄金比例,手机管家整个页面就是个黄金比例。

黄金比例在UI设计中的运用!

教大家绘制一个黄金比例图形模版,方便以后设计使用!

黄金比例的绘制方法

黄金比例在UI设计中的运用!

黄金比例在UI设计中的运用!

√2矩形黄金比例的绘制方法

黄金比例在UI设计中的运用!

黄金比例在UI设计中的运用!

黄金比例在UI设计中的运用!

总结

黄金比例结构设计对UI设计是很重要的,但是不能过度依赖于黄金构图,不能为了用而用,要结合UI的设计规范,结合交互功能、页面的内容,恰到好处的运用。

初中级设计师最好能多运用黄金比例来做设计,用的多了心中就会自带黄金比例,为什么资深设计师随便构个图就很好看,那是因为他们心里有各种构图原理,所以得心应手。

这篇文章希望对你有一点点的启发,最后祝愿大家都能早日成为设计大神!

近期开放帮会群,加“c68041732”备注“入群”即可,我们一起学习!

长按下方二维码关注我们

原文始发于微信公众号(互联网设计帮):黄金比例在UI设计中的运用!

原文链接:https://www.uiya.cn/8313.html,转载请注明出处。

0
分享海报

评论0

没有账号? 注册  忘记密码?