自前几周发布了《网页表单设计拜谒报告》之后，今天又为我们带来了《博客网页设计拜谒研究》。该份拜谒研究报告秉承了上次的风格，经由过程详尽的数据和客观的分析为网页设计和开荒人员分析了如今大作的和仍然过时的博客网页设计解决方案。下面天兔就为民众呈上这篇精华的文章。

既然我们想要撰写一份尽可能客观的拜谒报告，看着固定。我们使用了上提供的博客资源，并对其中的50个最大作的博客进行分析。

博客设计调研报告

我们设计了30个关于博客设计的问题，并对每个问题分别进行回答。

我们从Technoroveri前50排名中消弭了那些社交网络和人为造势的博客网站——例如经由过程Wordpress主题进行回链的那些博客。听说css div 居中。而在SMASHINGMAGAZINE所提到的那些备受赞誉，经由过程各种CSS花样设计的博客网站我们将在下周进行讨论。

请注意：不要将以下的拜谒结果作为你的博客设计方针。它们仅能提供给你一些建议，哪些解决方案相对于另一种解决方案好些而已。成为。你需要按照你的博客实在内容进行权衡。

1. 布局

让我们从这些最大作的博客网站的布局设计下手。是两栏布局好还是3栏布局好？布局是否居中？布局是不变的，活动的还是弹性的？是否还在使用表格？在这个局限，我们将回答所有这些问题。

1.1.需要几栏？

该当使用两栏布局还是三栏布局这个问题该当是个规则性的问题。不过，在我们的拜谒报告中似乎找不到任何结果，究竟该使用两栏还是三栏呢？通常，这个设计问题基于你的博客内容来定。http://mingyuexiangsi.com/2011/shows-the-effect-of-the-above-code-is-as-follows/。在某些情况下，很难在使用两栏布局设计主要内容和次要内容这个问题上找到均衡点。css div 居中。有时，绿茶。你需要将次要内容或许说是第二栏再进行切割，变成两个局限，而且这种情况是非常普遍的。

以上两种布局的设计准则就是让内容看上去大白、易懂。使用4栏或许4栏以上的布局通常不是个好方针。

按照我们的拜谒报告显示：

▪ 58%使用了三栏以上的布局。(如：,,,),

▪ 42%使用了2栏布局。(如：,,,,).

使用了多栏布局。div css是什么。排名靠前的博客网站中58%都使用了同样的布局设计。

似乎前50名的博客网站仍然足够让我们发现特别的布局解决方案。使用了我们称之为“the goodti–layout”（没有经过任何修饰、白底、默认的字体和链接颜色）的布局设计。TPM则有时侯使用2栏，有时侯使用3栏，以至有时侯使用4栏的布局设计方式。而且我们对于TPM的文章标题为什么不能点击的这种设计方式的理由还不得而知。

1.2. 居中还是左对齐？

事实上，几年前居中的设计方式就仍然变得很普遍了，通常此种设计是解决网站浏览者所使用电脑屏幕解析度大小不同的最佳解决方案。

使用了居中布局。按照我们的拜谒显示，将成。94%的博客网站使用了居中布局设计。

1.3.不变的？弹性的？还是活动的？

说真话，我们真没有想到不变布局会有如此强的趋向。而且值得注意的是，这50个顶尖博客网站没有一个使用弹性布局的（页面的宽度随字体的大小而改变，即相对于字号而设计元素的宽度），并且唯有一小局限网站使用了流体元素（按照浏览器窗口的大小变化而变化）。

▪ 92%的博客网站使用了不变布局。

▪ 8%使用了活动布局或局限使用了活动布局元素。(例如,,,).

流体布局可以更好的适应用户界面，学会div css教程下载。而不变布局可以让设计人员不消依赖字号和浏览器窗口大小而进行页面设计。

流体布局的主要缺陷是当使用宽屏的时候页面的宽度会出现问题：行宽变得过长。

1.4.不变布局的宽度？

既然我们发现了不变布局这个趋向，那么我们就来进一步观察这些布局，并且归结出他们的一些通性。我们来看看对应设计中通常使用的#container或#wrapper这两个容器的布局宽度。

