java 黄金分割率_在现代设计中应用黄金分割率

2023-10-24 13:30

本文主要是介绍java 黄金分割率_在现代设计中应用黄金分割率,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

理想的网页既实用又和谐,但是即使是最老练的网页设计师也很难告诉您是什么让设计自然流畅。 尽管存在色彩和导航理论,但有时完美网页美感的最关键方面似乎无法言喻。 我们不知道它为什么起作用,但有时它确实起作用。 可能全部是因为有一个简单的概念。

通过以字面上自然的顺序支撑您网站的设计,观众可能会发现您的设计更有趣,天生令人愉悦。 这个概念称为黄金分割率 ,这是自然界遵循的数学概念,我们人类下意识地认为这是完美的表达。

黄金什么?

简而言之,黄金比例(也称为神圣比例黄金均值 )是在自然和艺术品中反复出现的数学常数。

表示为方程,当一个大于b,(a + b)大 分割等于除以b(只是看图像的下方),它约等于1.618033987。 该数字通常由希腊字母“ phi”表示,是黄金分割率

(图片来源: mathsisfun.com )

可以使用相同的理论来构造一个称为黄金矩形的矩形 。 可以将遵循黄金分割率的图像整齐地放置在一个遵循黄金分割率的矩形内。

(图片来源:creativeautomaton.com)

要构造一个金色矩形,请选择一个数字,该数字将是矩形短边的长度。 为了论证,假设500像素。 乘以1.618。 结果为809像素,即矩形的长边的长度。 因此,500像素乘809像素的矩形是金色矩形。 它遵守黄金分割率。

自然美

实际上,科学家们不确定人类如此喜欢的比例是多少。 他们确定的是我们有多喜欢它。 研究表明 ,即使对图像进行微小的更改,使其更接近黄金分割率,对观看者的大脑也会产生很大的影响。

人脸也遵循该比例,并且我们发现脸部比例更真实的人更具吸引力。 贝壳,文艺复兴时期的经典杰作,上古时期的建筑,甚至人体部位,都根据手指本身的比例进行分配 。

(图片来源: in2visualdesign )

我们内心深处的某些事物将黄金分割率表述为美丽,这是艺术家和建筑师已经使用了数千年的事实,无论是否有知。 它是图像中的主要语言。 结果是有机的,直观的,并且感觉不错。

神的组成

然后,如何在网页的构成中使用该幻数? 数学可能看起来像一个令人窒息的盒子,您的创造力将在其中挣扎,但是黄金分割率只是一个有用的指导。 有了基本的指导方针,最终可以通过消除比例和位置的某些猜测来为您提供更多的创作空间。

可以将其视为工具而不是笼子。 最基本的说,您可以使用黄金比例来指定内容区域和侧边栏的大小和位置。 固定宽度的布局是最简单的应用程序。 通过创建金色矩形的方法确定布局的整体大小。

对于网格/块

由a线创建的正方形将是您的内容块。 较小的矩形将是侧面或导航栏。 一旦确定了矩形的大小,就可以轻松算出导航栏的宽度。

  • 对于此示例,我们将说您的矩形为525 x 850像素。
  • 525是a而850是(a + b) ,并且b将是边栏的宽度。
  • 要找到b ,我们只需从(a + b)中减去325即可
  • 因此,边栏的宽度为325。

请记住,可以根据自己的目的翻转矩形,将边栏放在顶部,底部或相反侧。 只要比例保持不变,您的设计就会感到和谐。

对于文字

有一种更快的方法来获取所需的测量值,并且可以与文本内容一起应用。

  • 假设您的上下文文本为12号。
  • 将12乘以黄金比率1.618 ,您将得到19.416。
  • 标头文本大小为19或20将紧随黄金比例。

黄金分割是您的大脑理解的一种语言,通过与之沟通,您的想法将更有效地传播。 您不必完全遵守它; 基本原理就足够了。 将比例应用于图像大小,文本和图像位置之间的关系以及在侧边栏中创建细分都是可能的概念。

网格工作:三分法则

如果数学不是您的最佳选择,则可以简化黄金分割率的概念。 三分法则控制场景中兴趣点的放置。 将任何给定图像水平和垂直分成三份。 您将获得9个网格。

(图片来源: digital-photography-school.com )

根据三分法则,这些线的顶点(线交叉处)是关注点的理想放置。 扫描页面的人更有可能注意到放置在这些点附近的事物,并且该分区很容易查看。 通过将三分之二分解为三分之二,可以实现更复杂的设计。

(图片来源: net.tutsplus.com )

简而言之,眼睛可以懒惰,不必搜索重要的细节。 我们的大脑是这样的。 主要图像,新闻框,搜索栏和其他任何兴趣点都可以位于顶点上或顶点附近。 这个简洁的小捷径将为您提供一个既易于使用又使人们被关键数据吸引的设计。

列和字体大小:斐波那契数列

