專業博客《字體排印》最近一篇關于長文的數字排版與閱讀的探討,其中關于分頁和滾動條的部分很值得分析,先來考究下分頁的好處:
頁面分批顯示。在網頁加載數據時,會根據下載速度和用戶需求下載固定的條目,如搜索引擎一頁顯示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.com
橫向縱向組合排版,如iPad的BMW雜志橫向滾動更換頁面主題,縱向滾動更新主題中內容,Cooper網站也有同樣的排版方式,屬于單頁和弱化分頁的設計。

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

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

圖片來自懶人有禪
去掉分頁,滾動是暫時難以避免的,像WP7那樣沒有滾動條的橫向滾動讓用戶難以了解頁面總量。各種PC產品已經有很好的嘗試,如Google Wave。手機端的精細運動確實比較麻煩,肥手指和電容屏的精細點擊一直是手機交互設計的難點,iPhone使用放大鏡調整文本插入符的設計是解決方法之一。
當排版千篇一律和內容缺乏吸引力時,普通用戶確實難以長時間閱讀,難以評價像手機微博那樣滾屏自動加載頁面對于用戶是否閱讀是否有幫助。在快餐式的讀圖時代,大眾對長文閱讀一直在減少,插入圖片和減少文字篇幅是適應大眾閱讀習慣。文章的適度變化式排版,避免頁面過于緊湊,給用戶一定的呼吸空間,或許能起到一定的引導作用。
交作業:http://www.missyuan.com/viewthread.php?tid=496835
情非得已
21個Sketch實用高頻小技巧2019-02-15
25款值得收藏的優秀網站模板免費下載2015-09-16
20套高質量的免費網頁模版PSD素材2013-09-02
20款國外時尚大氣的按鈕開關PSD素材下載2013-07-31
CSS實例教程:十步學會用CSS建站2011-10-05
網頁設計師:淺淡網頁BANNER設計2010-09-27
網頁細節教程:WEB設計精確點滴2010-09-13
網頁設計中的點滴細節把握2010-09-01
總結交互組件創新的四種方式2010-06-28
最全的國外電子商務CSS模板下載2010-06-18
實例解析3種文檔大屏適配方法
相關文章2632020-03-09
詳細解析UI設計中搜索欄設計的技巧
相關文章6092019-03-31
UI設計師如何設計最常見的關閉按鈕
相關文章4042019-02-24
如何提高登錄注冊的提高用戶體驗
相關文章2902018-12-20
設計師解讀如何讓扁平的網頁更出彩
相關文章10302018-12-07
UI設計師需要學習的保存功能設計總結
相關文章3422018-12-07
7招表單設計設計師方法提升表單體驗
相關文章5672018-12-07
UI設計師必學柵格設計原理和技巧
相關文章4992018-11-29
