﻿<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:xg="http://ucdchina.com/schemas/rss">	
 		<channel>
 			<title>版式设计 - UCD大社区</title>
 			<link>http://ucdchina.com/rss/topic_posts?id=175</link>
 			<description>版式设计 - UCD大社区</description>
 			<webMaster>qingping.hu@gmail.com</webMaster>
			<pubDate>2026-05-13 11:46:36</pubDate>			<item>
				<title>中文段首不需要空两格</title>
				<link>http://ucdchina.com/snap/6430</link>
				<description>&lt;p&gt;首先要搞清楚&amp;ldquo;空两格&amp;rdquo;的意义是什么？段首空格表示段落重新开始，基本小学写作文都这么教的。但&amp;ldquo;空两格&amp;rdquo;真的就能清楚标示段落么？这个问题被放大到互联网上，尤其在对比英文段落效果后，中文段落&amp;ldquo;空两格&amp;rdquo;的传统开始受到质疑。先来看新浪博客网志页的两格例子：&lt;/p&gt;
 
&lt;p&gt;1. 无空格无换行排版（下图）&lt;/p&gt;
 
&lt;div&gt;
&lt;div&gt;&lt;a href=&quot;http://blog.sina.com.cn/s/blog_4b2a1c160100ikax.html?tj=1&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;新浪博客&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-04/9f410402a48fa557716e8ea62fa18151.png&quot; alt=&quot;无空格无换行排版&quot; width=&quot;500&quot; height=&quot;251&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
 
&lt;p&gt;2. 有空格无换行排版（下图）&lt;/p&gt;
 
&lt;div&gt;
&lt;div&gt;&lt;a href=&quot;http://blog.sina.com.cn/s/blog_466105980100ijyw.html?tj=1&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;新浪博客&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-04/740ab31b994c5522448bedbc24c73cf2.png&quot; alt=&quot;有空格无换行排版&quot; width=&quot;497&quot; height=&quot;278&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
 
&lt;p&gt;对比可知，其实段首空不空格效果差不多，都是密密麻麻一整块。空格之前，用户如果想看清段落需要扫视到段尾，然后再返回段首阅读；空格之后，虽然用户看段首能明白段落，但我认为效果提升不明显且不整齐。&lt;/p&gt;
 
&lt;p&gt;有网友认为段换行是&amp;ldquo;西化&amp;rdquo;的风格，因为英文单词没法空两格，所以采用换行来区分段落。也有网友认为空两格是中文的传统，中国文化丢不得。&lt;a href=&quot;http://bewho.us/why-indent-in-the-first-paragraph/&quot; target=&quot;_blank&quot;&gt;为什么要段首空两格&lt;/a&gt;一文中做了很多考证工作，有助于帮助我们理解中文传统的来龙去脉，但文章结论&amp;ldquo;大多数中文网络内容段首空两格（缩进）是很好的分隔段落的方式。&amp;rdquo;我不是很认同。从信息组织角度来看，段落内行之间的关系要比段落之间的关系低一个级别，所以在呈现上段落之间的&amp;ldquo;段距&amp;rdquo;应该大于段落之内的&amp;ldquo;行距&amp;rdquo;，如此才能一目了然。在语义角度分析，每个段落也都需要成对的&lt;/p&gt;
 
&lt;p&gt;标签做容器。&lt;/p&gt;
 
&lt;p&gt;记得最早为了追求段首空格效果，大家往往使用空格，或者&amp;nbsp;字符来填充，甚至使用全角空格来应付不同浏览器的解析差异。后来，又使用CSS语法的text-indent来定义p的段首留白。折腾来折腾去，最后我发现比较好的阅读体验还是换行分段，比如现在我blog采用的排版样式。&lt;/p&gt;
 
&lt;p&gt;3. 换行排版（下图）&lt;/p&gt;
 
&lt;div&gt;
&lt;div&gt;&lt;a href=&quot;http://blog.rexsong.com/&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;千鸟志&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-04/324939e59f818e4539a6664a1ef1204a.png&quot; alt=&quot;换行排版&quot; width=&quot;440&quot; height=&quot;259&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
 
&lt;p&gt;当然，也有大量网站采用了空格+段落的排版样式，中西合璧。看起来效果也还行，但左侧不齐我总觉得怪怪的，对可读性也不见有多少提升。段首空格尤其在每段内容很少的情况下，如大量一行两行，效果相对更&amp;ldquo;层次不齐&amp;rdquo;，和浪费空间。&lt;/p&gt;
 
&lt;p&gt;4. 有空格有换行排版（下图）&lt;/p&gt;
 
&lt;div&gt;
&lt;div&gt;&lt;a href=&quot;http://news.163.com/10/0420/18/64O28TAU000146BD.html&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;网易新闻&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-04/0163ef31d32c16b786fdbf950542c7a8.png&quot; alt=&quot;有空格有换行排版&quot; width=&quot;400&quot; height=&quot;254&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
 
&lt;p&gt;常见的中文排印上，其实大多是上文提到&amp;ldquo;有空格无段落排版&amp;rdquo;风格，前日有幸与&lt;a href=&quot;http://www.programmer.com.cn/&quot; target=&quot;_blank&quot;&gt;《程序员》杂志&lt;/a&gt;的孟主编和刘总编一起坐下来也探讨到此内容，深有感触。包括段首字放大，其实也是段落标识曾经流行的一种方法，可见中国设计师还是做过不少探索。中文本身是有特殊的地方，但对于信息传达的本质，世界上所有语言殊途同归。&lt;/p&gt;
 
&lt;p&gt;&amp;mdash;&amp;mdash; 于成都&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/175&quot; target=&quot;_blank&quot;&gt;版式设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://blog.rexsong.com/?p=10041&quot; target=&quot;_blank&quot;&gt;http://blog.rexsong.com/?p=10041&lt;/a&gt;&lt;/p&gt;</description>
				<author>songvision</author>
				<pubDate>2010-04-22 22:33:47</pubDate>
			</item>			<item>
				<title>空行不空格式排版组织原理</title>
				<link>http://ucdchina.com/snap/6450</link>
				<description>&lt;p&gt;前文讨论的热烈程度远超我预期，正好还有之前查阅资料拍的几张实物照片可以拿出来继续探讨。以此证明我是有过深思熟虑的过程，而不是拍脑袋的&amp;ldquo;武断&amp;rdquo;。前文我提出了个很重要的核心观点，并且写到了新改模板的&amp;ldquo;摘要&amp;rdquo;里，可惜好像很少有人看懂：&lt;/p&gt;
 &lt;blockquote&gt;
