知名网站如何使用黄金分割位如何计算布局

您还可以参考以下网页设计相关资源:《》《》《》《》《》
这些是web页面的主要元素。有很多不同的方法去组织它们,但是这种布局也许是最常用的。
所有的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是放置你次要内容的元素,像一些广告,站点搜索,订阅链接(RSS, Twitter, Email, 等), 联系方法等。这个元素不是必需的,尽管右很多站点用它。它大多数是放在右边的,但是你也能把它放在左边或者两边,只要不扰乱主要内容的浏览就行。网站使用 横向或纵向导航,sidebar往往是用纵向导航。
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框架用了一个详细的gird系统。 不仅仅是gird设计更容易更快,而且它也创建了一个美观的布局。如果你还没有使用gird设计,那么这是一个很好的尝试机会。你可以为 fireworks,photoshops或者其他软件从&下载grid模板。
正如你看到的,NetTuts很好的遵循了黄金比率。顶端三分之一的网页再次分成了三分,非常接近黄金比率。难怪NetTuts的设计是如此吸引人!
如果你要做一个新的设计,我严重推荐你找一些流行的站点,评价他们的布局,以及如何应用黄金比率和gird。然后花一些时间去实践使用黄金分割,并在你的布局上面使用gird。
ps:http://blog.bingo929.com/golden-ratio-in-web-design.html
阅读(...) 评论()网页设计该如何利用黄金比例?
稿源:产品100
来源:茂趣创意(微信公众号ID:maofuns)
茂趣注:黄金比例应用在平面布局各个领域中,特别是能够平衡文本内容的权重。 它可以帮助设计者创建层次结构以及吸引用户对特定区域的关注。 看看下面网站的例子,看看设计师们是如何利用它的!
黄金比例是什么?
黄金比例是一个数学比率,通常在自然界中都能发现它的,并结合古典设计理论建立平衡的构图。 它大约等于1.6180,也被称为“中庸之道”、“黄金分割”, 通常用希腊字母Ф表示这个值。
“黄金矩形”是指一个长方形的宽度是它高度的1.6180倍。 例如,一个划分为300 px的一侧, 则另一侧为300 * 1. px可以称之为黄金矩形。
1、如果你从这个黄金矩形切分一个完美的矩形,留给你的会是另一个黄金矩形:
2、你可以更小的矩形继续做同样的动作,然后再继续切分下去,无限循环,你会得到这个熟悉的图像:
3、斐波那契序列
斐波那契序列类似于黄金比例,但并非完全如此。 这是一个系列的数字,序列中的下一个数字是前两个的总和。 例如: 0,1,1,2,3,5,8,13,21,34,55,89,144,233,377…这个规则公式是xn = xn-1 + xn-2.
假设我们先从一个正方形开始,然后添加另一个,会得到一个我们所需的矩形:
4、保持所增加正方形延伸出的最长长度
然后我们再添加另一个等于最长的长度总数的矩形:
5、然后一次又一次的:
6、这可以无限期延续下去,会得出同样的黄金矩形效果,但这次是新建而不是切分。 黄金比例和斐波那契序列都能让我们做出吸引人的比例。
现在让我们来分析一些网站,在这些网站中我们可以看到他们的用法。
例1:YStudio
7、yourlocalstudio.dk
这是个关于什么的网站呢?
“Your Local Studio”是一个基于设计和开发的网站,工作室在丹麦哥本哈根,。 他们擅长使用任何形式的视觉概念并用来创作的经验,用来优化网页。
这个网站是关于什么的?
这个网站有两三个页面有用到黄金比例。主页是关键信息的一个概念性诠述。然而,当您访问工作室页面时,会发现它融合了一点传统的web布局与黄金分割矩形,如以下页面:
8、它为什么是有效的?
想在人群中脱颖而出? 如Yourlocalstudio(yl)所做的,通过利用黄金比例来进行网站设计。 该设计表面上采用了渐进式的组织分明、结构清晰的网格系统,你可能会说,这些一切都看起来像引导。。。留意了越来越多的网站都是以结构更动态的布局来吸引用户注意力
例# 2:Mashable
9、mashable.com
这个网站是关于什么的?
Mashable是一个新闻网站,获取信息的来源地,“连接的一代”的知识和资源。
它如何利用黄金比例的?
我使用了黄金比例的测试UX(用户体验)触发器来演示Mashable如何使用斐波那契序列的布局,内容布局灵活,左边的标题和链接到更多的新闻,由格架分隔。。
它为什么有效?
黄金比例在这里是很有效的,因为它允许一个内容驱动的网站给予信息排版喘息的空间。而类似的网站使用传统的网格布局看起来内容密密麻麻的,但Mashable表明黄金比例非常有效的,即使是无形的。
示例# 3: Jackson & Kent
10、www.jandk.fr
这是个关于什么的网站?
Jackson & Kent是一个来自法国web生产代理网站。 他们专门从事数字服务如
HTML5,CSS3,Drupal,Wordpress,PHP / MySQL,Flash等。
它是如何利用黄金比例的?
上面的截图展示了如何布局主要是包括了以往客户的工作项目, 它还有一块内容是有关机构本身以及一个导航栏在屏幕的中心, 联系人按钮,如下图所示,也使用黄金分割网格系统并以独特的方式进行组织布局。
为什么它是有效的
这里的例子鼓励你平移网站和探讨其内水平容,在网格视图里和不同尺寸的块形状使内容更直观有趣。因为用户很可能是观看在屏幕上的内容(以及平板上),在横轴的导航上也有分页号码。这是查看每段内容的一种新颖的方法,而且以用户界面作为一个整体。
黄金比例自然会吸引用户的眼睛到页面上某个特定的点。 作为一个概念,它可以帮助你思考内容的布局以及有效利用层次结构,组合布局,排版,色彩和总体原则,将有助于将你的设计水平提升到一个新的阶段。
有好的文章希望站长之家帮助分享推广,猛戳这里
本网页浏览已超过3分钟,点击关闭或灰色背景,即可回到网页网页设计排版之黄金分割技巧
我的图书馆
网页设计排版之黄金分割技巧
网页设计排版之黄金分割技巧
在所有的比例中黄金分割是最能引起人的美感的,0.618被公认为最具有审美意义的比例数字。黄金分割之所以那么普遍的流行,我猜一定跟理想女人体的维纳斯雕像有莫大的关系,大家都被她倾城的美色所诱惑了,拜倒在她那没有双臂的美妙绝伦身躯前面,爱美之心人皆有之艺术家比我们更懂这个道理。
黄金分割点约等于0.618:1,因为黄金分割率和黄金矩形能够给画面带来美感,令人愉悦的原因,从而在建筑、文艺、还有不同行业中都有着广泛而重要的应用。我们熟知的达·芬奇-维特鲁威人、蒙娜丽莎的脸、最后的晚餐;古希腊维纳斯女神及太阳神阿波罗雕像、雅典的帕台农神庙同样也应用了该比例布局。
黄金分割在艺术设计中的应用经典案例 在被艺术与设计影响的世界里,追逐美感成为了每一个时代必不可少的潮流趋势,对于网站排版设计同样也不会例外,无论是企业网站建设、大型门户论坛、还是个人博客设计,可爱的设计师们和艺术家会想尽一切的办法将美的东西融入其中,尽管大多数用户根本不会知道设计师为何如此排版。让我们一起来看都有哪些网站采用了黄金分割比例,这其中不乏大家都熟知的网站,只有平时没有留意而已,部分是采用九宫格分割,因为它与黄金分割惊人的接近一并列出。
网站设计排版-黄金分割-豆瓣社区首页
豆瓣社区首页的设计左栏宽度是590px,整体版面的宽度是950,两者之间的比例是0.621,非常之接近黄金分割。
网站设计排版-黄金分割-腾讯网首页
腾讯网首页的设计右栏宽度是600px,整体版面的宽度是960,两者之间的比例是0.630。
网站设计排版-黄金分割-搜狐门户首页
搜狐门户首页的设计右栏宽度是626px,整体版面的宽度是950,两者之间的比例是0.659,与腾讯网布局方式非常相似,但这个比例几乎是九宫格排版。
网站设计排版-黄金分割-陈幼坚设计
香港最著名的陈幼坚设计公司网站,整体版面的宽度是648,左侧主要内容占的宽度是408,两者之间的比例是0.63,看得出陈幼坚对8这个数字的喜爱。
网站设计排版-黄金分割-twitter
将黄金分割使用得最极致的要数Twitter的网页设计,惊为天人的完全黄金矩形布局,Twitter创意总监道格·伯曼追求完美的性格可见一斑。
网站设计排版-黄金分割-德意博客
现在不少的博客在比例分配上面也采用了黄金分割,德意博客的主体宽度是900,左侧主栏宽度是580,两者之间的比例是0.64。你也可以观察一下自己的博客布局之间的比例是怎么样的,如果不知道如何布局,黄金分割是一个最安全选择。
黄金分割比例的起源:大多认为来自毕达哥拉斯,据说在古希腊,有一天毕达哥拉斯走在街上,在经过铁匠铺前他听到铁匠打铁的声音非常好听,于是驻足倾听。他发现铁匠打铁节奏很有规律,这个声音的比列被毕达哥拉斯用数理的方式表达出来。被应用在很多领域,后来很多人专门研究过,开普勒称其为“神圣分割”也有人称其为“金法”。在金字塔建成1000年后才出现毕达哥拉斯定律,可见这很早就存在。只是不知这个谜底。
TA的最新馆藏[转]&[转]&[转]&[转]&
喜欢该文的人也喜欢知名网站如何使用黄金分割布局-阿里云资讯网
知名网站如何使用黄金分割布局
发布时间:
更新时间:
来源:网络
上传者:用户
在所比例中黄金分割是最能引起人的美感的,0.618被公最具有审美意义的比例数字。黄金分割之所以的流行,我猜一定跟理想女人体的维纳斯雕像有莫大的关系,大家都被她倾城的美色所诱惑了,拜倒在她那没有双臂的美妙绝伦身躯,爱美之心人皆有之艺术家比我们更懂这个道理。
黄金分割点约等于0.618:1,因为黄金分割率和黄金矩形能够给画面带来美感,令人愉悦的原因,从而在建筑、文艺、还有不同行业中都有着广泛而重要的应用。我们熟知的达&芬奇-维特鲁威人、http://www.aliyun.com/zixun/aggregation/17934.html&&蒙娜丽莎的脸、最后的晚餐;古希腊维纳斯女神及太阳神阿波罗雕像、雅典的帕台农神庙同样也应用了该比例布局。黄金分割在艺术设计中的应用经典案例
在被艺术与设计影响的世界里,追逐美感成为了每一个时代必不可少的潮流趋势,对排版设计同样也不会例外,无论是、大型门户论坛、还是个人博客设计,可爱的设计师们和艺术家会想尽一切的办法将美的东西融入其中,尽管大多数用户根本不会知道设计师为何如此排版。让我们一起都有哪些网站采用了黄金分割比例,这其中不乏大家都熟知的网站,只有平时没有留意而已,部分是采用九宫格分割,因为它与黄金分割惊人的接近一并列出。
网站设计排版-黄金分割-豆瓣社区首页
豆瓣社区首页的设计左栏宽度是590px,版面的宽度是950,两者之间的比例是0.621,非常之接近黄金分割。
网站设计排版-黄金分割-腾讯网首页
腾讯网首页的设计右栏宽度是600px,整体版面的宽度是960,两者之间的比例是0.630。
网站设计排版-黄金分割-搜狐门户首页
搜狐门户首页的设计右栏宽度是626px,整体版面的宽度是950,两者之间的比例是0.659,与腾讯网布局方式非常相似,但这个比例几乎是九宫格排版。
网站设计排版-黄金分割-陈幼坚设计
香港最著名的陈幼坚设计公司网站,整体版面的宽度是648,左侧主要内容占的宽度是408,两者之间的比例是0.63,看得出陈幼坚对8这个数字的喜爱。
网站设计排版-黄金分割-twitter
将黄金分割使用得最极致的要数Twitter的网页设计,惊为天人的完全黄金矩形布局,Twitter创意总监道格&伯曼追求完美的性格可见一斑。
网站设计排版-黄金分割-德意博客
现在不少的博客在比例分配上面也采用了黄金分割,德意博客的主体宽度是900,左侧主栏宽度是580,两者之间的比例是0.64。你也可以观察一下自己的博客布局之间的比例是怎么样的,如果不知道如何布局,黄金分割是一个最安全选择。
黄金分割比例的起源:大多认为来自毕达哥拉斯,据说在古希腊,有一天毕达哥拉斯走在街上,在经过铁匠铺前他听到铁匠打铁的声音非常好听,于是驻足倾听。他发现铁匠打铁节奏很有规律,这个声音的比列被毕达哥拉斯用数理的方式表达出来。被应用在很多领域,后来很专门研究过,开普勒称其为“神圣分割”也有人称其为“金法”。在金字塔建成1000年后才出现毕达哥拉斯定律,可见这很早就存在。只是不知这个谜底。
来源:http://www.dandy.co/application/golden-section-webdesign/
本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:zixun-group@service.aliyun.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。
摘要: 一切从整理开始 前阵子读了佐藤可士和的《超级整理术》和《创意思考术》两本书,有了点启示,想和大家分享下。记载的方式有点类似思维跳跃的随笔,希望大家在耐心阅读之后会有 & 一切从“整理”开始 前阵子读了佐藤可士和的《超级整理术》和《创意思考术》两本书,有了点启示,想和大家分享下。记载的方式有点类似思维跳跃的随笔,希望大家在耐心阅读之后会有所启示… 整理一词对大家并不陌生,佐藤...
摘要: 这篇文章将展示很多很酷的范例,甚至还提供了一个免费的用户界面工具包供你下载和使用。但如果是你自己的话,你打算怎么做?给点提示,色彩是扁平化趋势中最重要的一部分。 扁 这篇文章将展示很多很酷的范例,甚至还提供了一个免费的用户界面工具包供你下载和使用。但如果是你自己的话,你打算怎么做?给点提示,色彩是扁平化趋势中最重要的一部分。 扁平化设计进修 & & & ...
摘要: 每逢节日到来,当你打开QQ浏览器,发现有什么不同吗?QQ浏览器已经悄悄的送出了节日的关怀,呈现在你眼前的是朴实而又温情的画面节日闪屏。她是浏览器和用户情感交流的窗口,也 & 每逢节日到来,当你打开QQ浏览器,发现有什么不同吗?QQ浏览器已经悄悄的送出了节日的关怀,呈现在你眼前的是朴实而又温情的画面——节日闪屏。她是浏览器和用户情感交流的窗口,也是传递节日祝福的桥梁。在不同的...
摘要: 文是非常详细的一份移动建站方面的资料,上一次谷歌发布了移动网站建站的十大原则,这次百度也发布了移动建站指南,图文并茂的描述了如何提高移动站在百度质量度的等级,在百 文是非常详细的一份移动建站方面的资料,上一次谷歌发布了移动网站建站的十大原则,这次百度也发布了移动建站指南,图文并茂的描述了如何提高移动站在百度质量度的等级,在百度推广后台已经有“移动站点质量度”的星级评价体系了,页面大小...
站内SEO优化
& & 对于大多数网站而言,并没有刻意注重图片优化,在图片优化上并没有下过多的工夫,然而以图片为主题展现信息的网站却是成千上万,不在少数。并且能够通过图片信息获取大量流量,这使我们不得不引起关注以及重视。对于图片优化过程中需要注意哪些细节呢?优化图片有哪些技巧呢?这让我们进入了深入思考中。闲暇之余,对于图片优化技巧也进行了深入分析以及总结。 & & &...
& & 技术的革新带动了设计行业的的迅猛发展,这使得设计师和开发者有了更广阔的的探索天地。 & & & & 1.响应式网页设计(Responsive Web Design) & & & 现在越来越多用户都拥有多种终端:台式机,笔记本,平板电脑,手机,能够适应不同尺寸显示屏的网页是现在的潮流,甚至是未来很...
若您要投稿、删除文章请联系邮箱:zixun-group@service.aliyun.com,工作人员会在5个工作日内回复。
售前咨询热线
支持与服务
资源和社区
关注阿里云
International秘密公开!网页设计必看的分割布局原理
  【PConline 欣赏】随着互联网的高速发展,各种各样的网站层出不穷。在这样的环境下,用户是如何在浩瀚的互联网海洋中快速挑选网站的呢?网页设计师又如何能让自己的网站在用户匆匆一瞥后就迅速吸引到他们进一步注意的呢?本文作者向用户介绍了一种简单的页面布局方式--分割布局,这种布局方式试图让用户初览页面时感受到一种友好的浏览体验。  作为网页设计师,我们可以参考的设计范例和布局原则有很多,比如说:栅格化、纵向一致性、F型布局、Z型布局、三分法则、黄金分割法等等。注重这些原则将会给你的设计带来视觉吸引力和功能性--现在让我们来看一种简单的方式,将页面两等分。  虽然在一开始听起来有点傻,但是这种基本布局确实能起到非常好的效果。当我们通览一个页面时,我们的视线常常会沿着一个&之&字形移动。而如果用户的视线是沿着一条水平线移动时--就像在Z型布局里一样,那么他/她就会很专注(或者说尝试着专注)。但由于初来你网站90%的用户都不会很仔细的去关注你的页面,因此让你的设计&浏览起来友好&肯定会获得不错回报哦!图00  眼动和&之&字形  从雅虎的眼动追踪研究可以发现:  &人们通过扫视页面的主要部分去判定这是个什么网站以及他们是否想在这多呆一会。  &用户仅仅在三秒内就会对页面做出决定  &如果用户决定留在页面,他们会最关注屏幕顶部的内容。  网站的用户总是很匆忙,他们有其它的事情要做,你不要指望他们会停下来去欣赏你网站的美学。虽然良好的美学设计是非常重要的,但是这并不能完全激发访问者去采取行动--去点击&立即购买&或者&了解更多&按钮。  我们不能去埋怨这些用户。永远记住,当你想查询什么东西时?你会急着打开谷歌的第一个搜索结果并且火速看完,或者更确切的说,是粗略的浏览整个页面。大多数时间,你甚至是毫不留意就将鼠标滚动到了页面底部。经过这个阶段后,如果你认为这个页面值得你花时间,你就会又回到页面顶端并且着实花精力去阅读和关注。  那么,用户初始浏览的目的究竟是什么呢?就是在你最初扫视页面时,捕捉到尽可能多的信息。如果我们以某种方式&制定&这种浏览模式,应该就能够得到更多访问者的关注。通过观察大量网站的热图,我得出了一个共通的趋势。图01  在上图中你会发现,你毫不费劲就能看到那些红点。奇怪的是,就经验看来,相比于斜线而言,我们的视线能更轻易的跟随水平线移动--因为我们都是沿着直线阅读。但请注意,我讨论的是在初始浏览阶段,并不是你关注网站每个细节时的阶段。  每当你不是很专注时,你的视觉流向很自然的就会呈现为&之&字形。除非有对比度更高或者更重要的元素&召唤&你,不然你的视线就将会遵循上图的模式。你还会发现,这种模式看起来和F型布局非常相似,并且用户会在红色端点有短暂的停留。  你的大脑会在这些&暂停点&生成快照。在之字形布局里,在这些&暂停点&布置一些包含重要信息的元素,用户的大脑就会很自然的吸收更多的细节,并将这些作为独立实体存在的&之&形端点联结起来。  &设计不仅仅是它的外观怎样或者感觉如何,而是它是如何工作的。--史蒂夫&乔布斯&  举例来说,你可以利用半分割布局的这一特点去有效的布置你作品集的预览、你的产品或服务的重要特性,这样很快就能引起网站访问者的注意。最终会激励用户在您的网站停留更久,并说服他们采取行动。这样的话,结果会是怎样呢?将给您的网站带来更高的转换率,同时给访问者带来更好的用户体验。  将分割布局应用到设计中图02  让你的设计和布局兼容&之&字形非常简单。实际上,这和将你的页面分为两等份一样简单!两等分的效果很好,因为&之&字形的端点或多或少能对齐到这两等分的中心。叠加使用,它们能很好的相互呼应。将重要元素放置在你网页中&之&字形的红色端点处,这就是分割布局或者说1/2布局包含的基本理念。  最近,我致力于设计一个&即将来临&的登陆页面。我尝试了多种布局,但是没有一种效果让我满意。我几乎试了每一种--比如栅格化,黄金分割比,F型布局等。但是仅当我将页面两等分时,那一刻有一种强烈的&我找到了!&的感觉。解决的办法竟如此简单!它看起来优雅而整洁,并且提醒了我一个重要的事实:简单不一定是坏事。你看到微软的新标志了吗?  &简洁是终极的复杂。--莱昂纳多&达&芬奇&图03  你能看到两等分如何体现出一种良好的视觉层次。首先,顶部的&即将来临&的红色缎带很引人注目。其次,标志也很鲜明。现在,跟随我之前提到的&之&字形,访问者看到右半部分的图片滑块,最后,到达电子邮件提交表格。  现在让我们来看一下,分割布局在一个网页设计师的作品集页面中能起到多大作用?设计作品集页面的目的是为了向潜在顾客快速展示你作品的主体部分。随着现在这个产业如此饱和,顾客的选择有很多很多,为什么他们要付钱给你呢?因此,一个很棒的第一印象将会在你的事业方向中起到决定性作用。让我们看看,我们可以做些什么?图04  上图的布局被划分为两等分,但是并不遵循我之前提到的&之&字形原则。  虽然它看起来是个不错的布局并且易于观看,但是在看完前两块元素后就会让人感到非常沉闷死板。打破这样的视觉流向并且增添视觉趣味性将会让之有所改变。不仅如此,当你试着去浏览上面这种布局时,你的眼睛会最先看到第一张图片,然后跳转到第二块的文本上。然而你的访问者并没有打算在这个阶段阅读,因此,他们会跳转到其它的点,或者彻底离开你的页面!  但是如果你做了这样一个简单的调整呢?图05  变得更生动有趣了,对吧?简单的互换每个项目里文本和图片的位置来增加视觉上的生动性,这样,这种一致性就不会让你的用户感觉到无聊了。同时,你还能在&之&字模型后放置一个行为召唤按钮。图06  这个&联系我&按钮将会有更大的机会被注意到,并且被你更多的用户点击(为什么不进行一个A/B测试去再次验证一下?)  &设计是一项计划,它将所有元素以最好的方式组织起来去完成一个特定的目标。--查尔斯&埃姆斯&相关阅读:极客最爱!霸气反恐精英战术烧烤围裙替代数码相机?透明绘图板Easy Sketch&
键盘也能翻页,试试“← →”键
最新资讯离线随时看
聊天吐槽赢奖品
相关软件:
大小:472.98 MB
授权:免费
大小:18.86 MB
授权:免费

我要回帖

更多关于 如何画黄金分割线 的文章

 

随机推荐