网页设计中的数学运用

 

  这篇文章并不是教大家怎样做设计,而是教大家通过一些“工具”把你的设计变的更合理,更平衡;同时也要记住,规则是死的,人是活的,怎样遵守规则的同时破坏规则是决定你是否能成功的关键。

      好的设计没有周详的计划是不可能实现的,而数学在这个计划中有着举足轻重的作用。

  有人可能会说我早就知道了,比如算什么margin或是padding的,算高度什么的,这个应该就是你所说的在设计中运用的数学吧?其实不然。应该说我的数学有更高一层的意义(脸皮比较厚)。

  我觉得我在这里和大家讲几千个字,还不如给大家一个真实的例子。让大家看看我在做设计前的一些“准备工作”。

  最近我正在设计一个教会网站,我一边设计一边把一些截图发到网上获取一同行们的意见和反馈,但是大家并没有看到这些设计背后蕴藏的”玄机”。

  废话不多说了,现在进入正题!

  一、确定页面宽度

  在你设计任何一个网页之前有一些东西你是应该尽快做出决定的。其中最主要一个东西应该是页面的宽度,我个人是比较喜欢960px作为宽度,即使用户使用的是1024*768的分辨率,网页也不会出现横向移动 - 当然你可以使用任何宽度。

  第一步已经完成了,我们进入第二步。

  二、划分区域

  接下来我们要把这个960px的宽度纵向划分为12或者16个区域,请看下方图示。今天我会选择12纵向区域,所以每一个纵向区域应该是60px宽,而且每一个纵向区域的左边和右边都有一个10px的空间,用数学的语言来表达就是: 12*60+24*10=960px, 总和等于我们的页面宽度-960px。


  也许有人说这第一和第二步我几乎天天用,还要你教-不要着急,好戏在后面 - 一般设计师做完这两步就要开始设计了,而对真正的高手而言这只是开始。

  三、确定横向区域,请看下方图示

  横向区域的高度通常会比我们字体尺寸略大一点,为什么呢?因为如果我的字体是14px,横向区域也是14px,那你的字与字的行距会变得很小,让人没法正常的阅读。字的行距对于平面设计和网页设计有着不同的意思-由于篇幅有限会在将来的文章中继续探讨这个话题。如果你懂前端 (html & css), 你可以把横向区域当作的css中的line-height属性。经过反复思考,我们这里会用18px作为我们横向区域的高度.


  小小的总结一下,我们已经有了页面宽度,纵向区域,也有了横向区域。

  四、确认这个设计中的”域”

  通过对”域”的实现会使我们的网页布局更合理更美观, 比如通过”域”我们可以大概计算出如何摆放一些页面中的重要元素。(切记,”域”是起辅助作用,而不是唯一标准)。

  平面设计师,杂志设计师,图书设计师在设计之前一般都会把A4,A3等的页面从上到下划分为几个区域(也就是我们所说的”域”),这样在设计的时候设计师可以很好的控制页面中每一部分元素的平衡(视觉,内容和布局平衡),从而使这个设计达到不错的效果; 但是在网页中这些理论就非常的不实用,比如设计杂志的话都是用的A4纸大小,那么宽度和高度都是确定的,而在网页设计中,高度是不定的,那应该怎么办?!!!!

  数学的魅力在这个时候再次给予我们无穷的力量!———— 黄金分割线。要是你和我一样,在上数学课的时候老是做小动作,千万不要被这个名字给吓到。

  通过第一步,我们已经确认了我们的页面宽度是960px, 所以我们可以通过黄金分割的原理来确定我们的”域”的高度。谁知道黄金分割的系数是多少?! - 答案是1.618。 于是我们可以把我们的页面宽度(960px)除以 黄金分割的系数1.618来得到”域”的高度 - 960/1.618=593px。

  通过运算我们知道了”域”的高度,如果你把593px除以我们的横向区域的高度(18px – 查看第三步), 593/18=32.94444444,也就是说每一个”域”的里面有接近33个横向区域。

  但是现在摆在我们眼前还有一个问题,如果把593px最为我们设计中”域”的高度,那么你会发现我们的页面也许一般也只能放下一到两个域,显然这对我们的布局不能起到很好的指引作用-要知道不少页面的高度小于593px,那要这个域还有什么用?!

  五、通过家喻户晓的”三分法”来进一步改进我们的”域”的大小

  我们只要把现在”域”的高度(593px)除以 3 - 593/3=197.6666667, 约等于 198px, oh yes!!!!!,然后我们只要把 198-18=180px, 这个就是我们”域”的高度了。为什么要在最后减去18px,那是因为我们会给每个”域”之间加一个空白空间,就像在我们的每个纵向区域的左边和右边都有一个10px的空间一样,而且同时18px也是我们的横向区域高度,请看下方示意图。


  通过以上的5步我可以很负责的告诉你————你可以开始做视觉上的设计了。大家可以用以上的理论做出一套适合自己项目的页面宽度,纵向区域, 横向区域,”域”,通过他们的辅助把你的设计水平提升到一个新的层次!切记———— 规则是死的,人是活的,怎样遵守规则的同时破坏规则是决定你是否能成功的关键。简约的东西通常是通过复杂的过程得到的。

时间: 2024-07-29 07:36:40

网页设计中的数学运用的相关文章

网页设计译文:网页设计中数学的运用

