先撇開用戶興趣和碎片時間的爭論,我們來聊聊較長的內(nèi)容在網(wǎng)頁設(shè)計中應(yīng)當(dāng)注意的問題吧。對于網(wǎng)站和APP而言,長內(nèi)容,或者說長文,可能是內(nèi)容策略中最有價值的一個組成部分(前提是它并不是無聊內(nèi)容的堆砌)。用戶喜歡好故事,而長內(nèi)容所提供的沉浸式的閱讀感受則能夠為用戶提供引人入勝的體驗。接下來,互諾科技為大家介紹一下,網(wǎng)頁設(shè)計長文排版都有哪些方法。
為了能夠讓用戶保持興趣不停讀下去,你必須提供令人愉悅的設(shè)計和交互,讓內(nèi)容從頭到尾的體驗都是一致的。想要達(dá)成這個目標(biāo),需要有針對性地進(jìn)行設(shè)計。
大量的留白
長文的內(nèi)容如果堆積到一起,是相當(dāng)具有壓迫力的,所以,讓用戶不會為之厭倦,空間的運用是首要的技巧。
如果文章內(nèi)容看起來太重,用戶肯定會為之感到恐懼的。通過合理的留白和排版設(shè)計,讓長文更容易為用戶所瀏覽和快速掃視,讓內(nèi)容的視覺重量相應(yīng)的降低,讓它們看起來更加友好。
你可以考慮控制下面的留白來達(dá)到降低視覺重量的目的:
·控制內(nèi)容和屏幕邊緣之間的間距
·控制行間距和段間距
·圖片、視頻等非文本視覺元素周圍的留白
有目的地運用動效
當(dāng)頁面內(nèi)容太長,用戶需要長時間的滾動翻頁,這個時候,頁面輔助導(dǎo)航的視覺線索就顯得非常重要了。你可以考慮使用引導(dǎo)性的動效,比如箭頭、按鈕或者視差特效,用以引導(dǎo)用戶。
這些微小的動效通常不會給長文或者故事帶來割裂性的體驗,甚至?xí)層脩粼跒g覽過程中感受到愉悅。
視頻動畫則是吸引用戶的另外一個利器。雖然絕大多數(shù)的視頻會打破長內(nèi)容的閱讀流暢性,但是它可以為用戶瀏覽提供一個修整調(diào)劑的機(jī)會,也可以置于開頭,作為一個引子。
無論你是打算置于長文開頭作為介紹,還是置于中間用作間隔,都盡量保持簡短,盡量不要讓它自動播放,可能會分散用戶的注意力。
視差滾動這種手法也相當(dāng)值得運用,一邊瀏覽一邊有動畫“隨之舞動”的體驗是相當(dāng)有趣的。相當(dāng)值得注意的是,視差滾動的動效不需要復(fù)雜,簡單的動效不僅節(jié)省性能,而且不會喧賓奪主,保持引人入勝的體驗的同時還不打斷閱讀。
加入插畫
對于長文而言,插畫是必不可少的組成部分。如果你的內(nèi)容正好是故事的話,插畫的優(yōu)勢就顯得更加明顯了。
將插圖分散地加入到文章的各個部分,能夠強(qiáng)化內(nèi)容的故事性,提升用戶的體驗和參與度,圖文并舉能夠讓用戶更輕松獲取信息。這種技巧對于小說和缺少清晰視覺形象的文本而言,特別有用。
有策略地配圖
配圖的放置位置其實是很有技巧的。一些好的長文在圖文搭配上其實是遵循一定套路的,因為要讓整體符合美學(xué)特征,閱讀流暢,還要讓文字和圖片配比正確,整個規(guī)則就不難推導(dǎo)出來了:
1、設(shè)計一個頂部大圖
2、添加介紹性的文本
3、加入高清大圖
4、添加子標(biāo)題
5、設(shè)計易于閱讀的正文文本
6、在設(shè)計子章節(jié)內(nèi)容的時候,遵循3和5兩個步驟
絕大多數(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)容都能帶來更多的價值。