&lt;p&gt;从信息组织角度来看，段落内行之间的关系要比段落之间的关系低一个级别，所以在呈现上段落之间的&amp;ldquo;段距&amp;rdquo;应该大于段落之内的&amp;ldquo;行距&amp;rdquo;，如此才能一目了然。&lt;/p&gt;
&lt;/blockquote&gt; 
&lt;p&gt;再深入剖析，我认为良好排版应该满足如下更直白的关系：&lt;strong&gt;字距 &amp;lt; 行距 &amp;lt; 段距&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;段落往上的组织单元应该是小节，小节与小节之间间隔也不用某人想象的空两行，你难道忘了HTML里有h1-h6的标题么？不懂HTML至少应该也用过Word吧？标题系列组织的可读性不在本文涉及内容范畴之内，先打住。&lt;/p&gt;
 
&lt;p&gt;以上是为什么我理解&lt;a href=&quot;http://blog.rexsong.com/?p=10041&quot; target=&quot;_blank&quot;&gt;中文段首不需要空两格&lt;/a&gt;中截图1和2效果差不多，3和4要好很多的原因。同时，因为换行已经实现了标示段落的目标，所以不需要再段首空格来强调差异。逻辑上的推理完全没有问题，并且我也&amp;ldquo;随手翻开一本中文书&amp;rdquo;找到了实物证据并长期体验认为果然不错。所以，不是我在挑战传统，相反我只是个末学后进。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://book.douban.com/subject/3665205/&quot; target=&quot;_blank&quot;&gt;《应需而变》&lt;/a&gt;的空行不空格式排版效果，行间距小于段间距（下图）&lt;/p&gt;
 
&lt;div&gt;
&lt;div&gt;&lt;a href=&quot;http://blog.rexsong.com/wp-content/uploads/2010/04/P1380872.jpg&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;《应需而变》&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-04/0ff8c9c4afbddba9652edc456310c7c3.jpeg&quot; alt=&quot;《应需而变》照片&quot; width=&quot;500&quot; height=&quot;354&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
 
&lt;p&gt;具体中文的排印效果如何，我想需要广大中文排印领域的从业者和专家来具体实践。我当时做&lt;a href=&quot;http://rexsong.com/publication/web_design_thoughts/&quot; target=&quot;_blank&quot;&gt;《设计网事》&lt;/a&gt;发现了问题（可惜没有解决），并且结合了互联网信息组织理论来对比思考，如同我观察《应需而变》找到的答案，有兴趣的同学可以买本试试&amp;ldquo;空行不空格式&amp;rdquo;排版的可读性（其他书也许还有效果更好的）。&lt;/p&gt;
 
&lt;p&gt;有网友提到，在多行段落为主的情况下，使用&amp;ldquo;段首空格+段尾空行&amp;rdquo;的方式标示段落比较合适。这个观点我不做评论，但我认为大量的多行段落本身就会降低可读性，同时空行分段也比空格分段有更高的可适应性。据我观察，旧式小说文学和很多世界名著都是大量的多行段落，而新式文学这方面有极大改善。我不知道两者是否因为年代和风格而有绝对的关系，或者因为我书读的本身就不多。&lt;/p&gt;
 &lt;blockquote&gt;
&lt;p&gt;文在十行以上者，应酌量分段，其有意义自成段落者，虽不满十行，亦可分段。&lt;br /&gt; &amp;mdash;&amp;mdash;1930年《教育部划一教育机关公文格式办法》&lt;/p&gt;
&lt;/blockquote&gt; 
&lt;p&gt;至于有网友认为空行太多造成空间浪费的问题，我只想提醒大家，侃设计理论时，无数人振臂高呼&amp;ldquo;留白！留白！&amp;rdquo;但到具体页面设计时，完全不知&amp;ldquo;留白&amp;rdquo;为何物，不懂&amp;ldquo;留白&amp;rdquo;从何而来。翻了翻比较有代表性的《设计中的设计》，繁体中文和日文的竖排传统差不多，我同样认为这不是最好的排版，虽然他们行间距和字间距都设计的比较考究。&lt;/p&gt;
 
&lt;p&gt;《设计中的设计》繁体中文版《設計中的設計》段首空两格，行间距等于段间距（下图）&lt;/p&gt;
 
&lt;div&gt;
&lt;div&gt;&lt;a href=&quot;http://blog.rexsong.com/wp-content/uploads/2010/04/P1380869-.jpg&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;《設計中的設計》&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-04/d7f289074defb20c20edea335da24281.jpeg&quot; alt=&quot;《設計中的設計》照片&quot; width=&quot;500&quot; height=&quot;340&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
 
&lt;p&gt;《设计中的设计》日文原版《デザインのデザイン》段首空一格，行间距等于段间距（下图）&lt;/p&gt;
 
&lt;div&gt;
&lt;div&gt;&lt;a href=&quot;http://blog.rexsong.com/wp-content/uploads/2010/04/P1380875-.jpg&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;《デザインのデザイン》照片&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-04/77f0033817fdc4ff165795c6d06e6610.jpeg&quot; alt=&quot;《デザインのデザイン&quot; width=&quot;500&quot; height=&quot;340&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
 
&lt;p&gt;曾经有个笑话说&amp;ldquo;看古书都是对的，因为在点头；看今书都是错的，因为在摇头。&amp;rdquo;到现在为止，中文从繁体到简体，从竖排到横排，一直都在为良好传达的目标尝试改进。尤其在信息爆炸的互联网中，可读性问题正在凸显其所占用户体验指标的重要性。&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/175&quot; target=&quot;_blank&quot;&gt;版式设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://blog.rexsong.com/?p=10074&quot; target=&quot;_blank&quot;&gt;http://blog.rexsong.com/?p=10074&lt;/a&gt;&lt;/p&gt;</description>
				<author>千鸟</author>
				<pubDate>2010-04-25 11:25:04</pubDate>
			</item>			<item>
				<title>网站内容的排版</title>
				<link>http://ucdchina.com/snap/3736</link>
				<description>&lt;p&gt;最近几日在筹划&lt;a href=&quot;http://www.maott.com&quot; target=&quot;_blank&quot;&gt;小说&lt;/a&gt;类网站的建设，在文字排版方面，遇到几个问题，结合论坛上及朋友们的讨论，总结一下最后的解决方案：&lt;/p&gt;
 &lt;ol&gt; 
