那些让人一见钟情的网页首屏遵循着怎样的设计模式？

上海网站建设公司建站资讯2017-09-05 次

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

什么是首屏

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

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

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

201706191613416225

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

　首屏包含哪些部分

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

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

　　·产品、服务和主题的主要文案

　　·网站类别链接

　　·社交媒体链接

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

　　·多语言切换按钮

　　·搜索框

　　·订阅按钮

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

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

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

201706191613422465

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

201706191613425897

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

　首屏为何重要

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

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

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

201706191613429173