无论是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，其中最开始的两个视觉驻留点就在页头上。

　　Z图模式也不难理解，用户从上到下，视线沿着Z字形来回扫视，用户会左右快速扫视，视线的起点首先是左上角，行跨顶部一栏到右上角，然后向下延伸。

　　F图模式，或者说是F式布局，我们就更加熟悉了。在Nielsen Norman Group 的研究当中，这种阅读模式最为典型：

　　·用户先会沿着水平方向浏览，优先浏览内容块的上部，这个时候的眼动构成了字母F 最上面一横。