&lt;li&gt;字体大小&lt;br /&gt; 其实我明白大多数用户喜欢14号左右的字体，但自己在家中经常使用26号（甚至48号）的字体来敲文档，忍不住还是把正文区的字体搞到了120%，成功获取了大量差评。&lt;br /&gt; 于是只好改回了100%，用户体验第一，个人私欲靠边站。 &lt;/li&gt;
 
&lt;li&gt;文章正文区域的宽度&lt;br /&gt; 之前为了考虑手机用户，取了95%的宽度（主要是懒得写media=&amp;rdquo;handheld&amp;rdquo;）。对此，jjgod指出，&amp;ldquo;如果每行过宽，在阅读时，目光将很难准确的定位到下一行。&amp;rdquo;，查了一下，排版学上推荐的行宽是52~78个英文字符，再结合一部分用户使用&amp;ldquo;小型笔记本&amp;rdquo;的800*600分辨率，最后决定正文区域宽度为760px，左右各留padding:10px补白，这样正文区域刚好可以显示26个汉字。 &lt;/li&gt;
 
&lt;li&gt;行高&lt;br /&gt; 与上边的原因一样，为了避免用户&amp;ldquo;看串行&amp;rdquo;，将默认的行高line-height:120%修改为150%&lt;/li&gt;
 
&lt;li&gt;背景色&lt;br /&gt; 其实这个问题基本不用考虑，目前两家主流的网站&amp;ldquo;起点&amp;rdquo;&amp;ldquo;逐浪&amp;rdquo;都选择了近似#e7f4fe为背景色，这些先驱是经过大量的测试结果来证明了该色调适合长时间阅读，我相信他们的眼光是正确的。 &lt;/li&gt;
 
&lt;li&gt;文章内容居左还是居中&lt;br /&gt; 设定投票时候漏掉了居右这一项，还有两位回复时，要求居右显示的&amp;hellip;&amp;hellip;&lt;br /&gt; 目前的投票结果是50%喜欢居左显示，50%喜欢居中显示。但是投票居中显示的有&amp;ldquo;蓝色&amp;rdquo;&amp;ldquo;剑气凌人&amp;rdquo;这样玩转网站的人，自己也很喜欢居中显示的效果，最终确定为居中显示。&lt;br /&gt; 此观点有待考证，不知道各位有何见解？ &lt;/li&gt;
 &lt;/ol&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/175&quot; target=&quot;_blank&quot;&gt;版式设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://uicss.cn/typography/&quot; target=&quot;_blank&quot;&gt;http://uicss.cn/typography/&lt;/a&gt;&lt;/p&gt;</description>
				<author>cuikai</author>
				<pubDate>2009-06-09 21:23:04</pubDate>
			</item>			<item>
				<title>Web设计的中文排版</title>
				<link>http://ucdchina.com/snap/1672</link>
				<description>&lt;div class=&quot;below-title&quot;&gt;
&lt;p&gt;很多时候，中文的Web设计仍然扮演着追赶者的角色，主流是以英语为代表的西方语言下的设计。语言是文化的重要方面，其差异&amp;mdash;&amp;mdash;尤其是方块文字与西方字母文字的差异&amp;mdash;&amp;mdash;强烈地影响了Web设计的效果，这其中或又以排版（typography）为甚。我们的Web设计师们醉心于那些优秀的西方设计，惊喜之余照搬或临摹，用作中文网站的设计，效果却可能差之甚远。一些跨国公司设计自己的中文网站时，几乎是将英文网站的样式表原封不动地套用到中文内容，不但整体效果失了原味，细节不当之处更不胜枚举。&lt;/p&gt;
&lt;/div&gt;
 
&lt;p&gt;&lt;a href=&quot;http://weakow.com/uploads/2008/12/web-typo-1.png&quot;&gt;&lt;img class=&quot;alignnone size-medium wp-image-63&quot; title=&quot;微软中英文主页对比截图&quot; src=&quot;http://weakow.com/uploads/2008/12/web-typo-1.png&quot; alt=&quot;微软中英文主页对比截图&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p class=&quot;image-note&quot;&gt;&lt;span style=&quot;color: #808080;&quot;&gt;微软公司的中文主页刚刚做了改版。与英文主页几乎完全一致的样式并没有给用户带来多大好处，反而增加了麻烦。约为11px大小的英文在Mac OS/Safari、Windows Vista、IE 7以及开启了ClearType的数量不少的Windows XP用户看来无可挑剔，但同样大小的中文显示在屏幕上就不那么完美了。过小的字号让中文用户很难阅读。总不能强求用户每次打开页面都手动增大文字大小吧？即便使用鼠标滚轮改变字号大小并不费劲，却并没有太多用户意识到这一点。&lt;/span&gt;&lt;/p&gt;
 
&lt;h3&gt;屏幕字体显示技术小史&lt;/h3&gt;
 
&lt;p&gt;电脑屏幕显示的最小单位是像素，这多少是个限制。让屏幕显示水平线和竖直线都十分清晰，但让它显示斜线则有可能产生&amp;ldquo;锯齿&amp;rdquo;。消除&amp;ldquo;锯齿&amp;rdquo;的方法是使用过渡性质的中间颜色（白和黑的过渡色是灰）。英文字母和汉字都少不了斜线和曲线，使用过渡颜色消除&amp;ldquo;锯齿&amp;rdquo;的原理可以很大程度上提高清晰度。&lt;/p&gt;
 
