如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里 

先撇開用戶興趣和碎片時間的爭論，我們來聊聊較長的內(nèi)容在網(wǎng)頁設(shè)計中應(yīng)當(dāng)注意的問題吧。對于網(wǎng)站和APP而言，長內(nèi)容，或者說長文，可能是內(nèi)容策略中最有價值的一個組成部分（前提是它并不是無聊內(nèi)容的堆砌）。用戶喜歡好故事，而長內(nèi)容所提供的沉浸式的閱讀感受則能夠為用戶提供引人入勝的體驗。

為了能夠讓用戶保持興趣不停讀下去，你必須提供令人愉悅的設(shè)計和交互，讓內(nèi)容從頭到尾的體驗都是一致的。想要達(dá)成這個目標(biāo)，需要有針對性地進(jìn)行設(shè)計。

大量的留白

長文的內(nèi)容如果堆積到一起，是相當(dāng)具有壓迫力的，所以，讓用戶不會為之厭倦，空間的運(yùn)用是首要的技巧。

如果文章內(nèi)容看起來太重，用戶肯定會為之感到恐懼的。通過合理的留白和排版設(shè)計，讓長文更容易為用戶所瀏覽和快速掃視，讓內(nèi)容的視覺重量相應(yīng)的降低，讓它們看起來更加友好。

你可以考慮控制下面的留白來達(dá)到降低視覺重量的目的：

·控制內(nèi)容和屏幕邊緣之間的間距
·控制行間距和段間距
·圖片、視頻等非文本視覺元素周圍的留白

有目的地運(yùn)用動效

當(dāng)頁面內(nèi)容太長，用戶需要長時間的滾動翻頁，這個時候，頁面輔助導(dǎo)航的視覺線索就顯得非常重要了。你可以考慮使用引導(dǎo)性的動效，比如箭頭、按鈕或者視差，用以引導(dǎo)用戶。

這些微小的動效通常不會給長文或者故事帶來割裂性的體驗，甚至?xí)層脩粼跒g覽過程中感受到愉悅。

視頻動畫則是吸引用戶的另外一個利器。雖然絕大多數(shù)的視頻會打破長內(nèi)容的閱讀流暢性，但是它可以為用戶瀏覽提供一個修整調(diào)劑的機(jī)會，也可以置于開頭，作為一個引子。

無論你是打算置于長文開頭作為介紹，還是置于中間用作間隔，都盡量保持簡短，盡量不要讓它自動播放，可能會分散用戶的注意力。

視差滾動這種手法也相當(dāng)值得運(yùn)用，一邊瀏覽一邊有動畫“隨之舞動”的體驗是相當(dāng)有趣的。相當(dāng)值得注意的是，視差滾動的動效不需要復(fù)雜，簡單的動效不僅節(jié)省性能，而且不會喧賓奪主，保持引人入勝的體驗的同時還不打斷閱讀。

加入插畫

對于長文而言，插畫是必不可少的組成部分。如果你的內(nèi)容正好是故事的話，插畫的優(yōu)勢就顯得更加明顯了。

將插圖分散地加入到文章的各個部分，能夠強(qiáng)化內(nèi)容的故事性，提升用戶的體驗和參與度，圖文并舉能夠讓用戶更輕松獲取信息。這種技巧對于小說和缺少清晰視覺形象的文本而言，特別有用。

有策略地配圖

配圖的放置位置其實是很有技巧的。一些好的長文在圖文搭配上其實是遵循一定套路的，因為要讓整體符合美學(xué)特征，閱讀流暢，還要讓文字和圖片配比正確，整個規(guī)則就不難推導(dǎo)出來了：

１、設(shè)計一個頂部大圖
２、添加介紹性的文本
３、加入高清大圖
４、添加子標(biāo)題
５、設(shè)計易于閱讀的正文文本
６、在設(shè)計子章節(jié)內(nèi)容的時候，遵循３和５兩個步驟

