手機(jī)上的長(zhǎng)列表

2013-5-3    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   sillybuy.com  )是一家專(zhuān)注而深入的設(shè)計(jì)機(jī)構(gòu) ,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源:http://ucdchina.com/snap/12755

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,   請(qǐng)點(diǎn)這里


這個(gè)Watch Lists其實(shí)很長(zhǎng),有幾十項(xiàng),表現(xiàn)出來(lái)是這樣:每頁(yè)只顯示5項(xiàng),可以顯示在一屏內(nèi),然后翻頁(yè)。
在PC網(wǎng)頁(yè)的設(shè)計(jì)時(shí)我們知道:把更多的內(nèi)容放在一個(gè)頁(yè)面里展示,比跳轉(zhuǎn)頁(yè)面更好,用戶更容易看到。幾米長(zhǎng)的門(mén)戶首頁(yè)就是這么來(lái)的。
突如其來(lái)的手機(jī)應(yīng)用,可能是讓一些設(shè)計(jì)師有點(diǎn)兒不知所措了,覺(jué)得手機(jī)屏幕小,單手指操作有特點(diǎn),等等我也不是很清楚的原因,最后得出了這么個(gè)結(jié)論:每個(gè)頁(yè)面都不能滾動(dòng)。這個(gè)結(jié)論顯然有點(diǎn)兒不妥,而且,想要嚴(yán)格的實(shí)現(xiàn),幾乎不可能。
不斷的下一頁(yè)下一頁(yè),再上一頁(yè)上一頁(yè),每次翻頁(yè)又都需要載入新頁(yè)面,顯然不好用了,相比之下,“自選股”這樣一個(gè)長(zhǎng)列表會(huì)好一些。

要處理一個(gè)長(zhǎng)列表時(shí),放在一頁(yè)里上下滾動(dòng)會(huì)比切分成多頁(yè)更好。嗯,這個(gè)結(jié)論或許下的有點(diǎn)兒早。

“短列表+翻頁(yè)”的一個(gè)大問(wèn)題在于每次都要載入頁(yè)面,使得下一頁(yè)的顯示需要一些時(shí)間,不流暢了。對(duì)于一個(gè)長(zhǎng)列表如果滾動(dòng)的時(shí)候不流暢,會(huì)卡,當(dāng)然會(huì)讓人覺(jué)得不爽,那短列表不斷翻頁(yè),可以看做是一種更大的卡吧,顯然更不爽。
那么,如果短列表+翻頁(yè),但不卡呢?事先加載好了,只是不用滾屏的形式,每頁(yè)都是沒(méi)滾動(dòng)條的,一頁(yè)頁(yè)很流暢的翻,是不是ok?
Feedly就是這樣。

每頁(yè)剛好顯示一屏,不滾動(dòng),向上滑動(dòng)翻到后面一頁(yè)。
如果“短列表+翻頁(yè)”預(yù)先加載好了,那么,“短列表+翻頁(yè)”與“長(zhǎng)列表”兩種形式的差別僅僅在于給用戶的表現(xiàn)模型不同:一個(gè)是盒裝紙巾,一張又一張;另一個(gè)是成卷的衛(wèi)生紙。這兩種模型都是不難理解的。

不過(guò)類(lèi)似Feedly這種表現(xiàn)形式需要解決一個(gè)額外的問(wèn)題:如果我已經(jīng)翻到了第12頁(yè),此時(shí)想返回去看第4頁(yè)的某個(gè)內(nèi)容,怎么才能快速的到達(dá)?
對(duì)于一個(gè)大頁(yè)面,當(dāng)前屏幕只能顯示其一部分的時(shí)候,如何告訴用戶當(dāng)前顯示的是整個(gè)大頁(yè)面的哪個(gè)部分;應(yīng)該提供怎樣的功能讓用戶可以的回到頁(yè)頂,去到頁(yè)底,或達(dá)到頁(yè)面中某一個(gè)特定的位置。這一系列問(wèn)題,在PC上是由窗口滾動(dòng)條負(fù)責(zé)解決的,不用細(xì)說(shuō)了,大家再熟悉不過(guò)了。
手機(jī)系統(tǒng)中的滾動(dòng)條退化了,只能顯示當(dāng)然所在位置,而不能提供操作了。android可以使勁兒的滑動(dòng)一次性滾動(dòng)更遠(yuǎn),IOS可以點(diǎn)列表頂端接縫處快速回到頂端,快速的滾動(dòng)也能一次滾動(dòng)更多,但似乎沒(méi)有android的效果明顯。這些都是為了頁(yè)面內(nèi)的導(dǎo)航,但還都不如pc上窗口滾動(dòng)條強(qiáng)大。
Feedly把正整卷衛(wèi)生紙裁成了一張張的,將原本的頁(yè)面內(nèi)導(dǎo)航問(wèn)題變成了頁(yè)面間的跳轉(zhuǎn),于是連手機(jī)系統(tǒng)里提供的這一點(diǎn)點(diǎn)頁(yè)面內(nèi)導(dǎo)航功能都用不上了。如果我翻到了第12頁(yè),想回去看看第4頁(yè),就得往回多翻幾次了,或者回到第一頁(yè),再往后翻三下。哪種方法效率都不太高。
手機(jī)因?yàn)樾?,設(shè)計(jì)上總體的方向是簡(jiǎn)化,減掉的自然應(yīng)該是少數(shù)用戶、少數(shù)時(shí)候會(huì)用到的功能。對(duì)于feedly這個(gè)手機(jī)版閱讀器,多數(shù)用戶每天只是來(lái)看看新聞,并不需要經(jīng)常的的去查找某篇文章,甚至可以說(shuō),不需要實(shí)現(xiàn)從第12頁(yè)快速回到第4頁(yè)的功能,但別的產(chǎn)品也許就是比較需要的,比如,有100項(xiàng)的股票列表。
一個(gè)使用了feedly這種“短列表+翻頁(yè)”形式的股票觀察列表,或許可以自己?jiǎn)为?dú)做些導(dǎo)航功能,為自己的這個(gè)裁剪成多段的長(zhǎng)列表服務(wù),讓各段間的跳轉(zhuǎn)更。

既然如此麻煩,那干脆就“自選股”這樣,直接就長(zhǎng)列表,簡(jiǎn)單,直白,也省掉了那些麻煩。最樸素的形式是有其簡(jiǎn)樸的魅力,不過(guò)真是個(gè)100項(xiàng)的長(zhǎng)列表,要從第12屏回到第4屏其實(shí)也不很快,也得滾好幾下,而且操作不容易很精準(zhǔn),你也估計(jì)不出來(lái)到底得滾幾下。
手機(jī)通訊錄里有那種通過(guò)字母快速到達(dá)的導(dǎo)航功能,或許應(yīng)該廣泛應(yīng)用;或許也需要我們?yōu)樽约旱拈L(zhǎng)列表做些單獨(dú)的頁(yè)面內(nèi)導(dǎo)航,只靠操作系統(tǒng)提供的通用功能并不總夠用。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