&lt;p&gt;1998年12月，微软公司&lt;a title=&quot;微软公司发布ClearType字体显示技术&quot; href=&quot;http://www.microsoft.com/china/press/1998/12/1208.mspx&quot;&gt;发布&lt;/a&gt;ClearType字体显示技术，宣称使用该项技术，字体的分辨率能比当时的既有水平提高200%。该技术同样用于消除&amp;ldquo;锯齿&amp;rdquo;，但并非使用过渡颜色的方法。在液晶显示器上，应用了ClearType的字体显示效果明显优于简单使用过渡颜色的效果。实际上，这正是一种利用了液晶显示器特性的技术。研究一下微软的&lt;a title=&quot;ClearType 概述&quot; href=&quot;http://msdn.microsoft.com/zh-cn/library/ms749295.aspx&quot;&gt;技术文档&lt;/a&gt;，就不难猜到200%这一数字的由来了。使用ClearType技术确实能够有效提高液晶显示器屏幕文字显示的效果，即便是普通显示器，应用ClearType技术也能起到消除&amp;ldquo;锯齿&amp;rdquo;的作用。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://weakow.com/uploads/2008/12/web-typo-2.png&quot;&gt;&lt;img class=&quot;alignnone size-full wp-image-66&quot; title=&quot;不消除&amp;ldquo;锯齿&amp;rdquo;&quot; src=&quot;http://weakow.com/uploads/2008/12/web-typo-2.png&quot; alt=&quot;&quot; width=&quot;500&quot; height=&quot;85&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p class=&quot;image-note&quot;&gt;&lt;span style=&quot;color: #808080;&quot;&gt;不消除&amp;ldquo;锯齿&amp;rdquo;。右边为左边文字截图放大至8倍的效果。&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://weakow.com/uploads/2008/12/web-typo-3.png&quot;&gt;&lt;img class=&quot;alignnone size-full wp-image-67&quot; title=&quot;使用过渡颜色消除&amp;ldquo;锯齿&amp;rdquo;&quot; src=&quot;http://weakow.com/uploads/2008/12/web-typo-3.png&quot; alt=&quot;&quot; width=&quot;500&quot; height=&quot;85&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p class=&quot;image-note&quot;&gt;&lt;span style=&quot;color: #808080;&quot;&gt;使用过渡颜色消除&amp;ldquo;锯齿&amp;rdquo;。右边为左边文字截图放大至8倍的效果。&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://weakow.com/uploads/2008/12/web-typo-4.png&quot;&gt;&lt;img class=&quot;alignnone size-full wp-image-68&quot; title=&quot;使用ClearType&quot; src=&quot;http://weakow.com/uploads/2008/12/web-typo-4.png&quot; alt=&quot;&quot; width=&quot;500&quot; height=&quot;85&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p class=&quot;image-note&quot;&gt;&lt;span style=&quot;color: #808080;&quot;&gt;使用ClearType。右边为左边文字截图放大至8倍的效果。&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;Windows XP/2003系统已经包含了ClearType技术，然而遗憾的是，用户需要手动开启该项功能才能生效，否则，屏幕上默认显示的文字是不消除锯齿的。我无法考察到底有多少人开启了ClearType，但这对Web设计师来说一定不是好消息，我们不能总是陶醉在自己的世界里吧？看一看你的设计在关闭ClearType时的效果，或许会带给你一些不一样的启发。&lt;/p&gt;
 
&lt;p&gt;对于中文Web设计者来说，一个更不幸的消息是，在多数情况下，中文并不是ClearType技术的受益者。对于比较小的汉字（包括Web设计中段落文本用得最多的12px和14px），开启ClearType并不产生任何变化。下文提到&amp;ldquo;小字号&amp;rdquo;时，均是指这种大小的字号。&lt;/p&gt;
 
&lt;p&gt;为什么会这样？其实，这样处理不无原因。&lt;/p&gt;
 
&lt;p&gt;在Windows XP/2003以及之前的操作系统中，小字号的中文字体使用了点阵字库而非矢量字库。这些操作系统的默认中文字体是宋体，但其横细竖粗的特点往往并不会表现出来。在字号较小时，横竖笔画都是1像素宽。也就是说，这些汉字的显示并不是像矢量字体一样根据需要的大小按比例渲染出来的，而是像点阵图一样为每一种字号下每一个汉字使用特定的表示效果。之所以这样处理，是因为汉字的笔画比较繁杂，而字体较小时可用的像素太少（12px大小的字只有144个像素供汉字使用）。这种处理方式反而比简单地消除&amp;ldquo;锯齿&amp;rdquo;更清晰易读。再仔细看看12px下的&amp;ldquo;算&amp;rdquo;字，中间的&amp;ldquo;目&amp;rdquo;字被显示为&amp;ldquo;日&amp;rdquo;字，这正是针对像素过少采取的应对策略&amp;mdash;&amp;mdash;在不引起误解的情况下，尽可能多地提高文字点阵显示效果的清晰度。&lt;/p&gt;
 
&lt;p&gt;这一缺陷也对中文Web设计带来了一定程度的负面影响。一个典型的例子便是导航栏的设计。一些产品负责人要求网页导航栏上的中文使用图像替换，以达到清晰无&amp;ldquo;锯齿&amp;rdquo;的效果。因为导航栏太重要了，而且设计师们对导航栏的视觉设计也会花足了功夫，如果配上&amp;ldquo;锯齿感&amp;rdquo;强烈的文字，不无痛惜。相形之下，英文网站的设计师们就不必为此多虑了。&lt;/p&gt;
 
&lt;p&gt;从去年开始，一种称为&amp;ldquo;微软雅黑&amp;rdquo;的字体随着Windows Vista的推出而大为众人追捧。这款字体取代宋体成为Windows新版操作系统的默认中文字体。在Vista下使用这款字体，任意大小的汉字可以像英文一样清晰显示。Mac OS使用了类似的黑体作为系统默认字体，通常称为&amp;ldquo;苹果丽黑&amp;rdquo;。Windows XP下的Safari也会尝试将网页里的中文以黑体显示出来，但效果不佳。在Linux下使用开源的&lt;a href=&quot;http://wenq.org&quot;&gt;文泉驿&lt;/a&gt;正黑，也可以看到相同的清晰效果。&lt;/p&gt;
 
&lt;p&gt;如果绝大多数用户都开始使用这些新的系统及字体，我们或许可以思考一种新的Web排版设计格局。但就像Web设计师们至今也无法摆脱IE 6一样，主流中文字体显示技术依然没有改变。&lt;/p&gt;
 
&lt;h3&gt;选择字体&lt;/h3&gt;
 