絕大多數(shù)的圖片應(yīng)當(dāng)進(jìn)行適當(dāng)縮放，居中顯示，內(nèi)容不要環(huán)繞在周圍。這種排版方式基本上是模仿傳統(tǒng)的圖書排版來的，這種方式為用戶來帶自然的閱讀流程和舒適的體驗。

這種設(shè)計流程幾乎適合所有的數(shù)碼設(shè)備的長文內(nèi)容設(shè)計，不論是手機(jī)、平板還是桌面端網(wǎng)頁。

強(qiáng)化文本閱讀體驗

不要害怕創(chuàng)造優(yōu)質(zhì)的閱讀體驗。既然是長文，大量的文本是不可避免的。你沒有必要為每一張圖片搭配一個風(fēng)騷的動畫效果，但是你一定要做好排版，確保流暢的閱讀感受，讓用戶始終能夠保持閱讀的興趣。

·在長文中借助大量的子標(biāo)題將文章分隔成不同的章節(jié)，讓字體大小和正文區(qū)分開，讓用戶一眼可辨。
·使用粗體、色彩和斜體讓特定的段落或者句子更加引人注意。
·使用引用的文本信息，便于用戶抓住內(nèi)容核心。

滾動應(yīng)該是直觀的

滾動操作并不是新東西，所以你應(yīng)當(dāng)讓滾動操作顯得直觀，特別是當(dāng)你在滾動過程中加入一些不一樣的東西的時候。

炫酷的滾動效果，比如視差滾動，能夠提升長文的閱讀體驗。但是這種設(shè)計千萬不能過，滾動的應(yīng)當(dāng)符合用戶的基本預(yù)期，而不是過于意外。

滾動閱讀的體驗應(yīng)當(dāng)和內(nèi)容無縫地整合起來，用戶在瀏覽信息的過程中，滾動應(yīng)當(dāng)有助于內(nèi)容的可讀性，而不是干擾。

呈現(xiàn)進(jìn)度

Medium 最大的特點是每篇文章都會標(biāo)識上平均閱讀時間。而Polygon 則會在屏幕左側(cè)展示閱讀的進(jìn)度，用戶在閱讀的過程中能夠清晰的判斷閱讀的進(jìn)度，并且能夠?qū)ψ罱K花費的時間有一個明顯的預(yù)期。

每一個閱讀進(jìn)度“里程碑”的完成，都能給用戶帶來一定的成就感。

另外一種為用戶展現(xiàn)進(jìn)度的設(shè)計，則是將內(nèi)容直接劃分為不同的章節(jié)，并且提供相應(yīng)的導(dǎo)航進(jìn)度條。這種進(jìn)度條不僅可以幫助用戶跳過特定的章節(jié)，而且更加便于返回特定的位置。這種設(shè)計能夠讓用戶便捷的掌控長文的內(nèi)容，獲得閱讀的愉悅感。

講述一個驚艷的故事

好的長文大多是從一個好故事開始的。如果你需要將一個故事講述給別人，那么用長內(nèi)容來展示可能是最佳答案。

但是，千萬不要被慣性思維給限制住，長內(nèi)容并不一定必須是純文字的。用最合理的媒介來呈現(xiàn)信息才是正確的思路。國家地理的“Hiking the Grand Canyon”使用大量的圖片和地圖來講述故事，相當(dāng)值得一看。

當(dāng)然，再好的東西也不能一次給太多。即使頁面設(shè)計的再好，一個頁面需要翻幾百次才看得玩，誰都受不了。

如果故事結(jié)束了，頁面也最好收尾，另外的故事，換一個頁面展現(xiàn)吧。

結(jié)語

長內(nèi)容的可以讓你的網(wǎng)站擁有超越視覺美感的吸引力，給用戶的愉悅感就不僅僅源自于眼睛。對于小企業(yè)而言，優(yōu)質(zhì)的長內(nèi)容能夠給網(wǎng)站帶來更強(qiáng)的黏度以及更快的排名提升速度，在品牌建設(shè)和社交媒體上，這些長內(nèi)容都能帶來更多的價值。

藍(lán)藍(lán)設(shè)計( m.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù) 。