浅谈网页设计中的黄金分割
您还可以参考以下网页设计相关资源:
《美学设计—黄金分割与九宫格》
《使用CSS创建三列固定布局结构》
《精选15个国外CSS框架》
《精选31个网站界面设计实践教程》
《推荐20个关于网站可用性及界面设计的网站》
网页骨架
这些是web页面的主要元素。有很多不同的方法去组织它们,但是这种布局也许是最常用的。
Container
所有的web页面都用一个container,主要是为了同一个目的:去包含一些页面元素,然而这个方法实现各有不同。例如,body标签或者是最常用的 div。甚至于过去常用的table(不要使用table作为你的container,这是一个破方法)。想想container作为你房子的外墙,里面 包含卧室,厨房,起居室等等。
container的类型:
- Liquid: 根据浏览器宽度填充。
- Fixed: 指定的宽度,并不会根据浏览器宽度改变。
Header(页头)
header并不真的是一个特定的元素,尽管某些人会认为它是。它更多是用在涉及到你放置你的logo,导航栏,tagline的web页面顶层的地方。 许多人更愿意把这些元素包含在一个div里以方便使页面样式和内容分离。header会被视为一个container,所以它有两种类型选择,就是上文提 到的 liquid 或 fixed 。
Logo(网站标识)
你的logo是你的身份和品牌。最常用的是把logo放在你header的左上角。我们的阅读习惯是,从左往右,从上至下,所以你的log应该放在访问者第一眼能看到的地方。
Navigation(导航)
页面导航是最重要的元素之一;你的访问者需要用它来使用你的站点。 它应该是容易被找到且易用的,这就是为什么大多数的人把它放在header部分,最少也是在页面顶端附近的原因。
navigation类型:
- Horizontal: 水平显示,被称为‘navigation’。
- Vertical: 垂直显示,被称为‘menu’
Main Content(主内容区)
每个人都(应该)知道,内容才是王道!当人们来参观你的站点,这是他们想看的主要元素。它应该是web页面的焦点,所以参观者才能快速找到他们想要的。
Sidebar
sidebar是放置你次要内容的元素,像一些广告,站点搜索,订阅链接(RSS, Twitter, Email, 等), 联系方法等。这个元素不是必需的,尽管右很多站点用它。它大多数是放在右边的,但是你也能把它放在左边或者两边,只要不扰乱主要内容的浏览就行。网站使用 横向或纵向导航,sidebar往往是用纵向导航。
Footer
web页面的尾部总会有一个页脚,让您的访客知道他已经到达了你web页面的结束部分。和heaser一样,footer也不是一个特殊的元素 。在你的页脚里包含版权,法律声明以及主要的联系方式。包含一些重要的链接是个好主意,比如home page, contact page, 等. 有些网站用这个区域提供一些相关材料或者其他重要信息。
“Whitespace”(留白)
你可能有强烈的愿望去填充这些页面上的空白,但是请不要这么做。“空白”也是相当重要的。你可以看看NetTuts网站是如何有效的使用空白区域的,创建了页面平衡给人一个好的感觉。
以上是web页面的骨架,现在我们来看如何黄金分割这些元素。
黄金分割和使用网格(Grids)
还记得之前我说数学是美丽的吗?我们认为视觉的吸引力是基于比例的(比如,黄金分割)。几千年来,艺术家,设计师,建筑师等都有意无意的在使用了一个共同 的比例来增加他们作品的美感。这个神奇的数字是什么呢? 1.62 (实际是 1.618…) 我不会说这个数字的起源,但是我会告诉你如何使用它。
使用黄金分割是非常简单的。比如你像找到你主要内容和sidebar列表的宽度。你将使用你内容区域总的宽度除以 1.62. 然后得到555.55px. 我们不需要那么精确,所以我们就用555px。现在你就知道你的主要内容元素是555px的宽度,你的sidebar是345px。看看多么容易?!
但是等等先,乐趣不止于此!你也可以应用黄金分割到其他元素的宽度和高度。
使用网格
如果你和大多数的人一样,不想每次都抱着个计算器来计算这个黄金比率。那么最简单的方法就是用grid。所以你需要做的就是把你的宽度或是高度分成三分。
要产生更详细的gird,只需要继续三等分就行。如果你读了前一篇文章“与Blueprint CSS框架的亲密接触” 的话,你会看到Blueprint CSS框架用了一个详细的gird系统。 不仅仅是gird设计更容易更快,而且它也创建了一个美观的布局。如果你还没有使用gird设计,那么这是一个很好的尝试机会。你可以为 fireworks,photoshops或者其他软件从 http://960.gs下载grid模板。
正如你看到的,NetTuts很好的遵循了黄金比率。顶端三分之一的网页再次分成了三分,非常接近黄金比率。难怪NetTuts的设计是如此吸引人!
如果你要做一个新的设计,我严重推荐你找一些流行的站点,评价他们的布局,以及如何应用黄金比率和gird。然后花一些时间去实践使用黄金分割,并在你的布局上面使用gird。
ps:http://blog.bingo929.com/golden-ratio-in-web-design.html
转载于:https://www.cnblogs.com/zytrue/p/8493377.html
浅谈网页设计中的黄金分割相关推荐
- [转]浅谈apple设计中的黄金分割
你研究或者不研究,美就在那里,不偏不移:你发现或者不发现,黄金分割就在那里,不多不少.了解他,发现美,也给自己增加精彩,好作品不会没有依据. 黄金分割相关书籍 黄金分割漫话 分寸,设计:发现黄金比例恒 ...
- 浅谈网页设计中的色彩理论
无可争议的是,色彩是任何设计领域中最重要的一方面. 设计师在决定了一个网站风格的同时,也决定了网站的情感,而情感的表达很大程度上取决于颜色的选择.颜色是很有力的工具,所有设计师在设计网页时就应该明白这 ...
- 浅谈网页设计中的构图
网页给人最直观的感受就是它的页面框架与构造,就像一座大楼的主体框架与形态,你可能记不起东方明珠塔和艾菲尔铁塔是用什么颜色或什么材料涂的外 墙,但我想你一定记得起它们的什么样的形状.同样,网页设计中的构 ...
- 网页设计师谈网页设计中的色彩理论
色彩是任何设计领域中最重要的一方面. 设计师在决定了一个网站风格的同时,也决定了网站的情感,而情感的表达很大程度上取决于颜色的选择.颜色是很有力的工具,所有设计师在设计网页时就应该明白这一点. 一.颜 ...
- 浅谈网页设计的形式美法则
不知为什么会突然想起写这方面的内容,作为一个前端开发人员,设计能力不是主要的,但是我觉得艺术或者关于美学方面的知识,了解多些对提升自我是大有裨益的.它不仅仅对前端开发的用户体验方面有较大的帮助,也会提 ...
- 网页设计分割线代码_网页设计中的黄金分割
网页设计分割线代码 数学是美丽的. 这听起来有点奇怪吗? 刚开始设计时,我肯定是这么认为的. 我这么想,数学是如此刻板,常常无聊. 您会惊讶地发现,大多数美学上令人愉悦的设计,艺术品,物体甚至人与人之 ...
- allegro差分信号走线_浅谈硬件设计中的一些思路和方法(5)—信号系统,又学到了...
房价在涨,客户需求在涨,体重在涨,房租在涨,火气在涨,唯一不涨的大概只有薪资了??? 现在客户好套路啊~我们卖的A+B,他非要让我在B上开一个兼容C的口子,然后他用C+B.问题是C不是我们的产品啊~让 ...
- 中鸣循迹机器人_浅谈机器人设计方法
浅谈机器人设计方法 摘要: 机器人是人类完成智能化中非常重要的工具, 随着时代的发展, 机器 人已经在世界有了一定的发展,甚至很多国家机器人已经运用到实际的生活中 去. 而机器人的设计方法无疑是很多人 ...
- 计算机中用户的分类有哪些,用户分类浅谈交互设计 -电脑资料
说到网络产品,离不开的话题就是用户,就像传统行业的消费者, 不分类不好定位, 好的用户分类让我知道了我在追求哪些人,满足哪些人,影响哪些人.但分不好类又会错位,更糟,那怎样才能对某一款产品的用户群进行 ...
最新文章
- 计算机病毒能够自我复制自我执行吗,计算机病毒能够自我复制、自我执行。
- 手把手教你使用FineUI开发一个b/s结构的取送货管理信息系统(附源码+视频教程(第9节))...
- python引用文件的方法_[项目实践] python文件路径引用的
- mybatis中常见的坑
- UnicodeDecodeError: ‘utf-8‘ codec can‘t decode byte 0x8b in position 1: invalid start byte
- λ-矩阵(若尔当标准形的理论推论)
- 【Python基础】pandas中apply与map的异同
- Spring中的Advice类型及其应用
- ipython notebook笔记(待续)
- python怎么把excel单元格里面的文字提取出来_干货 | Excel如何花式秀操作?
- (20120731)Android中的各种对话框总结(dialog)
- Python——使用“_”下划线作为参数的占位符
- 积分上下限无穷_数分笔记——5种广义积分敛散性的基本方法
- c++识别图片身份证号码
- 什么是服务器虚拟化,虚拟化的优势!
- python-利用python写一个购物小程序
- 解决问题最重要的习惯不是一直盯着屏幕和编写修改代码,某些时候,阻止你成功的东西恰恰会是过于努力。这时候你需要暂停一下,平缓你的思绪,换一种方法或许能带给你不一样的效果。
- 零代码爬虫神器 — Web Scraper 的使用
- Spring Cloud Gateway源码系列之路由配置加载过程
- Linux管理员权限的相关命令
热门文章
- JavaScript实现大图展示(放大镜)
- unity报错Deterministic compilation failed. You can disable Deterministic builds in Player Settings
- 视频转文字怎么转,3个办法教你将视频里的语音转文字
- JUC(java.util.concurrent)的常见类
- 2018华为软件精英挑战赛总结及代码
- zw函数和nt函数的区别
- 修改.bat文件默认打开方式
- 【行业前瞻】超高清视频应用在未来的发展预测
- Windows 计算文件MD5值
- SpringBoot+Vue学生/选课管理系统(学生端+教师端+管理员端)