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

先撇開(kāi)用戶興趣和碎片時(shí)間的爭(zhēng)論，我們來(lái)聊聊較長(zhǎng)的內(nèi)容在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)當(dāng)注意的問(wèn)題吧。對(duì)于網(wǎng)站和APP而言，長(zhǎng)內(nèi)容，或者說(shuō)長(zhǎng)文，可能是內(nèi)容策略中最有價(jià)值的一個(gè)組成部分（前提是它并不是無(wú)聊內(nèi)容的堆砌）。用戶喜歡好故事，而長(zhǎng)內(nèi)容所提供的沉浸式的閱讀感受則能夠?yàn)橛脩籼峁┮巳雱俚捏w驗(yàn)。

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

大量的留白

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

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

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

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

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

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

這些微小的動(dòng)效通常不會(huì)給長(zhǎng)文或者故事帶來(lái)割裂性的體驗(yàn)，甚至?xí)層脩粼跒g覽過(guò)程中感受到愉悅。

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

無(wú)論你是打算置于長(zhǎng)文開(kāi)頭作為介紹，還是置于中間用作間隔，都盡量保持簡(jiǎn)短，盡量不要讓它自動(dòng)播放，可能會(huì)分散用戶的注意力。

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

加入插畫(huà)

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

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

有策略地配圖

配圖的放置位置其實(shí)是很有技巧的。一些好的長(zhǎng)文在圖文搭配上其實(shí)是遵循一定套路的，因?yàn)橐屨w符合美學(xué)特征，閱讀流暢，還要讓文字和圖片配比正確，整個(gè)規(guī)則就不難推導(dǎo)出來(lái)了：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

講述一個(gè)驚艷的故事

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

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

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

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

結(jié)語(yǔ)

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

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