网页的第一印象至关重要,它在很大程度上决定用户是否有兴趣浏览下去。而这个第一印象则是由网页的首屏部分所决定,它是最直接传递出网页的功能与印象的媒介。
一个好的首屏,也能让你在同质化严重的情况下,脱颖而出实现弯道超车。好的,今天就让我们一起来研究一下,网页首屏部分的组成、方式以及设计手法吧。
说到首屏大家肯定第一反应是这样的一个形式,有小伙伴可能会说,这个不就是个 Banner 吗?那也是很多设计师的误区,网页首屏中存在着大量的交互元素在其中。
我们现在来看第一个网页,这里就包括了五个互动的按钮在其中,这个是 Banner 所不具备的功能,接下来我们快速的浏览一下,这个区域的主要组成模块。
这个网页,是一个简单的组合形式,我们可以划分为全局导航栏和形象部分。
这两个网页是类似的形式,我们称之为大尺寸页眉,即这整个区域都是页眉的区域。
这其中我们又可以细分为:全局导航栏、全屏图片和形象文案部分。
我们顺着这个思路继续分下去,看到这个网页的首屏部分,包括了全局导航栏、形象文案和社交链接。
但具体我们的首屏高度要设计多少呢?这里我们可以参考 w3school 网站的数据。其他的尺寸我们直接忽略掉,剩下的我们看到 1366×768 像素的尺寸是一个最常见的尺寸。
这里我建立了一个 1920X1080 高度的画板,点击标记区域的 “视口高度” 将数值改为 768 像素,即可。
右面的画板上就出现了一个虚线标记的地方,这个就是我们的视口高度。
更多的网页中的基础内容,大家可以阅读这篇:
有很多小伙伴问我,老师什么是主页?什么是着陆页?它们是相同类型的东西吗?答案肯定是否定的。
我们以这个网页为例,它是一个游戏的专题页面,并不是这个网页的主页。
而是这个网页的着陆页,用户点击搜索推广、信息流或其他形式的广告打开的第一个页面。着陆页可以是网站上的一个页面,也有直接把主页当作着陆页使用的情况。
进入的才是这个网页真正的主页部分。
如果还不理解,我们可以一本书籍为例。这个书籍的封面可以理解为首页。而它内部的每一个页面都可以理解为着陆页。每个页面都有自己专门的关键词,这样就不需要用户,每次都是从首页进入了,方便用户使用。
着陆页可以着重用来介绍专题活动或者产品。
这个着陆页作为整个这个网站的介绍专题页出现。用户在搜索时,可以根据关键词直接搜索到这个网页。
这个着陆页也同样是起着介绍专题的作用。
着陆页也常被用介绍产品,这样我们在搜索这个产品的时候,就可以更快的找到了。
很多情况下,网页首屏的形式不断地被强调,而首屏的功能性却总是被忽略。这样就会出现影响用户使用的情况,因为网页最重要的作用就是传递和收集信息。
所以设计师在设计一个网页的首屏部分时,应该更多的去考虑这个网页想要的提供的功能是什么,而不是一味的追求形式感。当然不同的行业,所要求的网页的功能也是不同的。接下来的部分我们主要来探讨一下这个问题。
一个网页主要受到三个因素的影响。行业、功能和形式。这三个元素又在互相影响。
首先,行业决定了功能性。我们用医疗这个大行业下的,医院类型、保健类型和医-必赢(首页)官方网站是多少类型的网页来说明。
首先我们来看医院类型的网页,这种特定的行业类型,要求的网页功能就会比较全面。
首先就是为了方便用户提供的预约功能。
在这个基础上,网页中还会加入导航功能,这是为了让用户更容易去找到这家医院。
网页设计者还会添加问诊功能来方便用户直接进行查询。
这个网页我们就看得更加详细了,同样是添加了一个问诊功能。
我们来总结一下,除了最基本的形象功能外,医院类型的网页还添加了预约功能、客服功能、导航功能和问诊功能,其本质都是为了可以更好的服务客户。
到了保健类型的网页时,这个功能就会相应的发生变化,由于是保健的性质,更多是从招揽客户这个点而出发的。
所以这类的网页,虽然同属医疗行业,却有了不同的功能,这里更多的是发挥着这个网页的形象功能,增加信赖感。
这个网页则是直接把服务流程放在了首屏部分,可以让用户最容易地理解整个服务流程。
这个网页也是同样的设计逻辑,通过展示形象来吸引用户。
保健行业的网页,几乎都存在着预约功能,这样主要是提供了一个用户和商家互动的渠道,也是契合这类型行业的实际需求。
最后我们来看一下,医疗-必赢(首页)官方网站是多少类型的网页。
因为是属于教育行业,所以更多是一个形象功能的展示。
这个网页是一个护士的招聘网站,他就用过轮播视频的方式,让用户能最直观地感受到护士这个职业的内容和价值。
教育行业的网页,则更多的是一个形象功能,向客户传递自己的价值观。
前面说了行业决定功能,以此类推,功能确定着形式,我们主要以旅行行业的网页进行说明。
这个网页主要是向用户展示环境以及服务,也就是我们前面说的形象功能,所以在设计的时候直接做了一个全屏的形式,最好地向用户展示自己的信息。
这个网页也是同样的功能,展示自己的形象,将自己的景色展示出来,这样可以让用户最直观的看到。
这里则是在展示形象功能的基础上,添加了一个预定的功能,网页的形式也发生了一定的改变。
相关标签