在人与人的交往中，第一印象很重要。虽然第一印象并不一定正确，但却是鲜明、牢固的，直接影响着双方以后沟通交流的过程。网页设计中也是一样，而首屏就是网站留给访客的第一印象，漂亮精致的首屏设计能让用户停留更长时间，让他们有意愿更深层次的了解网站内容，这有助于提高用户转化率，增加产品销量;而糟糕的首屏设计则会让有用的信息大打折扣，让有趣的内容索然无味，访客甚至会因此直接放弃浏览。首屏设计的重要性不言而喻，那么在今天这个竞争激烈的网络世界中，怎样才能充分发挥首屏设计的积极作用呢?今天小飞就带大家了解一下网站的首屏设计，首屏设计中可以包括哪些元素。

什么是首屏设计?

相比首屏这个概念，大家可能对于网站的主页更加熟悉。主页是指用户打开网页时看到所有的设计元素，而首屏则是指用户打开网页、还没有滚动页面的那一刻看到的画面。首屏这个概念最早用于出版领域，传统报纸在运输和分发的过程中常会有折叠，而折叠暴露在外的内容就是首屏或者说头版，这决定着读者是否会进行购买，因此不少出版商会在这个区域放置优先级最高的内容。而在互联网领域，首屏同样也很重要。从内容的角度来看，首屏的位置很关键，需要涵盖网站的核心内容，做到一目了然，才能有效吸引用户;而从设计的角度来看，首屏是设计师最能发挥设计创意的地方，简洁明了、功能齐全的首屏才能引人入胜。首屏通常还承载着网站的导航菜单，关系着整个站点的布局。

下面还是通过一个栗子直观的认识首屏设计吧!下图是一个漫画书店的网站首屏设计。页头区域水平展示了网站的Logo和主要的导航菜单项：热销、特别优惠、博客，以及电商网站经典的购物车图标和搜索框。另外，超人的漫画形象也充满了力量感，很容易抓住用户的视线。随后漫画列表的出现也恰到好处，可以引导用户有意识的向下翻页。

为什么首屏设计很重要?

为什么首屏设计对于网页很重要?除了上面我们提及的一些优点以外，这还要从用户的浏览模式来分析。Nielsen Norman团队重点研究分析用户行为以及用户与网站内容互动的实现途径，在不断的探究之后得出了一些结论：当人们访问某个网站时，尤其是初次访问时，他们通常不会仔细浏览所有内容，而是会快速的扫视，看是否有值得关注的点。如果存在感兴趣的内容，他们才会继续留在这个网站。而通过多个眼球追踪实验的数据分析发现，访客们的浏览习惯可以总结为三种典型的模式：古腾堡式，Z图模式和F图模式。

古腾堡式

在网站内容比较一致，缺少明显的视觉层次框架时，访客们常常会使用古腾堡式的浏览模式。这种浏览方式是指用户大范围的扫视网站内容，浏览路径呈一个大Z字。在四个比较活跃的视觉区域中，其中有两个都在页面的顶栏(见下图)。

Z图模式

Z图模式也不难理解。这种浏览模式是指用户从上到下，从左到右，视线沿着Z字形来回扫视，浏览路径形成好几个小Z字。页面内容分成多个不同区块时，人们会经常使用这种浏览模式。

F图模式

F图模式我们就更加熟悉了。Nielsen Norman团队调查发现，这种阅读模式在用户中最为典型。用户一般会先沿着水平方向优先浏览网页的顶栏，这个时候的视线路径构成了字母F 最上面的一横;接下来用户会沿着屏幕左侧向下垂直扫视，寻找段落中能引起兴趣的内容，当他们发现感兴趣的内容时，会进行水平浏览，而这些内容对应的视线范围通常会比第一次水平浏览的要小一些，这就是字母F 中间的一横;最后用户的视线会移动到屏幕左侧，继续向下浏览。这样，一个"F"就出现了。

其实无论用户遵循哪种浏览模式，他们通常都会优先扫视页面顶部的水平区域。因此在页面顶部显示关键的信息最能同时满足网站和用户双方的诉求：网站可以充分激发用户的兴趣、维系顾客;而访客能够快速获取重要信息，决定是否继续浏览。这就是为什么UI和UX设计师甚至内容策略专家和营销专家都认为首屏设计十分重要。人们往往会在短短的几秒钟内形成对一个网站的整体认知，第二印象这种东西是不存在的。一个网站在首屏上必须足够抢眼才行，不然很容易走向失败。

一个网站的首屏可以包含哪些元素?

既然网站的首屏如此重要，那么怎样才能做好首屏设计呢?在介绍首屏设计方法和一些实例之前，小飞先带大家了解一下首屏中可以包含哪些有意义的布局元素：

基本的品牌标识：Logo、品牌名称、Slogan、吉祥物、企业图片或色彩等

产品或服务的主题文案

导航菜单选项

重要的社交媒体链接

基本联系信息(电话、邮箱等)

多语言切换按钮

搜索框

订阅按钮

产品APP 下载或试用版本的链接等

虽然小飞列举了很多可以在首屏中使用的元素，但这并不意味着你应该将这些元素全部应用在首屏设计中。过犹不及，如果你在首屏中呈现过多元素，很容易会给访客带来信息负载，太多的元素也会分散用户的注意力，使他们难以集中注意力关注网站中最重要的元素。因此，网站的首屏设计需要设计师和营销人员通力合作，哪些需要选用，哪些应该删除，做出战略性的合理的安排。也许你觉得这样的说法还是太过于空洞了，那就看看下面这两个栗子，这两个不同类型的网站在首屏上使用了不同的设计策略，快来找些灵感吧!

Bjorn是一个室内设计网站。首屏的顶栏由Logo和导航菜单(Product、Studio、Press、Shop)组成，而其中shop这个菜单项则制作成了CTA按钮，更容易引起用户点击的兴趣。而且就算主页面不断滑动，顶栏都会一直出现在网页顶部，方便访客进行跳转。除此以外，网站的首屏中还有大段的文本，不过设计师充分利用了留白，将Logo、导航和文案很好的区分开来，让整个页面显得整洁、大方。

Event Agency网站是另外一个范例，它在首屏使用的设计方法要更加特别一点。这个网站的首屏主要是围绕着Logo和品牌名称设计，布局左右平衡，各有两个菜单项供访客快速浏览自己感兴趣的内容。更引人注目的还要数星河的背景图片和超大字体文本的配合，在第一时间带来了令人震撼的视觉效果。

快来起飞页自助建站平台（）做一个网站吧!