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