簡單幾招教你輕鬆做出高階感設計!

對於網頁或者APP來說,比較長的內容或者大量的文字,可能是內容策略中最有價值的一個組成部分,當然這些都不是無用的內容堆積。使用者比較喜歡好的故事,而長內容所提供的沉浸式的閱讀感則能為使用者提供引人入勝的體驗。

簡單幾招教你輕鬆做出高階感設計!

為了能夠讓使用者保持興趣不停讀下去,必須提供令人愉悅的設計和互動,讓內容從頭到尾的體驗都是一致的。

簡單幾招教你輕鬆做出高階感設計!

長文的內容如果堆積到一起,是相當具有壓迫力的,所以,讓使用者不會為之厭倦,空間的運用是首要的技巧。

簡單幾招教你輕鬆做出高階感設計!

如果內容看起來太重,使用者肯定會為之感到恐懼的,透過合理的留白和排版設計,讓長文更容易為使用者所瀏覽和快速掃視,讓內容的視覺重量相應的降低,讓它們看起來更加友好。

簡單幾招教你輕鬆做出高階感設計!

你可以考慮控制以下幾種留白來達到降低視覺重量的目的:

·控制內容和螢幕邊緣之間的間距

·控制行間距和段間距

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

簡單幾招教你輕鬆做出高階感設計!

當頁面內容太長,使用者需要長時間的滾動翻頁,這個時候,頁面輔助導航的視覺線索就顯得非常重要了。你可以考慮使用引導性的動效,比如箭頭、按鈕或者視差特效,用以引導使用者。

案例展示

這些微小的動效通常不會給長文或者故事帶來割裂性的體驗,甚至會讓使用者在瀏覽過程中感受到愉悅。

簡單幾招教你輕鬆做出高階感設計!

影片動畫則是吸引使用者的另外一個利器。雖然絕大多數的影片會打破長內容的閱讀流暢性,但是它可以為使用者瀏覽提供一個修整調劑的機會,也可以置於開頭,作為一個引子。

案例展示

無論你是打算置於長文開頭作為介紹,還是置於中間用作間隔,都儘量保持簡短,儘量不要讓它自動播放,可能會分散使用者的注意力。

視差滾動這種手法也相當值得運用,一邊瀏覽一邊有動畫“隨之舞動”的體驗是相當有趣的。相當值得注意的是,視差滾動的動效不需要複雜,簡單的動效不僅節省效能,而且不會喧賓奪主,保持引人入勝的體驗的同時還不打斷閱讀。

簡單幾招教你輕鬆做出高階感設計!

對於長文而言,插畫是必不可少的組成部分。如果你的內容正好是故事的話,插畫的優勢就顯得更加明顯了。

簡單幾招教你輕鬆做出高階感設計!

簡單幾招教你輕鬆做出高階感設計!

將插圖分散地加入到文章的各個部分,能夠強化內容的故事性,提升使用者的體驗和參與度,圖文並舉能夠讓使用者更輕鬆獲取資訊。這種技巧對於小說和缺少清晰視覺形象的文字而言,特別有用。

簡單幾招教你輕鬆做出高階感設計!

配圖的放置位置其實是很講究技巧的,一些好的長文在圖文搭配上其實是遵循一定套路的,因為要讓整體符合美學特徵,閱讀流暢,還要讓文字和圖片配比正確,整個規則就不難推匯出來了:例如設計一個頂部大圖、新增介紹性的文字、加入高畫質大圖、新增子標題、設計易於閱讀的正文文字……

簡單幾招教你輕鬆做出高階感設計!

簡單幾招教你輕鬆做出高階感設計!

簡單幾招教你輕鬆做出高階感設計!

絕大多數的圖片應當進行適當縮放,居中顯示,內容不要環繞在周圍。這種排版方式基本上是模仿傳統的圖書排版來的,這種方式為使用者來帶自然的閱讀流程和舒適的體驗。

簡單幾招教你輕鬆做出高階感設計!

不要害怕創造優質的閱讀體驗,既然是長文,大量的文字是不可避免的。你沒有必要為每一張圖片搭配一個風騷的動畫效果,但是你一定要做好排版,確保流暢的閱讀感受,讓使用者始終能夠保持閱讀的興趣。

簡單幾招教你輕鬆做出高階感設計!

使用粗體、色彩和斜體讓特定的段落或者句子更加引人注意,使用引用的文字資訊,便於使用者抓住內容核心。

簡單幾招教你輕鬆做出高階感設計!

滾動操作並不是新東西,所以你應當讓滾動操作顯得直觀,特別是當你在滾動過程中加入一些不一樣的東西的時候。

簡單幾招教你輕鬆做出高階感設計!

炫酷的滾動效果,比如視差滾動,能夠提升長文的閱讀體驗,滾動閱讀的體驗應當和內容無縫地整合起來,使用者在瀏覽資訊的過程中,滾動特效應當有助於內容的可讀性,而不是干擾。

簡單幾招教你輕鬆做出高階感設計!

Medium 最大的特點是每篇文章都會標識上平均閱讀時間。而Polygon 則會在螢幕左側展示閱讀的進度,使用者在閱讀的過程中能夠清晰的判斷閱讀的進度,並且能夠對最終花費的時間有一個明顯的預期。

另外一種為使用者展現進度的設計,則是將內容直接劃分為不同的章節,並且提供相應的導航進度條。這種進度條不僅可以幫助使用者跳過特定的章節,而且更加便於返回特定的位置。這種設計能夠讓使用者便捷的掌控長文的內容,獲得閱讀的愉悅感。

簡單幾招教你輕鬆做出高階感設計!

好的長文大多是從一個好故事開始的,如果你需要將一個故事講述給別人,那麼用長內容來展示可能是最佳答案。

簡單幾招教你輕鬆做出高階感設計!

簡單幾招教你輕鬆做出高階感設計!

但是,千萬不要被慣性思維給限制住,長內容並不一定必須是純文字的。用最合理的媒介來呈現資訊才是正確的思路。國家地理的“Hiking the Grand Canyon”使用大量的圖片和地圖來講述故事,相當值得一看。

當然,再好的東西也不能一次給太多。即使頁面設計的再好,一個頁面需要翻幾百次才看得完,誰都受不了。

簡單幾招教你輕鬆做出高階感設計!

如果故事結束了,頁面也最好收尾,另外的故事可以換一個頁面來展現。

長內容可以讓你的網站擁有超越視覺美感的吸引力,給使用者的愉悅感就不僅僅源自於眼睛。對於小企業而言,優質的長內容能夠給網站帶來更強的黏度以及更快的排名提升速度,在品牌建設和社交媒體上,這些長內容都能帶來更多的價值。

簡單幾招教你輕鬆做出高階感設計!

2022版設計師收費價目表【建議收藏】

簡單幾招教你輕鬆做出高階感設計!

設計排版中,如何選擇字型搭配使用?

簡單幾招教你輕鬆做出高階感設計!

什麼?#元宇宙#是設計師從業的新領域