; 先(xian)撇開用戶興趣和碎片(pian)時間的(de)爭論(lun)，我們來聊聊較(jiao)長的(de)內容在網(wang)頁設計中(zhong)應(ying)當注意的(de)問(wen)題吧(ba)。對于網(wang)站和APP而(er)言，長內(nei)容(rong)，或(huo)者說長文，可能是內(nei)容(rong)策略中(zhong)最有價(jia)值的(de)(de)(de)一(yi)個組成部分（前提(ti)是它并不(bu)是無(wu)聊內(nei)容(rong)的(de)(de)(de)堆砌）。用(yong)戶(hu)喜歡好故事，而(er)長內(nei)容(rong)所提(ti)供(gong)的(de)(de)(de)沉(chen)浸(jin)式(shi)的(de)(de)(de)閱讀感(gan)受(shou)則能夠為(wei)用(yong)戶(hu)提(ti)供(gong)引人(ren)入勝的(de)(de)(de)體驗。接下(xia)來，互(hu)諾科技為(wei)大家介(jie)紹一(yi)下(xia)，網頁設計(ji)長文排版都(dou)有哪些方法。

        為了能夠讓(rang)用戶保持興趣(qu)不(bu)停(ting)讀(du)下(xia)去，你必須提供令人愉悅的設計(ji)和交(jiao)互，讓(rang)內容從頭到(dao)尾的體驗(yan)都是一致的。想要達成這(zhe)個(ge)目(mu)標(biao)，需要有(you)針(zhen)對性地進行設計(ji)。

        大量的(de)留白

        長文的內容如果堆積到(dao)一(yi)起(qi)，是(shi)相當具有壓迫力的，所(suo)以，讓用戶不會為之厭倦，空間的運(yun)用是(shi)首(shou)要(yao)的技巧。

        如果文(wen)章內容看(kan)(kan)起來太重，用(yong)戶肯(ken)定(ding)會(hui)為之感到恐懼的(de)。通過合(he)理(li)的(de)留白和排版設計，讓長(chang)文(wen)更(geng)容易為用(yong)戶所瀏覽(lan)和快(kuai)速(su)掃(sao)視，讓內容的(de)視覺重量相應的(de)降低(di)，讓它們(men)看(kan)(kan)起來更(geng)加友好。

        你可以(yi)考慮控(kong)制下面的(de)留白(bai)來達到降(jiang)低視覺重量的(de)目(mu)的(de)：

        ·控制內(nei)容和(he)屏幕邊緣之間的(de)間距

        ·控制行間距和(he)段間距

        ·圖片、視(shi)頻等非文本(ben)視(shi)覺元素周圍的留(liu)白

        有(you)目的(de)地運用(yong)動效

        當(dang)頁面內容太長，用戶需要(yao)長時(shi)間的(de)(de)滾(gun)動翻頁，這個(ge)時(shi)候，頁面輔助導(dao)航(hang)的(de)(de)視覺線索就(jiu)顯得(de)非常重要(yao)了。你(ni)可(ke)以考(kao)慮使(shi)用引(yin)導(dao)性(xing)的(de)(de)動效，比如箭頭(tou)、按(an)鈕(niu)或者視差特效，用以引(yin)導(dao)用戶。

   ;     這些微(wei)小的(de)動效通常不會給長文或(huo)者故事帶(dai)來割(ge)裂(lie)性的(de)體驗(yan)，甚至會讓(rang)用戶在瀏(liu)覽過(guo)程中感受到(dao)愉悅(yue)。

        視頻(pin)動畫則是吸引(yin)用(yong)戶(hu)的(de)(de)另外(wai)一個(ge)利(li)器。雖然絕大多數的(de)(de)視頻(pin)會打破長內容的(de)(de)閱(yue)讀流暢性，但是它可(ke)以為用(yong)戶(hu)瀏覽(lan)提供一個(ge)修整調劑的(de)(de)機(ji)會，也可(ke)以置于開頭，作為一個(ge)引(yin)子。

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

        視差(cha)滾動這種手法也相當(dang)值得運用，一(yi)(yi)邊瀏覽一(yi)(yi)邊有(you)動畫“隨之舞動”的(de)體驗是相當(dang)有(you)趣的(de)。相當(dang)值得注意的(de)是，視差(cha)滾動的(de)動效不(bu)(bu)需要(yao)復雜(za)，簡單的(de)動效不(bu)(bu)僅節省性(xing)能，而且不(bu)(bu)會喧賓奪(duo)主，保持(chi)引(yin)人入勝(sheng)的(de)體驗的(de)同(tong)時還(huan)不(bu)(bu)打斷(duan)閱讀(du)。

        加入插(cha)畫

        對(dui)于長文而言(yan)，插畫是必不可少的組(zu)成部分(fen)。如果(guo)你的內(nei)容正好(hao)是故(gu)事的話，插畫的優勢就顯得更加明(ming)顯了(le)。

