????????這學期的項目已經(jīng)進行到了后期螺垢，為我們的網(wǎng)頁定個首屏成了我們當下必須面對的一件事。有人說串绩，戀愛是“始于顏值缺虐，陷于才華，忠于人品”礁凡，網(wǎng)頁也是如此：先是被美麗炫酷的首屏吸引高氮，然后被有趣而深刻的內(nèi)容折服，最后因為數(shù)據(jù)的嚴謹性和對版權(quán)保護的注重而對整個作品好感度upup顷牌。擁有“才華”與“人品”卻沒有吸引人的“顏值”是一件很可惜的事情剪芍，往往會因為沒能獲得讀者的注意力而失去了展示內(nèi)容的機會。那么窟蓝，如何讓讀者對你的網(wǎng)頁“一見鐘情”罪裹？
一、你有這些選擇：首屏的分類
???????? 數(shù)據(jù)視覺化作品的首屏主要分為如下6類：
1运挫、全屏的靜態(tài)圖片状共，上襯文字；
《穿越胡線：臨界人生》
鏈接：http://image.thepaper.cn/html/zt/2017/08/huline/index.html
2滑臊、全屏的動態(tài)圖片口芍，上襯文字；
《格陵蘭項目》
鏈接：https://graphics.reuters.com/CLIMATECHANGE-GREENLAND/010080D30RJ/index.html
《穿越胡線：臨界人生-農(nóng)牧交錯》
鏈接：http://image.thepaper.cn/html/zt/2017/08/huline/nongmu.html
3雇卷、純色背景鬓椭，上襯文字颠猴；
《算法如何知道你將輸入什么》
鏈接：https://pudding.cool/2019/04/text-prediction/
4、多個圖片排列組合小染，上襯文字
5翘瓮、用數(shù)據(jù)交互作品襯以文字做首屏
《狼是如此接近》
鏈接：https://interaktiv.morgenpost.de/woelfe-in-deutschland/
《護照的權(quán)力》
鏈接：https://multimedia.scmp.com/culture/article/passportIndex/
6、直接進入內(nèi)容
《兩性收入對比》
鏈接：https://interaktiv.morgenpost.de/gender-pay-gap/
二裤翩、沒有無緣無故的愛：如何選擇適合內(nèi)容的首屏
1资盅、各類首屏自身的效果
? ? ? ?用全屏的靜態(tài)圖片做首屏背景是相對而言最容易做得好看而“高級”的方式，這種方式基本只有一個難點：獲得一張好看的踊赠、對內(nèi)容整體起概括作用的照片呵扛，并且這張照片需要適合為文字做襯底，即不能過于花哨筐带，有合適的位置放置文字今穿。這張照片如果不是自己拍攝的，則要注意版權(quán)問題（其他形式的插圖當然也要注意版權(quán)問題）伦籍，否則Visual China is watching you!《穿越胡線：臨界人生》的首屏原本是動態(tài)圖片蓝晒，但在未加載完全的情況下顯示的照片就很好地展示了作品的整體內(nèi)容，陽光與陰影形成的一條線將房屋和土地兩相分隔帖鸦。而且這張照片的風格也很符合作品的整體風格芝薇，為讀者營造了一種閱讀氛圍，富有沉浸感作儿。
? ? ? ?用全屏的動態(tài)圖片做首屏背景和用靜態(tài)圖片的原理較為相似洛二，需要額外注意的地方一個是動態(tài)圖片不能動得雜亂，主要是規(guī)律性地攻锰、較為緩慢地推拉搖移鏡頭灭红；另一個是動圖循環(huán)播放的銜接問題，在動圖從結(jié)尾到開始的切換過程中口注，盡量無縫銜接，這樣切換時才不會讓讀者感覺很突然君珠∏拗荆《穿越胡線：臨界人生-山河交錯》動態(tài)首屏的首位銜接過程就比較自然〔咛恚《格陵蘭項目》的首屏把動圖放在左側(cè)局部材部，右側(cè)放置標題，動圖呈規(guī)律性運動唯竹，整體背景為純色乐导，也是一種動圖的使用方式。
? ? ? ?用純色背景作為首屏可以使讀者的注意力全部聚集在標題上浸颓。為了加強這個效果物臂，許多使用純色背景作為首屏的作品都像《算法如何知道你將輸入什么》一樣旺拉，將標題逐字/字母顯示出來，這樣可以使顏色單一的首屏顯得不那么單調(diào)棵磷，同時也能進一步引起讀者的注意力蛾狗。此時，純色背景的顏色與標題的樣式和布局幾乎是我們能夠作文章的全部內(nèi)容仪媒，因此也就格外重要沉桌。背景的顏色不能違背讀者對內(nèi)容的基本認知，同時也要具有美學效果算吩。由于背景十分簡潔留凭，標題的樣式就可以多一些設計感，避免給人以單調(diào)的感覺偎巢。
? ? ? ?用多個圖片的排列組合作為首屏的做法相對少見蔼夜。這種首屏信息量大，需要讀者花時間來思考每個圖片的內(nèi)容以及圖片間的關系艘狭，因此挎扰，圖片之間必須具有強相關性，否則在首屏對多個圖片的呈現(xiàn)就是沒有意義的巢音。這里需要注意多個圖片的風格統(tǒng)一遵倦，以及標題如何放置才能不顯得雜亂。如果圖片是動態(tài)的官撼，那么動圖較長的加載時間也是開發(fā)者需要解決的問題梧躺。
? ? ? ?用交互作品襯以文字作為首屏可以使讀者盡快參與到作品中，也可以讓讀者盡快get到作品的用意傲绣。不過掠哥，這種呈現(xiàn)方式需要需要讀者devote更多，有些讀者可能會“怕麻煩”而放棄理解作品內(nèi)容的努力秃诵。因此续搀，一目了然的交互方式是非常必要的〔ぞ唬《狼是如此接近》首屏交互作品的交互方式就很容易讓人理解——隨著時間軸的自動運行禁舷，地圖上的點不斷變化，讀者也可以手動操縱時間軸毅往，來獲取自己想知道的某個時間點的信息牵咙。交互作品的自動運行實際上是一個教育讀者的過程，鼓勵讀者來動手參與到作品當中攀唯，體驗感較好洁桌。還有一些網(wǎng)頁是以小游戲作為首屏，像《護照的權(quán)力》侯嘀，采用的是相同的原理另凌。
2谱轨、各類首屏與網(wǎng)頁內(nèi)容的關系
? ? ? ?用全屏的靜態(tài)或動態(tài)圖片做首屏背景非常適用于有時代感的選題和有具體自然、社會背景的選題途茫。這類選題的終極目的往往是打動讀者碟嘴，因而十分需要為讀者營造出一種沉浸感，而且這類選題也比較容易拍出好看的照片和視頻囊卜∧壬龋《山河之間》系列作品的首屏圖片就散發(fā)著強烈的鄉(xiāng)野氣息，帶領讀者俯瞰廣闊中國大地上的那條有故事的胡線栅组。在首屏定下視角后雀瓢，讀者便會很容易地與接下來的內(nèi)容產(chǎn)生共鳴。
? ? ? ?用純色背景作為首屏特別適用于內(nèi)容偏干貨玉掸、理性的作品刃麸。用一張純色圖片就讓讀者有了讀下去的欲望，標題和內(nèi)容必須非常吸引人司浪，或者呈現(xiàn)出的是非常關鍵的內(nèi)容泊业。背景所選的顏色也要與內(nèi)容的顏色具有一致性，形成整體感啊易。
? ? ? ?用多個圖片的排列組合作為首屏主要適用于內(nèi)容復合程度較高的作品吁伺。各張圖片所體現(xiàn)的信息可以作為內(nèi)容的幾個部分，這幾個部分還需要可以進行有序地排列租谈。并且篮奄，這幾部分信息需要為一個大主題服務，多個圖片在首屏上的體現(xiàn)使得各部分信息與大主題之間的隸屬關系得以強化凸顯割去。
? ? ? ?用交互作品襯以文字作為首屏適用于以交互為主窟却、或非常希望拉近與讀者之間的距離的內(nèi)容。交互雖然可以做得十分炫酷呻逆，但不是什么內(nèi)容都適合做交互夸赫。如果網(wǎng)頁的內(nèi)容是展示、告知類信息咖城，那么靜態(tài)網(wǎng)頁反而可能更適合憔足，而且采用了靜態(tài)網(wǎng)頁之后，還可以將更多時間放在設計的打磨上酒繁。
三、Action! 各類首屏的制作技巧
1控妻、首屏上的小細節(jié)
? ? ? ?無論是哪一種首屏州袒，都可以在首屏的最上方加上網(wǎng)頁logo和作者的聯(lián)系方式，一個好看的logo可以在很大程度上提高網(wǎng)頁的辨識度弓候。
2郎哭、動圖的處理
? ? ? ? 在網(wǎng)頁上插入動圖有兩種方式：插入gif動圖和插入視頻他匪。gif優(yōu)勢在于加載速度較快，但畫質(zhì)往往比較差夸研，而視頻則相反邦蜜。無論是采用哪種方式，都需要考慮動圖是否循環(huán)播放的問題亥至，如果循環(huán)播放悼沈，還需要讓動圖的首尾銜接盡量自然。
3姐扮、從首屏到內(nèi)容的過渡
? ? ? ? 兩種過渡方式：一種是滾動絮供，將具有透明度的網(wǎng)頁背景和內(nèi)容一起滾動到首屏圖片上；另一種是用顏色漸變茶敏。
（待補充）
（今天我們的網(wǎng)頁定首屏了嗎壤靶？沒有）
