『研习设』用这个方法，送你网页首屏C位出道

本节课讲解一套理论，一个方法，网页首屏轻松做，同学们可以在下方评论区进行留言，老师会根据你们的问题进行回复。

那我们开始今天的教程吧。

1.网页的第一印象至关重要，它在很大程度上决定了用户是否有兴趣继续浏览下去，而第一印象是由网页的首屏决定的，它是最直接传递网页功能与印象的媒介，好的首屏能在同质化严重的情况下脱颖而出。

2.网页中首屏存在着大量的交互元素，下图的首屏中就包含了5个互动的按钮，这是Banner所不具备的功能，如图所示。

3.下图中的网页是一个简单的组合形式，我们可以划分为全局导航栏和形象部分，如图所示。

4.下图中的网页我们称之为大尺寸的页眉，即整个网页都是页眉的区域，这其中我们又可以细分为全局导航栏、全屏图片和形象文案的部分，如图所示。

5.下图中网页的首屏部分包含了全局导航栏、形象文案和社交链接，如图所示。

6.具体我们的首屏高度我们可以参考W3School网站的数据，其他的尺寸我们可以直接忽略掉，其中1366x768像素的尺寸就是最常见的尺寸，具体如图所示。

7.我们在设置首屏高度的时候，就可以参考这个尺寸进行设置，老师在Adobe Xd中设置相同的视口的高度，调整软件中右侧的视口高度为768即可，如图所示。

8.主页和着陆页是不同的，以下图的网页为例，他是一个游戏的专题页面，并不是这个网页的主页，当用户点击搜索推广、信息流或是其他形式的广告，打开的一个页面就是我们的着陆页，如图所示。

9.当我们点击这个网页的主页跳转链接的时候，进入的才是这个网页真正的主页部分，如图所示。

10.也可以将书籍的封面理解为首页，而它内部的每一个页面，我们都可以理解为着陆页，每个页面都有自己的关键词，这样就不需要用户每次都是从首页进入。

11.着陆页可以用来着重介绍专题活动或产品，下图中的着陆页作为整个网站的招聘专题页出现，用户在搜索的时候可以根据关键词直接搜索到这个网页，如图所示。

12.着陆页也常被用来介绍产品，这样我们在搜索产品的时候，就可以更快的找到它，如图所示。