"数学是美妙的."对于在数字和公式面前畏缩的人来说,这听起来也许是荒谬的.但是,从最小的贝壳到最大的漩涡星系,自然界和我们这个宇宙中大部分美丽的东西都呈现出数学特性. 其实,古代最伟大的哲学家之一亚里斯多德曾说过:"数学格外地展现了秩序.对称和极限,而这些是美的极致形式". 由于其美丽的天性, 数学一直以来都是艺术和建筑设计的一部分.但它至今还没有在网站设计中发挥作用.其原因可能是因为我们大多认为数学是创造性的对立面.相反,其实数学可以成为创作创意设计的工具.也就是

网页设计中手绘风格的运用 改善网站的用户体验

怎样在网页中应用手绘风格,改善网站的用户体验 本文中,我们将讨论怎样在网页中应用手绘风格,以改善网站的用户体验. 识别度与真实感 手绘风格非常有利于展示人性色彩,形成独特的识别度,为用户带来真实感.当你收到好友寄来的明信片时,你总是希望看到卡片是手写的,带着好友独特的笔迹,而不是用电脑打印出来的.一张手写的便笺也总是比电脑打出来的纸片更加随意和亲近. 在网页设计中,道理也是一样的:手绘和手写风格的应用可以让产品显得更加独特.更加真实.更加值得信赖.下面是手绘风格带来识别度和真实感的三个例证: 独

改善用户体验 网页设计中手绘风格的运用

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 [核心提示] 怎样在网页中应用手绘风格,改善网站的用户体验 本文中,我们将讨论怎样在网页中应用手绘风格,以改善网站的用户体验. 识别度与真实感 手绘风格非常有利于展示人性色彩,形成独特的识别度,为用户带来真实感.当你收到好友寄来的明信片时,你总是希望看到卡片是手写的,带着好友独特的笔迹,而不是用电脑打印出来的.一张手写的便笺也总是比电脑打出来

网页设计中的图标的使用技巧与资源合集

  提到图标设计,似乎每个设计师都有话说,但是要做好图标设计真的那么容易么?今天这篇文章针对网页设计领域的图标设计进行了相对全面的梳理,从设计技巧到设计资源一应俱全,但愿能帮上你! 图标是每一个现代UI中不可或缺的组成部分,它们不仅能协助UI布局组织内容,而且轻量级的图标融入界面也不会喧宾夺主.不仅手机和平板的APP UI中会大量用到各种图标,而且iPod和智能手表的界面中也是如此,这正是因为图标具备快速直观传达信息的能力. 在网页设计刚刚兴起的时代,小图标就已经被早期的网页设计师和开发者投入使

网页设计中最常见的30款英文字体

  关于英文字体,对我们网页设计师朋友们来说一定并不陌生,即使我们很少做英文语系的网站,但在浏览国外网站的时候,大家一定都会有或多或少的认识.其实不单单是在网页中,很多移动操作系统和浏览器中都广泛使用了今天我们即将介绍的这些字体. 想必大家也都能猜出来像 Arial.Helvetica 这种大名鼎鼎的字体肯定在里面了,那么还有什么呢?一起来详细了解一下吧! 首先,补充个小知识: 1.网页设计中的英文字体,一般有以下五类: serif(衬线) sans-serif(无衬线) monospace(等

网页设计中最常用到的设计细节

前一段时间在企业管理界流行一句格言叫"细节决定成败".企业管理当然不是我们这里要讨论的主题,但是,把这句话放在网页设计当中的确是颠扑不破的 真理.我们的眼睛和感觉总是非常敏锐的,即使是完全不了解网页设计技术的人也能够从一堆拙劣的设计作品当中挑选出那一个优秀的设计作品. 虽然他说不出来为什么这件东西比那些都好,但是直觉会告诉他他自己喜欢哪一个.如果别人向我们问起为什么这件作品要优于其它呢?我们的回答是"很大一部分原因是因为优秀的设计作品总是充满了丰富的细节."在这篇文

网页制作高手进阶:网页设计中的文字运用

设计|网页|网页设计  如今,互联网越来越走近我们的生活,网上冲浪也渐渐成为我们生活不可缺少的一部分.网络世界五彩缤纷,涌现出大量优秀精美的网页.大量网络信息的呈现,无非就是通过文本.图像.Flash动画等,其中, 文本是网页中最为重要的设计元素.对于网页设计初学者而言,了解和掌握网页设计中的文字排版设计就显得尤为重要,下面笔者想谈谈一己之见.     文字的格式化     1.字号.字体.行距字号大小可以用不同的方式来计算,例如磅(Point)或像素(Pixel).因为以像素技术为基础单位打印

学院观点:网页设计中的十大新错误

错误|设计|网页|网页设计 曾经我指出的网页设计中的十大错误,至今在很多站点上依然可见,并且影响着页面的可用性.也就是说,这三年来情况并未得到多大改善. 不幸的是,新的网络技术及其应用导致了一个全新层次的错误.以下是其中最严重的十个. 一. 破坏或减慢"后退"按钮 (我的看法:有时候对页面的适当控制是必须的.) "后退"按钮是网络用户的生命线,同时也是继超文本连接后最常使用的导航特征.用户可以随意尝试网页所指向的任何地方,而只需点击一两次"后退"

网页设计中META标签写法的常见错误及后果

错误|设计|网页|网页设计 网页设计中META标签写法的常见错误及后果[摘要]:网页设计中META标签描述和关键词写法的常见错误包括:整个网站所有的网页使用同样的META标签内容,META标签中网页介绍信息与网站内容缺少相关性等.本文归纳了网页设计中META标签写法的常见错误,并分析了出现不合理的META标签设计的可能后果. 网页设计中META标签写法的常见错误及后果 搜索引擎优化通常会涉及到网页META标签的话题,META标签内容写作的是网络营销导向网站建设中网页设计的基本工作内容之一,在网络