一套理论,一个方法,网页首屏轻松做!

来源:优设网
2021-03-25
8472
导语:用一个灵活发散的思维去思考网页设计,你会发现,一种设计方法的相互组合就可以创造出数不清的新形式。大大的提升网页设计时的效率和效果。
阅读本文大概需要10分钟

网页的第一印象至关重要,它在很大程度上决定用户是否有兴趣浏览下去。而这个第一印象则是由网页的首屏部分所决定,它是最直接传递出网页的功能与印象的媒介。

一个好的首屏,也能让你在同质化严重的情况下,脱颖而出实现弯道超车。好的,今天就让我们一起来研究一下,网页首屏部分的组成、方式以及设计手法吧。

一套理论,一个方法,网页首屏轻松做!

说到首屏大家肯定第一反应是这样的一个形式,有小伙伴可能会说,这个不就是个 Banner 吗?那也是很多设计师的误区,网页首屏中存在着大量的交互元素在其中。

一套理论,一个方法,网页首屏轻松做!

我们现在来看第一个网页,这里就包括了五个互动的按钮在其中,这个是 Banner 所不具备的功能,接下来我们快速的浏览一下,这个区域的主要组成模块。

一套理论,一个方法,网页首屏轻松做!
这个网页,是一个简单的组合形式,我们可以划分为全局导航栏和形象部分。

一套理论,一个方法,网页首屏轻松做!

这两个网页是类似的形式,我们称之为大尺寸页眉,即这整个区域都是页眉的区域。

一套理论,一个方法,网页首屏轻松做!

这其中我们又可以细分为:全局导航栏、全屏图片和形象文案部分。

一套理论,一个方法,网页首屏轻松做!
我们顺着这个思路继续分下去,看到这个网页的首屏部分,包括了全局导航栏、形象文案和社交链接。

一套理论,一个方法,网页首屏轻松做!

但具体我们的首屏高度要设计多少呢?这里我们可以参考 w3school 网站的数据。其他的尺寸我们直接忽略掉,剩下的我们看到 1366×768 像素的尺寸是一个最常见的尺寸。

一套理论,一个方法,网页首屏轻松做!

这里我建立了一个 1920X1080 高度的画板,点击标记区域的 “视口高度” 将数值改为 768 像素,即可。

右面的画板上就出现了一个虚线标记的地方,这个就是我们的视口高度。

一套理论,一个方法,网页首屏轻松做!

更多的网页中的基础内容,大家可以阅读这篇:

一套理论,一个方法,网页首屏轻松做!

有很多小伙伴问我,老师什么是主页?什么是着陆页?它们是相同类型的东西吗?答案肯定是否定的。

一套理论,一个方法,网页首屏轻松做!

我们以这个网页为例,它是一个游戏的专题页面,并不是这个网页的主页。

而是这个网页的着陆页,用户点击搜索推广、信息流或其他形式的广告打开的第一个页面。着陆页可以是网站上的一个页面,也有直接把主页当作着陆页使用的情况。

一套理论,一个方法,网页首屏轻松做!

进入的才是这个网页真正的主页部分。

一套理论,一个方法,网页首屏轻松做!

如果还不理解,我们可以一本书籍为例。这个书籍的封面可以理解为首页。而它内部的每一个页面都可以理解为着陆页。每个页面都有自己专门的关键词,这样就不需要用户,每次都是从首页进入了,方便用户使用。

一套理论,一个方法,网页首屏轻松做!

着陆页可以着重用来介绍专题活动或者产品。

一套理论,一个方法,网页首屏轻松做!

这个着陆页作为整个这个网站的介绍专题页出现。用户在搜索时,可以根据关键词直接搜索到这个网页。

一套理论,一个方法,网页首屏轻松做!

这个着陆页也同样是起着介绍专题的作用。

一套理论,一个方法,网页首屏轻松做!

着陆页也常被用介绍产品,这样我们在搜索这个产品的时候,就可以更快的找到了。

很多情况下,网页首屏的形式不断地被强调,而首屏的功能性却总是被忽略。这样就会出现影响用户使用的情况,因为网页最重要的作用就是传递和收集信息。

