青岛网站建设公司,青岛网站制作公司-奈薇建站网
建站咨询热线:0532-8878113113165158935 
知识普及 » Web设计中的黄金分割

Web设计中的黄金分割

奈薇网站建设 2019-07-31 19:23发表
阅读次数 1379
  数学是优美的.听上去有点奇怪?当我第一次开始设计的时候,我确信如此。数学如此刻板乏味。你可能会惊讶的发现,最美观的设计,艺术作品,物体,甚至人都有数学上的共同点。尤其是黄金分割,也被称为神之比例,希腊字母表示其为Φ(phi).本教程会剖析一个网站的布局,以及如何对其黄金分割。作者:JarelRemick是ThemeForest的一名作者,在Moscow,Idaho.

  网页骨架

  这些是web页面的主要元素。有很多不同的方法去组织它们,但是这种布局也许是最常用的。

  Container所有的web页面都用一个container,主要是为了同一个目的:去包含一些页面元素,然而这个方法实现各有不同。例如,body标签或者是最常用的div。甚至于过去常用的table(不要使用table作为你的container,这是一个破方法)。想想container作为你房子的外墙,里面包含卧室,厨房,起居室等等。

  container的类型:

  Liquid:根据浏览器宽度填充。Fixed:指定的宽度,并不会根据浏览器宽度改变。

  Headerheader并不真的是一个特定的元素,尽管某些人会认为它是。它更多是用在涉及到你放置你的logo,导航栏,tagline的web页面顶层的地方。许多人更愿意把这些元素包含在一个div里以方便使页面样式和内容分离。header会被视为一个container,所以它有两种类型选择,就是上文提到的liquid或fixed。

  Logo你的logo是你的身份和品牌。最常用的是把logo放在你header的左上角。我们的阅读习惯是,从左往右,从上至下,所以你的log应该放在访问者第一眼能看到的地方。

  Navigation页面导航是最重要的元素之一;你的访问者需要用它来使用你的站点。它应该是容易被找到且易用的,这就是为什么大多数的人把它放在header部分,最少也是在页面顶端附近的原因。

  navigation类型:

  Horizontal:水平显示,被称为‘navigation’。Vertical:垂直显示,被称为‘menu’

  MainContent每个人都(应该)知道,内容才是王道!当人们来参观你的站点,这是他们想看的主要元素。它应该是web页面的焦点,所以参观者才能快速找到他们想要的。

  Sidebarsidebar是放置你次要内容的元素,像一些广告,站点搜索,订阅链接(RSS,Twitter,Email,等),联系方法等。这个元素不是必需的,尽管右很多站点用它。它大多数是放在右边的,但是你也能把它放在左边或者两边,只要不扰乱主要内容的浏览就行。网站使用横向或纵向导航,sidebar往往是用纵向导航。

  Footerweb页面的尾部总会有一个页脚,让您的访客知道他已经到达了你web页面的结束部分。和heaser一样,footer也不是一个特殊的元素。在你的页脚里包含版权,法律声明以及主要的联系方式。包含一些重要的链接是个好主意,比如homepage,contactpage,等.有些网站用这个区域提供一些相关材料或者其他重要信息。

  "Whitespace"你可能有强烈的愿望去填充这些页面上的空白,但是请不要这么做。“空白”也是相当重要的。你可以看看NetTuts网站是如何有效的使用空白区域的,创建了页面平衡给人一个好的感觉。

  以上是web页面的骨架,现在我们来看如何黄金分割这些元素。

  黄金分割和使用网格(Grids)还记得之前我说数学是美丽的吗?我们认为视觉的吸引力是基于比例的(比如,黄金分割)。几千年来,艺术家,设计师,建筑师等都有意无意的在使用了一个共同的比例来增加他们作品的美感。这个神奇的数字是什么呢?1.62(实际是1.618...)我不会说这个数字的起源,但是我会告诉你如何使用它。

  使用黄金分割是非常简单的。比如你像找到你主要内容和sidebar列表的宽度。你将使用你内容区域总的宽度除以1.62.然后得到555.55px.我们不需要那么精确,所以我们就用555px。现在你就知道你的主要内容元素是555px的宽度,你的sidebar是345px。看看多么容易?!

  但是等等先,乐趣不止于此!你也可以应用黄金分割到其他元素的宽度和高度。

  UsingGrids如果你和大多数的人一样,不想每次都抱着个计算器来计算这个黄金比率。那么最简单的方法就是用grid。所以你需要做的就是把你的宽度或是高度分成三分。

  要产生更详细的gird,只需要继续三等分就行。如果你读了前一篇文章“与BlueprintCSS框架的亲密接触”的话,你会看到BlueprintCSS框架用了一个详细的gird系统。不仅仅是gird设计更容易更快,而且它也创建了一个美观的布局。如果你还没有使用gird设计,那么这是一个很好的尝试机会。你可以为fireworks,photoshops或者其他软件从http://960.gs下载grid模板。

  正如你看到的,NetTuts很好的遵循了黄金比率。顶端三分之一的网页再次分成了三分,非常接近黄金比率。难怪NetTuts的设计是如此吸引人!

  如果你要做一个新的设计,我严重推荐你找一些流行的站点,评价他们的布局,以及如何应用黄金比率和gird。然后花一些时间去实践使用黄金分割,并在你的布局上面使用gird。

Web设计中的黄金分割相关标签:网站制作设计网站网页制作网站申请
相关热点推荐
Web设计中的黄金分割
做优化犹如做体操 平衡
alt属性和title
企业为什么要做网站?企
我来做淘宝商城的首页设
企业网站建设的目的是什
企业网站建设的六大步骤
如何做好网站外链建设?
企业网站建设的一般要素
iPadPro上线,意
行之有效的网络推广方式
企业建站注意事项(1)
网页设计的色彩思考
网站策划的具体内容
改变首页需要慎重考虑
网页设计中排版与布局基
当前网站建设市场的特点
对于中小型企业,青岛网
信息架构的流程引入
建站事项1
农业网站推广的策划
企业如何发展网站
做网站一定要知道的定律
如果你被上个网络公司伤
分享引导蜘蛛抓取文章的
百度快照更新方法
青岛网站设计时网页上必
提高搜索引擎对网站的重
如何向必应提交网站地图
网页文字的阅读体验
如何提高百度的网站内容
网站域名,建站的第一步
SEM基本指导原则:D
网页设计中排版与布局小
如何提高网站的流量和访
网页设计中色彩的应用
企业网站设计中框架功能
关于网站排名的基本原则
建站新手必读文章:个人
网页代理
奈薇建站网青岛网站建设公司/青岛网站制作公司,专业提供"气质"型网站建设及精美网站制作服务,同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展

热点地区:青岛网站建设价格 青岛即墨网站制作公司 开发区信息港 山东在线门户
  • 备案号
  • 鲁ICP备13010283号
建站咨询热线0532-88781131 15166683288 13963906391
版权所有© BangJianZhan.Com & Nev.Cn 青岛网站建设/网站制作公司
青岛雨后网络科技有限公司 - 青岛市市北区福州北路90号,景泰尚都6层
已经为您服务了
161个月 20