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实现检查多个时间段是否有重合

《Java实现检查多个时间段是否有重合》这篇文章主要为大家详细介绍了如何使用Java实现检查多个时间段是否有重合,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录流程概述步骤详解China编程步骤1:定义时间段类步骤2:添加时间段步骤3:检查时间段是否有重合步骤4:输出结果示例代码结语作

Java中String字符串使用避坑指南

《Java中String字符串使用避坑指南》Java中的String字符串是我们日常编程中用得最多的类之一,看似简单的String使用,却隐藏着不少“坑”,如果不注意,可能会导致性能问题、意外的错误容... 目录8个避坑点如下:1. 字符串的不可变性:每次修改都创建新对象2. 使用 == 比较字符串,陷阱满

Java判断多个时间段是否重合的方法小结

《Java判断多个时间段是否重合的方法小结》这篇文章主要为大家详细介绍了Java中判断多个时间段是否重合的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录判断多个时间段是否有间隔判断时间段集合是否与某时间段重合判断多个时间段是否有间隔实体类内容public class D

IDEA编译报错“java: 常量字符串过长”的原因及解决方法

《IDEA编译报错“java:常量字符串过长”的原因及解决方法》今天在开发过程中,由于尝试将一个文件的Base64字符串设置为常量,结果导致IDEA编译的时候出现了如下报错java:常量字符串过长,... 目录一、问题描述二、问题原因2.1 理论角度2.2 源码角度三、解决方案解决方案①:StringBui

Java覆盖第三方jar包中的某一个类的实现方法

《Java覆盖第三方jar包中的某一个类的实现方法》在我们日常的开发中,经常需要使用第三方的jar包,有时候我们会发现第三方的jar包中的某一个类有问题,或者我们需要定制化修改其中的逻辑,那么应该如何... 目录一、需求描述二、示例描述三、操作步骤四、验证结果五、实现原理一、需求描述需求描述如下:需要在

Java中ArrayList和LinkedList有什么区别举例详解

《Java中ArrayList和LinkedList有什么区别举例详解》:本文主要介绍Java中ArrayList和LinkedList区别的相关资料,包括数据结构特性、核心操作性能、内存与GC影... 目录一、底层数据结构二、核心操作性能对比三、内存与 GC 影响四、扩容机制五、线程安全与并发方案六、工程

JavaScript中的reduce方法执行过程、使用场景及进阶用法

《JavaScript中的reduce方法执行过程、使用场景及进阶用法》:本文主要介绍JavaScript中的reduce方法执行过程、使用场景及进阶用法的相关资料,reduce是JavaScri... 目录1. 什么是reduce2. reduce语法2.1 语法2.2 参数说明3. reduce执行过程

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2

Java调用DeepSeek API的最佳实践及详细代码示例

《Java调用DeepSeekAPI的最佳实践及详细代码示例》:本文主要介绍如何使用Java调用DeepSeekAPI,包括获取API密钥、添加HTTP客户端依赖、创建HTTP请求、处理响应、... 目录1. 获取API密钥2. 添加HTTP客户端依赖3. 创建HTTP请求4. 处理响应5. 错误处理6.

Spring AI集成DeepSeek的详细步骤

《SpringAI集成DeepSeek的详细步骤》DeepSeek作为一款卓越的国产AI模型,越来越多的公司考虑在自己的应用中集成,对于Java应用来说,我们可以借助SpringAI集成DeepSe... 目录DeepSeek 介绍Spring AI 是什么?1、环境准备2、构建项目2.1、pom依赖2.2