將插(cha)圖分散地加入(ru)到(dao)文(wen)章的(de)各個部分，能夠(gou)強化內容的(de)故事性，提(ti)升用(yong)戶的(de)體驗(yan)和參與度，圖文(wen)并舉能夠(gou)讓用(yong)戶更輕松(song)獲(huo)取信(xin)息。這(zhe)種技巧(qiao)對于小說和缺少清晰視覺(jue)形象的(de)文(wen)本而言，特別有用(yong)。

        有(you)策略地配圖(tu)

        ;配圖的放置位置其實是(shi)很有技(ji)巧(qiao)的。一些好的長文在圖文搭配上其實是(shi)遵循一定套路的，因為要讓(rang)整體符(fu)合美學(xue)特征，閱讀流暢(chang)，還要讓(rang)文字(zi)和圖片(pian)配比正確，整個規則就不難推導出來(lai)了：

        １、設計一個頂部大(da)圖

        ２、添加介紹(shao)性的文(wen)本

        ３、加入(ru)高(gao)清大圖

        ４、添加(jia)子標題

        ５、設計易于閱讀的正(zheng)文(wen)文(wen)本(ben)

        ６、在設計子(zi)章節內容的時(shi)候(hou)，遵(zun)循３和(he)５兩個(ge)步驟

        絕大多數的(de)圖片應當進(jin)行適當縮(suo)放，居(ju)中顯(xian)示，內容不(bu)要環繞在周圍。這種排版方(fang)式基(ji)本上是(shi)模(mo)仿傳統的(de)圖書排版來的(de)，這種方(fang)式為用戶來帶自然的(de)閱(yue)讀流程(cheng)和舒(shu)適的(de)體驗(yan)。

        這種(zhong)設(she)計流程(cheng)幾乎(hu)適(shi)合所有的數(shu)碼設(she)備的長文內容(rong)設(she)計，不論是(shi)(shi)手(shou)機、平板還是(shi)(shi)桌面端網頁。

        強化文本閱讀體驗(yan)

        不要(yao)害怕創(chuang)造優(you)質(zhi)的(de)(de)(de)閱(yue)(yue)(yue)讀(du)(du)(du)體(ti)驗。既然是(shi)長文，大量的(de)(de)(de)文本是(shi)不可(ke)避免的(de)(de)(de)。你沒有必要(yao)為每一張圖片搭配(pei)一個風(feng)騷的(de)(de)(de)動(dong)畫(hua)效果，但是(shi)你一定要(yao)做(zuo)好排版，確保(bao)(bao)流暢的(de)(de)(de)閱(yue)(yue)(yue)讀(du)(du)(du)感受，讓(rang)用戶始終能夠保(bao)(bao)持(chi)閱(yue)(yue)(yue)讀(du)(du)(du)的(de)(de)(de)興趣(qu)。

        ·在長文中借助大量(liang)的子標題將文章分隔成不同的章節(jie)，讓字體大小和(he)正文區(qu)分開，讓用戶一眼可(ke)辨。

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

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

        滾動應該是直(zhi)觀的(de)

        滾(gun)(gun)動(dong)(dong)操(cao)作并不(bu)是新(xin)東(dong)西(xi)(xi)，所以你(ni)應當讓滾(gun)(gun)動(dong)(dong)操(cao)作顯得直觀，特別(bie)是當你(ni)在(zai)滾(gun)(gun)動(dong)(dong)過程中加入一些不(bu)一樣的東(dong)西(xi)(xi)的時候。

