第一印象在人与人之间的互动中很重要。虽然第一印象不一定正确，但它是独特而坚实的，直接影响双方之间的沟通过程。网页设计也是如此，第一个屏幕是网站留给访问者的第一印象。精美的首屏设计让用户可以更长时间地使用，让他们更深入地了解网站内容，从而有助于改善用户。转换率，增加产品销售;而糟糕的第一屏设计会使有用的信息大打折扣，让有趣的内容无趣，访客甚至会放弃浏览。第一个屏幕设计的重要性是不言而喻的，因此在当今竞争激烈的在线世界中，我们如何充分利用第一屏设计的积极作用？今天小飞将带您了解网站的第一个屏幕设计，第一个屏幕设计中可以包含哪些元素。

　　什么是首屏设计?

与第一个屏幕的概念相比，您可能更熟悉网站的主页。主页意味着用户在打开网页时看到所有设计元素，而第一屏幕是指用户在打开网页时没有滚动页面时看到的图片。第一个屏幕的概念首先在出版领域使用。传统报纸在运输和发行过程中经常会出现折叠，而折叠外的内容则是第一个屏幕或首页，它决定了读者是否会购买，因此许多出版物商会都将优先内容放在首位在这方面。在互联网世界中，第一个屏幕也很重要。从内容上看，第一个屏幕的位置非常重要，它需要覆盖网站的核心内容，这样才能有效地吸引用户一目了然;从设计的角度来看，第一个屏幕是设计师可以最好地利用设计理念的地方。简单，清晰，功能齐全的第一个屏幕非常吸引人。第一个屏幕通常还带有网站的导航菜单，该菜单与整个网站的布局有关。

以下是通过板栗的第一个屏幕设计的直观理解！以下图片是漫画书店网站的第一个屏幕设计。标题区域显示网站的徽标和主要导航菜单项：热门，特别优惠，博客，以及电子商务网站的经典购物车图标和搜索框。此外，超人的漫画形象也充满力量，很容易把握用户的视线。然后漫画列表恰到好处，引导用户有意识地翻页。

为什么首屏设计很重要?

为什么第一个屏幕设计对网页很重要？除了我们上面提到的一些优点之外，还可以从用户的浏览模式进行分析。 Nielsen Norman团队专注于分析用户行为以及用户如何与网站内容进行互动。经过不断的探索，得出了一些结论：当人们访问网站时，特别是他们第一次访问时，他们通常不会浏览所有网站。内容，但快速浏览一下，看看是否有值得关注的事情。如果有兴趣，他们将留在这个网站上。通过多个眼动追踪实验的数据分析，游客的浏览习惯可归纳为三种典型模式：古腾堡，Z和F.

　古腾堡式

当网站内容相对一致且没有明显的视觉层次结构时，访问者通常使用Gutenberg风格的浏览模式。这种类型的浏览是指用户对网站内容的广泛扫描，浏览路径是一个大的Z字。在四个更活跃的视觉区域中，其中两个位于页面的顶部栏中（见下图）。

　Z图模式

Z图像模式不难理解。这种浏览模式意味着用户从上到下，从左到右沿着Z字形来回扫描，并且浏览路径形成几个小的Z字。当页面内容被分成不同的块时，经常使用这种浏览模式。

F图模式

我们更熟悉F地图模式。尼尔森诺曼团队调查发现，这种阅读模式是用户中最典型的。用户通常首先在水平方向上浏览网页的顶部栏。此时的视线构成字母F的顶部。接下来，用户将垂直向下扫描屏幕的左侧以找到对段落的兴趣。当内容找到感兴趣的内容时，将被水平浏览，并且内容的相应视线通常小于第一水平浏览，即字母F的中间;最后一个用户的视线移动到屏幕左侧并继续向下浏览。这样，出现'F'。

事实上，无论用户遵循哪种浏览模式，他们通常更喜欢扫描页面顶部的水平区域。因此，在页面顶部显示关键信息可以最好地满足网站和用户的吸引力：网站可以充分激发用户的兴趣并维护客户;并且访问者可以快速获取重要信息并决定是否继续浏览。这就是UI和UX设计师甚至内容策略师和营销专家都认为第一个屏幕设计很重要的原因。人们倾向于在几秒钟内形成对网站的整体感知，并且第二印象不存在。一个网站必须在第一个屏幕上足够引人注目，否则很容易失败。

哪些元素可以包含在网站的第一个屏幕中？

由于网站的第一个屏幕非常重要，我们如何才能进行第一次屏幕设计？在介绍第一个屏幕设计方法和一些示例之前，Xiaofei将带您了解第一个屏幕中可以包含哪些有意义的布局元素：

基本品牌标识：标识，品牌名称，口号，吉祥物，企业形象或颜色等。

产品或服务的主题副本

导航菜单选项

重要的社交媒体链接

基本联系信息（电话，电子邮件等）

多语言切换按钮

搜索框

订阅按钮

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

尽管小飞列出了许多可以在第一个屏幕中使用的元素，但这并不意味着您应该将所有这些元素应用于第一个屏幕设计。如果在第一个屏幕上放置太多元素，则很容易将信息加载到访问者。太多的元素会分散用户的注意力，使他们难以专注于网站最重要的元素。因此，网站的第一个屏幕设计需要设计师和营销人员一起工作，这需要被选中，应该删除，并做出战略合理的安排。也许你认为这太空了，所以看看下面的两个栗子。这两种不同类型的网站在第一个屏幕上使用不同的设计策略。来吧，找到一些灵感！

Bjorn是一个室内设计网站。第一个屏幕的顶部栏包含徽标和导航菜单（产品，工作室，印刷机，商店），商店菜单项被制作成CTA按钮，这更有可能导致用户点击。即使主页保持滑动，顶部栏也将始终显示在页面顶部，方便访问者跳转。此外，网站的第一个屏幕上有大部分文字，但设计师充分利用白色空间来区分标识，导航和文案，使整个页面整洁大方。

事件代理商网站是另一个例子，第一个屏幕上使用的设计方法有点特别。本网站的第一个屏幕主要围绕徽标和品牌名称进行设计。布局是平衡的。有两个菜单项供访问者快速浏览他们感兴趣的内容。更引人注目的是Galaxy的背景图像和超大字体文本的组合，这首先带来了令人惊叹的视觉效果。

来到起飞页自助网站（http://www.qifeiye.com/?t_wd=a5）成为一个网站！

« 我国6G研究开发正式启动，工作组和专家组成站立 | 7岁的女孩写信给谷歌找工作搜索CEO Pachai亲自回复鼓励 »