精致的首屏设计可以吸引用户的注意力，延长他们在网站上的访问时间，增加用户对网站的好感。做好网页的首屏设计至关重要。上回我们讲到了首屏设计的概念、重要性以及涵盖的布局元素，今天小飞就带大家具体看一下在网站设计中究竟应该怎样做好首屏设计，改善网站留给用户的第一印象。

怎样做好首屏设计?

在网站的首屏设计中，文本、图片的排版或配色等确实很重要，但导航菜单的地位也不容撼动。良好的导航菜单有助于帮助用户理解网站的基本框架和内容分类，下面有好几条建议都是围绕这一点展开的。每条建议还有相应的范例，希望大家能好好琢磨，学以致用。

注重可读性和视觉层次

在首屏设计当中，要将网站内容或各种元素合理布局，在视觉上形成层次提高网站的可读性，这样用户在获取信息时会更加便捷，首屏设计也会更加用户友好。要做到这一点，意味着我们需要仔细考量导航、Logo和标题等元素的字体，慎重选择背景图片、配色方案，让网站在保持协调一致的同时错落有致。Daily Bugle是一个做杂志的网站。在它的首屏中，居中的文字Logo相当于一个分界线，导航菜单项和搜索框均匀地分布在两侧，整个网站沿用了传统报纸设计的衬线体，灰白色背景足够典雅、大方，图片、文字布局合理，在首屏设计上很是美观。

而The Big Landscape 这个网站在整体布局上没有遵循栅格系统，因此它的首屏设计也选用了非对称的设计方法。顶栏的左边是网站Logo和3个导航菜单项，右侧是搜索框和一个醒目的CTA按钮。主题部分是几何形状的图片、明亮的标题、错落的文本。整个网站重点突出又不失重点。

使用汉堡图标

由于首屏的空间有限，汉堡图标是近年兴起的一种比较流行的解决方法。尽管现在关于汉堡图标的使用还存在着一些争议，但是它们仍然受到不少设计师的喜爱。汉堡图标也逐渐成为首屏设计中一个经典的交互元素，用户也更加熟悉汉堡图标在网站中的角色。这种隐藏式的菜单可以让整个页面看上去更加简约，给其他元素充分发挥的空间，在不同的设备上显示时也会更加统一。

Ice这个网站就很好的展现了汉堡图标的使用方法。由于网站的页面很多，设计师很贴心的将汉堡图标放在页面的左上角，当用户点击时，它会弹出许多菜单选项。这样的设计为网站节省了不少空间，整个网站看上去也更加简洁。页眉处的元素安排也比较合理，左侧是品牌Logo和介绍，右侧是社交媒体分享链接，实现了平衡。而背景图片、行为按钮、文本等的配合也很协调，在视觉上保持了一致。

Slopes在网站采用了汉堡图标的另一种设计形式，那就是时下流行的侧边栏。不给设计师却没有将导航菜单显示在侧边上，这可能也是因为页面比较多吧!侧边栏上仅仅保留了品牌Logo，营造了一种非对称的布局。页眉处是四个导航菜单，而左侧是汉堡图标，这样一来，交互的层次就出来了。带有动效的背景图片也更能抓住用户的注意力。

悬浮固定顶栏

当用户开始向下滚动翻页的时候，首屏顶栏要如何处理也是一个我们需要关心的问题。有的网页采取传统的策略，选择隐藏顶栏。而悬浮固定式的顶栏也是时下流行的一个趋势。它为用户提供了持续的可交互的导航服务，这对于许多一页式长滚动网站来说非常有用。当然还有一种折中的方法，那就是当用户向下滚动时，导航菜单缩小或变成菜单按钮，降低视觉上的权重，保留网站核心元素。今天主要介绍固定顶栏的两个栗子：

Structure Blog 的设计就采用了悬浮固定的顶栏，当访客向下滚动时，顶栏一直出现。它的设计还遵循了极简主义，品牌名称居中，汉堡图标隐藏菜单，放大镜图标代表搜索框，在保证功能的同时实现了布局的清爽。

Photography Workshops网站的首屏在页眉设计上要更有创意。最开始顶栏在翻页时保持不变，不过当你向上滚动时，它会反过来出现在页面的底部。顶栏上也呈现了网站的一些菜单选项，但更多的菜单项被隐藏在汉堡图标之中。这有助于维持网站的一致性，在访客与网站内容的互动中能发挥积极的作用。

双层导航菜单

首屏中的导航菜单还可以设计为双层的，已经有不少网站开始了这样的尝试。

Bakery 这个网站就是一个栗子，上层页头中呈现的是Logo和社交媒体帐号、搜索和购物车以及汉堡菜单，而第二层导航则是交互的核心区域：产品目录、销售地点、新闻和特别优惠等。整个设计视觉层次清晰，更有利于用户体验的提升。

首屏是网站重要的战略位置。即使用户可以滚动屏幕，首屏在人们心中还是占据很重要的地位的，不要小看首屏的作用。而关于怎样做好首屏设计，上面的建议只是辅助性的，最重要的是做好用户调查。每个网站的自身特点不同，目标受众喜好多样，满足用户需要、受到用户欢迎的网站才有可能成功。根据调查结果决定你的首屏设计是应该遵循传统还是锐意创新吧!快来起飞页自助建站平台做一个属于自己的响应式网站吧!

【 延伸阅读 】  如何改善网站留给用户的第一印象？（上）