网站排版 设计 技巧

网站排版中建议最多不要超过3种字体类型，不然会使网站看起来松散和不专业，不仅太多的字体类型会造成这种问题，太多的字体尺寸也会破坏网页布局。下面介绍网站排版设计技巧，希望可以帮助到大家。

1、不要使用过多的字体

网站排版中建议最多不要超过3种字体类型，不然会使网站看起来松散和不专业，不仅太多的字体类型会造成这种问题，太多的字体尺寸也会破坏网页布局。

(资料图片)

通常情况下，将字体家族的数量限制在最小数量(2个是很多，1个通常就够了)，整个网站坚持使用相同的原则。如果使用多个字体，请确保俩个字体是否和谐。以下面的字体组合为例，Georgia和Verdana的搭配相得益彰，相对比较和谐。相比于右边Baskerville和Impact则会有明显的冲突感，非衬线Impact明显的超过了Baskerville的视觉冲击力。而在中英文排版中，建议大家中文使用标准中文字体，而英文、数字和字符使用标准的英文字体。以下面的图为例，是否可以对比处那个美观一些。

2、尽量使用标准字体

在Google Web Font或者Typekit，和国内的“有字库”的字体嵌入式服务有很多有趣的字体，对于国内设计师来说，痛苦的是中文字体会很大，一个字体动则几兆，十几兆的，这样用户在会增加用户浏览网站的载入时间;反之英文字体26个字母大小写，加数字标点符号一共几百k的字体是很容易在网页中使用的。

尽可能选择标准字体(近几年网页中通常使用思源黑体，PingFang，英文可以使用Arial，Calibri或者其他常见的易于屏幕阅读的黑体字，如没有特殊概念指导尽可能避免使用衬线字体，如宋体)

不是每位用户都可以在终端上看到同一个字体，意味着你选择的适合的字体，用户有可能看不到，用户更熟悉标准字体，因此他们可以更快的阅读。特殊的、并且少量的字体可以制作成.svg格式的素材嵌入Web使用。良好的排版会使用户更加关注内容本身，而不是字体的类型。

3、限制一行文字的长度

保证每一行文字的字符数量是文本可读的关键。不是设计师来定义文本的宽度，而是根据用户的可读性来定义。

太宽-会使得单行文字太长，读者的眼睛会难于专注文字。因为长时间阅读容易串行，大段的文本中很难找到正确的行。

太短-会使得用户的眼睛经常回到下一行文本，会打破读者的阅读节奏，长时间阅读造成视觉疲劳。太短也会倾向于向读者发出一种信号，使得读者没有读完当前这行就去跳到下一行阅读，可能会忽略潜在的重要词句。以Google和百度为例，我们不难看出这点。对于移动设备，应该每行30-40个字符(半角)，具体显示多少个字数，与不同分辨率的屏幕、文本宽度和字体大小都会有关系，设计的原则是：保证用户可以流畅的阅读文本，文字不宜太小或太大。以iOS(手机)为例，正文文本最小字号不能小于24px，太小了用户阅读会难以阅读。以百度为例，可作为参考。

4、选择用有多个字重并显示良好的字体

用户将通过不同屏幕分辨率的终端设备访问你的网站，大多数用户界面需要各种大小尺寸的文本(标题、副标题、文本、标注等等)。选择一款能够在不同屏幕分辨率的设备上运行良好的字体以保证它的不同尺寸的字体都具有极高可读性(Readability)和可用性(Usability)也是非常重要的。

近俩年备受大家欢迎的思源黑体和PingFang字体都是不错的选择，当然，个人认为汉仪旗黑无论从家族字体的数量、字体质量、屏幕显示、纸媒印刷上来说都不逊色于前面俩款字体。参与过这款字体设计的设计师曾说过，思源黑体还是相对比较粗糙的一款字体。

同样，为了保证在屏幕上清晰可辨，尽量避免使用衬线体，尽管他们很漂亮。

5、使用识别度高的字体

在选择英文体的时候，有些字体的个别字母极易混淆，特别是“i”和“L”(如下图所示);以及文字之间的间距。许多中文字体在使用较小字体的时候笔画会粘到一起(上图)，不容易辨别;所以在选择字体类型的时候，请检查你选择使用的字体，确保不会为用户和产品造成不必要的损失。

6、避免在界面中大段的使用大写字母

不要所有文本使用大写字母，强制用户阅读大写字母，首字母大写，具有特殊含义的缩写等情况除外，与小写字母相比，大量的使用大写字母会严重降低用户的阅读效率和愉悦感。

7、将行间距控制在字体的1.5-2倍之间

在文字文字排版中，我们又一个特殊的术语，用于表示行与行之间的距离：行间距(或行高)。为了保证文本的可读性和易读性，使文本形成线性的阅读感受，将行间距控制在字体大小的1.5-2倍之间(中文字体)。英文字体推荐使用默认行间距，或根据默认行间距微调。

8、适当的颜色对比度