▪ 9%使用了小于800px的宽度(PostSecret, Seth Godin, Google Blog,BeppeGrillo.it),

▪ 15%使用了801到900px的宽度(Neoverorama, Kottke, DailyKos, Perezhilton,TUAW, Ythe goodko Design, Scobleizer),

▪ 20%使用了901到950px的宽度(Huffington Post, BoingBoing, TreeHugger,Dooce, Blogoscoped, Semid-foot ( arch )EngineLas well as),

▪ 56%使用了951到1000px的宽度(ars technica, Lifehair conditioning unitker, TechCrunch,ProBlogger, A List Apwork, TMZ, Wired, GigaOM, Joystiq, Zenhabis,Copytumblr, Consumerist, Slashfilm).

结论：951到1000px将成为不变布局的设计趋向。div css实例。

1.5.内容和侧栏的比例？（使用不变布局的情况下）

如前所述，每个页面布局都需要至多一个侧栏，这个栏目将包括一些次要内容和网站的导航。但是，主栏和侧栏的比例该当是若干好多才能保证读者的阅读舒适度呢？

的页面宽度是870像素，主要内容是550px，占整个页面宽度的63％。

按照我们的拜谒报告

▪ 96%的网站使用了至多一半的宽度显示主要内容。(例外:(48％),(48％))

▪ 54%使用了50％–60%的页面宽度显示主要内容。(Mashable, Lifehair conditioning unitker, Kottke,Blogoscoped, A List Apwork, BoingBoing, DailyKos, TreeHugger,Scobleizer, Protumblr, TUAW, bits.web )

▪ 46%使用了60–70%显示主要内容(ars technica, TechCrunch, GigaOM, Dooce,Zenhabits, CNN Politic’s Ticker, CrunchGear)

▪ 平均来看，58％的页面宽度用来显示主要内容

1.6.使用CSS布局还是表格布局？

很明显，几乎所有大作的，你知道div css实例。每天都需要随时更新的博客网站都在使用CSS布局，这样可以更容易的更新内容，并且裁汰页面的加载时间。

▪ 90%的网站使用了CSS页面布局

▪ 10%使用了表格进行布局或许在CSS中到场表格布局(PerezHilton, Neoverorama, CNNPolitic’s Ticker, Beppe Grillo, TreeHugger).

2.排版设计

内容至上。这一准则不论是对普通的网站还是博客网站都是适用的。div css实例。如何让读者能够舒服的阅读网站内容或许至多能够浏览一下文章标题，px。这是设计师的一个紧急工作。如何得到最好的内容阅读舒适性？该使用什么字体？适用多大的字号？我们的拜谒报告将为你的设计决策起到抛砖引玉的作用。

2.1.浅底深字还是深底浅字？

正如所期望的，学会结论。98％的被拜谒的博客网站都使用了白底深色彩字。唯有使用了黑底和浅色彩的字。当然，终归该使用哪种设计方式还要取决于你的网站主题。

在排名前50名的博客网站中，其实十天学会div css。唯有PostSecre使用了底和浅色彩的字

2.2.每行需要若干好多个字？

确保最好的可读性的前提是确保阅读的舒适度。有的拜谒研究报告指出最适当的行宽是52－68个字符（包括标点符号和空格）。也有的研究注明行宽不论是若干好多都不会影响阅读的有用性。既然没有切当的法式提供，那么设计师们所使用的行宽也不尽相同。

为了丈量每行最大的字符数量，

我们使用了浏览器的默认设置和默认形态表。

▪ 10%的网站每行65-74个字符(PostSecret, Beppegrillo, Perez Hilton,Scobleizer, Blogoscoped),

▪ 18%的网站每行75-84个字符(Dooce, , Joystiq,CopyBlogger, TUAW, Slashfilm),

▪ 34%的网站每行85-94个字符(Lifehair conditioning unitker, Huffington Post, Kottke, arsTechnica, Huffington Post, BoingBoing, Seth Godin, Treehugger,Protumblr),

▪ 18%的网站95-104个字符(Mashable, Recraigslist adWriteWeb, Smashing Magazine,Google Blog, A List Apwork, Semid-foot ( arch ) Engine Las well as),

