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

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

 2017-11-24 15:21  来源: A5企业专栏   我来投稿 撤稿纠错

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

在人与人的交往中,第一印象很重要。虽然第一印象并不一定正确,但却是鲜明、牢固的,直接影响着双方以后沟通交流的过程。网页设计中也是一样,而首屏就是网站留给访客的第一印象,漂亮精致的首屏设计能让用户停留更长时间,让他们有意愿更深层次的了解网站内容,这有助于提高用户转化率,增加产品销量;而糟糕的首屏设计则会让有用的信息大打折扣,让有趣的内容索然无味,访客甚至会因此直接放弃浏览。首屏设计的重要性不言而喻,那么在今天这个竞争激烈的网络世界中,怎样才能充分发挥首屏设计的积极作用呢?今天小飞就带大家了解一下网站的首屏设计,首屏设计中可以包括哪些元素。

什么是首屏设计?

相比首屏这个概念,大家可能对于网站的主页更加熟悉。主页是指用户打开网页时看到所有的设计元素,而首屏则是指用户打开网页、还没有滚动页面的那一刻看到的画面。首屏这个概念最早用于出版领域,传统报纸在运输和分发的过程中常会有折叠,而折叠暴露在外的内容就是首屏或者说头版,这决定着读者是否会进行购买,因此不少出版商会在这个区域放置优先级最高的内容。而在互联网领域,首屏同样也很重要。从内容的角度来看,首屏的位置很关键,需要涵盖网站的核心内容,做到一目了然,才能有效吸引用户;而从设计的角度来看,首屏是设计师最能发挥设计创意的地方,简洁明了、功能齐全的首屏才能引人入胜。首屏通常还承载着网站的导航菜单,关系着整个站点的布局。

下面还是通过一个栗子直观的认识首屏设计吧!下图是一个漫画书店的网站首屏设计。页头区域水平展示了网站的Logo和主要的导航菜单项:热销、特别优惠、博客,以及电商网站经典的购物车图标和搜索框。另外,超人的漫画形象也充满了力量感,很容易抓住用户的视线。随后漫画列表的出现也恰到好处,可以引导用户有意识的向下翻页。

为什么首屏设计很重要?

为什么首屏设计对于网页很重要?除了上面我们提及的一些优点以外,这还要从用户的浏览模式来分析。Nielsen Norman团队重点研究分析用户行为以及用户与网站内容互动的实现途径,在不断的探究之后得出了一些结论:当人们访问某个网站时,尤其是初次访问时,他们通常不会仔细浏览所有内容,而是会快速的扫视,看是否有值得关注的点。如果存在感兴趣的内容,他们才会继续留在这个网站。而通过多个眼球追踪实验的数据分析发现,访客们的浏览习惯可以总结为三种典型的模式:古腾堡式,Z图模式和F图模式。

古腾堡式

在网站内容比较一致,缺少明显的视觉层次框架时,访客们常常会使用古腾堡式的浏览模式。这种浏览方式是指用户大范围的扫视网站内容,浏览路径呈一个大Z字。在四个比较活跃的视觉区域中,其中有两个都在页面的顶栏(见下图)。

Z图模式

Z图模式也不难理解。这种浏览模式是指用户从上到下,从左到右,视线沿着Z字形来回扫视,浏览路径形成好几个小Z字。页面内容分成多个不同区块时,人们会经常使用这种浏览模式。

F图模式

F图模式我们就更加熟悉了。Nielsen Norman团队调查发现,这种阅读模式在用户中最为典型。用户一般会先沿着水平方向优先浏览网页的顶栏,这个时候的视线路径构成了字母F 最上面的一横;接下来用户会沿着屏幕左侧向下垂直扫视,寻找段落中能引起兴趣的内容,当他们发现感兴趣的内容时,会进行水平浏览,而这些内容对应的视线范围通常会比第一次水平浏览的要小一些,这就是字母F 中间的一横;最后用户的视线会移动到屏幕左侧,继续向下浏览。这样,一个"F"就出现了。

其实无论用户遵循哪种浏览模式,他们通常都会优先扫视页面顶部的水平区域。因此在页面顶部显示关键的信息最能同时满足网站和用户双方的诉求:网站可以充分激发用户的兴趣、维系顾客;而访客能够快速获取重要信息,决定是否继续浏览。这就是为什么UI和UX设计师甚至内容策略专家和营销专家都认为首屏设计十分重要。人们往往会在短短的几秒钟内形成对一个网站的整体认知,第二印象这种东西是不存在的。一个网站在首屏上必须足够抢眼才行,不然很容易走向失败。

一个网站的首屏可以包含哪些元素?

既然网站的首屏如此重要,那么怎样才能做好首屏设计呢?在介绍首屏设计方法和一些实例之前,小飞先带大家了解一下首屏中可以包含哪些有意义的布局元素:

基本的品牌标识:Logo、品牌名称、Slogan、吉祥物、企业图片或色彩等

产品或服务的主题文案

导航菜单选项

重要的社交媒体链接

基本联系信息(电话、邮箱等)

多语言切换按钮

搜索框

订阅按钮

产品APP 下载或试用版本的链接等

虽然小飞列举了很多可以在首屏中使用的元素,但这并不意味着你应该将这些元素全部应用在首屏设计中。过犹不及,如果你在首屏中呈现过多元素,很容易会给访客带来信息负载,太多的元素也会分散用户的注意力,使他们难以集中注意力关注网站中最重要的元素。因此,网站的首屏设计需要设计师和营销人员通力合作,哪些需要选用,哪些应该删除,做出战略性的合理的安排。也许你觉得这样的说法还是太过于空洞了,那就看看下面这两个栗子,这两个不同类型的网站在首屏上使用了不同的设计策略,快来找些灵感吧!

Bjorn是一个室内设计网站。首屏的顶栏由Logo和导航菜单(Product、Studio、Press、Shop)组成,而其中shop这个菜单项则制作成了CTA按钮,更容易引起用户点击的兴趣。而且就算主页面不断滑动,顶栏都会一直出现在网页顶部,方便访客进行跳转。除此以外,网站的首屏中还有大段的文本,不过设计师充分利用了留白,将Logo、导航和文案很好的区分开来,让整个页面显得整洁、大方。

Event Agency网站是另外一个范例,它在首屏使用的设计方法要更加特别一点。这个网站的首屏主要是围绕着Logo和品牌名称设计,布局左右平衡,各有两个菜单项供访客快速浏览自己感兴趣的内容。更引人注目的还要数星河的背景图片和超大字体文本的配合,在第一时间带来了令人震撼的视觉效果。

快来起飞页自助建站平台()做一个网站吧!

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

相关标签
起飞页建站

相关文章

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

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

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

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

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

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

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

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

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

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

热门排行

信息推荐