第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

如何改善网站留给用户的第一印象?(下)

时间:2017-11-28 16:13来源:A5企业专栏 作者:跌名 点击: 我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
精致的首屏设计可以吸引用户的注意力,延长他们在网站上的访问时间,增加用户对网站的好感。做好网页的首屏设计至关重要。上回我们讲到了首屏设计的概念、重要性以及涵盖的布局元素

Grain

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

  怎样做好首屏设计?

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

  注重可读性和视觉层次

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

  

undefined

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

  

undefined

  使用汉堡图标

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

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

  

undefined

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

  

undefined

  悬浮固定顶栏

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

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

  

undefined

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

  

undefined

  双层导航菜单

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

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