通常情况下，文本和背景尽量避免使用相同或相似的颜色。文本越明显，用户能够扫描和阅读的速度越快。当然，学会通过文本颜色、大小和背景的颜色关系来控制视觉层级也是必要的。与背景相比，小文本和背景的对比度至少为4.5:1，大文本(14px/18px以上)应该保持与背景3:1以上的对比度。

灰色通常作为辅助色使用，根据之前的项目经验，给大家分享一套我自己一直在使用的灰色，灰的有层次，清晰的区分信息层级是必要的

9、避免将文字着色为红色或绿色

色盲和色弱是我必须要照顾到的一部分用户，特别是在男性中(8%的男性是色盲)建议使用处颜色以外的其他方式来区分重要的信息(如下划线，加粗等)。避免使用红色和绿色单独传达信息。因为红绿色盲是最常见的色盲形式。(现在想想，那些因为红绿色盲而考不了驾照的童鞋是不是要分分钟恨死制定红绿灯规则的人，当然这只是个笑话，使用红绿灯是因为光学在物理传播方面的原因，这里不解释)

虽然在日常生活中我们总是用这种方式告知用户绿色是表示正确的操作，红色表示错误的操作，反思一下我们是否有去考虑色盲用户的操作和体验。或许我们是不是可以考虑换一个方式去表达正确或错误?

10、避免文字闪烁

闪烁的文字或内容可能会让某些用户感到不适，对于一般用户而言，这可能分散他们的注意力或者使他们感到烦躁。

实用的 网页设计 应急小技巧

1、让几何元素提升网页Level

一个简单的几何元素在网页设计中起到的作用绝对能让你出乎意料，尤其在应对极简风格的网站时效果更佳。设计，无非是点、线、面的不断组合搭配，而立体几何的融入是如此拼搭过程中的一种升华。

2、换个视角看网页中的世界

整齐划一的元素排版难免会让页面显得有些沉闷和拘谨，但相同的画面只要稍作角度微调，效果就会大不一样，整个网页都变得俏皮灵动起来。如果在视觉上觉得有些别扭，不如借鉴案例中的方法，加入适当的滤镜效果，让画面更自然。

3、真真假假的网页效果

真实图片和虚拟事物图片的使用都能很有效的提升网页档次，但使用时的局限性比较大，网页的整体风格很容易就此封闭在一个小范围里。而“真假参半”的设计方式也许能带来独特的效果，不仅让网页更有人情味，也会让客户感受到设计师的用心。

4、万能的黄金比例

我们提到过，黄金比例会让大家的网页设计变得千篇一律，布局方式可以很大程度的体现出一个设计师的水准。但当你的设计时间很紧迫的时候，万能的黄金比例能快速帮到你，设计师能在此基础上做一些小创新。如下案例，设计师用人物肖像来作为页面的分界，既达到了黄金的视觉效果，又让界限的表现形式更自然流畅。

5、用色彩展现视觉冲击

最直接的视觉冲击力一定是由色彩带来的。色彩的使用是设计界永恒的话题，但在时间紧急的时候，设计师一定不愿意在选色上花费很久，这时，使用对比色是最合适的选择。对比色在网页设计中的运用要点是不能只关注视觉美观而已，也要同时注意用户体验。

6、让高清大图背景“决定”网页风格

可能有的网页设计师会觉得，使用了高清大图作为网页背景对于客户来说是一种“偷懒”的行为，其实不然。这种设计方法很考验设计师的能力，需要设计师在设计前事先设想好一个很完整的蓝图，与其说让图片“决定”风格，倒不如认为是风格“决定”图片。而之所以将这一方法也纳入应急技巧，主要因为这种设计的可塑性较强，如果之后有修改意见，步骤会相对简单一些。

7、精简文字并不是一种偷懒行为

人类都是视觉动物，潜意识中都更愿意接受简单的东西。按照这样的理论，长篇大论的文字板块应该在网页设计中尽量避免，下面的案例很好的证明了这一点。简简单单的一句话反而能令人对之后的内容产生好奇心。

8、韵律线带你提升带你飞

千万别不相信，一根线条就能颠覆整个网页的视觉感受!正因为作用如此妙不可言，所以被我们亲切的称为“韵律线”。想象一下，如果案例中的页面缺少韵律线组成的阴影部分，这个网页会变得再普通不过，而现在则显得充满设计感。

9、令人不得不爱的Metro风

Metro风随着Win8界面的发布变得渐渐热门起来，甚至很多国外的电子商务网站设计也纷纷加入Metro的阵营，下面的案例来自韩国的一家电商机构。如果觉得Metro风格的设计过于紧凑，网格布局也能适当借鉴。但基于是应急技巧的介绍，Metro的设计速度可能会更快一些。

网站设计的关键技巧分享

1、尽量减少那些对网站外观没有多大用处的华丽的装饰：

尽可能减少那些对访客没用的东西出现在访客的面前，因为过多的无用的信息会分散访客的注意力，并且如果访客没有停留在网站内容上面，就有可能会造成访客资源的流逝。最糟糕的一点是访客不能从你的网站上获得他想要的东西，这可能就会造成访客降低对于你网站的认同感。

