学网页设计怎么样设计,

符号 “@” 是怎么设计出来的?
是在email之前出现的吧,还是为了email而设计的?早期的键盘上有“@”吗?
好早之前自己提的问,结果自己找到答案了。。。好早之前自己提的问,结果自己找到答案了。。。
The origin is uncertain. But surly it is not designed for email.
@ 这个符号,我们在台湾称为“小老鼠”。是真的,不开玩笑。
哈哈,楼主自问自答?大体差不多吧,确实是修道士发明的,但是不太对啊。ad在拉丁文里相当于at,而公元AD是公元Anno Domini的缩写。因此用@ 来替代ad,用以区别公元AD。上述说法是我在网上可以查到的普遍的说法。所以。。。还有别的说法:@ 是从意大利语的 à演变过来的。那个时候的欧洲还没有印刷机,因此书籍主要采用誊写的方式进行传播。当时的基督教很重视知识的传承,而且《圣经》是少数值得誊写传播的书籍,因此大量僧侣誊写《圣经》以广泛传播。但是誊写的效率很低,而at出现的频率很高,因此就出现了一些速记法来提高誊写的效率。所以出现了用@符号这种可以一笔画结束的符号来代替at,提高效率。
在高中的时候做过一篇英语阅读理解,就是说@的起源的。我根据模糊的记忆说一下吧。那篇文章说,关于这个符号的起源有很多种说法,有一种最流行的,和的答案相似,是欧洲人对”at“这个单词的简写,因为这个介词的使用相当频繁,久而久之,人们便把”at“简写成了@。
以下文字截自关于该符号的起源有以下几种说法:从商业上的“each
at”(单价)发展而来,因为@看起来像是放在小“e”里面的小“a”。它被用于区分表示总价的“at”(只用一个字母“a”表示)或者“per.”。如,“12 apples @ $1”(12个苹果,每个1美元)的价钱为12美元,而“12 apples at
$1”(12个苹果共1美元)的价钱为1美元,所以将他们区分清楚很重要和要;中世纪的僧侣对拉丁单词ad(在,向,约)的简写,书写在旁;的介词αν?的简写,意思为“以某一速率或比率”或者“每”;有学者宣称,其在时期,弗朗切斯科·拉比(Francesco Lapi)日签署的一份威尼斯商业文书上发现了符号@,该文件是关于与的生意的,特别是一个@的葡萄酒的价格;@表示(:anfora;和:arroba)。而现时,单词“arroba”表示的即是at符号以及一个重量单位。这一用法中,该符号代表一个“双耳瓶”,这是一个根据每个标准双耳瓶的容量所制定的重量和容积单位,传入北欧后又有了现代“以某一速率或比率”的意思和用法。出自诺曼法语“à”,意思为“每”,例如“2 widget à ?5.50 = ?11.00”(每件5.50英镑,两件共11.00英镑)就是英国人在上一直使用到1990年代的一种速记形式。而在现代法语和瑞典语中仍有这样的用法。从这个角度看,@是人们为了书写简便(写à时笔尖要从纸上抬起来)而将à变形得来的,这种介于@和à之间的折衷写法在法国的路边市场上仍可见到。纽约朗伯打字机公司1902年生产的朗伯打字机上开始包含@。这个字符也被收录于原始的1963年ASCII字符集中,不过这不足为奇,因为@本来就是一个标准的商业打字机字符(1961年的的键盘上带有)。
@=at,不是为email设计的。具体如何出现的再查查。
看到一篇阅读,还蛮好玩的,有不同的说法,分享一下,当阅读理解了That little “a” with a circle curling around it that is found in E – mail addresses is most commonly referred to as the “at” symbol.Surprisingly though, there is no official, universal name for this sign. There are dozens of strange terms to describe the "@" symbol.Before it became the standard symbol for electronic mail, the "@" symbol was used to represent the cost of something or how heavy something is. For instance, if you purchased 6 apples, you might write it as 6 apples "@" $1.10 each.With the introduction of e-mail came the popularity of the "@" symbol. The "@" symbol or the "at sign" separates a person's online user name from his mail server address. For instance, . Its widespread use on the Internet made it necessary to put this symbol on keyboards in other countries that have never seen or used the symbol before. As a result, there is really no official name for this symbol.The actual origin of the symbol remains a mystery. History tells us that the @ symbol came from the tired hands of the Middle Ages. During the Middle Ages before the invention of printing machines, every letter of a word had to be copied with great efforts by hand for each copy of a published book. The monks that performed these long, boring copying duties looked for ways to reduce the number of individual strokes
per word for common words. Although the word “at” is quite short to begin with, it was a common enough word in text and documents so that those monks thought it would be quicker and easier to shorten the word “at” even more. As a result, the monks changed the shape of “t” into a circle to surround “a”, thus leaving out two strokes in the spelling “t”. 当然最主要的原因还是中世纪僧侣抄写使得“@”的广泛传播,上面有答案也提到这一点。
无聊画出来的!可能花体字练多了!
我记得看过一篇报道,是说@这个符号是源于美国一个邮递员(据说还是女的)填写地址清单(还是表格)的时候的一个单词“at”,写多了,写快了,又是(华丽)的手写体,然后慢慢的变成了@。
已有帐号?
无法登录?
社交帐号登录9个LOGO设计网站,看完你就知道怎么设计了
查看: 2181|
摘要: LOGO看似简单,但是设计过程中的一点一滴都很有讲究。因为LOGO作为品牌的象征,要一目了然地传达给人这个品牌的思想和形象。在此,小编为大家整理了7个LOGO素材/欣赏网站以及2个LOGO在线制作网站,里边有非常多关于L ...
LOGO看似简单,但是设计过程中的一点一滴都很有讲究。因为LOGO作为品牌的象征,要一目了然地传达给人这个品牌的思想和形象。在此,小编为大家整理了7个LOGO素材/欣赏网站以及2个LOGO在线制作网站,里边有非常多关于LOGO设计的内容和技巧,有些是免费的,但有一小部分是需要付费的,嗯~希望各位设计师能够从中汲取到灵感,对你们有所帮助!
优秀设计师资源推荐
1、logodust
网站地址:
Logodust 网站是一个提供免费LOGO设计案例下载的站点,每周二都会进行新增免费LOGO图案设计范文的更新,所有的LOGO设计都可以免费下载并用于商业项目使用。如果你先要找干净的LOGO原型图,不妨关注这个网站。
2、Logoinstant
网站地址:
Logoinstant是一个web2.0 logo设计收集站点,除了可以欣赏各种LOGO创意外,网站还提供免费的原始素材下载,你你可以自由编辑修改,原文件包括photoshop的PSD文件和Illustrator的AI文件,有的甚至还有字体文件。如果你想要设计一款logo的话,那这个网站就是你不错的选择。
3、LogoPond
网站地址:
LogoPond:LOGO设计作品收藏网可以在上面发现很多优秀的LOGO设计,如果此时你缺乏创意灵感的话或者对你有所帮助!
4、Logo Lounge
网站地址:
Logo Lounge素材交流平台是全球最大的LOGO素材站点,可以提交自己的LOGO设计,也可以购买你所需要的LOGO作品,是设计师们交流的平台。
5、LogoFaves
网站地址:
创意LOGO收藏者分享网是一个收集互联网LOGO设计作品的网站,汇集了世界各地的设计师们设计的LOGO作品,帮助设计师从优秀的设计作品中汲取灵感。如果你有不错的设计作品,可以提交自己的LOGO作品和作品链接。
6、LogoDesignLove
网站地址:
图标LOGO设计技巧分享网是有logo爱好者David Airey创建的博客网站,致力于分享一些LOGO设计技巧,LOGO设计资源及其LOGO欣赏等。
7、LogoMoose
网站地址:
在线LOGO设计师社区是一个优秀的LOGO素材站点,展示了设计师们的灵感和设计理念,是设计师交流和展示作品的好地方。
8、Supalogo
网站地址:
Supalogo:在线logo制作工具的使用非常简单,如同输入关键词一样输入你的logo名称(目前不支持中文),然后点击“Options”,进行相关设定,比如字体类型、大小、颜色、透明度等,再点击“Generate”,就会呈现出logo的效果。
9、&LogoTypeMaker
网站地址:
Logo Type Maker是一个实用方便的免费在线 Logo生成器。只要输入文字(暂不支持中文),Logo Type Maker 就会随机产生出 12 种不同样式的 Logo,点击Refresh按钮可显示新一组logo,可放大预览,直到遇见满意的logo为止。
部分带宽支持: |如何去设计一个完美的icon? - 设计 - 伯乐在线
& 如何去设计一个完美的icon?
这篇文章讨论了图标设计准则的6个步骤。这6个步骤遵循了图标设计的基础,包括一致性、易识别和清晰。高效图标设计的原则已经被图标设计师John Hicks在他的《The Icon Handbook》一书中详细地讨论过,同样google的“material系统图标设计指南”也有讲过。本文中被讨论的6个步骤应该被看做一种指南,而不是一列教条式的规则。学会什么时候打破规则,什么时候遵循规则,这也是成为一个优秀设计师的一部分,我们也将在这论证。
在本文中运用的图片案例,被讨论的6个步骤将会运用到改进一只狗上(确切地说,是一只柯基),这个图标是由iconfinder的用户Kem Bardly最近提交的。这个图标是有潜质的,但还不是够优美到可以称为“高质量”。我们给Kem一些简单的小技巧,只要做一些小小的改进。他的图标已经准备被作为优质图标通过了。下面展示的图片显示了Kem的图标改进前后的版本。在接下来的章节,我们将循序渐进地解释它是怎么从最初版变到最终版的。
左边的图片是原始图标。右边的图片是重新设计过的图标,运用了本文中提到的原则。
注意,文章中讨论的原则适应到网页图标时,他们通常也适用于印刷图标。典型的300 dpi的印刷材料,使得像素化呈现本质上是毫无意义的。如果你是一个平面印刷设计师,文中提到的所有原则都是适应的,但是你可以忽略像素化呈现的作品。
有效图标设计的三个特性
对于组成图标的3个属性:形式、统一审美和识别性,好的图标显示了一套系统的经过深思熟虑的方法。当新设计一套图标,把这些属性都考虑在迭代的途径中,从整体(形式)出发,进入到细节(识别性)。即使你只设计单个图标,这3个属性也仍然能被应用,能从单个图标中推测出。
毋庸置疑,设计一个有效的图标不止这3个属性,但有这3个精选属性是设计一个好的图标的开端。为了相对简洁性,我们专注于考虑这3个主要的属性。
形式是一个图标根本的结构,或者说是它的组成部分。如果你忽视图标的细节,在主要图形周围画了一条线,那他们是形成了一个方形、一个圆形、一个垂直或水平的矩形,一个三角形或者更多有组织的图形?最主要的几何形状——圆形、方形和三角形——能为图标设计打下一个稳固的视觉基础。在Kem Bardly设计的柯基图标示例中,狗的头部是由两个三角形和两个椭圆形组成的。一个人开始会画一个最大最简单的形状,然后才定义越来越多的细节。另一个人从最简单的形状开始设计图标,然后添加更多的细节——但是只有尽可能多的需要沟通概念的细节被表达出来,它就会成为一个物体,一个想法或行动。
这张图片的关键线条展示了设计构型的基本形状
审美的一致性
单个图标的构成元素能运用到整套图标中,就是我们说的视觉的一致性。这些元素比如是圆形或方形的角,角度的大小(2像素,4像素…),被限制和保持一致的线条粗细(2像素,4像素…),图标风格(扁平的,线条的,被填充的线条或符号),配色等等。审美一致性是设计元素的集合,或是设计中你为其成为一个整体所贯穿使用的手法。在下面的例子中,会发现Kem图标中的这3只狗都有一些共同元素,比如2像素的圆角,2像素宽的眼睛和心形嘴巴。
这3只狗图标有共同的设计元素,形成了视觉的一致性
识别性是产品图标的基本,它造就了图标的唯一性。一个图标是否从根本上起了作用,依赖于观众能多么容易地去理解这个图形、它的含义及它描述的动作。一致性包括展示观众普遍会和你的想法联系在一起的特性,但是它也包括哪些独特的,出乎意料的元素,像把狗狗的鼻子设计为心形。记住识别性不仅仅是指对形状、想法或它表达的动作的理解,也指识别出你的图标。从这方面来说,美学的一致性和识别性能经常重合在一起的。下面的图标,我们能识别出一只是柯基犬,一只是西伯利亚的爱斯基摩犬。因为他们独特的颜色、头部形状和耳朵,但是仍然会认为他们是同一组图标,因为他们有共同的设计元素。
每一只狗的特性使得他们能各自被识别,但是它们共同的设计元素又可以让人识别出是同一套图标
迄今,我们已经看了有效图标设计的3个主要属性。在接下来的部分,我们将深入看6个步骤是如何妥善处理这3个领域的问题。
1、从栅格化设计开始
不同网格大小的好处将在一个单独的文章中得到最好的处理。从我们的目的出发,我们做出了一个32*32的网格。我们的网格也包括一些基本的指导原则,来帮助我们为每个图标设计创造最基本的形式。
这里,我们能看到一个32*32的像素化网格,有一个2像素的边框(或者说是不可达区域)作为留白
最外面的2像素我们叫做“禁区”。避免把图标的任何部分放在这个区域,除非是绝对需要的。这个禁区存在的原因是为图标留出一些透气的空间。
图标形式的一个组成部分是大体的形状和方向。如果你在一个图标的外部边缘画了一条线——这个边界框,如果你能够——这个形状将会形成一个正方形,圆形,三角形,垂直居中的矩形,水平居中的矩形或平行四边形。
圆形图标处于网格的正中央,将经常触碰到内容区域四周的边沿,而不触及到禁区。注意,打破禁区这个规则的一个普遍原因是,有一些重点或小元素需要超过圆形区域。如上所述,为了保持设计的完整性。
圆形图标对齐网格和关键线
方形图标也是在网格的中央,但不这样做,在大多数情况下,会扩展到内容区的最外层边缘。为了保持圆形和三角形图标的视觉面积的一致性,大多数矩形和方形图标将会在中间对齐到关键线(以下图片的黄色区域)。什么时候对齐到每一条关键线由图标本身的视觉面积决定。什么时候使用哪种尺寸只需要多加练习。看下面的方形布局图片。上面说到的3个同轴的方形就是以下的浅蓝色、橙色和浅绿色区域。
方形和圆形图标的大小及对齐是相对于网格的
在32像素的正方形里,你会发现20*28像素垂直的和水平的矩形。我们认为这些矩形,要么是垂直的,要么是水平的。尝试让任何图标的大小做适应,去匹配这些20*28像素大小的矩形。
这些垂直或水平方向图标的对齐和大小是相对于网格的
在对角线方向的图标是对其到圆形区域的边缘,如下图所示。注意,这个锯子的最外面区域是大约和圆形的边缘对齐。这一块区域你并不必很准确地知道在哪,大概相近就可以了。
在对角线方向图标的对齐和大小是相对于网格的
记住你没有必要每次都遵循网格和指南。网格的存在是为了帮助你让图标保持一致性,但是如果你不得不在做一个好的图标和遵循规则中选择,那就打破这个规则——有节制的遵循。
Hemmo de Jonge因他的昵称 Dutch Icon而出名,如他所说:
“一个独立的图标的本质重要性超越了保持整体性。”
2、从简单的集合图形开始
用简单的圆形、三角形和矩形画图标的主体,从这个开始做起。本质上,即使一个图标最终大多数将成为有组织的,刚开始时在 Adobe Illustrator中设计图形。在设计图标时,特别是为屏幕设计更小的图标时,手绘的边缘那些微小的变化将会使一个图标看起来不那么精致。从基本的集合图形开始将会使边缘更加精确(特别是沿着曲线),也能让你快速地调整元素之间的相对大小了,当然确保你是遵循网格的。
这是一个基本的几何图形,2个三角形,2个椭圆,组成了这个柯基图标。
3、按照这样的顺序设计:边、线、角落、曲线和角度
尽可能不要让设计看起来过度地呆板和无趣,角落、曲线和角度都应该有数学化的精确。换句话说,按照这个顺序,当涉及到细节时,不要尝试盯着看或徒手画图标。元素的不统一会降低图标的质量。
大多数情况下,坚持用45度角,或者它的倍数。在45度角上反锯齿是均匀地走势。(活跃的像素一直是对齐的),所以结果是显而易见的,这个角完美的对角线是很容易被识别的,这也是受人眼喜欢的。这个可识别的模式建立了一套图标的一致性,让单个图标成为了整体。如果你的设计规定你必须打破规则,尝试用两等分(22.5度,11.25度等等)或者是15度的倍数。使用情景是不同的,所以结合具体情况而定。用45度角等分的好处是,反锯齿的走势仍然是可接受的。
常规反锯齿的 45 度角的特写镜头
会降低图标质量,也意味着专业和业余之间的区别最明显的一个区域就是不那么完美的图标。而人的眼睛能精确地识别微小的变化,手眼的协调不能总达到很高的精确度。依赖于图形工具和顺序尽可能的设计曲线,使用adobe illustrator(或者你的矢量软件)控制修改键(shift键),或者,更甚一筹地是,用Astute Graphics的VectorScribe和 InkScribe更精确地控制贝塞尔曲线。
手绘角落效果不理想
因为我们看到了上面提过的修改前的图片,手绘的线会画出不规则的曲线,这会降低图标本身的质量。
我们用illustrator的贝塞尔曲线工具画出了这些非常精确的曲线,而不是手绘
通常圆角(或者说半径)值为2像素,一个32*32像素的图标,2像素的半径已经足够被看出是圆形的,但不太过于让角落过于圆滑以改变设计中的个性(比如“泡泡”形象),你选择的半径值是基于你想给图标怎样的个性。是否使用圆角是一个审美上的决策,也要考虑到一套图标的整体美感。
精确的圆角
已经开始设计几何图形了,我们现在可以增加2像素的外围轮廓,来演示图形工具是怎么改善设计的,以及细节上的一致性,比如圆角。
重新设计柯基图标的过程如此漫长
这个被大大提升的版本展示了新设计的要点:统一的圆角,光滑的曲线,耳朵边基本的线条粗细。
像素化的展示
在设计小尺寸的图标时,像素级的对齐是很重要的。一个小尺寸图标边缘的去锯齿会让这个图标失真。不和像素网格对齐的线条之间的空隙将会变得反锯齿和模糊。让图标和像素化的网格对齐会使得边缘在直线上很清晰,在精确的角度和曲线上也很清晰。
如上述,45度角是最好的,因为被用来定义角的像素是成对的,阶级式的,段对端是完全对角的。对角落和曲线也是同样的:它们越精确,反锯齿就越清晰。但是注意,在更大规模和更高分辨率的屏幕上,比如视网膜屏幕,像素化呈现并不太需要,至少对于反锯齿而言。
谈到线的粗细,2像素就很理想了,在必要情况下可以使用3像素。目标是提供可视化的层级和多样性。不用介入太多样式,那样会破坏一套图标的一致性。超过3个或者一套能失去它的凝聚力。2和4像素粗的线条的好处是他们是2的倍数,因此很容易向上和向下扩展。大多数情况下,避免使用很细的线,特别是在符号和扁平化图标上。除非你刻意设计一种“线性风格”的图标,比起线条,更依赖于光阴去定义形状。
Iphone图标展示了线条粗细的一致性
4、跨图标设计使用统一的设计元素和符号
Hemmo de Jonge of Dutch在Icon Salon 2015上有一个精彩的演讲,他大篇幅地讲到了这方面的图标设计。在他为荷兰政府做的2年图标系统项目中,Hemmo和他的设计同伴注册了一个等级给每个图标。并不是每个图标都有等级,但大多数是这样的。这种符号,适当并一贯地使用在一套图标中,真的能把图标集合在一起成为整体。
常用设计元素的使用
在我们的狗狗图标例子里,我们使用了一个通用的风格元素:心形鼻子。使用心形作为鼻子这个视觉特性不仅仅把这些图标组合在一起,而且也增添了一种异想天开的元素,为我们四条腿的朋友沟通情感。
狗狗图标常用设计元素的使用
大多数情况下,即使一个图标的主要部分发生了改变——比如说,风格——构建审美统一的元素仍然可以系在一起,像上面所看到的那样。我们已经重构了相同的3只狗狗图标的符号风格,而不仅仅是平面风格,它们仍然是保持审美一致的。
狗狗图标使用了共同的设计元素,但是有着不同的造型
5、谨慎使用细节和装饰
图标应该能尽快地表达对象、想法或行动。太多的小细节将会变得复杂,这会让图标缺乏识别性,特别是小图标。一个单独的图标或一整套图标的细节处理水平对视觉的一致性和识别性都是很重要的一个方面。确定一个或一套图标的细节水平是否正确的一个好方法是,以最少的细节来表达清楚图标的意义。
在上面的这个版本中,已经离我们最终要完成改善的稿子很靠近了。眼睛周围的黑色轮廓已经变成了耳朵周围毛皮裹着的棕色区域。脸上黑色的线已经不见了,但是柯基脸上的白色标记上面仍然有2像素的空间。注意,我们仍然保留了一些原来版本的元素,比如扁平化的鼻子。我们会在下一步中调整它。
6、让它变得独特
有天赋的设计师的数量似乎每天都在增长,他们做出了高质量图标,其中很多是免费的。不幸地是,很多的设计师过度地依赖于趋势或者大多数流行设计师的风格。作为创意专业人士,我们应该看看图标以外的其他领域,比如建筑、字体设计、工业设计、心理学、自然及任何我们能找到灵感的其他领域。因为很多图标看起来很相似,,所以让你的设计变得独特尤为重要。
柯基脸上心型的鼻子使得这个图标变得独特而有个性
在最终设计的形象中,我们有一个独特的可触摸的心形鼻子,为这个设计添加了一些新奇和无拘无束的感觉。
这些简单的步骤应该被看到是一个起点,而不是最终的指南。设计图标没有简单的方法。本文中,我们已经概述了保持基本一致的设计方法。但是其他设计师当然也有他们自己的观点和技巧。成为一个更优秀的设计师最好的方法看尽可能多的视觉参考,读大量的资料,经常画草画(无论你去哪带一个草图本),不断地练习,练习,再练习。
左边的图片是原始图标。右边的图片是重新设计过的图标,运用了本文中提到的原则。
我们已经分享了如何构建高质量图标的基本原理。这些原理也是技巧:通过练习,任何人都能学习并掌握它们。记住,为了设计更好的图标,从一般(形式)开始,然后到特定的细节(可识别)。让你的图标保持内部的一致性,同样在整套图标中也要保持一致性。注意图标和图表集中这些被共享的元素(审美的统一)。一旦你已经掌握了这些基本的技巧,你就能更专注于让你的图标脱颖而出:你独特而又创意的视野。你有自己的技巧、建议或你想分享的基本原理吗?在下面评论中给我们留言吧。
可能感兴趣的话题
关于设计频道
分享UI、网页、交互、用户体验设计和各种设计教程。
新浪微博:
设计频道微信公众号
(加好友请注明来意)
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页,交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2016 伯乐在线什么是黄金比例,并如何应用到设计上? | 设计达人
爱设计,爱分享。
什么是黄金比例,并如何应用到设计上?
赞助商链接
吉萨金字塔和达芬奇传世画作《蒙娜丽莎》与 Twitter 和 百事之间的共同点是什么?
他们的设计都是基于黄金分割的啊!
黄金分割是一个数学比例。我们在大自然中很容易找到这样的比例,当它用于设计时,能创造出有生命力的、纯天然的视觉作品,愉悦我们的眼睛。但究竟什么是黄金比例,如何使用它来提高你设计水平?
黄金比例是多少?
我们会把它尽可能解释得简单哟!(也被称为黄金分割,中庸之道,神圣比例或希腊字母φ)存在于被分割成两截的线段中,我们设较长的一段为a,较短的一段为b,那么有:(a)÷(b)=【(a)+(b)】÷(a),都等于1.618。
但是不要让这些数字难倒你。在设计中,黄金比例可以归结为美学——创造和激发一种通过比例与和谐产生的美感。当应用于设计中时,黄金比例提供了一种艺术性;一个未知因素,一定的描述的事物。
这种和谐和比例已被成千上万的世纪所承认:从吉萨金字塔到雅典的帕特农神庙;从米开朗基罗的《亚当的创生》到西斯廷教堂天花板上梵高的《蒙娜丽莎》;从百事
到 Twitter logo。甚至于我们的身体和脸也同样遵循这样的数学比例:
事实上,我们的大脑似乎本能地更喜欢使用黄金比例的对象和图像。这几乎是一个潜意识的力量,以至于哪怕为图像作更接近黄金比例的微妙调整对我们的大脑也有很大影响。
黄金比也适用于形状。画一个正方形,设定边长为1,改变其中一边使其变为1.618,一个完美的黄金比矩形便赫然纸上。
现在,如果你把正方形叠加在矩形上,那么这两个图形会让你看到一个黄金比矩形。
如果你一直按照这样的方式把黄金比应用到新矩形上,那么你最终会得到一个个逐渐缩小的正方形:
假如你在上面这张黄金比例图的每个正方形的对角画一条曲线,你将会看到一个黄金比例曲线(亦称斐波 那契序列)—— 这个序列中的每一个数字是前面两个数字之和。我们从零开始,结论如下:0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144……等等。
通过在每个正方形中画对角曲线你会发现,这张图出现了一条神奇的黄金比例曲线:
这条美丽的螺旋曲线出现在自然界很多的物种当中——蕨类植物、花卉、贝壳,甚至飓风——这也许就是为什么我们会觉得他们具有强烈的视觉吸引力。因为毕竟,天然的就是最好的。
我们再进一步研究它吧,在每个正方形中画一个正圆——这样的结果是所有圆的大小也同样遵循1:1.618,它们的比例看起来是多么的平衡啊!
所以,我们现在有了黄金比正方形、黄金比矩形和黄金比圆,快到你的设计中尽情释放它们吧!
应用黄金分割的五种方式
OK,你现在已经理解黄金比例的概念了,那么让我们看看它是如何提升设计的整体水平,
黄金比例可以运用设计中的许多地方,像布局、间距、内容、图片和版式。
01.布局——用黄金比例设置空间布局
我们常常把黄金比例看作是确定空间布局的实用指南。应用黄金分割的一个非常简单的方法是将矩形的长宽比设为1:1.618.
例如:960像素是非常典型的画布宽度,用这个宽除以1.618,得到一个594像素的数值,把它设置为高度,就是一块完美的画布。
现在,打破这种布局,使用黄金比例分成两列。瞧!在这两个形状使你的设计呈现协调的黄金比例布局。
这样的两列布局非常适合网页设计,在这种格式中你会看到许多在线内容。美国 National Geographic 就采用这种布局构建了一个整洁、易于阅读、结构良好的网站。它为读者提供了一个合乎规律的秩序井然的、平衡的和层次分明的阅读体验。
02.间距—黄金比例布局
间距是任何设计的一大要素,它能营造负空间氛围,使最终的结果要么成功要么毁灭。确定元素的间距是相当耗时的事情,但是,运用黄金分割图,让正方形来引导你确定每个元素的位置,工作起来会更省力好 多。这将确保你的间距和比例是通过严密的计算而不是“凭感觉来的”,同时任何为达到黄金比例而作的微妙的调整都可能导致所有元素的差异。
再者,如果你需要同时处理几个元素,也可以运用多个黄金比例来保持设计作品的整体连贯性。
设计工作室 Moodley 为布雷根茨 Festspiele 表演艺术节开发了一款新的品牌标识,包括logo、logo风格和拼贴设计,应用于程序、节目单和户外活动。节目单着重强调 了摄影和说明性的拼贴,还有一个留出大片空白的波形logo。黄金比例用来确定每个元素的大小和位置,以确保封面比例协调。
新加坡的一家设计机构 为Terkaya 财富管理 创建了一个视觉识别系统,如下图。这张商务名片上的三个元素——小鹰、文字和大鹰——都分布在一条黄金曲线的不同位置。
同时,将黄金比矩形放置在小鹰的位置,它也是呈这个比例的。
03.内容—运用黄金螺旋
黄金螺旋可以被看作是确定内容的位置“指南”。我们的视觉会自然而然的落到螺旋的中心,这个位置有很多细节性的元素,所以在做设计时我们要非常关注螺旋的中心位置和螺旋走过的视觉空白区域。
再来看国家地理网站,你会发现在曲线的中心存在着第二个、小一点的logo。这是一个加倍提高品牌形象的好地方,因为这里很自然地吸引了我们的注意力。是潜意识的吗?也许吧。黄金比例可以让一切看起来那样自然。
下面这个网站由平面设计师 Tim Roussilhe 为 自己设计。它的内容虽看起来非常密集,但它的排版也遵循黄金比例和黄金螺旋规律,它的重点是文本的左上部分的网站。我们的视线首先会落在顶端“你好,我的 名字叫提姆”这个位置,慢慢地,会向Tim的工作内容转移,然后看到一个菜单按钮,进而发现左上角的一个图标,在视线到达这个设计的“消极区域”前,我们 已经接收完所有它需要告诉我们的信息了。
在这个为 Saastamoisen saatio 所做的视觉识别系统中,随着黄金螺旋的不断延伸,内容也愈加密集。当我们的视线与曲线越近,字体和间距也在不断减小。字母无序排列,但一回生二回熟,通过一遍遍重复使用,品牌名称也变得熟悉起来。
Helms Workshop 工作室为Fullsteam啤酒厂设计了这个品牌,他使用黄金比例和黄金螺旋处理布局和内容。设计中的各种元素在每个独立的正方形中都显得非常和谐,视线的 重点也正好落在主人公、邮票、酒精含量和厂址上。当我们看到这张标签时,通过黄金比例构图让我们 注意到其中的内容,进而让我们了解创始人和品牌故事的细节。
04.图像——黄金比例(三分法)
无论是传达重要信息或创建一个美观的照片,结构对任何图像都很重要。黄金比例可以帮助设计师搭建一个结构,引导观众的视线到重要的位置去。使用黄金比例,将一张照片分割成不等的三个空间,再运用线条和相交的点去创建结构。
比例是1:0.618:1——设定第一和第三纵列的宽度为1,那么中间纵列的为0.618。同样,水平方 向:第一和第三横排的高度为1,中心一行的宽度为0.618。现在使用这些线和交点吸引观者的注意力向这些位置集中。这些元素形成了一种张力,增加了设计 结构的趣味和力量。
另一个(稍微简化)通过黄金比例处理图像位置的的方法是三分法。它不像黄金比例一样精确,但相当接近。三分法即将空间划分为三个水平或垂直方向都相等的空间,使图像的重要元素都围绕在矩形中心理想情况下的四个交点上。
这个是《Complex》的封面,歌手Solange Knowles担当模特,它同样使用黄金比例来确定正负空间的比例。Solange 的鼻子和前额位于三分水平线最顶端一条,鼻子和眼睛则分别落在两条垂直线上,这里刚好是矩形中心。
这张封面是 Jason Mildren 为《Pilot》杂志所作,它的设计原理就是三分法。矩形中心的角落的设计呈现出一种趣味,虽然是中心,但大部分是空白的空间。模特的眼睛正巧落在这个角落里,洞察着观众的内心。
《Feld》的这张封面将模特对称的眼睛作为黄金比例的重心。这张封面看起来相当不错,因为模特偏离了画面中心,而且他的脸几乎与左侧阅读指南垂直。
封面的整体布局同时遵循黄金分割和黄金螺旋。内容集中在螺旋的位置,越接近螺旋的中心内容越详细。
05.格式——黄金比例圆
我们现在知道黄金比例可以用来创建比例和谐的正方形和矩形,它也还可以用于创建黄金比的圆。每一个正方形中的圆都与其邻近的圆成1:1.618的比例,这就是完美的圆!
使用黄金分割圆不仅能创建和谐、均衡的设计,也能保持格式的一致性。让我们回过头来看百事可乐和Twitter的logo。
百事可乐的标志基于两个按照黄金比例相交的圆。小圆在重迭的图案中并不那么明显,但是通过logo中间的白色部分还是能被识别的。
Twitter的标志基于几何结构并重点利用了圆的完美。从下面这张图我们可以看出,它确实是运用黄金比例绘制的,但不完全精确。图案总体还是遵循黄金比平衡、协调、有序的特点。
30天设计30个黄金比例制作的动物LOGO
其实黄金比例没想像那么难,乌克兰设计师 Andriy Yurchenko 他用30天设计30个用黄金比例制作的动物LOGO,而且非常美丽。
轮到你了!
你可以尝试使用黄金比例的各种元素来调整方案,让设计看起来跟美观。也许只是些微的调整,但是情人眼里出西施,它可能会使你的作品由好变成更好,由简单变得伟大。
乔治- Doczi写道极限的力量黄金分割来创建和谐的力量来自其独特的能力,团结不同部分的整体,这样每个保存自己的身份,但融入了更多的单一模式。
译:设计达人网 QSF
英文原文:/blog/what-is-the-golden-ratio/
赞助商链接
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,欢迎转载。
印刷工艺必备神技
设计师必看
手机APP设计
新手推荐!
Web用户体验入门书籍
web前端&设计群}

我要回帖

更多关于 设计说明怎么写 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信