手機上的交互設(shè)計,能不能跳轉(zhuǎn)
![](http://image.woshipm.com/wp-files/img/90.jpg)
跳轉(zhuǎn)太多了,就搞不懂了。
PC上的網(wǎng)頁,頁面間反復(fù)跳轉(zhuǎn)是再正常不過的了,從首頁進(jìn)入搜索結(jié)果頁,再到詳情頁,再跳到相關(guān)內(nèi)容的詳情頁…不過到了手機上,無節(jié)制的跳轉(zhuǎn)就有點兒問題了。
如果是傳統(tǒng)的PC網(wǎng)站,能展示層級導(dǎo)航,能在跳轉(zhuǎn)到其它欄目時交代清楚,當(dāng)然這樣的情況也應(yīng)該盡量減少,但總歸還是能交代清楚的。
頁面小,沒太多地方擺多層的tabs導(dǎo)航或者面包屑導(dǎo)航,就只剩下左上角的一個“返回”按鈕作為導(dǎo)航了。對于微博這種情況,明顯就不夠用了。還要像傳統(tǒng)PC網(wǎng)站那樣錯綜的鏈接,就比較容易繞暈了。
更多層級,更多點擊操作,降低了使用效率。
即使沒有繞暈,更多的層級,更多的深入,更多的點擊操作,也降低了使用效率。
掘圖志的手機版,在列表頁直接就可以看到圖片、打開視頻:
![](https://image.woshipm.com/wp-files/2013/04/13c378799078ad56be0798547f8a6584.gif)
相比于有些網(wǎng)站的手機版只是把頁面做的小了些,掘圖志的手機版更多的考慮到了手機用戶的使用情景,不僅看上去簡單,而且用起來也效率高。
層級太多了看不懂;即使看得懂,層級多了用起來也麻煩,因此:手機上能不跳轉(zhuǎn)就不跳轉(zhuǎn)。那我們就來看看有沒有辦法減少跳轉(zhuǎn)…
對于從列表頁打開詳情頁這種情況,Google reader的方式是個典型:
![](https://image.woshipm.com/wp-files/2013/04/c70cf9dd1033fd0016b6ecdabb05bb79.gif)
Google reader將進(jìn)入詳情頁這個頁面間導(dǎo)航的問題變?yōu)榱隧撁鎯?nèi)導(dǎo)航的問題。于是,它頁面內(nèi)的導(dǎo)航就出了個小問題:打開一篇長文后,看到一半,不想看了,想滾下去或滾上去,都比較辛苦。(當(dāng)然這也源于它原本是給PC設(shè)計的網(wǎng)頁。)還好這個問題不需要去解決了,google reader要關(guān)閉了。不過這種設(shè)計并非只是google reader獨有,使用類似的頁面內(nèi)展開的產(chǎn)品或許可以單獨為自己的頁面內(nèi)展開做一些自己獨有的頁面內(nèi)導(dǎo)航功能,讓用戶能在展開長文且滾到中間的時候可以直接收起此篇長文。
變“進(jìn)入詳情頁”為“在當(dāng)前頁內(nèi)展開”,這是專門給列表->詳情這種情況用的。前面提到的微博,用這個辦法似乎也解決不了什么問題,其實我們面對的多數(shù)產(chǎn)品都很難保證一個頁搞定。
能不跳轉(zhuǎn)就盡量不跳轉(zhuǎn),如果不得已,非得跳轉(zhuǎn)呢?如果非得跳轉(zhuǎn),可以假裝不是跳轉(zhuǎn)。這樣的例子也有不少:
假裝不跳轉(zhuǎn)例子1:Feedly的詳情浮出。
![](https://image.woshipm.com/wp-files/2013/04/bcba5ef409d3b465f63f1fb6ec8b53cb.gif)
要把這種方式理解為是打開了一個彈出窗口,或許也可以,那它就是十惡不赦的模式化窗口了,實際上傳統(tǒng)的進(jìn)入詳情頁都可以被認(rèn)為是等同于模式化窗口的,或者說,模式化窗口這種概念在現(xiàn)在的設(shè)計中已經(jīng)不那么有意義了。(呃,這話題似乎相當(dāng)有點兒復(fù)雜,應(yīng)該單獨拿出來好好聊聊,在這兒就不再往下說了吧,在這括號里是說不明白了。)
如果把這種形式理解為是一種更形象化的詳情展示方式,那么它就顯得挺可愛的了。原本的列表頁似乎并沒有消失,只是被蓋住了,詳情頁的打開讓人不是那么害怕了。
這個形式更像是手機上的微博里點擊一張圖片,圖片直接浮現(xiàn)出來,再點擊圖片就又還原了。
假裝不跳轉(zhuǎn)例子2:Path的左右滑動。
![](https://image.woshipm.com/wp-files/2013/04/56c882bfd93e903aac3dec000b18e575.gif)
另外,滑到了feeds頁面,再點擊某個圖片,就又是微博里浮出圖片的效果了,或者說是feedly的浮出詳情。牛X了,組合拳啊~
假裝不跳轉(zhuǎn)例子3 “i”的翻轉(zhuǎn)。
![1J6255W7-5](https://image.woshipm.com/wp-files/2013/04/1J6255W7-5.gif)
這些特別的方式,雖然沒能減少頁面間的跳轉(zhuǎn),但卻把跳轉(zhuǎn)潤色的不那么生硬了,使得跳轉(zhuǎn)更生動,更好理解。它們共同的思路是:讓當(dāng)前頁與目標(biāo)頁的關(guān)系更具象。目標(biāo)頁蓋住了當(dāng)前頁;目標(biāo)頁把當(dāng)前頁推到旁邊去了;目標(biāo)頁在當(dāng)前頁的背面。
產(chǎn)品的結(jié)構(gòu)要簡單些才是關(guān)鍵。
如果運用這些表現(xiàn)方式,是不是就能把最開始的那個微博里不斷跳轉(zhuǎn)的問題處理好了呢?或許能有些幫助,但要完美,恐怕也夠嗆。
在feedly的詳情頁里再點擊其中的鏈接,還是得規(guī)規(guī)矩矩的打開新頁面,上面的其他例子也類似。也就是說,這些巧心思的設(shè)計也只能處理有限層級的頁面關(guān)系。
“能不跳轉(zhuǎn)就不跳轉(zhuǎn),非得跳轉(zhuǎn)也盡量假裝不是跳轉(zhuǎn)。”這其實都有一個前提:產(chǎn)品的結(jié)構(gòu)得簡單點兒。
手機系統(tǒng)只提供了簡裝的頁面間導(dǎo)航,我們費盡心思也只是處理了一、兩層的頁面關(guān)系,要做到像PC網(wǎng)頁上那樣復(fù)雜的頁面間彼此互通,那就只能無限的“返回”了。手機系統(tǒng)提供的導(dǎo)航規(guī)范實際上也暗示了我們,就是不能把產(chǎn)品做得太復(fù)雜了,太復(fù)雜了搞不定。
當(dāng)然我并不贊同以現(xiàn)有的局限作為產(chǎn)品設(shè)計的依據(jù),產(chǎn)品要做什么,不做什么,仍舊應(yīng)該以用戶的目標(biāo)、使用情景、用戶任務(wù)為依據(jù)。手機上的局限或許可以理解為:我們不得不在這樣的局限下去做“以用戶為中心的設(shè)計”。
VIA:臭魚
- 目前還沒評論,等你發(fā)揮!