四、翻頁的創(chuàng)新 【替代法】

傳統(tǒng)的翻頁方式是“上一頁+頁碼+下一頁”,大家最熟悉的設計。

Bing圖片搜索
Google reader
看圖購
而近年興起的這種“無盡滾動翻頁”的翻頁方式,即滾動條拖動到最底部后開始加載后面的內容,而不再有“上一頁+頁碼+下一頁”這樣的鏈接。

相對而言twitter、Iphone app store這樣的“遞進式翻頁”則沒那么激進,保留了一個翻頁按鈕,是介于傳統(tǒng)翻頁與無盡滾動翻頁的一種折中方式。

上圖是Google book search一個巧妙的翻頁設計,鼠標懸停在文檔底部一個局部區(qū)域(高度約50px)時,出現(xiàn)一個半透明的層,點擊這個層開始翻頁。這個巨大的輔助翻頁按鈕,大大提升了翻頁的便利性,且對界面影響很小。
這里講到的翻頁組件創(chuàng)新,是用新的翻頁方式替代傳統(tǒng)翻頁組件。從信息的結構來看,傳統(tǒng)翻頁是將信息分段,而“無盡滾動翻頁”屬于信息滾動。這兩種方式對應現(xiàn)實生活中的原型是:書籍和電影膠片,書籍把信息拆分到每頁里去翻動,電影膠片的信息則一幀幀的滾動而過。

從信息流動速度和翻頁便利性來看,“信息滾動”遠遠大于“信息分段”。這兩種翻頁方式應該如何選擇?我想這應該取決于用戶對后面內容的需求強度,像 google搜索結果頁這種越往后信息質量越低的場景,用戶對翻頁需求并不那么強烈。Google reader這樣不是按信息質量排序的場景,提供高速的翻頁方式是個相對必要的做法。需要注意的是,滾動翻頁不利于內容準確定位和信息回溯。
信息流動速度對信息接受者心態(tài)有很大影響,流動速度越快信息吸收量相對越小,所以閱讀pdf文檔比閱讀紙質書籍心情急躁,忍不住去翻頁,是在“掃描”而不是“閱讀”(個人主觀感受,如有雷同純屬必然)
由此也延伸出一點,交互設計師的工作職責除了架構信息,還應該控制信息的流動速度和供給量。
總結

最后,以一張圖片總結交互組件創(chuàng)新的四種方式,一家之言希望對大家有所啟發(fā)。
情非得已
21個Sketch實用高頻小技巧2019-02-15
25款值得收藏的優(yōu)秀網(wǎng)站模板免費下載2015-09-16
20套高質量的免費網(wǎng)頁模版PSD素材2013-09-02
20款國外時尚大氣的按鈕開關PSD素材下載2013-07-31
CSS實例教程:十步學會用CSS建站2011-10-05
網(wǎng)頁設計師:淺淡網(wǎng)頁BANNER設計2010-09-27
網(wǎng)頁細節(jié)教程:WEB設計精確點滴2010-09-13
網(wǎng)頁設計中的點滴細節(jié)把握2010-09-01
總結交互組件創(chuàng)新的四種方式2010-06-28
最全的國外電子商務CSS模板下載2010-06-18
詳解網(wǎng)頁圖文組合的三種布局方式
相關文章3752018-11-13
2018年10月份前端開發(fā)者干貨大合集
相關文章3152018-11-05
10種網(wǎng)頁設計中字體的運用方式
相關文章3472018-05-10
2017年12月超實用前端干貨素材合集
相關文章3432017-12-17
5種方式提高網(wǎng)頁設計中的對比度
相關文章3182017-03-09
網(wǎng)頁設計師如何設計優(yōu)質的Web表單技巧
相關文章2582016-01-11
詳細解析APP最常用的9種狀態(tài)設計分享
相關文章2772015-11-18
4種方式可以讓網(wǎng)站的登陸框更加時尚
相關文章1442015-04-13
