長文的數字排版與閱讀

0 評論 5178 瀏覽 1 收藏 5 分鐘

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

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

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

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

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

圖片來自yslow

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

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

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

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

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

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

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

圖片來自懶人有禪

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

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

來源:http://daichuanqing.com/

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!