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

        為了能夠讓用戶保持興趣不停讀下去，你必須提供令人愉悅的設(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)容看起來太重，用戶肯定會(huì)為之感到恐懼的。通過合理的留白和排版設(shè)計(jì)，讓長(zhǎng)文更容易為用戶所瀏覽和快速掃視，讓內(nèi)容的視覺重量相應(yīng)的降低，讓它們看起來更加友好。

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

        ·控制內(nèi)容和屏幕邊緣之間的間距

        ·控制行間距和段間距

        ·圖片、視頻等非文本視覺元素周圍的留白

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

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

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

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

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

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

        加入插畫

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

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

        有策略地配圖

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

        １、設(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)的圖書排版來的，這種方式為用戶來帶自然的閱讀流程和舒適的體驗(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)文，大量的文本是不可避免的。你沒有必要為每一張圖片搭配一個(gè)風(fēng)騷的動(dòng)畫效果，但是你一定要做好排版，確保流暢的閱讀感受，讓用戶始終能夠保持閱讀的興趣。

        ·在長(zhǎng)文中借助大量的子標(biāo)題將文章分隔成不同的章節(jié)，讓字體大小和正文區(qū)分開，讓用戶一眼可辨。

        ·使用粗體、色彩和斜體讓特定的段落或者句子更加引人注意。

        ·使用引用的文本信息，便于用戶抓住內(nèi)容核心。

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

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

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

        滾動(dòng)閱讀的體驗(yàn)應(yīng)當(dāng)和內(nèi)容無縫地整合起來，用戶在瀏覽信息的過程中，滾動(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)度，用戶在閱讀的過程中能夠清晰的判斷閱讀的進(jìn)度，并且能夠?qū)ψ罱K花費(fèi)的時(shí)間有一個(gè)明顯的預(yù)期。

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

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

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

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

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

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

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

        結(jié)語(yǔ)

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