長文的數字排版與閱讀

專業博客《字體排印》最近一篇關於長文的數字排版與閱讀的探討,其中關於分頁和滾動條的部分很值得分析,先來考究下分頁的好處:

頁面分批顯示。 在網頁加載數據時,會根據下載速度和用戶需求下載固定的條目,如搜索引擎一頁顯示10條。同時頁碼是條目的排序方式或者叫數據的坐標,比如第5頁的第8條。

便於查找。 當數據量很大時,橫向坐標可以無限延伸,而縱向坐標是固定的,便於用戶查找。如果每頁顯示30條,原先的數據變為是第2頁第18條,每頁標號的話查找記錄比較麻煩。

便於記憶。 分頁有助於用戶對數據形成知識結構,之前對比過iPhone和Android應用程序的顯示方式,iPhone以每頁4*4的方式顯示,比如某應用程序在第5頁2*2(橫向坐標*縱向坐標)的位置,Android如不添加快捷方式,應用程序查找起來很不方便,比如某應用程序在2*10的位置。雖然Android的應用程序是按字母排序的,但是當想起名稱再去查找時,圖標就失去其指示意義。

數據總量和定位。 總頁碼起到顯示數據量的作用,當前頁碼是顯示目前所處坐標或者進度,比如第12頁/共50頁。

page



圖片來自yslow

每個分頁程序都包含了不少信息量,但它並不是必須的。分頁需要手動點擊,會打斷用戶閱讀,有可能影響用戶關注主要內容。

傳統是按縱向排版和按分頁顯示,改​​進版的單頁內容自動延伸,如手機sina微博、Google的圖片搜索結果和博客ignorethecode。當用戶關心的是內容本身,而內容所處坐標屬於無用信息時,下載限制、用戶需求和分頁的好處不再存在。用戶按順序閱讀之後對已讀數據並不會經常反複查找,通過分頁建立的坐標就失去主要意義了。

比如sina的web微博不支持自動翻頁,某條消息在第2頁第6條,重新刷新之後坐標也會發生變化,用戶可以按時間的順序查找。微博信息的排列是基於時間軸的一維坐標,而分頁結果建立是二維坐標。

22

WP7的部分頁面橫向排版,網頁設計也有相似的應用(如1, 2)。

mzl.laylvtqp.480x480-75 mzl.wrebvvhs.480x480-75

iPad版BMW雜誌

cooper

cooper.com

橫向縱向組合排版,如iPad的BMW雜誌橫向滾動更換頁面主題,縱向滾動更新主題中內容,Cooper網站也有同樣的排版方式,屬於單頁和弱化分頁的設計。

ibooks

《字體排印》中提到的iBook的模擬厚度變化是擬物化設計,閱讀時無論第一頁還是最後一頁並沒發現厚度有變化。即使真的這樣設計了,每翻1/6的書,右邊象徵性減少一頁,對於上百頁的電子書來說,意義並不大,並不能達到真實書籍的閱讀成就感。

mzl.wktgtqrd.480x480-75

相比之下,黃色背景的iBunko達到了擬物化的顯示效果,閱讀時並不會顯示頁碼和厚度。

scr

圖片來自懶人有禪

去掉分頁,滾動是暫時難以避免的,像WP7那樣沒有滾動條的橫向滾動讓用戶難以了解頁面總量。各種PC產品已經有很好的嘗試,如Google Wave。手機端的精細運動確實比較麻煩,肥手指和電容屏的精細點擊一直是手機交互設計的難點,iPhone使用放大鏡調整文本插入符的設計是解決方法之一。

當排版千篇一律和內容缺乏吸引力時,普通用戶確實難以長時間閱讀,難以評價像手機微博那樣滾屏自動加載頁面對於用戶是否閱讀是否有幫助。在快餐式的讀圖時代,大眾對長文閱讀一直在減少,插入圖片和減少文字篇幅是適應大眾閱讀習慣。文章的適度變化式排版,避免頁​​面過於緊湊,給用戶一定的呼吸空間,或許能起到一定的引導作用。

來源:http://daichuanqing.com/

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.