网站设计无论是APP还是网页，第一印象都很重要。再优质的内容，都需要首屏这个漂亮的脸面来吸引用户驻留，才能被人注意到。在竞争激烈的数字产品领域，这是难以辩驳的残酷经验。这也引出了今天要探讨的话题：网页的首屏设计。
什么是首屏
相比于首屏，大家对于首页的概念会更熟悉一些。和传统的报纸行业类似，报纸第一版被称为头版，由于报纸常常会折叠起来运输，当用户拿到报纸看到的是露出来的头版头条(Above the fold)，这就像如今的首页和首屏之间的关系。用户打开网页的第一刻，还没开始滚动页面的时候，所看到的就是首屏。
首屏要能够吸引用户才行。
从内容角度上来说，首屏要涵盖关键的信息，一目了然。从设计上来看，首屏也是最适合发挥设计创意的地方，许多优质的首屏设计都采用了简洁明了的布局，打磨出引人入胜的体验。首屏通常还承载着网站的导航模块，是整个站点布局和导航的关键。
这个在线漫画书店就是个优秀的范例。顶部的文字LOGO和主干导航都在同一水平线上，超人插画突破页头布局充满了力量感，在视觉上也非常抓人，同时作为认知度最广的超级英雄，它也非常适合作为首图而置顶。下面的漫画列表恰到好处的露了个头，让访客意识到能够向下翻页。在Daily Bugle magazine 这个电子杂志网站中，Daily Bugle 作为标题居中，延续自传统报纸设计的衬线体贯穿了整个网站的设计。居中的文字LOGO，分类导航和搜索框平均分布在左右。
The Big Landscape 这个网站在导航的设计上采用了突破栅格的不对称设计，左边是LOGO和三个链接，为了平衡整个设计，顶栏右边是搜索框和一个有颜色填充的按钮。这种设计不仅兼顾了视觉上的平衡，还让页头的可读性得到了保证。
另外，还有一个值得注意的问题，当用户开始向下滚动翻页的时候，首屏顶部的页头要如何处理。有的网页会倾向于使用悬浮固定的导航，让用户随时可以点击导航跳转到其他的地方，或者进行搜索。有的网页则还是采取传统的策略，当然也有采用折中的设计，当用户滚动到首屏之后，导航缩小悬浮到顶上，或者变为菜单按钮，降低视觉重量，保留核心的元素和它们的可交互性。
汉堡菜单
首屏设计中，汉堡菜单是近年来非常流行的一个解决方案，将导航链接都隐藏在汉堡按钮菜单之后。
汉堡按钮通常放置在首屏，现在已经成为一个经典的交互元素。目前的用户也已经熟悉了它的存在，无需额外的解释，他们就知道在汉堡菜单中寻找链接和其他选项。汉堡菜单让整个页面更加简约，释放了空间，节省了布局元素，在不同的设备上的显示也更加统一。
Ice Website 这个网站的概念设计就展示了汉堡菜单的一种常见用法。由于网站包含了大量的页面，设计师非常贴心的将汉堡按钮置于页面的左上角，当用户点击它的时候，会弹出导航选项。这样的设计极大程度的节省了页面空间，让整个设计都显得足够简约，也为页头省出了空间。在这个首屏当中，页头左侧是品牌LOGO和介绍，右侧是社交媒体帐号链接，视觉设计也和整个页面保持了一致。中间的留白让整个页头保持了视觉上的平衡。
Slopes 这个网站采用了时下流行的侧边栏设计元素，不过设计师没有将导航放置到侧边栏上，仅仅是保留了品牌LOGO，只是借由侧边栏制造出了这种非对称的首屏布局。页头右侧是四个常用的链接，而左侧是汉堡菜单，更多的链接被隐藏在汉堡菜单当中，这样一来，交互的层次就出来了。
虽然现在汉堡菜单的设计还存在着一些争议，但是它们仍然被广泛地运用着。
悬浮固定导航
悬浮式的导航栏也是时下流行的一个趋势，它为用户提供了持续的可供交互的导航服务，这对于越来越长的页面设计而言，是个相当合理的补充。这个 Structure Blog 的概念设计就采用了悬浮的页头，导航则主要是采用的汉堡菜单。这使得品牌更加突出，而整体设计则更加简约。
Photography Workshops 这个网站的首屏设计就非常的独特。导航菜单开始是在首屏的底部，随着滚动，它会到页面的顶端并且悬浮固定存在。导航菜单的右侧是关键链接，而非关键的更多选择则隐藏在最左侧的汉堡菜单中。
双层菜单
导航还可以设计为双层的，已经有不少网站有了这样的尝试
Bakery 这个网站就使用了双层的导航设计，上层导航中承载的是LOGO和社交媒体帐号、搜索和购物车以及汉堡菜单，而第二层导航则是交互的核心区域：产品目录、销售地点、新闻和特别优惠等。整个设计视觉层次清晰，为整个用户体验打足了基础。深圳网站建设公司博纳网络编辑整理。
当前文章链接：/construction/jzhyzx/544.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
