做好网页首屏设计博得用户好感

 

怎样做好首屏设计?

 

在网站的首屏设计中，文本、图片的排版或配色等确实很重要，但导航菜单的地位也不容撼动。良好的导航菜单有助于帮助用户理解网站的基本框架和内容分类。

 

1、注重可读性和视觉层次

 

在首屏设计当中，要将网站内容或各种元素合理布局，在视觉上形成层次提高网站的可读性，这样用户在获取信息时会更加便捷，首屏设计也会更加用户友好。要做到这一点，意味着我们需要仔细考量导航、Logo和标题等元素的字体，慎重选择背季季红危机公关景图片、配色方案，让网站在保持协调一致的同时错落有致。

 

Daily Bugle是一个做杂志的网站。在它的首屏中，居中的文字Logo相当于一个分界线，导航菜单项和搜索框均匀地分布在两侧，整个网站沿用了传统报纸设计的衬线体，灰白色背景足够典雅、大方，图片、文字布局合理，在首屏设计上很是美观。而The Big Landscape 这个网站在整体布局上没有遵循栅格系统，因此它的首屏设计也选用了非对称的设计方法。顶栏的左边是网站Logo和3个导航菜单项，右侧是搜索框和一个醒目的CTA按钮。主题部分是几何形状的图片、明亮的标题、错落的文本。整个网站重点突出又不失重点。

 

2、使用汉堡图标

 

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

 

Ice这个网站就很好的展现了汉堡图标的使用方法。由于网站的页面很多，设计师很贴心的将汉堡图标放在页面的左上角，当用户点击时，它会弹出许多菜单选项。这样的设计为网站节省了不少空间，整个网站看上去也更加简洁。页眉处的元素安排也比较合理，左侧是品牌Logo和介绍，右侧是社交媒体分享链接，实现了平衡。而背景图片、行为按钮、文本等的配合也很协调，在视觉上保持了一致。Slopes在网站采用了汉堡图标的另一种设计形式，那就是时下流行的侧边栏。不给设计师却没有将导航菜单显示在侧边上，这可能也是因为页面比较多吧!侧边栏上仅仅保留了品牌Logo，营造了一种非对称的布局。页眉处是四个导航菜单，而左侧是汉堡图标，这样一来，交互的层次就出来了。带有动效的背景图片也更能抓住用户的注意力。

 

3、悬浮固定顶栏

 

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

 

Structure Blog 的设计就采用了悬浮固定的顶栏，当访客向下滚动时，顶栏一直出现。它的设计还遵循了极简主义，品牌名称居中，汉堡图标隐藏菜单，放大镜图标代表搜索框，在保证功能的同时实现了布局的清爽。Photography Workshops网站的首屏在页眉设计上要更有创意。最开始顶栏在翻页时保持不变，不过当你向上滚动时，它会反过来出现在页面的底部。顶栏上也呈现了网站的一些菜单选项，但更多的菜单项被隐藏在汉堡图标之中。这有助于维持网站的一致性，在访客与网站内容的互动中能发挥积极的作用。

 

4、双层导航菜单

 

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

 

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

 

首屏是网站重要的战略抖音大号位置。关于怎样做好首屏设计，上面的建议只是辅助性的，最重要的是做好用户调查。每个网站的自身特点不同，目标受众喜好多样，满足用户需要、受到用户欢迎的网站才有可能成功。根据调查结果决定你的首屏设计是应该遵循传统还是锐意创新吧!