网页设计技巧案例:借助数学原理构建视觉效果

文章描述:让这些数学理论来为你网页设计撑腰。

古老的数学原理已经存在了成百上千年,但是依然能够帮助我们提高设计水平,你相信吗?这些数学原理经得起时间的检验,能够在构图上给予我们指导,帮助我们构建更加和谐的视觉效果。

你可能在设计中曾经用到过数学原理,也可能没有。无论如何,数学规律适用于各种设计,从印刷设计再到网页设计。因此理解这些数学的原理,就能让你的设计更加的好看、更高瞻远瞩。

黄金比例


黄金比例,也可以说是黄金矩形或者黄金分割,最理想的比例是1.618。这种原理的起源上不知晓,但是黄金比例无处不在——从撒哈拉沙漠中的的金字塔再到巍峨的帕特农神殿。

当然不仅仅局限与建筑,我们可以从达芬奇的《维特鲁威人》中看到黄金比例,也能在无数的网页设计中看到黄金比例。

而在印刷和网页设计中,黄金比例使用的不是那么严谨,比例稍微有点变动,但是依然接近1.618.但是依然属于黄金比例的大致范围。(网页设计中的布局,有时设计师会取整数,这样设计起来能更方便一点)

黄金比例的用途广泛——在设计单个元素时,可以用黄金比例的思想来设计该元素的轮廓;也可以在多进行个元素组合时,采用黄金比例。

那使用黄金比例的效果又是什么呢?好吧,它能够模拟出自然的感觉,让浏览者感觉到平衡与和谐。

斐波那契数列


斐波那契数列指的是一组数列,每一个数来自前面两个数的和。
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765, 10946, 17711, 28657, 46368, 75025, 121393, 196418, 317811 …

斐波那契数列由 Leonardo Pisano Bogollo发现,存在了750年。他的昵称是”斐波那契”,因此得名。

根据斐波那契数列画出来的曲线呈环状螺旋。这种形状在自然界中无处不在。

该原理和黄金比例紧密相连,因为你会发现,用后一项除以前一项,比例会越来越接近1.618:1

这条原理帮助了设计师选择图片的长宽度和尺寸大小。在布局上给予设计师指导。例如在三栏式布局中中应用斐波那契数列,1170像素宽度的布局中,三栏像素宽度分别是180,270,720

三分法构图


无法避免的原理,在数字出版和印刷业中广泛应用。
在任何图像、尺寸中利用横向3条、纵向3条的假想格线,来实现规范构图。实际上这九宫格中的每一格尺寸相同。这条原理能够帮助设计师在设计中构建视觉焦点。
单一图像上,可以帮助构图。多个图像布局中,可以帮助有序组织。根据此原理(上图),眼睛一般会首先注意左上的位置,然后左下,然后右上,然后右下。(这就是为何很多设计中Logo和联系信息放在了左上)

而且三分法构图也能实现一种平衡感。而且是不对称的平衡感。因为眼睛一般会沿着九宫格格线的交点移动,并没有中心参考点。
请看优设网翻译的这篇文章:想做好设计?先来了解神奇的魔力数字”3″

坤德里几何


自于印度占星术,也叫作”坤德里”。基本上,坤德里是一个只需要三个步骤就可以得到的简单图形。画一个正方形,然后画两条对角线。连接正方形每条边的中点就可以得到坤德里图。你将会注意到图上的四个直角菱形。它们是网页设计的基础。

下面的设计就是根据坤德里几何页面布局得来的。你会发现设计中的气卦(梵文,人体的七个能量中心,又称七轮)同样也具有数学特性。

————Smashing Magazine《在网页设计中应用数学》(感谢北纬二十五度的精彩翻译,另强烈推荐此文,可以说是本文的升级版)

网格


这在网页设计中最为常见,不是吗?可以用来进行行、列的布局,合理的组织元素,让页面看起来有序。

网页设计中的分栏范围一般是三栏,最多可以分十六栏.、

数学原理是有趣的设计工具

从数学的角度考虑设计,非常有趣,但是不要太死板,非要一板一眼的遵循数学规律。这提供了几个工具,能够帮助你计算尺寸和比例。

Golden Ratio Calculator (黄金比例计算器)
Phi Calculator (黄金分割数值计算器)
Golden Ratio Typography Calculator (黄金比例字体设计计算器)
Fibonacci Sequence Calculator (斐波那契数列计算器)
Grid Calculator (格线计算器)

结论

数学原理能帮大忙!能够给网页设计带来一种组织感、平衡感。这些原理大多和数字打交道,而背后来自对自然的观察,因此它们营造的视觉效果非常和谐。
但是也不要太苛刻,严格的按照数学原理来设计。知晓、掌握便好,可以作为你”武器库”中的一件奇兵,同时也能进一步拓展你的思维。

图像来源: GeometerArtist, theilr, Hitchster 以及 brklynn.

原文地址:http://designshack.net/articles/intentional-or-not-mathematical-theory-in-design/
优设网翻译:@MartinRGB

时间: 2024-11-02 16:47:45

网页设计技巧案例:借助数学原理构建视觉效果的相关文章

登陆网页设计技巧深入分析

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 在前面"案例分析:高转换率的着陆网页设计技巧"内容,我和大家分享了高转换率着陆网页设计技巧,在本篇文章中,继续和大家一起分享登陆页面设计实践. 商业性较强的的主登陆页面,简单设置 诱惑性极强,给页面创意四射的激情,多步骤形式,细分网站观众,当场得到与游客视频对接六个设计技巧是高转换率着陆网页设计必须要达到的,这里补充四点.

