点击此处返回

每日可免费学习1个教程

立即登录>

软件入门平面设计 3D数字 C4D教程 Blender教程短视频制作影视动画摄影艺术室内设计绘画插画海外教程电商教程产品精修办公职场编程开发考证·外语品牌设计综合教程 UI设计兴趣生活

详情图文教程训练营推荐

平面设计

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

1984人学过难度:新手入门软件:无

评论(61) 收藏课程已收藏下载视频

关注人数：99247

研习设由K先生创立，是一个以研究设计、学习设计为目的的设计师组织。研习设（订阅号yanxishe2017），每周四晚9点，准时更新一篇高品质原创设计文章。欢迎对学习设计有持续热情的同学关注，期待你的进步。

研习设-关于留白的秘密

2318人已学

研习设-秩序感与变化

3418人已学

课程综合评分：9.9分

评论可是有底线的

本节教程练习

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

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

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

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

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

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

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

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

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

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

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

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

登录后学习完整图文教程

虎课APP离线下载免流量

70000+教程，每天免费学一课

一键打开