当前位置:首页 >  站长 >  网站运营 >  正文

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

 2017-11-28 16:08  来源: A5企业专栏   我来投稿 撤稿纠错

  【推荐】海外独服/站群服务器/高防

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

怎样做好首屏设计?

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

注重可读性和视觉层次

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

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

使用汉堡图标

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

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

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

悬浮固定顶栏

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

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

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

双层导航菜单

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

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

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

【 延伸阅读 】

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

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关标签
起飞页建站

相关文章

  • 响应式网站中优化用户体验的7个关键点

    随着移动设备的不断兴起,响应式设计越来越受到大众的喜爱,站长们在搭建网站时也更加倾向于选择响应式网站。不过,大多数站长们都认为既然响应式网站可智能根据设备屏幕大小呈现不同的展示效果,那就不用再对移动端的网站进行手动调整了。其实这种看法是片面的,响应式网站虽然自身具备一定的特质,但有时PC端网站和移动

  • 盘点2017年最受欢迎的10个商城范例:我们从中可以得到哪些启示?

    在电商和线上购物快速发展的今天,拥有一个商城网站很是必要,关于试水独立商城的好处大家可以浏览《有了淘宝京东,为什么还要自建商城网站?》查看。但是,搭建商城网站并不简单,庆幸的是目前市面上涌现了不少建站平台,起飞页自助建站平台就是其中一个,各位商家可以借助起飞页轻松搭建出一个好看、实用的商城网站。不过

    标签:
    起飞页建站
  • 让首页背景动起来是怎样一种感觉?8张图告诉你真相!

    现在越来越多的设计师开始在网页中使用循环视频作为背景,这种现象的出现主要有两个原因。一方面,移动设备性能不断完善,网速越来越快,用户能够且有条件在移动设备上浏览视频背景的网站;另一方面,随着HTML5技术的发展,很多主流浏览器的视频标签都支持循环(Loop)属性,网页上单个或一系列视频短片的循环播放

    标签:
    起飞页建站
  • 缺乏灵感?给你8个值得每天学习的顶尖设计网站

    网站设计是一种艺术,它离不开灵感和创意。但灵感与创意的涌现是需要碰撞、需要时机的,大多数设计师都不可能每时每刻都灵感爆棚。当您缺乏设计灵感时,不妨看一看下面这些网站,它们都收录了丰富的素材,都有许多独立设计师上传的优质作品,没准这些设计就能让你眼前一亮,获得一些想法或启发。赶紧和小飞一起看看这8个值

    标签:
    起飞页建站
  • 目前为止用户体验度最好的表单:浮动标签式的表单

    在当今这个互联网时代,填写表单对用户来说就是家常便饭,在网站进行注册登录时、在网上购物时,都免不了填写表单这一环。表单是网页设计中重要的组成部分之一,在获取用户信息方面发挥着不可或缺的作用,它是用户和网站的一种互动形式,这种形式的互动越顺畅,网站的用户转化率就越高。这也是为什么许多站长们一直在研究如

热门排行

信息推荐