所以设计师在设计一个网页的首屏部分时,应该更多的去考虑这个网页想要的提供的功能是什么,而不是一味的追求形式感。当然不同的行业,所要求的网页的功能也是不同的。接下来的部分我们主要来探讨一下这个问题。

一套理论,一个方法,网页首屏轻松做!

一个网页主要受到三个因素的影响。行业、功能和形式。这三个元素又在互相影响。

一套理论,一个方法,网页首屏轻松做!

一套理论,一个方法,网页首屏轻松做!

首先,行业决定了功能性。我们用医疗这个大行业下的,医院类型、保健类型和医学院类型的网页来说明。

一套理论,一个方法,网页首屏轻松做!

首先我们来看医院类型的网页,这种特定的行业类型,要求的网页功能就会比较全面。

一套理论,一个方法,网页首屏轻松做!

首先就是为了方便用户提供的预约功能。

一套理论,一个方法,网页首屏轻松做!

在这个基础上,网页中还会加入导航功能,这是为了让用户更容易去找到这家医院。

一套理论,一个方法,网页首屏轻松做!

网页设计者还会添加问诊功能来方便用户直接进行查询。

一套理论,一个方法,网页首屏轻松做!

这个网页我们就看得更加详细了,同样是添加了一个问诊功能。

一套理论,一个方法,网页首屏轻松做!

我们来总结一下,除了最基本的形象功能外,医院类型的网页还添加了预约功能、客服功能、导航功能和问诊功能,其本质都是为了可以更好的服务客户。

一套理论,一个方法,网页首屏轻松做!

到了保健类型的网页时,这个功能就会相应的发生变化,由于是保健的性质,更多是从招揽客户这个点而出发的。

一套理论,一个方法,网页首屏轻松做!

所以这类的网页,虽然同属医疗行业,却有了不同的功能,这里更多的是发挥着这个网页的形象功能,增加信赖感。

一套理论,一个方法,网页首屏轻松做!

这个网页则是直接把服务流程放在了首屏部分,可以让用户最容易地理解整个服务流程。

一套理论,一个方法,网页首屏轻松做!

这个网页也是同样的设计逻辑,通过展示形象来吸引用户。

一套理论,一个方法,网页首屏轻松做!

保健行业的网页,几乎都存在着预约功能,这样主要是提供了一个用户和商家互动的渠道,也是契合这类型行业的实际需求。

一套理论,一个方法,网页首屏轻松做!

最后我们来看一下,医疗学校类型的网页。

一套理论,一个方法,网页首屏轻松做!

因为是属于教育行业,所以更多是一个形象功能的展示。

一套理论,一个方法,网页首屏轻松做!

这个网页是一个护士的招聘网站,他就用过轮播视频的方式,让用户能最直观地感受到护士这个职业的内容和价值。

一套理论,一个方法,网页首屏轻松做!

教育行业的网页,则更多的是一个形象功能,向客户传递自己的价值观。

一套理论,一个方法,网页首屏轻松做!

前面说了行业决定功能,以此类推,功能确定着形式,我们主要以旅行行业的网页进行说明。

一套理论,一个方法,网页首屏轻松做!

这个网页主要是向用户展示环境以及服务,也就是我们前面说的形象功能,所以在设计的时候直接做了一个全屏的形式,最好地向用户展示自己的信息。

一套理论,一个方法,网页首屏轻松做!

这个网页也是同样的功能,展示自己的形象,将自己的景色展示出来,这样可以让用户最直观的看到。

一套理论,一个方法,网页首屏轻松做!

这里则是在展示形象功能的基础上,添加了一个预定的功能,网页的形式也发生了一定的改变。

相关标签

免费获取专属 《策划方案 》及报价
免费体验我们的业务系统、OA系统、在线教育、电商系统、智慧办公等产品定制化方案,助力您的信息化发展之路
即时交流
在线咨询 电话咨询
在线咨询
产品经理

一对一产品经理

180 8812 7777
电话咨询

电话咨询

0871-6718 6978
到访面聊
返回顶部