共创万物智联时代

网页布局说白了，就是决定把logo放哪、导航放哪、产品图放哪、文字放哪。排得好，用户一眼就能找到想要的东西；排得乱，进来就关掉，再好的内容也白搭。

一、常见布局形式：不是套路，是习惯

设计圈经常提到一些布局名词，比如“F型布局”、“Z型布局”、“卡片式布局”、“通栏布局”等等。其实这些并不是死规矩，而是根据人眼看东西的习惯总结出来的规律。

F型布局：研究发现，用户在电脑屏幕上看东西，视线轨迹通常是从左到右，从上到下，整体呈一个F形状。所以重要的内容，比如核心卖点、联系方式，尽量放在左上角和顶部区域。

Z型布局：适合页面比较简洁的网站，比如一些品牌首页。视线从左上角开始，水平往右，然后斜着往左下，再水平往右，走一个Z字。这种布局通常用来引导用户看完logo、主视觉，最后落在底部的行动按钮上。

卡片式布局：就像一排排卡片，每张卡片里放一个独立的信息模块，比如一篇新闻、一个产品。这种布局很灵活，手机电脑都能自适应，现在的主流网站（比如知乎、淘宝）都在用。

通栏布局：用一张大图或一段视频铺满整个屏幕宽度，视觉冲击力强，适合做品牌形象展示，营造沉浸感。

不管用什么布局，背后都离不开对比（让重点突出）、对齐（让页面整齐）、留白（让眼睛喘气）这几个原则。布局最终是为了引导用户去点你想让他点的东西，比如“立即购买”或“联系我们”。

二、布局实战中的四个细节

1. 宽度的把握：别让页面挤得慌

网页宽度一般有三种设置方式：百分比（自适应屏幕）、固定像素、两者结合。国内最常用的是固定像素。以前老考虑800×600分辨率，现在主流是1920×1080甚至更高，但内容区宽度建议设在1200px到1400px之间。有个老经验：如果用800×600分辨率的老机器（虽然很少了），内容区宽度做到760~770像素，不管在大屏还是小屏上，两边都有点留白，看起来透气，不压抑。现在的主流做法是内容区固定宽（比如1200px），背景色或通栏图片铺满全屏，既保证了阅读区的舒适度，又兼顾了大屏的视觉效果。

2. 广告的节制：别把用户赶走

弹出广告、满屏乱飞的浮动广告、突然响起声音的广告，这些东西最招人烦。用户是来看内容的，不是来点广告的。如果非要放广告，有两个原则：第一，能用在两边上下浮动的，就别用满屏乱跑的；第二，乱跑的那种，最多放一个，放多了用户直接关浏览器。首页广告数量要适中，别堆成广告超市。尤其注意，在用户注册、下单付款这种关键步骤的页面上，不要放任何干扰性的广告，这时候分心，客户就跑了。

3. 空间的透气感：别把页面塞成杂货铺

有些网站恨不得把所有的信息都挤到首页上，文字、图片、动画摞在一起，用户进去眼睛都不知道往哪放。这叫“塞”。还有一种叫“散”，页面稀稀拉拉，内容之间没有联系，看起来空荡荡的。这两种都是布局的大忌。好的布局应该有主有次，重要的内容突出，次要的内容靠后，同类信息归在一起，让用户能顺着看下去。

4. 文字的编排讲究

文字图形化：就是把标题或按钮做成图片的样子，比如用特殊的艺术字体。好处是好看、有个性，常用于栏目头。坏处是搜索引擎不认识图片里的字，如果更新频率低，可以用这种方式；如果经常更新内容，建议还是用代码写文字，对SEO友好。

强调文字：想把某段话突出，可以用加粗、加大字号、换颜色、加下划线、加斜体这些方法。这些手段本质是利用对比，让重点跳出来。但别全篇都强调，那等于没强调。

一个网站能跑起来，需要三样东西域名（网址）、网站空间（服务器或虚拟主机，用来存文件）、网站源程序（前台页面和后台管理系统的代码）。布局设计属于源程序的前台部分，但后台也要规划好，不然前台内容没法更新。