&lt;p&gt;Web设计中，为了突出显示标题文字，可以使用与正文不同的字号和颜色，甚至，呃，不同的字体？对英文来说，确实如此。Web上通常直接可用的英文字体虽然&lt;a href=&quot;http://www.modernlifeisrubbish.co.uk/article/working-with-limited-web-font-set&quot;&gt;有限&lt;/a&gt;，但毕竟有选择的余地。中文字体该如何选择呢？宋体和黑体都可用吗？问题并不简单。&lt;/p&gt;
 
&lt;p&gt;通常情况下，中文字体和英文字体的重要区别，在于英文字体不包含对中文字体的定义，而中文字体却往往包含了对英文字体的定义（仅需要为英文大小写字母、数字及常用符号进行设计）。也就是说，对一段包含中文的文字应用英文字体，中文会表现为默认中文字体（如Windows XP等系统下为宋体），而对英文应用中文字体，这些英文的字体将由中文字体决定。下表列出了最为常见的中英文字体。&lt;/p&gt;
 
&lt;table class=&quot;in-post &quot; border=&quot;0&quot;&gt;
&lt;thead&gt; 
&lt;tr&gt;
&lt;th&gt;名称&lt;/th&gt; &lt;th&gt;样例&lt;/th&gt; &lt;th&gt;说明&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt; 
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Times New Roman&lt;/strong&gt;&lt;/td&gt;
 
&lt;td&gt;&lt;a href=&quot;http://weakow.com/uploads/2009/01/times.png&quot;&gt;&lt;img class=&quot;no-border alignnone size-medium wp-image-177&quot; title=&quot;Times New Roman&quot; src=&quot;http://weakow.com/uploads/2009/01/times.png&quot; alt=&quot;Times New Roman&quot; width=&quot;200&quot; height=&quot;20&quot; /&gt;&lt;/a&gt;&lt;/td&gt;
 
&lt;td&gt;Times系列字体的代表，也是衬线（serif）字体的代表，广泛用于印刷，但通常被认为在显示Web小字体文本时相对无衬线字体来说较不利用阅读。与中文混排效果较好。&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Georgia&lt;/strong&gt;&lt;/td&gt;
 
&lt;td&gt;&lt;a href=&quot;http://weakow.com/uploads/2009/01/georgia.png&quot;&gt;&lt;img class=&quot;no-border alignnone size-full wp-image-175&quot; title=&quot;Georgia&quot; src=&quot;http://weakow.com/uploads/2009/01/georgia.png&quot; alt=&quot;Georgia&quot; width=&quot;200&quot; height=&quot;20&quot; /&gt;&lt;/a&gt;&lt;/td&gt;
 
&lt;td&gt;衬线更为突出，数字的处理尤为特别，高低错落，显得典雅而不失正式。多适用于英文标题，正文亦可使用，但与汉字排在一起则效果不佳，故中文排版中应慎用。&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Arial&lt;/strong&gt;&lt;/td&gt;
 
&lt;td&gt;&lt;a href=&quot;http://weakow.com/uploads/2009/01/arial.png&quot;&gt;&lt;img class=&quot;no-border alignnone size-full wp-image-179&quot; title=&quot;Arial&quot; src=&quot;http://weakow.com/uploads/2009/01/arial.png&quot; alt=&quot;Arial&quot; width=&quot;200&quot; height=&quot;20&quot; /&gt;&lt;/a&gt;&lt;/td&gt;
 
&lt;td&gt;无衬线（sans serif）字体的代表，为使用最广的Web字体，大型实用网站（如Google）均选用Arial作为文本字体。与中文混排效果好。&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Verdana&lt;/strong&gt;&lt;/td&gt;
 
&lt;td&gt;&lt;a href=&quot;http://weakow.com/uploads/2009/01/verdana.png&quot;&gt;&lt;img class=&quot;no-border alignnone size-medium wp-image-182&quot; title=&quot;verdana&quot; src=&quot;http://weakow.com/uploads/2009/01/verdana.png&quot; alt=&quot;&quot; width=&quot;200&quot; height=&quot;20&quot; /&gt;&lt;/a&gt;&lt;/td&gt;
 
&lt;td&gt;又一款广泛使用的无衬线字体，与Arial相比字符更宽一些。Verdana的一大优势是即便很小的字号（如9px或10px大小的文字使用Verdana依然清晰，每个字母间都保持1像素的间隔，但同样大小的Arial文字可读性就差了许多，部分字母挤在一起）。与中文混排时，由于宽度比例的关系，Verdana的效果较Arial稍差。&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;宋体&lt;/strong&gt;&lt;/td&gt;
 
&lt;td&gt;&lt;a href=&quot;http://weakow.com/uploads/2009/01/simsun.png&quot;&gt;&lt;img class=&quot;no-border alignnone size-full wp-image-184&quot; title=&quot;宋体&quot; src=&quot;http://weakow.com/uploads/2009/01/simsun.png&quot; alt=&quot;宋体&quot; width=&quot;200&quot; height=&quot;20&quot; /&gt;&lt;/a&gt;&lt;/td&gt;
 
&lt;td&gt;最常使用的中文衬线字体，Windows XP中文版的默认字体。小字号中文显示效果较好（以点阵方式显示），但其加粗显示效果多为人所诟病。对英文字符采用等宽处理（宽度等于半个汉字的宽度），为大量中文网站（如新浪网）使用，虽然中英文混排显得极为整齐，实则磨灭了英文字体应有宽度不同的特点，故不可取。&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;黑体&lt;/strong&gt;&lt;/td&gt;
 
&lt;td&gt;&lt;a href=&quot;http://weakow.com/uploads/2009/01/simhei.png&quot;&gt;&lt;img class=&quot;no-border alignnone size-full wp-image-187&quot; title=&quot;黑体&quot; src=&quot;http://weakow.com/uploads/2009/01/simhei.png&quot; alt=&quot;黑体&quot; width=&quot;200&quot; height=&quot;20&quot; /&gt;&lt;/a&gt;&lt;/td&gt;
 
