我要投搞

标签云

收藏小站

爱尚经典语录、名言、句子、散文、日志、唯美图片

当前位置:香港六合彩挂牌 > 多面体模型 >

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

归档日期:06-06       文本归类:多面体模型      文章编辑:爱尚语录

  构图的时候是否使用黄金分割线构图并不是绝对的,它只是方法之一。但是黄金分割比例,在全世界乃至全宇宙确实都是至高无上的。

  黄金分割大家应该早就有所耳闻,作为一名设计师,可能一直感觉它离我们很遥远。那么怎么能利用黄金分割线更加完美的构图呢?

  说实话呢,构图的时候是否使用黄金分割线构图并不是绝对的,它只是方法之一。但是黄金分割比例,在全世界乃至全宇宙确实都是至高无上的。

  这种东西是很神奇的事情,你了解的越多越会绝的这是一个不可思议的事情,甚至有人称之为上帝的密码。那黄金分割线到底是个什么东西呢?它在什么位置?它在画面中的什么地方?

  有一条线条,如果我们从中切一段,如果左边是0.618这么一个比列,右边是1这么一个比例。如果符合这样的左右比例我们称之为黄金分割比,那么中间切割的位置就是我们黄金分割线的位置。

  我们大体概括一下:黄金分割线是指将整体一分为二,较大部分与整体部分的比值,等于较小部分与较大部分的比值,其比值约为0.618,这个比例被公认为是最能引起美感的比例。

  总结一句线的比例怎么来的?有人做了一个实验,他们拿着一些长方形去问全世界的人,说哪个长方形最好看?

  要分析分析它。这个长方形如果从中间画一条线,把它分割成俩个形状的话,右边可以是一个正方形,左边小的长方形的比例和原来的长方形的比例是一摸一样的。小的长方形也可以切割出一个正方形和一个等比例的更小的长方形,这种长方形只有黄金风格的长方形才能做到。

  如上图:长方形的图片是有规律的形状,我们把它的中心暂时先放在右黄金分割线上,从平衡角度来看还是右边重,因为我们还没有把页面所以元素放进去,到时候可以根据画面的平衡感来微调。

  如上图:我们把图片放在右黄金分割线上,正文大标题放在上黄金分割线上。这样就搭上俩条黄金分割线了,再加上logo/分类/导航等信息整个界面就更完整了,如下图:

  初期进行练习的时候,黄金分割线能搭上几条就搭上几条。这么多黄金风格线条,到底选择哪一条?

  如上图:最终所以元素都确定后,我们把图片放右黄金分割线上,正文大标题放在上黄金分割线上,正文跟按钮的中心放在下黄金分割线上,图片轮播按钮的中心放在左黄金分割线上。这样四条黄金分割线搭上都利用起来,在这基础之上再去微调相信画面会更出彩的。

  如上图:我们开始把图片放在下黄金分割线上,上面留了太多空间,图片的内容展示的也很少,画面感不够丰富。

  如上图:根据画面的丰富程度,我们把图片放在靠近上黄金分割线的位置,把图片中主体的放在靠近右黄金分割线附近。然后再添加内容丰富画面,我们为画面添加logo/数据/导航/分类/按钮,让画面更丰满。如下图:

  如上图:小狗狗的视觉朝向是左边,所以我们肯定得把小狗狗放右边。因为它是一个不规则造型,当遇到不规则造型时我们应该尝试找到它的重心,正好它整个形态成一条直线,它的重心应该是沿鼻子的往右的一条隐形的线。

  主体确认好后,我们在加上logo/标题/正文/导航进行排版,保证画面平衡进行微调。如下图:

  我们还有个困难,那就是0.618:1的黄金分割线的位置确实不是很好找。所以对于设计师来说,我们有一种简化黄金风格线的做法?

  三分线的位置跟黄金风格线的位置差不了多少,但是黄金风格线比起三分线更靠近中央的位置,是这么一个概念。

  不要说很严谨的把它重心摆在三分线上,一来黄金风格线真实所在的位置是三分线往里靠一点的位置,二来我们说黄金风格线构图/三分线构图不是说让你一定要完全重叠,大差不差就行,具体情况还是要具体分析。

  在设计中实际应用的时候,想找出这个点来绝对不是很容易的事情,所以怎么办呢?有简单找到最佳兴趣点的方法吗?

  长方形的一条斜线链接起来,另一个顶点画一条垂直于这条斜线的点基本就是最佳兴趣点的位置,如下图:

  画面中不止一个最佳兴趣点,一个画面中会有四个兴趣点,会更好的方便我们利用,如下图:

  画面长宽比不同,最佳兴趣点的位置也不同,这里我们列举常用的长宽比尺寸4:3/3:2/16:9/1:1,如下图:

  在移动端主流尺寸中,iOS尺寸使用750*1334,安卓尺寸使用1080*1920,这俩个尺寸正好等同于一倍图375*667的比例。

  的摄影作品,图片质量很高,整体风格很符合现在主流的抖音风,那就顺便做个直播类的ui界面设计来诠释最佳兴趣点的魅力。

  案例一,同样大小的图片我们按照俩种方式进行摆放,左边的图片我们参考黄金分割线,把人物的眼睛靠近上黄金分割线的位置;右边的图片我们把人物的右眼放在了右上的最佳兴趣点的位置。然后我们去掉辅助线再对比下。如下图:

  虽然我们参考了俩种方式进行排版,图片本身就很精美,很多人就感觉随便放放就好了,左边的黄金分割线构图单看也是很棒的,

  从画面的饱和度跟视觉引导,显然右边的整体感觉更饱满一些,加上直播平台元素整个界面。

  最佳兴趣点和黄金分割线交点不重合的,黄金分割线的交叉点比最佳兴趣点更靠近画面中心。

  如上图:画面中最突出的是人物的头发,我们把头发的形成的点放在了左上最佳兴趣点的位置,微调人物,在画面中的人物重心差不多在三分线所在的这条直线上。

  标题和正好的做为一个整体的中心,放在下黄金分割线的位置上,再加上音乐封面/歌曲名/播放按钮再微调画面使画面达到视觉平衡。

  如上图:音乐专辑封面为正方面,最佳兴趣点就是正方形的中心点,封面人物重心放在正方形的中心,封面放在靠近上黄金分割线的位置。大标题差不多在左上最佳兴趣点的位置,整个画面重心在左黄金分割线的位置。

  为了达到视觉平衡,右上角加了一个头像形成大小对比,让画面更稳定,不至于左边太重而失去平衡。加上播放按钮/推荐的封面后再调整,如下图:

  斐波那契螺旋线,以斐波那契数为边的正方形拼成的长方形,然后在正方形里面画一个90度的扇形,连起来的弧线就是斐波那契螺旋线。

  如上图,我们可以根据字体的高度比来排版,这里我们大字高度:间距:小字高度比为8:5:5,可以灵活使用斐波那契数列比,多排几个版式找到最适合的一个。

  在设计字体大小的时候,可以根据字体的长度来做为参考,黄金螺旋线px。下面的字体比较长,我们就乘以1.618来得到比较大的比例226.52,取整数为226,我们对应长度字号取整数即可。

  我们通过斐波那契数列比8:5:3:2:1绘制了正方形,在后台复杂的界面中,我们肯定要参考画面中重要的最小宽度来确定这个比例大小。红框框就是我们确定的最小宽度,确定宽度后8:5:3:2:1得到大小不一的方格,剩下来就是根据内容自由组合合适的方格。

  很神奇的事情发生了,好的作品大体都符合这个规律,几像素的偏差已经不重要的,所以前期我们可以参考方法论,当你的能力上来之后,就可以放弃它,慢慢凭自己的感觉来判断作品的好坏。

  打个比方:很多时候我们会找一张动物图片用圆切法去绘制它,但是我们绘制时候因为不知道怎么去做减法,会让这个形态变的复杂,绘制结果更多像是图案或者图形,而不是标识。我们使用黄金螺旋比例去切形态的时候要抓住动物的主体形态和特征,尽可能的抽象化简单化。

  黄金分割线、三分线、最佳兴趣点,每个还可以分上下左右4个构图方案,这里我们就已经有12种排版方式可以考虑了。构图的时候是否使用黄金分割线、三分线、最佳兴趣点并不是绝对的,它只是方法之一。如果你有排版基础,以这个为参考相信一定排出不错的版式。

  黄金分割上中下就写完了,最近跟一线大厂设计师交流,他们给我的反馈是做设计的时候不单单只是视觉上的美感,更多的需要方法论的东西,这样才更具有说服力。

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。

本文链接:http://bv-gs.net/duomiantimoxing/674.html