无论是APP还是网页，第一印象都很重要。再优质的内容，都需要首屏这个标致的脸面来吸引用户驻留，才能被人注意到。在竞争激烈的数字产品领域，这是难以反驳的残酷经验。这也引出了今天要探讨的话题：网页的首屏设计。

比拟于首屏，大家对于首页的概念会更熟悉一些。和传统的报纸行业类似，报纸第一版被称为头版，由于报纸常常会折叠起来运输，当用户拿到报纸看到的是露出来的头版头条(Above the fold)，这就像如今的首页和首屏之间的关系。用户打开网页的第一刻，还没开始滚动页面的时候，所看到的就是首屏。

首屏要能够吸引用户才行。

从内容角度上来说，首屏要涵盖关键的信息，一目了然。从设计上来看，首屏也是最适合发挥设计创意的地方，许多优质的首屏设计都采用了简洁明了的布局，打磨出引人入胜的体验。首屏通常还承载着网站的导航模块，是整个站点布局和导航的关键。

这个在线漫画书店就是个优秀的范例。顶部的文字LOGO和主干导航都在同一水平线上，超人插画突破页头布局充满了力量感，在视觉上也非常抓人，同时作为认知度最广的超级英雄，它也非常适合作为首图而置顶。下面的漫画列表恰到好处的露了个头，让访客意识到能够向下翻页。

既然首屏是关键，所包罗的元素也不会太少。最常见的是下面这些：

·基本的品牌标识：LOGO，品牌名称，Slogan，吉祥物等

·产品、办事和主题的主要案牍

·网站类别链接

·社交媒体链接

·基本联系信息(电话电子邮件等)

·多语言切换按钮

·搜索框

·订阅按钮

·产品、APP 下载/试用链接等

这并不是意味着所有的这些元素都应该呈现在首屏傍边，太多的模块会让首屏中的首图和标题的视觉重量被稀释，过多的信息会让用户难以聚焦到真正重要的内容上。所以，首屏的设计常常需要设计师和营销人员通力合作，来作出最合理的选择。

看看下面的几个案例，你应该能大概明白差别类型的网页应该采取怎样的策略。

Bjorn 是一个室内设计网站，网站的顶栏被制作成悬浮的，随着页面的滚动会一直会在顶部显示，左侧是品牌LOGO，右侧是导航，常见的四个分类中 Product、Studio、Press 是作为常规导航而存在，但是Shop 则被制作成CTA按钮，比拟之下更容易吸引用户去点击。借助大量的留白，设计师将LOGO、导航和首屏的案牍划分开来。

Event Agency是别的一个范例，在首屏设计上相对而言更加别出心裁。整个首屏都是围绕着LOGO和品牌名称来设计的，摆布平衡，各两个链接，配景的星河和前景的超大文本嵌套叠加，构成视觉主体。

首屏对于许多网页而言是至关重要的组成部分。

用户是如何同网页进行互动的?用户研究领域的先驱 Nielsen Norman Group 曾经针对这一用户行为进行了深入的研究，为设计师和可用性设计专家们提供了更好的素材和设计依据。

简而言之，当人们拜候某个网站的时候，尤其是初次拜候网站的时候，他们通常不会特别仔细的查看所有的内容，而是快速的扫视，找到能够吸引他们注意力的信息，这些内容就是他们继续停留在这个网站上的理由。通过眼动测试和差别实验，他们发现拜候者的视觉浏览模式，可以归结为几种典型的模式。设计师 Steven Bradley 在本身的文章中，总结了这三种常见的模式：古腾堡式，Z图模式和F图模式。

对于信息结构层次并不那么分明的网页，用户常常会使用古腾堡式的浏览模式，用户大范围扫视页面内容，整个视线路径是一个大号的Z，其中最开始的两个视觉驻留点就在页头上。