&lt;td&gt;常用的中文无衬线字体，与宋体相比更为厚重，用于标题可起强调作用。由于汉字笔画多的缘故，小字号中文显示不如点阵宋体清晰。对英文字符亦采用等宽处理，同样不足取。&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;注：上表中的宋体和黑体均指Windows XP等平台下的相应字体，不代表微软雅黑等字体。截图亦来自Windows XP平台（已开启ClearType）。此外，Mac OS中的默认字体Helvetica没有列出，它与Arial接近，CSS中常与Arial一起声明。&lt;/p&gt;
 
&lt;p&gt;表中解释了这些中文字体对英文字符的处理方式。实际上，除了Windows XP等系统自带的宋体、黑体、楷体等字体以外，其它很多中文字体都对英文字符采取了符合英文习惯的处理方式，这其中也包括微软雅黑。使用这样的中文字体，英文字符表现出与中文一致的风格，如微软雅黑的英文也是无衬线的。然而，由于无法保证多数电脑安装了这类字体，它们也不应选为网页字体。&lt;/p&gt;
 
&lt;p&gt;因此，一般情况下，最好使用常用的英文字体去定义网页中的普遍文本，而让操作系统和浏览器去决定中文字体的选用。这样做会让用户对网页的阅读产生最高的效率，制作功能性较强的网站尤其应该注意这一点。&lt;/p&gt;
 
&lt;h3&gt;选择字号&lt;/h3&gt;
 
&lt;p&gt;字号的选择似乎并不简单&amp;mdash;&amp;mdash;排版中对字号的讨论远多于对字体的讨论。&lt;/p&gt;
 
&lt;p&gt;英文字体通常可以很小或很大，而中文则没有这个便利。正如文章开头所演示的，小于12px的中文在屏幕上很难阅读，任何一种系统面对笔画繁多的汉字和有限的表现空间都捉襟见肘。正因为英文对字号的适应范围大，英文Web设计常使用相对字体大小，把一定的选择权交给用户。而中文设计则限制较多，字号太小则笔画太过拥挤（这种情况下，矢量字体的表现比点阵字体稍好）。&lt;/p&gt;
 
&lt;p&gt;大多数情况下，中文字体使用固定大小，如12px、14px、16px。按照W3C的&lt;a href=&quot;http://www.w3.org/TR/CSS2/syndata.html#length-units&quot;&gt;规范&lt;/a&gt;，px与em同属相对单位（relative unit），em（以及%）相对于其它字号，px则相对于显示设备对像素的显示情况。如果屏幕分辨率变高而屏幕实际大小不变的话，1像素的实际显示大小就会变小，使用px定义字号的文字的实际显示大小也会变小。如今，屏幕分辨率越来越高，导致屏幕文字越来越小这一现象已相当突出，不少设计师已采取行动以适应这一趋势。由于1024&amp;times;768的分辨率使用人数仍然最多，网页宽度多控制在1000以内，相应地，普通文字使用12px和14px是最合适的大小。为了方便阅读，&lt;a href=&quot;http://www.xinhuanet.com&quot;&gt;新华网&lt;/a&gt;、&lt;a href=&quot;http://cn.yahoo.com&quot;&gt;中国雅虎&lt;/a&gt;等网站将新闻内容文字的字体设成了16px，虽在小分辨率屏幕上略显肿大，却也为多数人所接受。&lt;/p&gt;
 
&lt;p&gt;值得注意的是，Windows XP等系统下的宋体（大多数网页的中文默认显示字体）的合适大小是12px以上。在显示一些相对不重要的信息或是用户界面中使用较少的文字时，为了与普通文字显出区别，也为了多点变化，英文往往把字号设得很小。但同样的情况下，把中文设到12px以下则会严重损坏可读性。这时，在中文Web设计中，要弱化一段文字，如果字号降低至12px效果仍不足够，则可以考虑将颜色变浅（准确地说，是变得更接近背景颜色）或是选择网页配色中的次要颜色（并非用得最少的颜色）。&lt;/p&gt;
 
&lt;h3&gt;差异无处不在&lt;/h3&gt;
 
&lt;p&gt;从一开始，本文就没有停止过对中英文排版思路与方法的比较。优秀的英文Web设计远远多于中文设计，对Web设计的研究与讨论主要集中在英语世界，连CSS属性也是以英文等字母语言为设计对象的，这些都是实情。差异无处不在，除了字体和字号，中文Web排版还包括很多不容忽视的原则与技巧。下面试举几例：&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;对正文中的汉字，不要使用斜体。一方面，Windows XP等平台下，斜体小字号汉字极难认清（而且也太斜了）；另一方面，斜体文本的最后一个字会与紧接着它的下一个字挤在一起（英文排版中，单词之间都有空格，故不存在这一问题）。不过，在非正式情况下，对大字号的标题使用斜体也并非不可。&lt;/li&gt;
 
&lt;li&gt;依照中文的习惯，文章的标题应当居中，每段开头应当空两格。不过，在Web世界里，这些仅仅起到参考的作用，而非必须。如今，中文用户似乎也很习惯标题居左，段间留距。况且，这种情况下用户的阅读速度可能更高。&lt;/li&gt;
 
&lt;li&gt;与英文相比，中文段落需要的行距（对应CSS中的line-height属性）更大。这样处理的一个简单原因是，相同字号的汉字比英文字母、数字和符号的高度更高，每行之间的距离相对就小了。&lt;/li&gt;
 
&lt;/ul&gt;
&lt;p&gt;诸如此类的问题还有很多，但我不愿也不能列举所有。撰写本文的目的是引起大家对面向中文Web的排版设计的关注，要求仅仅是把其中的基本问题阐释清楚，并将读者的视线带往更广的空间。本文对读者的一个重要期待是有更多的人研究&amp;mdash;&amp;mdash;哪怕只是零散地思考&amp;mdash;&amp;mdash;这个问题。或许，重要的不是世界的改变本身，而是存在改变世界的人。&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/175&quot; target=&quot;_blank&quot;&gt;版式设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://weakow.com/articles/chinese-typography-in-web-design/&quot; target=&quot;_blank&quot;&gt;http://weakow.com/articles/chinese-typography-in-web-design/&lt;/a&gt;&lt;/p&gt;</description>
				<author>weakow</author>
				<pubDate>2009-01-09 10:05:18</pubDate>
			</item>			<item>
				<title>网站的视觉路径和版式设计</title>
				<link>http://ucdchina.com/snap/1698</link>
				<description>&lt;p&gt;&lt;span class=&quot;cat&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;div class=&quot;entry-content&quot;&gt;
