这学期的项目已经进行到了后期，为我们的网页定个首屏成了我们当下必须面对的一件事。有人说，恋爱是“始于颜值，陷于才华，忠于人品”，网页也是如此：先是被美丽炫酷的首屏吸引，然后被有趣而深刻的内容折服，最后因为数据的严谨性和对版权保护的注重而对整个作品好感度upup。拥有“才华”与“人品”却没有吸引人的“颜值”是一件很可惜的事情，往往会因为没能获得读者的注意力而失去了展示内容的机会。那么，如何让读者对你的网页“一见钟情”？

一、你有这些选择：首屏的分类

         数据视觉化作品的首屏主要分为如下6类：

1、全屏的静态图片，上衬文字；

《穿越胡线：临界人生》

链接：http://image.thepaper.cn/html/zt/2017/08/huline/index.html

2、全屏的动态图片，上衬文字；

《格陵兰项目》

链接：https://graphics.reuters.com/CLIMATECHANGE-GREENLAND/010080D30RJ/index.html

《穿越胡线：临界人生-农牧交错》

链接：http://image.thepaper.cn/html/zt/2017/08/huline/nongmu.html

3、纯色背景，上衬文字；

《算法如何知道你将输入什么》

链接：https://pudding.cool/2019/04/text-prediction/

4、多个图片排列组合，上衬文字

5、用数据交互作品衬以文字做首屏

《狼是如此接近》

链接：https://interaktiv.morgenpost.de/woelfe-in-deutschland/

《护照的权力》

链接：https://multimedia.scmp.com/culture/article/passportIndex/

6、直接进入内容

《两性收入对比》

链接：https://interaktiv.morgenpost.de/gender-pay-gap/

二、没有无缘无故的爱：如何选择适合内容的首屏

1、各类首屏自身的效果

       用全屏的静态图片做首屏背景是相对而言最容易做得好看而“高级”的方式，这种方式基本只有一个难点：获得一张好看的、对内容整体起概括作用的照片，并且这张照片需要适合为文字做衬底，即不能过于花哨，有合适的位置放置文字。这张照片如果不是自己拍摄的，则要注意版权问题（其他形式的插图当然也要注意版权问题），否则Visual China is watching you!《穿越胡线：临界人生》的首屏原本是动态图片，但在未加载完全的情况下显示的照片就很好地展示了作品的整体内容，阳光与阴影形成的一条线将房屋和土地两相分隔。而且这张照片的风格也很符合作品的整体风格，为读者营造了一种阅读氛围，富有沉浸感。

       用全屏的动态图片做首屏背景和用静态图片的原理较为相似，需要额外注意的地方一个是动态图片不能动得杂乱，主要是规律性地、较为缓慢地推拉摇移镜头；另一个是动图循环播放的衔接问题，在动图从结尾到开始的切换过程中，尽量无缝衔接，这样切换时才不会让读者感觉很突然。《穿越胡线：临界人生-山河交错》动态首屏的首位衔接过程就比较自然。《格陵兰项目》的首屏把动图放在左侧局部，右侧放置标题，动图呈规律性运动，整体背景为纯色，也是一种动图的使用方式。

       用纯色背景作为首屏可以使读者的注意力全部聚集在标题上。为了加强这个效果，许多使用纯色背景作为首屏的作品都像《算法如何知道你将输入什么》一样，将标题逐字/字母显示出来，这样可以使颜色单一的首屏显得不那么单调，同时也能进一步引起读者的注意力。此时，纯色背景的颜色与标题的样式和布局几乎是我们能够作文章的全部内容，因此也就格外重要。背景的颜色不能违背读者对内容的基本认知，同时也要具有美学效果。由于背景十分简洁，标题的样式就可以多一些设计感，避免给人以单调的感觉。

       用多个图片的排列组合作为首屏的做法相对少见。这种首屏信息量大，需要读者花时间来思考每个图片的内容以及图片间的关系，因此，图片之间必须具有强相关性，否则在首屏对多个图片的呈现就是没有意义的。这里需要注意多个图片的风格统一，以及标题如何放置才能不显得杂乱。如果图片是动态的，那么动图较长的加载时间也是开发者需要解决的问题。

       用交互作品衬以文字作为首屏可以使读者尽快参与到作品中，也可以让读者尽快get到作品的用意。不过，这种呈现方式需要需要读者devote更多，有些读者可能会“怕麻烦”而放弃理解作品内容的努力。因此，一目了然的交互方式是非常必要的。《狼是如此接近》首屏交互作品的交互方式就很容易让人理解——随着时间轴的自动运行，地图上的点不断变化，读者也可以手动操纵时间轴，来获取自己想知道的某个时间点的信息。交互作品的自动运行实际上是一个教育读者的过程，鼓励读者来动手参与到作品当中，体验感较好。还有一些网页是以小游戏作为首屏，像《护照的权力》，采用的是相同的原理。

2、各类首屏与网页内容的关系

       用全屏的静态或动态图片做首屏背景非常适用于有时代感的选题和有具体自然、社会背景的选题。这类选题的终极目的往往是打动读者，因而十分需要为读者营造出一种沉浸感，而且这类选题也比较容易拍出好看的照片和视频。《山河之间》系列作品的首屏图片就散发着强烈的乡野气息，带领读者俯瞰广阔中国大地上的那条有故事的胡线。在首屏定下视角后，读者便会很容易地与接下来的内容产生共鸣。

       用纯色背景作为首屏特别适用于内容偏干货、理性的作品。用一张纯色图片就让读者有了读下去的欲望，标题和内容必须非常吸引人，或者呈现出的是非常关键的内容。背景所选的颜色也要与内容的颜色具有一致性，形成整体感。

       用多个图片的排列组合作为首屏主要适用于内容复合程度较高的作品。各张图片所体现的信息可以作为内容的几个部分，这几个部分还需要可以进行有序地排列。并且，这几部分信息需要为一个大主题服务，多个图片在首屏上的体现使得各部分信息与大主题之间的隶属关系得以强化凸显。

       用交互作品衬以文字作为首屏适用于以交互为主、或非常希望拉近与读者之间的距离的内容。交互虽然可以做得十分炫酷，但不是什么内容都适合做交互。如果网页的内容是展示、告知类信息，那么静态网页反而可能更适合，而且采用了静态网页之后，还可以将更多时间放在设计的打磨上。

三、Action! 各类首屏的制作技巧

1、首屏上的小细节

       无论是哪一种首屏，都可以在首屏的最上方加上网页logo和作者的联系方式，一个好看的logo可以在很大程度上提高网页的辨识度。

2、动图的处理

        在网页上插入动图有两种方式：插入gif动图和插入视频。gif优势在于加载速度较快，但画质往往比较差，而视频则相反。无论是采用哪种方式，都需要考虑动图是否循环播放的问题，如果循环播放，还需要让动图的首尾衔接尽量自然。

3、从首屏到内容的过渡

        两种过渡方式：一种是滚动，将具有透明度的网页背景和内容一起滚动到首屏图片上；另一种是用颜色渐变。

（待补充）

（今天我们的网页定首屏了吗？没有）