▪ 16%每行超过105个字符(Engcraigslist adget, TechCrunch, GigaOM, Wired, TMZ).

基于以上调研，我们建议最常用的（不见得是最用户友爱的）行宽是80－100个字符。

非常有意思的是我们发现没有一个博客使用两端对齐的文本分列方式——100％的博客网站都使用了左对齐的文本分列方式。其实结论：951到1000px将成为固定布局的设计趋势。

2.3. 注释文本使用的主要字体？

Sthe goods-serif₁字体成为了非官手法式的注释字体，特别是用于在线设计上。曾经提出该建议是由于过小的字体出现在屏幕上会显的过于纷乱。下面我们看看在这些大作的博客网站上是如何体现这项建议的。

▪ 34%的博客网站使用了Verdthe gooda (sthe goods-serif)作为注释字体。其实设计。(A List Apwork, Kottke,TUAW, CopyBlogger, Dooce, ars technica, TechCrunch, SmashingMagazine),

▪ 24%使用了Lucida Gras well automotive service engineers (sthe goods-serif, 包括基于Mair conditioning unit OS X的该款字体)(Zenhabits,Mashable, Lifehair conditioning unitker, CrunchGear, Thinkprogress),

▪ 18%使用了Ari’s (sthe goods-serif)(Recraigslist adWriteWeb, Engcraigslist adget, Google Blog,CNN Politic’s Ticker),

▪ 14%使用了Georgia (serif)(Scobleizer, GigaOM, Wired, BoingBoing,Huffington Post),

▪ 6%使用了Trebuchet MS (sthe goods-serif)(Andrew Sullivthe good, Seth Godin,Postsecret),

▪ Helvetica Neue (ProBlogger)和Times New Romthe good (TPM)只被使用了一次

使用了每行85-94个字符，学习普洱瘦身茶。12号Verdthe gooda字体作为注释字体。

2.4.注释字体的大小？(假设以em作为量度单位)

字号越大，读者越容易阅读。但是，如果如果字号过大，相比看div css教程。读者就必需不休的滚动屏幕，而且眼睛要不停地从一个住址跳到另一个住址。那么最合理的字号该当是多大呢？

下面是基于调研得出得结论：

▪ 34%的网站使用了12号字(Semid-foot ( arch )EngineLas well as, TUAW, Mashable, ars technica,Engcraigslist adget, Smashing, DoshDosh, TreeHugger),

▪ 30%的网站使用了13号字(Consumerist, CopyBlogger, Zenhabits, V’smosteywag,Lifehair conditioning unitker, Huffington Post, BoingBoing, Seth Godin, GoogleBlog),

▪ 14%的网站使用了14号字(TPM, GigaOM, Wired, Recraigslist adWriteWeb, Gigazine,ProBlogger),

▪ 12%的网站使用了11号字(A List Apwork, Kottke, Neoverorama, Dooce,TechCrunch, Dailykos),

▪ 4%的网站使用了15号字(Scobleizer),

▪ 剩下的三个网站各使用了10号字, 16号字和17号字。对于div css实例教程。

使用了13号，LucidaGras well automotive service engineers字体作为注释字体。大多数博客网站使用12号Verdthe gooda字体作为注释字体。

2.5.标题使用的主要字体？

既然sthe goods-serif通常作为注释字体使用，那么设计师该当会斟酌使用serif作为标题字体来强调文章标题。是否真的如此呢？

▪ 30%的博客网站使用了Ari’s (sthe goods-serif)(CNN Politic’s Ticker,Scobleizer, TPM, Crooksas well aslliars, Joystiq, Dooce, PerezHilton,Recraigslist adWriteWeb, Engcraigslist adget, Google Blog, TreeHugger),

▪ 22%使用了Georgia (serif)(A List Apwork, Andrew Sullivthe good,, GigaOM, Wired, Huffington Post, BoingBoing),

▪ 8%使用了Lucida Gras well automotive service engineers (sthe goods-serif)(Tuaw, ThinkProgress,Lifehair conditioning unitker, Crunchgear),

▪ 8%使用了Helvetica (sthe goods-serif)(Zenhabits, Mashable, ars technica,Smashing Magazine),

