長(zhǎng)文字排版技巧:較長(zhǎng)的內(nèi)容在網(wǎng)頁設(shè)計(jì)中需要注意的問題
為了能夠讓用戶保持興趣不停讀下去,你必須提供令人愉悅的設(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)頁面內(nèi)容太長(zhǎng),用戶需要長(zhǎng)時(shí)間的滾動(dòng)翻頁,這個(gè)時(shí)候,頁面輔助導(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)出來了:
1、設(shè)計(jì)一個(gè)頂部大圖2、添加介紹性的文本3、加入高清大圖4、添加子標(biāo)題5、設(shè)計(jì)易于閱讀的正文文本6、在設(shè)計(jì)子章節(jié)內(nèi)容的時(shí)候,遵循3和5兩個(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)頁。
強(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)信息才是正確的思路。國家地理的"Hiking the Grand Canyon"使用大量的圖片和地圖來講述故事,相當(dāng)值得一看。
當(dāng)然,再好的東西也不能一次給太多。即使頁面設(shè)計(jì)的再好,一個(gè)頁面需要翻幾百次才看得玩,誰都受不了。
如果故事結(jié)束了,頁面也最好收尾,另外的故事,換一個(gè)頁面展現(xiàn)吧。
結(jié)語長(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à)值。
以上就是較長(zhǎng)的內(nèi)容在網(wǎng)頁設(shè)計(jì)中需要注意的問題介紹,教程很實(shí)用,大家學(xué)會(huì)了嗎?希望能對(duì)大家有所幫助!
相關(guān)文章

全畫幅不是半畫幅的兩倍有什么區(qū)別? 聊聊相機(jī)的傳感器尺寸
說到相機(jī)畫幅,估計(jì)平時(shí)聽到最多的可能就是全畫幅與半畫幅了,以至于不少人認(rèn)為中畫幅比全畫幅要小,為了避免這種常識(shí)性錯(cuò)誤,這篇文章就來和大家說說相機(jī)的不同畫幅,所謂2025-04-07
a5紙與a4紙?jiān)趺催x? a5紙與a4的區(qū)別介紹
4紙和A5紙因其尺寸適中,使用尤為廣泛,但你知道它們之間有何區(qū)別嗎?今天,就讓我們一起來探討這個(gè)話題2025-02-01
各類商務(wù)印刷品的尺寸怎么選? 印刷設(shè)計(jì)常用的尺寸紙張/克重都在這里了
日常經(jīng)常印刷各種東西,哪些尺寸,紙張更合適呢?本文為大家整理了常用印刷尺寸,方便圖文廣告店、印企在日常接單生產(chǎn)中能夠快速掌握客戶關(guān)鍵性信息,詳細(xì)請(qǐng)看下文介紹2024-02-10
常用照片尺寸有哪些 常見證件照尺寸對(duì)照表及用途介紹
現(xiàn)如今,證件照已成為我們生活中不可或缺的一部分,無論是求職應(yīng)聘,還是入學(xué)注冊(cè),亦或是辦理各種證件,都需要提交符合規(guī)定格式和要求的證件照,那么,這些證件照的尺寸和2024-02-10
平面設(shè)計(jì)是一個(gè)注重視覺效果的設(shè)計(jì),簡(jiǎn)單的排版方式有時(shí)候不能滿足視覺突出的效果,業(yè)務(wù)很難達(dá)到吸引用戶的眼球,下面我們就來看看8個(gè)平面設(shè)計(jì)技巧分享2023-10-08
如何選擇平面設(shè)計(jì)工具? 這10款軟件應(yīng)該收入囊中
每個(gè)設(shè)計(jì)師都有自己最喜歡的設(shè)計(jì)軟件,并把軟件作為自己的第二語言,今天我們來推薦10款UI設(shè)計(jì)不可或缺的工具,詳細(xì)請(qǐng)看下文介紹2023-10-08
夏日電影風(fēng)怎么調(diào)色調(diào)色? 適合夏季的柔和綠色調(diào)調(diào)色分享
夏日電影風(fēng)怎么調(diào)色調(diào)色?夏天快到了,想要調(diào)節(jié)夏季電影風(fēng)的畫面,該怎么操作呢?下面我們就來看看適合夏季的柔和綠色調(diào)調(diào)色分享2023-04-02
什么是真RAW 什么是偽RAW? 簡(jiǎn)單說說真 RAW 和 偽RAW
隨著索尼α7RV(ILCE-7RM5)正式發(fā)售,近期有不少網(wǎng)友跟我咨詢索尼相機(jī)“無損壓縮(M)”和“無損壓縮(S)”RAW的問題,今天做一個(gè)統(tǒng)一答復(fù)2022-12-24
手機(jī)UI設(shè)計(jì)尺寸有哪些? 超全面的UI元素尺寸設(shè)置指南
手機(jī)UI設(shè)計(jì)尺寸有哪些?作為新手在設(shè)計(jì)手機(jī)ui的頁面的時(shí)候,發(fā)現(xiàn)自己設(shè)計(jì)的尺寸都很奇怪,如果能有元素尺寸介紹就好了,下面就來看看我們匯總的超全面的UI元素尺寸設(shè)置指南2021-08-06
常用照片尺寸有哪幾個(gè)? 照片標(biāo)準(zhǔn)尺寸/像素對(duì)照表匯總
常用照片尺寸有哪幾個(gè)?我們經(jīng)常說一寸照片,二寸照片,這些照片的尺寸是怎么計(jì)算的?下面我們就來看看照片標(biāo)準(zhǔn)尺寸/像素對(duì)照表匯總2021-08-06