炫酷的(de)(de)滾(gun)動效(xiao)果(guo)，比如視差滾(gun)動，能(neng)夠提(ti)升長文的(de)(de)閱(yue)讀(du)體驗。但(dan)是這種設計千萬不能(neng)過，滾(gun)動的(de)(de)特效(xiao)應當符(fu)合用戶(hu)的(de)(de)基本(ben)預期，而(er)不是過于意(yi)外(wai)。

        滾動閱(yue)讀(du)的體驗應當(dang)(dang)和(he)內(nei)容(rong)無(wu)縫地(di)整合(he)起來(lai)，用戶在瀏覽信息的過程中(zhong)，滾動特效應當(dang)(dang)有助于(yu)內(nei)容(rong)的可(ke)讀(du)性，而不是干擾。

        呈現進度

        Medium 最大(da)的特點是每(mei)篇文章都會標識上平均(jun)閱讀時間。而Polygon 則會在(zai)屏幕左側展示閱讀的進(jin)度(du)，用戶在(zai)閱讀的過程中能夠(gou)清晰的判斷閱讀的進(jin)度(du)，并(bing)且能夠(gou)對最終花費的時間(jian)有一個明(ming)顯的預期(qi)。

   ;     每一個(ge)閱讀進度“里程碑(bei)”的完成，都能給(gei)用戶帶來一定(ding)的成就感。

        另外(wai)一種為(wei)用(yong)戶展現進度的(de)(de)(de)設(she)計(ji)，則是將內容(rong)直接劃分為(wei)不(bu)同(tong)的(de)(de)(de)章節，并且提供相(xiang)應的(de)(de)(de)導航進度條。這種進度條不(bu)僅可以幫助用(yong)戶跳過特定的(de)(de)(de)章節，而且更加便于返回特定的(de)(de)(de)位置。這種設(she)計(ji)能(neng)夠讓用(yong)戶便捷的(de)(de)(de)掌控(kong)長文(wen)的(de)(de)(de)內容(rong)，獲得閱(yue)讀的(de)(de)(de)愉(yu)悅感。

        講述一個驚(jing)艷的故事

        好的(de)(de)長文大多是從一個(ge)好故事(shi)開始的(de)(de)。如果你需要(yao)將一個(ge)故事(shi)講述給別人(ren)，那么用(yong)長內(nei)容(rong)來展示可能是最佳答案(an)。

        但是(shi)，千萬不(bu)要(yao)被慣性思(si)維給限制住，長(chang)內容并(bing)不(bu)一定必(bi)須是(shi)純文(wen)字的。用(yong)最合理的媒介來呈現信息才是(shi)正確的思(si)路。國(guo)家地理的“Hiking the Grand Canyon”使用大量(liang)的圖(tu)片和地圖(tu)來(lai)講(jiang)述故(gu)事，相(xiang)當(dang)值(zhi)得(de)一看。

        當然，再(zai)好(hao)的東西也不(bu)能一(yi)次給(gei)太多。即(ji)使頁面設(she)計的再(zai)好(hao)，一(yi)個頁面需要(yao)翻(fan)幾百次才看得玩，誰都受不(bu)了(le)。

如果故(gu)事(shi)結束了(le)，頁面也最好(hao)收尾(wei)，另外(wai)的故(gu)事(shi)，換一個頁面展現吧。

        結語

        長(chang)內(nei)容(rong)的可(ke)以(yi)讓你的網(wang)站(zhan)擁(yong)有超越視覺美感的吸引力(li)，給(gei)用戶的愉悅感就不僅(jin)僅(jin)源自于眼睛(jing)。對于小企業而言，優質的長(chang)內(nei)容(rong)能夠給(gei)網(wang)站(zhan)帶(dai)來更強(qiang)的黏度以(yi)及更快(kuai)的排(pai)名提升速度，在(zai)品牌建設(she)和社(she)交媒體上，這些長(chang)內(nei)容(rong)都(dou)能帶(dai)來更多的價值。