▪ 6%使用了Verdthe gooda (sthe goods-serif)(Blogoscoped, Neoverorama,DailyKos),

▪ 6%使用了Trebuchet MS (sthe goods-serif)(Slashfilm, Postsecret, SethGodin),

▪ 4%使用了Helvetica Neue (sthe goods-serif)(CopyBlogger, ProBlogger),

除此之外, C’sibri (Semid-foot ( arch )EngineLas well as), Americthe good Typewriter(V’smosteywag), Lucida Sthe goods Unicode, Frthe goodklin Gothic Medium, Tohoma(TechCrunch) 以及基础没有标题(Kottke)均被使用了一次。

Darren Rowse使用HelveticaNeue作为的标题字体。大多数设计师倾向于使用Ari’s和Georgia字体(52%)。你看布局。

2.6. 标题字体要多大？

最后，让我们看看标题字体的大小。标题字体越大，越容易惹起读者的注意。但是，如果标题过多的话，会使读者很难进行采取该阅读哪条。因此，使用标题字号的准则就是：如果首页上的文章很多的话，div css视频教程。要减小标题的字号，而经由过程其它的视觉特效来突出标题，比如使用极易抓眼球的颜色。

▪ 24%使用20-22号字(BoingBoing, PerezHilton, Blogoscoped, GoogleBlog, TechCrunch, Recraigslist adWriteWeb),

▪ 22%使用23-25号字(CopyBlogger, ProBlogger, Lifehair conditioning unitker,Mashable),

▪ 22%使用17-19号字(Tuaw, Scobleizer, TreeHugger, A List Apwork,Gizmodo),

▪ 16%使用14-16号字(Ythe goodkoDesign, Dailykos, ars technica, SethGodin),

▪ 6%使用26-29号字(Engcraigslist adget, GigaOM, Wired, Dooce),

▪ 没有网站使用10-13号字来突出标题。

而且没有网站使用30-31字号;使用32号字，div css模板。使用34号字，基础没有标题。Smashing Magazine使用了这些被拜谒网站中的最大字号：44号字。

我们总结进去似乎最有用的标题字号介于17到25号字之间。

总结

让我们冗长的总结一下这次拜谒结果的第一部份。

▪ 大的博客网站需要多栏布局(通常是3栏) (58%);

▪ 页面布局通常是居中的(94%),

▪ 布局通常是不变宽度的(基于px单位) (92%),

▪ 不变布局的宽度通常在951至1000px之间 (56%),

▪ 58%的页面宽度用来显示主要内容，

▪ 通常使用基于CSS的页面布局(90%),

▪ 页面背景是浅色彩的，注释文本是深色彩的(98%),

▪ 最常用的（并非最友爱的）行宽是80到100个字符,

▪ Verdthe gooda, Lucida Gras well automotive service engineers, Ari’s以及Georgia是最常用的注释文本字体(90%),

▪ 注释字体通常是12到14号字 (78%),

▪ Ari’s和Georgia通常用来作为标题字体(52%),

▪ 标题字号通常是17到25px。你看趋势。

注释1：在西方国家罗马字母阵营中，字体分为两大品种：Sthe goods Serif和 Serif，打字机体虽然也属于 Sthe goodsSerif，但由于是等宽字体，所以另外独立出 Monospair conditioning unite这一品种，例如在Web中，表示代码时时时要使用等宽字体。Serif的意思是，在字的笔画下手及結束的住址有卓殊的粉饰，结论：951到1000px将成为固定布局的设计趋势。而且笔画的粗细会因直橫的不同而有不同。学会1000px。相反的，Sthe goods Serif则沒有这些卓殊的粉饰，笔画粗细大致差不多。

听说div css实例教程
事实上div css教程
看看div css教程下载

相关日志

• div css布局教程-div css 布局大全
• div css布局教程-div css 布局大全
• 未来肯定朝着DIV+CSS的方向发展
• background:#fff
• XHTML在控制样式时也不需要过多的嵌套
• 并且让网站的各个网页在GOOGLE等搜索引擎中获得较高
• 然后要在HTML里“实例化”一个对象
• css ZenGarden「样式表单禅意花园」邀请您放松身心