&lt;p&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-01/d53ecb653da9e8c0214d5ed7f35a3724.jpeg&quot; alt=&quot;shijue.jpg&quot; /&gt;&lt;br /&gt; cooper谈到用户的视觉路径一般是：从上到下，从左到右。&lt;br /&gt; 好的视觉设计路径应该是顺应这样的用户习惯，糟糕的设计会让用户无所适从，焦点到处都是。&lt;br /&gt; 当然，上图的视觉路径图并非绝对的，浏览习惯因人而异。&lt;br /&gt; &lt;br /&gt; &lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-01/cb2fce4f4b33edc5def5d6f69e4f51f2.jpeg&quot; alt=&quot;shijue2.jpg&quot; /&gt;&lt;br /&gt; &lt;strong&gt;网站中方块&lt;/strong&gt;&lt;br /&gt; 因为人们从接触信息以来，信息的呈现就是以方块式存在：报纸、书，单个字成点，一行字成线，一段字成面，而这个面当然是以方形呈现的效率最高。网站的视觉设计大部分其实都是在拼方块。&lt;br /&gt; 网站中的方块能很好地引导用户的视觉路径，用户可以通过区块来分辨这个区域的信息是否是自己需要的，从而可以迅速缩小范围细致寻找或者浏览下一个区块，比如yahoo的首页，从大块上来看，用户很容易分辨出4个大区块，每个区块里面又有小的区块。&lt;br /&gt; &lt;strong&gt;1&lt;/strong&gt; 方块感越强越能给用户方向感。&lt;br /&gt; &lt;strong&gt;2&lt;/strong&gt; 方块越少越好。&lt;br /&gt; &lt;strong&gt;3&lt;/strong&gt; 尽量用留白做视觉区分。&lt;br /&gt; &lt;br /&gt; &lt;strong&gt;对齐和间距&lt;/strong&gt;&lt;br /&gt; 视觉设计最简单，也是最容易忽略的就是对齐。检查的方法就是查看每个方块中的边线，方块与方块之间的边线，尤其是纵向维度。&lt;br /&gt; 间距的一般规律：&lt;strong&gt;字距小于行距，行距小于段距，段距小于块距。&lt;/strong&gt;检查的方法可以尝试将网站的背景图案、线条全部去掉，看是否还能保持想要的区块感。&lt;br /&gt; &lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-01/9198224aa855b8c0ec92152cb4374961.jpeg&quot; alt=&quot;shijue3.jpg&quot; /&gt;&lt;br /&gt; 拿淘宝的新首页举个细节的例子(右边是我调整后的)。有时候我们不需要花心思做多么漂亮的图标和颜色搭配，用心地调整好网站的每一个像素或许也能让它焕然一新。&lt;br /&gt; &lt;br /&gt; &lt;strong&gt;主次关系&lt;/strong&gt;&lt;br /&gt; 怎么对用户引导的关键就在于怎么处理主次关系。说白了就是对比，从视觉的角度上看：&lt;strong&gt;形状的大小，颜色，摆放的位置&lt;/strong&gt;都会影响信息的重要与否。&lt;br /&gt; 从大的区块来看，不要平均分割页面，三栏的设计应该让其中一栏明显短一些。&lt;br /&gt; 从局部来看，也要把握信息呈现的节奏，比如yahoo中间新闻栏的设计，大图带大标题是第一要点，小图带字是第二要点，纯文本第三，节奏感、主次关系非常强。&lt;br /&gt; &lt;br /&gt; &lt;strong&gt;常见问题&lt;/strong&gt;&lt;br /&gt; 1 视觉设计师不懂代码，前端设计师在视觉方面又不专业。常常是实现出来的产品跟视觉设计出来的图片有所偏差。建议视觉设计师跟进调整。&lt;br /&gt; 2 广告图片破坏视觉效果。如果网站足够牛的话，可以让广告方遵循视觉规范。如果不行的话，起码设计师还能决定广告的尺寸，位置等等。&lt;br /&gt; &lt;br /&gt; 写这篇文章刚刚赶上4月份新浪、腾讯、淘宝的首页改版。单纯从视觉设计的角度上看，腾讯非常清爽，很用心。&lt;br /&gt; &lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-01/ebec130d9f4f4dad3ca1cd09f09c0aa9.jpeg&quot; alt=&quot;shijue4.jpg&quot; /&gt;&lt;/p&gt;
&lt;/div&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/175&quot; target=&quot;_blank&quot;&gt;版式设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://uitony.com/?p=32&quot; target=&quot;_blank&quot;&gt;http://uitony.com/?p=32&lt;/a&gt;&lt;/p&gt;</description>
				<author>Tony</author>
				<pubDate>2009-01-13 09:06:55</pubDate>
			</item>			<item>
				<title>从名片设计说网页版式的细节</title>
				<link>http://ucdchina.com/snap/1697</link>
				<description>&lt;p&gt;&lt;span class=&quot;cat&quot;&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;div class=&quot;entry-content&quot;&gt;