CSS网页设计技巧:input按钮在IE浏览器的兼容问题

文章简介:CSS网页设计技巧:input按钮在IE浏览器的兼容问题. 这段时间在处理网页默认的input 按钮时,IE下常显现不一致的宽度问题,让人感到很纠结.所以今天请教了几位高手把这个问题解决了,现在贴出来和大家共享一下,当然这个方法在网上曾有人写过,大家可以一起来相互探讨一下. Html Code: <input type="submit"; class="form-submit" value="subscribe" name=&qu

网页设计技巧:创建网页背景材质的方法

文章描述:网页设计技巧:创建网页背景材质的方法. 在网页设计中创建背景材质通常是根据设计方向展开设计的第一步,也是确定设计基调的重要环节.虽然大多数情况下,网页背景材质是非常细微和低调的,但是由于整个背景的范围较大,所以会给人强烈的心理感受.所以这篇文章中,我会就网页背景材质创建过程中常用到的方法做一总结,希望对于大家在设计中的开头步骤能够给与帮助的参考. 一.使用现成的图案来创建网页背景材质. 1.下载现成的图案样式,或者自己动手创建图案,关于如何自己创建图案,之前我写的一篇文章<在Photo

网页视觉设计:光亮风格的网页设计作品案例

文章描述:强质感高光风格网页欣赏及其表现手法总结. 经常能见到这一类的风格的网页设计作品,它们有如下共同的特点.背景通常是纯色的柔和渐变,不添加任何的材质,色块的边缘部分通常会添加1像素的高光:在页面元素的边缘部分有着强烈的1像素高光:元素表面有如玻璃般的明显反光:底部和背景接触的部分经常会设计出倒影.这种风格的设计经常会出现在商业和企业的网页设计中,会给人留下干净清爽的印象. 我这里将这些常用的表现方法提取了出来,共有6种样式,分别是:1.镜面的内容背景:2.光亮的按钮:3.浮动的圆角水晶按钮

网页设计技巧:特殊人群的设计关怀

文章描述:网页设计技巧:特殊人群的设计关怀.   2010年12月,Thomas应邀参加中国交互设计体验日大会,展开了一次主题为<特殊人群的设计关怀>的演讲.演讲主要介绍了在做产品设计时,公司对于特殊群体的一些考虑.以下是对这次演讲的现场记录: "盲人对QQ的依赖度非常高." 在正式演讲之前,想请大家看一段视频.大家可以看出这是个怎样的用户吗?是的,这是一位盲人.可能很多人会吃惊,盲人怎么可以使用QQ?其实盲人不光使用QQ,他们正在利用互联网的很多服务充实自己的生活.我们关

网页设计技巧:网页设计中的F式布局

文章描述:今天我们来重点介绍网页设计中的F式布局.传统的布局方式,依赖布置视觉线索,"控制"用户的视觉路径,相较之下,F式布局更加自然,更加友好.本文将讲述一些F式布局的规则.原理以及设计方法. 网页设计中的F式布局 今天我们来重点介绍网页设计中的F式布局.传统的布局方式,依赖布置视觉线索,"控制"用户的视觉路径,相较之下,F式布局更加自然,更加友好.本文将讲述一些F式布局的规则.原理以及设计方法. F式布局简介 F式布局是一种很科学的布局方法,基本原理依据了大量的

网页设计技巧:焦点设置的技巧和练习

文章描述:对于网页设计师来说,焦点设置是一种技巧,更好的传达信息,更能留住用户,有点像魔法.同时也需要练习和技巧.希望这些建议能够对你有所帮助,祝你的网页能更快的吸引用户!赶紧到你的下一个项目里试试吧. 打造焦点:网页设计中的重心 在莎士比亚那个时代,观众是非常不给面子的,品味也不是很高,简而言之,那时的观众是一群没有耐心.根本不懂文学的群众. 他们辛勤的工作一天后,他们来剧院想要找点乐子和刺激,没错,他们想要的就是娱乐. 莎士比亚之前的剧作家往往不受待见,有时候观众甚至会喝倒彩.砸场子,因为他

网页设计技巧:网页图片的巧妙设计方法

文章描述:浅析网页设计中图片的使用基本原则. @MartinRGB 设计师都知道,行业的核心追求便是打造优秀的视觉效果.实际上,之所以能够成为设计师,是因为我们具备一种技艺,能够满足用户的视觉感受和视觉需求.我们可以听.读.想,我们可以想象出概念.物体以及人:但是这些感受都很抽象,只有实实在在地看到,印象才能定型. 你遇到过从来没见过雪的人吗?可能你也从来没见过雪花飘洒在天空的景象.所以这些人无法理解,到底什么是雪?他们可能会知道原理是因为寒冷而凝结了空气中的水分,落下便形成了雪,可是他们无法真

网页设计技巧:跨浏览器的CSS固定定位

css|技巧|浏览器|设计|网页|网页设计 跨浏览器的CSS固定定位{position:fixed} 不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{position:fixed}来实现的,通过它可以让HTML元素脱离文档流固定在浏览器的某个位置. IE7.Firefox.Opera,都支持CSS的{position:fixed},所以很容易实现(