• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 超全面总结!黄金分割在界面设计中的应用

超全面总结!黄金分割在界面设计中的应用

作者:水手哥 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含版式布局,界面设计,经验分享,黄金分割,黄金比例等相关知识,水手哥希望在学习及工作中可以帮助到您

最近跟一线大厂设计师交流,他们给我的反馈是做设计的时候不单单只是视觉上的美感,更需要方法论来支撑,这样才更具有说服力。

黄金分割大家应该早有耳闻,作为一名设计师,怎么来利用黄金分割线使其构图更加完美呢?

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

一、至高无上的黄金分割比例

这种东西是很神奇的事情,你了解的越多越会觉的这是一个不可思议的事情。甚至有人称之为上帝的密码。

那黄金分割线到底是个什么东西呢?它在什么位置?它在画面中的哪个地方呢?

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

我们大体概括一下:

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

1. 0.618的比例怎么来的?

有人做了一个实验,他们拿着一些长方形去问全世界的人,说哪个长方形最好看?结果所有的人都不约而同的选择了这种长方形。西方的,东方的,土著的都选择了如下图的这种长方形。

科学家们就很奇怪它的奥秘到底在哪?要分析分析它。这个长方形如果从中间画一条线,把它分割成两个形状的话,右边可以是一个正方形,左边小的长方形的比例和原来的长方形的比例是一摸一样的。

小的长方形也可以切割出一个正方形和一个等比例的更小的长方形。这种长方形只有黄金分割的长方形才能做到。

2. 运用黄金分割线构图

画面长宽比不同,黄金分割线位置也不同。这里我们列举常用的长宽比尺寸4:3/3:2/16:9/1:1。

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

不同长宽比的画面我们按照0.618:1的比例,一个画面可以切割出4条黄金分割线,上分割线/下分割线/左分割线/右分割线。我们在实际构图中怎么利用黄金分割线快速排版?

3. 基本的运用方法

把主体放线上,当然线状的主体才能放线上

在构图中我们经常遇到正方形/长方形等规则的形状,前期我们把规则的形状中心放在黄金分割线上,等所有内容添加完成后再分析画面的重量,微调来平衡画面。

不是所有的物体都是刚刚好放在黄金分割线上。轮廓化的形状应该根据什么来跟黄金分割线重合呢?应该是形状的重心,而不是中心。

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

多条黄金风格线构图

一个画面中,可以切割成上下左右四个黄金分割线,前期练习时可以尽可能把黄金分割线利用好。

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

具体选择哪一条?

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

根据元素选择

界面设计时要根据元素多少进行选取更合适的黄金分割线。

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

根据哪边更精彩选择画面

把上下或左右两条黄金分割线对比一下就能确定参考哪一条黄金分割线了。

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

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

视线的影响

人和动物的视线朝向会影响到它的摆放位置。

上图中小狗狗的视觉朝向是左边,所以我们肯定得把小狗狗放右边。因为它是一个不规则造型,当遇到不规则造型时我们应该尝试找到它的重心,正好它整个形态成一条直线,它的重心应该是沿鼻子的往右的一条隐形的线。主体确认好后,我们在加上 logo/标题/正文/导航进行排版,保证画面平衡进行微调。(如下图)

二、简化的黄金分割线——三分线

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

什么意思呢?左边是黄金分割线,右边是三分线。三分线就是均匀的把长方形的长和宽切三段,均匀的砍三段,每个方格都是一样大小。

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

上图中绿色的虚线是右黄金分割线的位置,黄色的虚线是右三分线的位置,我们没有把主体的重心直接放在黄金分割线上,在这个画面中,因为左右的信息量很大,给人很重的压迫感,所以主体如果太靠近左边就会让画面失去平衡,这时候我们就把主体放在了三分线上。

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

黄金分割还不止这么多的表现形式。它还有一种更复杂的表现形式叫黄金螺旋线。而从黄金螺旋线里可以推导出一个黄金兴趣点。

于是我们就把最佳兴趣点和黄金螺旋线都统称为黄金分割的衍生品。在设计中应该是算比较高级的一种构图技法了。

三、最佳兴趣点

来看看黄金螺旋线衍生的最佳兴趣点在什么位置?(如下图)

在设计中实际应用的时候,想找出这个点来绝对不是很容易的事情。所以怎么办呢?有简单找到最佳兴趣点的方法吗?长方形的一条斜线链接起来,另一个顶点画一条垂直于这条斜线的点基本就是最佳兴趣点的位置。(如下图)

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

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

您可能想查找下面的文章:

  • 超全面总结!黄金分割在界面设计中的应用
  • 如何做好 Banner设计?我总结了这4类基础知识
  • 内部教程!超详细的支付宝设计规范之版式篇
  • 为什么你始终做不好视觉设计?
  • 没素材就做不出好作品?高手说不一定!

相关文章

  • 2018-08-23小科普!Android和iOS的设计到底有什么不同?
  • 2018-08-23PS快速入门?看这篇经典的万字笔记就够了!
  • 2018-08-23轻松看懂规范!详解组件控件结构体系之网络异常类
  • 2018-08-23高手带你读经典!我从《纽摄》获得的30条手机摄影启示
  • 2018-08-23能成功传递出情绪和情感的网页,同样也是要看脸的
  • 2018-08-23实战案例!不同导向型信息架构在产品中的应用
  • 2018-08-23想让作品从80分到100分?你需要这些包装作品的小技巧!(升级篇)
  • 2018-08-23我明明就设计的很好看啊,但为什么上线还是被骂了?
  • 2018-08-23关于极简主义设计,这篇文章帮你安排得明明白白
  • 2018-08-23从这4个角度,做出情感化设计的产品

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 收藏起来!超实用的引导页设计基础手册
    • 这些价格设置小策略,说不定让你的销量翻一翻!
    • 高手经验总结!关于设计规范的一点理解
    • 未来的趋势!好的 AI 对话体验应该是怎样的?
    • 如何使整个页面内容居中使高度适应内容自动伸缩
    • 如何输出高质量的交互稿?来看京东设计师的总结!
    • 想紧跟流行风尚?这5种平面设计趋势了解一下
    • 网页设计师需要的知识体系有哪些
    • 2018年,网页和APP中背景的8个主要设计趋势
    • 新年新气象!这3个趋势正在引领2018年1月的网页设计

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有