&lt;p&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-01/c7e5c6d7900178455f63d3aee6e3a0d5.jpeg&quot; alt=&quot;ecards.jpg&quot; /&gt;&lt;br /&gt; &lt;br /&gt; 记得国外牛人说过，&lt;strong&gt;网页的设计95%都是排版的设计&lt;/strong&gt;，我不知道具体有没有那么夸张，但版式的重要性估计很多人都深有体会，可是由于现在很多的互联网设计师在版式设计方面的素养并不太高导致了中文网站大多呈现乱，花。美观其次的，主要是让用户在寻找想要的信息的时候花费过多额外的时间。&lt;br /&gt; &lt;br /&gt; 平面设计中版式入门就是名片设计，在99X55mm的里面将信息组织并且呈现出来，说难不难，做好了也不简单。&lt;br /&gt; 我从网上搜出了两张apple的名片，左边的这张我认为是更早的设计，右边的是新的设计：1 LOGO更加简洁；2 字体的也选择了细节更少的字体。&lt;br /&gt; 但从版式上来看，变化不大。&lt;br /&gt; &lt;br /&gt; &lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-01/aad1fc1ab3899aa9b22d034b4846fde2.jpeg&quot; alt=&quot;ecards2.jpg&quot; /&gt;&lt;br /&gt; &lt;br /&gt; &lt;strong&gt;信息的要点&lt;/strong&gt;&lt;br /&gt; 第一次拿到这个名片，用户看到的肯定不是某个字，要点很简单：1 公司LOGO；2 名字和职位；3 其他信息&lt;br /&gt; 从名片上看1、2、3的视觉要点很明显，网页的版式设计跟名片设计的原理一样。用户在浏览一个新的网页的时候，浏览习惯是跳跃性的，速度非常地快，如果在
版式设计的过程中，如果不能将信息要点让用户迅速地找到，这样的设计不管色调怎么和谐，看上去感觉多么都好，都是糟糕的设计。&lt;br /&gt; 我对信息要点的想法：&lt;br /&gt; 1 一屏内的页面要点控制在3个以内，并且清楚要点的主次关系。&lt;br /&gt; &lt;br /&gt; 2 装饰的元素需要理性地使用。什么是装饰元素？色块、花纹、图标、线条等等。当你选择要用到这些东西的时候，先想为什么，而不是&amp;ldquo;我感觉&amp;rdquo;、&amp;ldquo;因为这样好看&amp;rdquo;，是否能用别的方式来达到一样的目的。&lt;br /&gt; &lt;br /&gt; 3 减少要点周围的干扰因素。要点的分布要掌握节奏，不要扎堆了，一段文字都加粗了跟没有加粗的效果其实一样，所以，要弱化要点周围的信息。&lt;br /&gt; &lt;br /&gt; &lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-01/22882433cc537867334cfeff578d3885.jpeg&quot; alt=&quot;ecards3.jpg&quot; /&gt;&lt;br /&gt; &lt;br /&gt; &lt;strong&gt;控制并利用留白&lt;br /&gt; &lt;/strong&gt;在名片的设计中，留白的好坏直接影响名片的信息传递和美观，段落与段落的距离，行与行的距离，字与字的距离，包括四周边缘的空白距离，
字的横向排列形成线（行），线的纵向排列形成面（段），面的排列加上留白形成视觉的节奏、比例。他们都通过这样的点，线，面划分了整个画面。是居中还是左
对齐，留白的多少将会在潜意识里面告诉读者什么重要，内容的分类。&lt;br /&gt; &lt;br /&gt; 在网页设计中是一样的。&lt;br /&gt; 1 如果我们能让字的排列形成线，那线是否就是多余的呢？&lt;br /&gt; 2 如果用文字段与段之间能将区块划分清晰，还需要用底色吗？&lt;br /&gt; 3 一行字是否太长了不适合用户阅读？&lt;br /&gt; 4 一个段落是否因为行太多了造成阅读压力？&lt;br /&gt; &lt;br /&gt; 当然，也不是说不要用装饰元素，装饰元素从理性的方面看可以起到划分区块，突出要点的作用，另外，还有品牌识别的作用，但别让这个成为使用它们的借口，有些时候没有那些元素，一样可以达到目的，比如&lt;span style=&quot;color: #0063dc;&quot;&gt;flick&lt;/span&gt;&lt;span style=&quot;color: #ff0084;&quot;&gt;r&lt;/span&gt;。&lt;br /&gt; &lt;br /&gt; 做视觉设计的并不是艺术家，不是感性的，更没有什么&amp;ldquo;美工&amp;rdquo;之说。&lt;/p&gt;
&lt;/div&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/175&quot; target=&quot;_blank&quot;&gt;版式设计&lt;/a&gt;&amp;nbsp;&lt;a href=&quot;http://ucdchina.com/topic/253&quot; target=&quot;_blank&quot;&gt;名片的设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://uitony.com/?p=17&quot; target=&quot;_blank&quot;&gt;http://uitony.com/?p=17&lt;/a&gt;&lt;/p&gt;</description>
				<author>Tony</author>
				<pubDate>2009-01-13 09:04:54</pubDate>
			</item>			<item>
				<title>排版的规则</title>
				<link>http://ucdchina.com/snap/466</link>
				<description>&lt;p&gt;1.在所有标点符号后面只加一个空格&lt;/p&gt;
 
&lt;p&gt;2.恰当地使用破折号&lt;/p&gt;
 
&lt;p&gt;3.使用真正的引号和单引号&lt;/p&gt;
 
&lt;p&gt;4.对于所有大大写字母,使用稍小的字体&lt;/p&gt;
 
&lt;p&gt;5.对于大写字母文字,或部分字母为大写同时大写字母尺寸稍小的文字,增大其字符间距离&lt;/p&gt;
 
&lt;p&gt;6.在合适的地方尽量使用经典数字字体&lt;/p&gt;
 
&lt;p&gt;7.在经典数字字体不能用的时候,对数字采用稍小的字号&lt;/p&gt;
 
&lt;p&gt;8.不要过量使用粗体,仅仅在真正重要的少数文字上使用&lt;/p&gt;
 
&lt;p&gt;9.尽量避免带下划线的文字风格&lt;/p&gt;
 
&lt;p&gt;10.版权或商标声明的字体一般也用较小的,有时候小到50%,具体看字体如何&lt;/p&gt;
 
&lt;p&gt;11.使用真正的省略号,而不是几个句号&lt;/p&gt;
 
&lt;p&gt;12.勾选框的尺寸稍微用小一点&lt;/p&gt;
 
&lt;p&gt;13.除了黑点风格的要点提示符号外,也考虑考虑其他的&lt;/p&gt;
 
&lt;p&gt;14.在文本中使用行间空白字符提高可读性&lt;/p&gt;
 
&lt;p&gt;15.Sans serif字体比serif要清晰&lt;/p&gt;
 
&lt;p&gt;16.把正文字体比你想象的设小一个点&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/175&quot; target=&quot;_blank&quot;&gt;版式设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://www.yeeyan.com/articles/view/abertzhao/13521&quot; target=&quot;_blank&quot;&gt;http://www.yeeyan.com/articles/view/abertzhao/13521&lt;/a&gt;&lt;/p&gt;</description>
				<author>乾多多</author>
				<pubDate>2008-09-06 01:11:28</pubDate>
			</item></channel></rss>