2、在设计网页的时候，所选用的图片要清晰、尺寸适当：

有许多的网站所提供的图片质量相当的低，这样的图片会在很大的程度上降低访客对于网站第一印象。他们会认为这样网站更像是盗版，所以不管是产品图片、还是说一个装饰图，在设计网页的时候，设计者都要本着清晰原则，而且尽可能不要去使用小图和大图，因为这样很可能也会降低访客对网站第一印象分。

3、在设计网页的时候，网站上的字体大小应该统一：

网站的字体大小不同，是网页中出现得比较多的不友好现象。所以设计师在设计网页的时候，应该使网站的风格进行统一。这样才能降低访客对于网站字体的注意力，他们会花更多的时间去关注网站内容。

4、在设计网页的时候，网站上需要一个清晰的网站导航：

在设计网站的导航栏的时候，设计师可以把网站分为几个大的类别，这样可以方便访客查找更加具体的内容。所以我们要制作清晰明了的网站导航，不要让访客花过多的时间在寻找信息上面，否则他们会感到非常的不满。

5、在设计网页的时候，设计师可以多多的使用标签来传达你的信息：

如果你的网站的内容中，有一些专业的名词，你怕访客不懂，那么你就一定要用来帮助访客了解，如果内容里面有一些信息是比较的重要的，那么你则可以使用重要内容来提醒访客注意这些信息。

网页设计的技巧

1、强化对比

首先网页首屏中的文字必须具备可读性才行，所以你需要确认文字与背景之间的色彩搭配能让用户看得清楚。当你选择一个暗色调的背景，那么你需要使用白色或者浅色的的文字，而当背景比较素雅的时候，文字可以使用深色，这就是我所说的强化对比。

当然，对比不仅限于色彩，文字同样存在对比。文字与图像相互配合，才能达到出人意表的效果。例如第一个案例，Packdog网站的设计，大图作为背景，用色浓郁，文字则正好相反，轻薄而大小错落。这些对比强烈的元素组合在一起令人印象深刻。

2、令文字成为图片的一部分

有的时候你需要让文字成为图片的一部分，甚至让文字成为图像本身来达到效果。当然这种处理方式所需的条件比较苛刻。要么你使用足够清爽简单的图片来和文字进行搭配，或者使用原本就包含图片的文字(当然，你也可以将文字妥妥儿地P到图片中的主体上，文字的角度、形变和纹理一定要融入进去)。

3、沿着视觉流向排布

沿着视觉流向来排布信息是一项重要的技巧。文字与图片发生逻辑关系，两者相辅相承，所以此时文字不能覆盖到图片的主体部分——比如需要展示的人物，或者产品本身。

信息按照视觉流向排布的时候，图片中的主体会引导你去观看文字信息。这两个案例都使用了这种技巧，文字都是沿着人物的面目朝向或者眼神指向来排布的。

4、模糊背景

模糊背景是一种非常简单的处理手法。PS可以很轻易地模糊照片，而照片的模糊带来的直接效果就是让产品本身更加突出，以上的两个案例就是如此。

5、将文字置于框中

当照片中光影交叠，色彩丰富的时候，将文字置于框中会是个不错的选择。根据文字和图片的形态选择圆框或者方框，然后设置好色彩，确保对比度。适当地调整透明度，让框、文字于图片完美地糅合到一起。

6、将文字置于背景中

比起置于前景的文字，将文字融入背景也许是更有意思的”花招”。文字常常易于融入到纯色背景中，还能确保可读性。并不需要太复杂的技巧和改动，你就可以让文字自然地融入背景，你所需要的仅仅只是微妙的阴影效果，正如上述的案例。

7、放大

当你不知道要怎么处理素材的时候，试着放大吧。这不仅仅针对图片，它还适用于文字的处理，放大的元素更容易抓住用户的眼球。正如上述的两个案例，放大的咖啡豆强化了对比，放大的文字则极具冲击力。

8、色彩对比

通过色彩对比可以提高整个首屏的趣味性。以上的两个案例中，一个降低了背景图的色彩对比度，令文字更加突出，而另一个则让这种对比出现在文字内。两种方法同样有效。

9、调色

通过调色让照片的色彩更适宜文字呈现是最近越来越流行的玩儿法。虽然这种方式有点投机取巧，但是它可能带来极其惊艳的效果。

调色的时候，尽可能选择与图片相近的色彩来调整，确保图片中的内容能够透过又不影响文字的阅读就好了。要掌握好这一”花招”你可能需要尝试不同的色彩，”玩坏”好几张图片才行。不知道用什么色彩?试试从你最喜欢的颜色开始吧。

10、简化

那些历久弥新的平面设计向我们证明了”保持简洁”也是一种有效的设计手段。玩儿太多花哨可能会适得其反，简洁地将图文放到一起可能就很和谐了。处理图像的时候，使用简单直观的排版和清晰明了的照片，确保照片是最重要的组成部分，文字与图片主体之间没有阻碍和干扰，并且文字清晰可读。