当前位置：首页 > 实用文档 > 其他范文> 如何用摄影三分法来优化网页设计？

如何用摄影三分法来优化网页设计？

时间：2022-05-06 12:26:28 其他范文收藏本文下载本文

如何用摄影三分法来优化网页设计？(（推荐5篇））由网友“木笃笃”投稿提供，下面是小编帮大家整理后的如何用摄影三分法来优化网页设计？，希望对大家带来帮助，欢迎大家分享。

如何用摄影三分法来优化网页设计？

篇1：如何用摄影三分法来优化网页设计？

对于摄影师而言，取景布局三分法是非常熟悉的概念，尽管它是非常引人入胜的概念，但是在进行网页设计的时候，几乎没有人会拿三分法来说事儿。

对于摄影师而言，取景布局三分法是非常熟悉的概念。尽管它是非常引人入胜的概念，但是在进行网页设计的时候，几乎没有人会拿三分法来说事儿。当然，这并不意味着不可能，只是这种跨领域的事情很少被注意到罢了。

所以，在今天的文章里我想解释一下三分法，并且分享一些将其运用到网页设计时的技巧和经验。不过三分法并不一定适合所有人，毕竟提升设计和设计流程的技巧和方法有很多。不过作为一项基本的排版布局规则，三分法本身是绝对值得学习的，并且在网页设计中也颇为实用。

为何三分？

也许你会问，为什么一定要三分呢？这种奇怪的设定到底是从何而来？还好，我可以很高兴地告诉你这玩意和数学定理抑或复杂的逻辑推理都没有关系，也没有太多的必要在这个东西的来源上过度深究。

三分法仅仅是来自于传统艺术，目前在摄影中运用得尤其多。纵横三分，整个布局被分为9个平均的区块，横向纵向各有2条分界线。三分法规定，为了尽可能吸引观者的注意力，视觉重心或者最吸引人的东西应该尽量靠近四条线相交处。

你可以在WDD的这篇文章中找到绝佳的实例。很多时候非对称的布局常常能让整个页面更加富有生趣，但是这并不意味着着任何时候都得用非对称布局，因为在有的场合，对称布局会更有意思，而在这个时候，三分法则意义并不大。

摄影的时候，最理想的目标是一独特的视角捕捉到一些能吸引人的场景，而非对称的布局使得视野中的一些元素比其他的更加突出，而这些突出的元素通常压在之前所说的四个交点上。

那么重新回到网页设计的问题上，三分法和网页设计到底是如何结合到一起的呢？正如同摄影时三分法下的布局能够吸引观者一样，符合三分法的网页也一样能让浏览者更加关注焦点内容。

了解三分法的栅格

四条线，四个焦点，九个区块，这就是三分法下的栅格框架。许多网站的首页设计都符合F式布局或者Z式布局，用户也已经习惯了这样的浏览方式，通常视觉的起点都是左上角，这也是设计师需要关注的首个区块。

这也就意味着，左上方的交点处应该与页面的某个重要内容相重叠。交点处并不是非要放置链接或者图片（当然非要放也并非不可），它更像是一个标记，用以区分布局的一个重要节点。比如页面标题的起始点可以与之重叠，整个标题与横向第一条线相齐平，然后在标题下放置Banner图之类的内容。

值得注意的是，使用三分法来分析网页设计更多的是一个用户体验设计上的概念，而非一项完整的设计准则。所以，如果你想借助这一概念来分析网页设计的话，建议将网页在浏览器中打开之后截图分析处理，完整的网页太长，而且用户浏览永远是基于屏幕而非一次看完整个页面，所以也没有必要使用整个页面，截图足以。如果设计尚处于原型阶段，那么建议参考屏幕比例来截取分析，

所以，你应该从用户的浏览习惯出发，结合三分法来进行分析优化。当用户浏览网页的时候会下意识注意到关键部位，正确的使用三分法来设计页面，你会发现这种3×3的栅格能帮你带来极具启发性的设计。

小调整而非重设计

了解三分法的栅格的运用方式之后，你还需要明白更重要的一点：三分法带来的并非是一个无可挑剔的网页设计架构，而是一个用来微调现有设计的布局测试框架。

有太多的免费的栅格系统可以帮你设计网页，比如960GS之类的，但是三分法的九宫格栅格系统是一个帮你微调整个网页布局的，比如调整导航栏的高度，把Logo挪近一点或者远一点。

值得庆幸的是，这种测试方法很实用，并且很简单，也不挑软件。你可以截图之后在PS里面画虚线来分析，诸如GIMP这样的开源免费软件也可以轻松帮你搞定，再不济你还可以直接用记号笔在屏幕上画一个九宫格来分析嘛……（话说当初打CS的时候盲狙也用过这等笨办法~）反正能帮你构建出九宫格分析的工具都能带你走向正确的设计方向。

完成初稿，用三分法测试，然后走向下一步。随着时间的推移，你会更加清楚如何将视觉元素置于对的地方。

处理对称性

有的时候，在页面中适当地使用对称性的元素还是颇为有用的。不过如果在设计中哪哪儿都用对称式设计的话，这也未免太瞎了点。事实上，在艺术和摄影领域，非对称式布局的运用还是占据主流的，大小相对，远近相宜，更加令人赏心悦目，这也证明非平衡的视觉设计更能吸引我们的注意力。

其实在版式设计中，也有类似的原则和规范。比如，当你在页面顶部使用大Banner图的时候，它通常会占据页面大概2/3的高，类似的，标题和正文的字体大小也需要大小对比，读者会自然而然地注意到更大的Banner图、标题和副标题。大小对比是一方面，另外一方面还需要考虑页面上图片和文字的位置。简单的使用三分法并不能确保构图的饱满，将九宫格置于页面上，适当地调整页面的元素的位置和中心之后，会好不少。

三分法的优势在于它可以兼容非对称式布局，也可以用来优化对称式布局。两种布局灵活搭配，借助三分法来突出页面重点，也掌握页面平衡，如此才能调教出优秀的网页。

最后的思考

绝大多数的艺术形式其实并没有固定的规则，但是有规律可以参考，设计也正是基于这些规律而不断进步。掌握类似三分法这样的规律，了解这个规律的目的所在，深入理解，即使没有刻意去运用，它也会从你的设计中自然而然地展现出来，形同第二本能。这个时候，你就具备了打破规则的潜力了！

虽然说设计和艺术有着根本的区别，但是两者并非对立的关系。诚然依着规则可以设计出更符合大众口味的作品，但是打破规则，充满个性和艺术感的设计作品又何尝不会令人印象深刻呢？

篇2：《网站优化》学习笔记网页设计

对于新用户，网站只有不到2分钟的介绍时间，其中，花在主页上的时间只有半分钟，这半分钟里大部分的时间用于决定下一步去哪里，而不是逐字阅读那些内容。成人每分钟阅读200-300个单词，所以，更为实际的做法是把网站的介绍用10到20个单词就讲清楚。用户会在内部页面上花1分钟，但这一分钟里的一部分时间会用于评估网站的导航系统以及决定下一步去哪里。所以，有可能会阅读100个单词量的信息。

用户要完成任务时，88%的情况下会先去搜索引擎，只有12%的情况下才会直接去一个他们希望对问题能有所帮助的网站(Expedia也不例外)。搜索引擎只理解真正的文字，所以它们可以算是世界上最有影响力的盲人用户。

相比搜索引擎自然排名而言，搜索广告投放是一个短期解决方案，但做法是昂贵的，而且会逐年更昂贵。点击搜索引擎广告的第二位的用户，转化率可能高于点击第一位的，因为他们更积极地在寻找解决方案。

用户滚屏与否很大程度上取决于他在短短的几秒钟内是否认为自己走对了地方，但如果一定要设计成滚屏，也尽量不要让长度超过2.3屏。

Victorassecret是全世界最好的25个电子商务网站之一。

Jakob的《Homepage Usability》和《Designing Web Usability》值得一看，还有《Information Architecture for the World Wide Web》。

网页设计的两个主要策略是：使你的内容看起来是一顿很有营养的大餐；向用户表明这些内容很容易得到。

后退按钮是Web浏览器中第二大常用功能，仅次于链接到新页面。后退按钮可能由于嵌在页面内部的重定向而不是隐藏在服务器端的重定向而失去作用。

（P55-56）这里讲了用户对于广告的抵制态度和“习惯性忽略”，提出适当位置的和当前页面相关的文字链比图形或动画更能吸引注意力，因为用户已经习惯于认为网站上有用的部分都是以普通文本的形式出现的。（P192）眼球跟踪研究发现，对于在线的新闻内容，标题和文字是首先被注意到的，甚至先于图像。

搜索是仅次于导航的人们最常用的在网站上查找信息的方式。符合用户期望的搜索，才是好的搜索。即使只有一个结果也需要显示搜索结果页，因为这是用户所预期的方式，而且一旦用户看到搜索结果那么少，就可能想要修改搜索条件。

人们用以判断一个公司是否值得信任的主要标志：该公司是以一种皮包公司的方式运作呢？还是愿意提供一个实际的地址和电话？

三个因素会影响到一个问题对于用户的严重性评级：频率，多少用户会遇到？后果，遇到会造成多大的麻烦？持久性，是一次性麻烦还是每次都会有麻烦？计算公式是“频率得分×后果得分×（持久性得分的平方根）”。之所以持久性得分用平方根来算是考虑到实际上用户遇到麻烦后很可能不会再来了。

（P95）四分之三的人们遇到的可用性问题都和查找、阅读和理解信息有关。其中，可查找性（信息体系结构，类别名称，导航，链接）是最大的问题，占了26%；其次是页面设计（易读性，页面布局，图形，显得不够专业，滚动），19%，然后是信息（内容，产品信息，公司信息，价格），18%，还有搜索，11%。以上四项加起来差不多占了75%。除了这四项和信息相关的问题之外，任务支持（工作流程，隐私，表单，不同产品之间的对比信息，缺乏灵活性）也是较大的问题，12%；然后是花俏的设计（多媒体，后退按钮，PDF/打印，新窗口，声音），9%；其他（程序错误，Web上的可见度，广告，新网站，比喻）4%。广告之所以没有成为较大的问题，是因为用户虽然讨厌广告，但他们会主动忽略它，而且广告必须达到非常讨厌的程度才会导致用户离开网站。

（P97）任务失败的原因和上面说的问题不同一样，因为有些可用性问题会让用户痛苦，但并不见得会导致任务失败，比如广告、比如页面设计、比如易读性等，

（当然，这些问题虽然没有导致失败，但是会导致用户不那么喜欢你）。任务失败的原因主要有这些：搜索、信息体系结构、内容、产品信息、工作流程。搜索占了15%，可查找性占了27%，信息占了19%，任务流程占了13%，花俏的设计占了11%，页面设计8%，其他7%。

通过将同样的链接散布到页面上各个地方来强调它的方法实际上会减小用户看到它们的可能性，页面上的对象越少，用户就越可能注意到它们。过多的页面元素，相互竞争之后，大家都不会显得突出。所以，使用重复链接的方式弊大于利，即使增加了某个特定页面的访问量，但可能会失去一些用户对于网站的再次访问量，他们会因为不容易在网站上找到所想要的而感到困惑。

应当把主页上的直接链接保留给少量最重要的用户任务，对于主页上任何一个单独的区域来说，需要将直接链接的数量限制在3～5个，如果区域很多，那么最好是3个或更少。

更多的文字意味着更少的阅读，整块密集的文字其实是在告诉用户“你要很费力才能从中找到所需要的信息”。文字尽量别用抗锯齿效果，它会导致文字模糊，而且会增大图像文件的大小。（P189）尽可能别用移动的文字以及图形文字，人们对于闪烁或移动的文字感动厌烦，因为这些文字会影响他们正在做的事情。他们会把动态的文字和广告联系起来，因而可能会忽略它。（滚动文字在一些特殊场合可能是有效的，比如发布一些重大新闻。）

（P177-178）对于印刷品而言，有衬线的字体更加精美，对于分辨率有限的屏幕而言，无衬线的字体更合适阅读。无衬线字体在字号很小时会更清晰。Arial和Verdana都是无衬线字体，用户都很喜欢，后者在小字号时也很容易辨认。

（P182～183）一般而言，黑色字体，加上冷色调和不饱和色的背景，是最好的搭配。黑底白字当文字较小时白色的边缘会显得模糊，如果需要用深色的背景，尽量选黑色之外的某个深色。紫色和黄色这些颜色的对比度很高，会给文字一种振动的效果，这也使得它很难阅读。

Web内容要重视可扫描性和可理解性，所以，用简单朴素的语言进行描述，少说废话，少用花俏的词汇，在开头两行就讲出关键结论，这些很重要。另外，人们更喜欢陈述事实的语言，会忽略浮夸的宣传语。标题很重要，需要简炼且具有描述性，标题左对齐比居中对齐更易于阅读。

对于用户而言，网上购物的一个优点是他没有任何必须购买的压力，也不需要挡开那些过分热情的销售人员。大肆的市场宣传和过于热情的销售方法会把Web上的客户赶走。没有必要在字面上欢迎人们来到你的网站，对于用户而言，更有意义的是清楚的产品信息、高质量的网站内容。用户愿意信赖一个清楚地对产品和服务进行描述的网站，而不是充斥着销售方面的宣传广告的网站。

提供少数合适的选择通常要好于显示出很多看起来很相似的产品，人们不喜欢面对大量的选择。

三次点击规则不是可用性准则，强制要求一个大型网站遵守三次点击规则通常会导致网站的导航系统不堪重负，难以理解。只要每一次点击都能使人们更接近想要的结果并且速度合理，他们并不介意点击多个页面来完成任务。

人们访问Web是因为它有用，而不是它好看。视觉上吸引人是好的，但内容才是最重要的。Flash不应当被用来使得一个页面更加活泼，如果你的内容令人枯燥的话，就重新写一下，并请一个专业摄影师拍一些更好的照片。富媒体能够在某些情况下提升用户体验，但在大多数时候是“穷”媒体使你变得富有，因为简单的设计能够使用户专注于和你做生意。

可用性在很大程度上就等同于简单性，更少的功能意外着更少的令用户感到迷惑的东西、更少的用户出错风险、更少的描述和文档、更少的帮助信息，去掉一个功能就能自动地提高其余功能的可用性（老邓按：增加一个功能就会自动地降低其他功能的可用性）。所以，在将设计元素增加到网站之前，先问问：这个元素会简化用户的任务吗？这个元素能为用户带来更多的价值吗？

本文来自：www.raydeng.com/%e3%80%8a%e7%bd%91%e7%ab%99%e4%bc%98%e5%8c%96%e3%80%8b%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.html

篇3：用一个词来设计演讲稿

用一个词来设计演讲稿

博恩·崔西是当今世界个人职业发展领域最成功的演讲家和咨询家之一，他的著作《博恩·崔西口才圣经》里面有一个方法值得我们每个演讲者学习，这个方法就是“用一个词来设计演讲稿”。

很多人在准备演讲时，都为演讲稿的框架、思路而犯愁，心中千言万语不知道如何来组织，反复写反复改，直到讲完之后还是不满意。

博恩·崔西说“我最喜欢用一个词设计演讲内容，这个词要和演讲有关，对听众来讲也很重要，比如success（成功），也可以使用其他任何词。”

他的方法其实就是把一个单词拆分为多个字母，而每个字母又是一个单词的首字母。换个说法就是，把多个单词的首字母组合为一个词。比如success（成功）就可以拆分成这样：

S代表演讲的目的（Sense of purpose）。演讲开始时解释一下演讲的目的。

U代表你的责任（Tou aer responsible）。强调你必须对自己的生活和事业负责。

C代表顾客满意度（Customer satisfaction）。清晰地界定理想的顾客是什么，以及怎么争取他们。

C代表创造性的方法（Creativity）。指出在市场中提高销量、降低成本的方法。

E代表出色的工作（Excellence）。强调想出在自己的事业中类拔萃，必须努力做得更好。

S代表对他人的敏感度（Sensitivity）。要考虑到他人以及你所做的、所说的对他们的影响。

S代表坚持不懈（Stick to it）。要早下决心，不论遇到什么困境，面临任何困难，都决不会放弃。

博恩·崔西指出，使用这个由3个字母或10个字母组成单词的方法来设计演讲稿，并逐个解释各个字母所代表的含义，他可以不用看着演讲稿，在听众面前讲上60或90分钟也不会跑题；听众也喜欢这种方法，热切的期待他解释每个字母所代表的含义。

博恩·崔西是美国人，他讲的是用英语单词来设计演讲稿。如果你的'英语水平相当好的话，采用这种方法也还可以。但是如果听众不懂英语，效果就会大打折扣。

不过，中文演讲也是可以采用这种方法的，也就是将一个成语、俗语或者专有名词拆开成一个个的字，并且把每个字单独解释。举个例子：

我的一个朋友参加一个从他老家某县来的领导召开的“欢迎回乡投资座谈会”，有二十多个老板参加，轮到他发言时，他说：“我今天讲四个字——齐心协力。”然后他分别解释：

齐，表示人来得很整齐，家乡父母官一召唤，大家都来了。

心：大家来得整齐，说明大家有心回乡投资发展。

协：我们要回乡发展，不能单打独斗，而要携手并肩，协同配合。

力：我们的投资要有力度，不能小打小闹；家乡政府的支持扶持也要有力度。

大家觉得这个方法好吗？这样演讲是不是很轻松，而且让听众留下深刻的印象？

篇4：用FrontPage来设计网站

frontpage|设计

设计网站

1.经过改进的工作环境和更大的设计区域，

2.布局表格和单元格

布局表格工具位于可以方便访问的任务窗格中。可以使用这些工具应用附加格式，如圆角、边框、自动伸缩和其他视觉效果。

自动伸缩：

圆角：

阴影：

边框：实例中是一条竖线，

表头和表尾

“表格布局”模板：

3.图像描摹

4.动态 Web 模板

可以在网站中使用任何数目的动态 Web 模板，并且可以将动态 Web 模板添加到任意数目的网页中。还可以将动态 Web 模板 (.dwt) 文件保存到任意位置。

5.网页标尺和布局网格

6.设计阶段层。

篇5：网站性能优化的实践网页设计

最近去听了D2 论坛，更加深刻体会到了网站性能对于用户体验的重要性，

慢500ms =Google用户访问量降低20%

慢400ms=Yahoo! 用户访问量降低5-9%

慢100ms=Amazon销售额降低1%

散会后,不禁想看看自己网站的性能如何。自从把网站搬家到国外，还真有点担心。通过Google网站管理员工具查看网站性能，不禁大吃一惊：您网站的平均网页载入时间为 20.2 秒。该站比99.7%的网站慢。

看来要动手优化一下了。先在自己的Firefox 浏览器里安装了网站性能检测工具Google Page Speed和Yslow。首先用YSlow来检测一下访问网站首页的大小。总共257.3KB。

再用Google Page Speed 看看有什么可以改进的。从发现的问题来看，还是有不少的可以优化的地方。

由于技术能力和时间都很有限，只能进行简单的优化。我做了以下一些优化工作：

一、压缩样式图片

我并没有用什么高深的压缩工具，只是用Fireworks CS4批量处理了图片（没有改变文件类型），原来网站的主题的所有样式图片有195KB, 优化后就减少了54.94KB而且优化后的图片，肉眼根本看不出区别（至少我是没看出来）。

二、启动gzip 压缩

由于我使用的虚拟主机，并没有配置服务器开启gzip的权限。我只能依靠Wordpress 的插件 GZIP Output。首页页面大小（Html/Text）减少了18.9KB。

但是，GZIP Output 只能对于php 文件进行压缩，对于大部头的CSS、JS 文件都无法处理，

我又下载安装了WP CSS 和WP JS 插件想分别对CSS 和 JS 文件进行压缩。不过，WP JS这个插件我没搞懂怎么用，WP CSS 倒是应用成功了。网站主题样式表文件从原来的23.5KB 变成了8.1KB,单就首页来说又减少了15.4KB。

三、减少不必要的页面元素

从页面来看载入的js 来看，我有两个Js是用来做网站访问统计的。一个是google analytiss一个是piwik。权衡利弊我去掉了piwik的统计代码，首页大小又减少了8.3KB。

另外，网站页脚的有个图片没什么作用。我干脆给去掉了，首页大小又减少5.66KB,。这样做不仅可以减少页面大小，还可以减少不必要的Http请求。

总结一下

真是不优化不知道，一优化吓一跳。优化后首页大小从原来的257.3KB变成了154.0KB, 总优化数值为103.3KB,比原来页面优化了40.15%。首页的Http请求从原来的25个变为22个。具体优化明细如下：

经过了这一番优化，到底会对页面载入时间产生什么效果呢。让我们使用Web Page Analyzer试试看，它可以模拟用户在不同网络情况下访问页面载入时间。对比一下优化前后的情况，效果还是相当不错的。主流带宽的用户首页载入时间，从20.37秒优化到只有不到3秒。

以上的优化工作其实不只会对首页有优化效果。因为整个网站用的是一个主题样式，其他页面也都得到了优化。至于整个网站的优化性能，我们还用文章开头用的Google网站管理员工具来检验一下。到了一月份再通过它查看网站性能，终于，得到了满意的结果。“您网站的平均网页载入时间为 2.6 秒（更新时间：2010-1-9）。该网站比 57% 的网站快。”

本文来自：www.2beusable.com/website-optimization-practice.html