与黄金比例有关的另一个简单的网页设计工具是斐波纳契数 。 斐波那契数列以0和1开头。将前两个数字加在一起以生成序列中的下一个数字: 0、1、1、2、3、5、8、13、21、34等。

一点数学运算就告诉我们,顺序斐波那契序列号之间的关系惊人地接近黄金分割率–将序列中的任何数字除以该序列号之前的数字,您会得出–您猜对了– 1.618

与黄金比例一样,斐波那契数字可用于指示标题和内容文本大小之间的关系。 它也可以用来指定列的宽度,在博客和其他文本密集的布局中特别有效。 合成也可以建立在斐波那契平铺的概念上,其中,使用斐波那契序列来建立图块大小。

(图片来源: Wikipedia.org )

黄金螺旋与内容聚类

同时使用黄金比率和斐波那契数的另一种可能的方法是黄金螺旋和斐波那契螺旋 。 黄金螺旋每转四分之一圈变宽等于黄金比率,并且斐波那契螺旋使用斐波那契平铺形成。

螺旋已经在艺术品中使用了很长时间,只要数字和比例本身即可。 从理论上讲,负空间和感兴趣的视觉区域应适合螺旋形。 在这种优美的布局中,就像三分法一样,眼睛自然会被吸引到螺旋的中心以寻找细节。

(图片来源: fabiovisentin.com )

螺旋可以用作内容密度和聚类的指南。 它们可以作为网站标题图像,搜索栏和工具栏比例的基础。

当为基于大型图形的首页(例如商店首页和摄影网站)选择理想的图像时,您也可以从金色和斐波那契螺旋图中受益。

强大的信息通常是潜意识的,黄金分割率是自然界最多产的潜意识广告之一。 通过利用神圣的比例,您可以给自己一个自然逻辑和有机恩典的优势,这是所有人类都有的潜意识吸引力。 黄金分割率是您可以自由使用的另一个工具。

更多阅读:

  • 将黄金分割率应用于Web布局和对象

编者注:这篇文章由Chris Pentago为Hongkiat.com撰写。 克里斯(Chris)是一位经验丰富的Web开发人员,设计师和互联网营销商,对使您的在线业务表现出色的关键技术感兴趣。您可以在Twitter上找到他。


翻译自: https://www.hongkiat.com/blog/golden-ratio-in-moden-designs/

这篇关于java 黄金分割率_在现代设计中应用黄金分割率的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/275498

相关文章

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Spring Boot中JSON数值溢出问题从报错到优雅解决办法

《SpringBoot中JSON数值溢出问题从报错到优雅解决办法》:本文主要介绍SpringBoot中JSON数值溢出问题从报错到优雅的解决办法,通过修改字段类型为Long、添加全局异常处理和... 目录一、问题背景:为什么我的接口突然报错了?二、为什么会发生这个错误?1. Java 数据类型的“容量”限制

Java对象转换的实现方式汇总

《Java对象转换的实现方式汇总》:本文主要介绍Java对象转换的多种实现方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java对象转换的多种实现方式1. 手动映射(Manual Mapping)2. Builder模式3. 工具类辅助映

C语言中位操作的实际应用举例

《C语言中位操作的实际应用举例》:本文主要介绍C语言中位操作的实际应用,总结了位操作的使用场景,并指出了需要注意的问题,如可读性、平台依赖性和溢出风险,文中通过代码介绍的非常详细,需要的朋友可以参... 目录1. 嵌入式系统与硬件寄存器操作2. 网络协议解析3. 图像处理与颜色编码4. 高效处理布尔标志集合

SpringBoot请求参数接收控制指南分享

《SpringBoot请求参数接收控制指南分享》:本文主要介绍SpringBoot请求参数接收控制指南,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring Boot 请求参数接收控制指南1. 概述2. 有注解时参数接收方式对比3. 无注解时接收参数默认位置

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

Spring Boot 整合 SSE的高级实践(Server-Sent Events)

《SpringBoot整合SSE的高级实践(Server-SentEvents)》SSE(Server-SentEvents)是一种基于HTTP协议的单向通信机制,允许服务器向浏览器持续发送实... 目录1、简述2、Spring Boot 中的SSE实现2.1 添加依赖2.2 实现后端接口2.3 配置超时时

Spring Boot读取配置文件的五种方式小结

《SpringBoot读取配置文件的五种方式小结》SpringBoot提供了灵活多样的方式来读取配置文件,这篇文章为大家介绍了5种常见的读取方式,文中的示例代码简洁易懂,大家可以根据自己的需要进... 目录1. 配置文件位置与加载顺序2. 读取配置文件的方式汇总方式一:使用 @Value 注解读取配置方式二

一文详解Java异常处理你都了解哪些知识

《一文详解Java异常处理你都了解哪些知识》:本文主要介绍Java异常处理的相关资料,包括异常的分类、捕获和处理异常的语法、常见的异常类型以及自定义异常的实现,文中通过代码介绍的非常详细,需要的朋... 目录前言一、什么是异常二、异常的分类2.1 受检异常2.2 非受检异常三、异常处理的语法3.1 try-