门户网站设计

打开一个门户网站，门户用户最先看到的网站不是内容，是设计布局。三栏还是门户两栏，导航横排还是网站竖排，这些决定在设计师坐下画第一根线之前就该定了。设计我见过太多网站把导航栏塞了二十多个条目，门户用户找一条新闻得用鼠标扫三遍。网站这不是设计设计，这是门户把报纸头版剪碎了扔在桌上。

门户网站的网站本质是信息密度和获取效率之间的博弈。新浪、设计网易、门户腾讯这些老牌门户，网站首页密密麻麻，设计但老网民扫一眼就能定位到想要的东西。为什么？因为它们的视觉层级做得足够狠。头条区用大图加粗标题，次要新闻缩成一行链接，再往下是分类频道。眼睛顺着F型轨迹往下走，每一步都有明确的落点。新手设计师容易犯的错是把所有板块做成一样大，觉得“公平”。用户不关心公平，用户关心三秒内能不能找到东西。

导航设计有个反直觉的点：横向导航的条目超过七个，用户的点击准确率会明显下降。这是我在实际项目里反复验证过的。七个以内，横向排；超过七个，左侧竖排或者收进“更多”里。别舍不得，那些你觉得重要的二级频道，用户一年可能点不了一次。把它们放进下拉菜单，首页留给真正高频的入口。

颜色这件事，门户网站跟品牌官网完全是两套逻辑。品牌官网可以玩大面积留白、渐变、微交互，门户不行。门户的底色必须是浅色，白或浅灰，因为深色背景会让密集的文字变得难以阅读。主色调控制在两种以内，一种用于链接和按钮，一种用于强调。红色标题配蓝色链接再配绿色按钮，那是2005年的审美，现在看只会让人觉得眼睛累。

字体大小直接决定阅读体验。正文14px是底线，16px更舒服。行高1.5到1.8之间。标题和正文的对比要拉开，不然满屏文字像一堵墙。我习惯把新闻标题设为18px到22px，加粗，正文14px到16px，常规字重。别用纯黑，#333比#000柔和得多，长时间阅读不刺眼。

说到内容区块的划分，有个细节容易被忽略：模块之间的间距。间距太小，不同板块的新闻会糊在一起，用户分不清哪条属于哪个频道。间距太大，一屏能放的内容太少，用户得不停滚动。我的经验值是模块间距控制在20px到30px，模块内部条目间距8px到12px。这个比例在大多数屏幕上看起来最舒服。

响应式设计对门户网站来说不是加分项，是必选项。现在超过六成的流量来自手机，如果首页在手机上还是三栏布局，那等于把用户往外赶。移动端的做法通常是单栏，导航收进汉堡菜单，头条区保留大图，其余新闻列表化。别试图在手机上还原桌面端的所有内容，该砍就砍。用户在手机上刷门户，要的是快速浏览，不是深度阅读。

最后说一个我观察到的现象。很多门户网站喜欢在首页放自动轮播图。数据上看，轮播图的点击率低得可怜，大部分用户只看第一帧。与其做五张轮播，不如把最重要的那条新闻做成静态大图，旁边放三条文字头条。简单，直接，有效。

门户网站设计做到最后，拼的不是创意，是克制。知道什么该放，什么该藏，什么该删。用户来门户是找信息的，不是来欣赏设计的。把信息摆清楚，让用户三秒内找到想要的东西，这就是好设计。

本文地址：http://www.79wt.cn/news/1634b1899818.html