跳轉(zhuǎn)太多了，就搞不懂了。

PC上的網(wǎng)頁(yè)，頁(yè)面間反復(fù)跳轉(zhuǎn)是再正常不過(guò)的了，從首頁(yè)進(jìn)入搜索效果頁(yè)，再到詳情頁(yè)，再跳到相關(guān)內(nèi)容的詳情頁(yè)…不過(guò)到了手機(jī)上，無(wú)節(jié)制的跳轉(zhuǎn)就有點(diǎn)兒?jiǎn)栴}了。

從首頁(yè)列表->單篇微博詳情頁(yè)->個(gè)人主頁(yè)->單篇微博詳情頁(yè)->個(gè)人主頁(yè)…可以一次接一次的深入，但跳轉(zhuǎn)了三、四次后，再看左上角的“返回”按鈕，你已經(jīng)很難判斷出將會(huì)返回到哪里了。

假如是傳統(tǒng)的PC網(wǎng)站，能展示層級(jí)導(dǎo)航，能在跳轉(zhuǎn)到其它欄目時(shí)交代清楚，當(dāng)然這樣的情況也應(yīng)該盡量削減，但總歸照舊能交代清楚的。

頁(yè)面小，沒(méi)太多地方擺多層的tabs導(dǎo)航或者面包屑導(dǎo)航，就只剩下左上角的一個(gè)“返回”按鈕作為導(dǎo)航了。對(duì)于微博這種情況，顯明就不夠用了。還要像傳統(tǒng)PC網(wǎng)站那樣錯(cuò)綜的鏈接，就比較容易繞暈了。

更多層級(jí)，更多點(diǎn)擊操作，降低了使用效率。

即使沒(méi)有繞暈，更多的層級(jí)，更多的深入，更多的點(diǎn)擊操作，也降低了使用效率。

掘圖志的手機(jī)版，在列表頁(yè)直接就可以看到圖片、打開(kāi)視頻：

你一定被上面的化學(xué)先生吸引了注重力，其實(shí)我高中時(shí)也見(jiàn)過(guò)化學(xué)先生拿500毫升的燒杯喝水?？钥詞這里要說(shuō)的是：這個(gè)手機(jī)版網(wǎng)站不需要進(jìn)入到詳情頁(yè)，只是瀏覽列表就可以了，看到感愛(ài)好的視頻，直接點(diǎn)擊就打開(kāi)那個(gè)全屏的視頻播放頁(yè)了。假如每篇文章在列表頁(yè)上只顯示前面一小部分內(nèi)容，要進(jìn)入到詳情頁(yè)才能看全文、播視頻，那樣做雖然也沒(méi)啥舛錯(cuò)，但用起來(lái)就比較累了。

相比于有些網(wǎng)站的手機(jī)版只是把頁(yè)面做的小了些，掘圖志的手機(jī)版更多的考慮到了手機(jī)用戶的使用情景，不僅看上去簡(jiǎn)單，而且用起來(lái)也效率高。

層級(jí)太多了看不懂;即使看得懂，層級(jí)多了用起來(lái)也麻煩，因此：手機(jī)上能不跳轉(zhuǎn)就不跳轉(zhuǎn)。那我們就來(lái)看看有沒(méi)有辦法削減跳轉(zhuǎn)…

對(duì)于從列表頁(yè)打開(kāi)詳情頁(yè)這種情況，Google reader的體例是個(gè)典型：

直接在頁(yè)面內(nèi)睜開(kāi)，沒(méi)有進(jìn)入詳情頁(yè)這回事兒了，天然也就沒(méi)有了進(jìn)入后再返回的操勞。

Google reader將進(jìn)入詳情頁(yè)這個(gè)頁(yè)面間導(dǎo)航的問(wèn)題變?yōu)榱隧?yè)面內(nèi)導(dǎo)航的問(wèn)題。于是，它頁(yè)面內(nèi)的導(dǎo)航就出了個(gè)小問(wèn)題：打開(kāi)一篇長(zhǎng)文后，看到一半，不想看了，想滾下去或滾上去，都比較辛勞。(當(dāng)然這也源于它原本是給PC設(shè)計(jì)的網(wǎng)頁(yè)。)還好這個(gè)問(wèn)題不需要去解決了，google reader要關(guān)閉了。不過(guò)這種設(shè)計(jì)并非只是google reader，使用類似的頁(yè)面內(nèi)睜開(kāi)的產(chǎn)品或許可以單獨(dú)為自己的頁(yè)面內(nèi)睜開(kāi)做一些自己的頁(yè)面內(nèi)導(dǎo)航功能，讓用戶能在睜開(kāi)長(zhǎng)文且滾到中心的時(shí)候可以直接收起此篇長(zhǎng)文。

變“進(jìn)入詳情頁(yè)”為“在當(dāng)前頁(yè)內(nèi)睜開(kāi)”，這是專門給列表->詳情這種情況用的。前面提到的微博，用這個(gè)辦法似乎也解決不了什么問(wèn)題，其實(shí)我們面對(duì)的多數(shù)產(chǎn)品都很難保證一個(gè)頁(yè)搞定。

能不跳轉(zhuǎn)就盡量不跳轉(zhuǎn)，假如不得已，非得跳轉(zhuǎn)呢?假如非得跳轉(zhuǎn)，可以假裝不是跳轉(zhuǎn)。這樣的例子也有不少：

假裝不跳轉(zhuǎn)例子1：Feedly的詳情浮出。

點(diǎn)擊后，它浮現(xiàn)出來(lái)了，點(diǎn)左箭頭按鈕，或者點(diǎn)詳情頁(yè)上的任何無(wú)鏈接位置都能收起來(lái)。

要把這種體例理解為是打開(kāi)了一個(gè)彈出窗口，或許也可以，那它就是十惡不赦的模式化窗口了，現(xiàn)實(shí)上傳統(tǒng)的進(jìn)入詳情頁(yè)都可以被認(rèn)為是等同于模式化窗口的，或者說(shuō)，模式化窗口這種概念在現(xiàn)在的設(shè)計(jì)中已經(jīng)不那么有意義了。(呃，這話題似乎相當(dāng)有點(diǎn)兒復(fù)雜，應(yīng)該單獨(dú)拿出來(lái)好好聊聊，在這兒就不再往下說(shuō)了吧，在這括號(hào)里是說(shuō)不曉暢了。)

假如把這種形式理解為是一種更形象化的詳情展示體例，那么它就顯得挺可愛(ài)的了。原本的列表頁(yè)似乎并沒(méi)有消逝，只是被蓋住了，詳情頁(yè)的打開(kāi)讓人不是那么害怕了。

這個(gè)形式更像是手機(jī)上的微博里點(diǎn)擊一張圖片，圖片直接浮現(xiàn)出來(lái)，再點(diǎn)擊圖片就又還原了。

假裝不跳轉(zhuǎn)例子2：Path的左右滑動(dòng)。

點(diǎn)了一個(gè)tab，右側(cè)的頁(yè)面滑動(dòng)過(guò)來(lái)，其實(shí)照舊跳轉(zhuǎn)頁(yè)面，但是這樣的形式讓跳轉(zhuǎn)看上去更像是滑過(guò)來(lái)的，不是脫離了當(dāng)前頁(yè)去到了另外一個(gè)頁(yè)。

另外，滑到了feeds頁(yè)面，再點(diǎn)擊某個(gè)圖片，就又是微博里浮出圖片的效果了，或者說(shuō)是feedly的浮出詳情。牛X了，組合拳啊~

假裝不跳轉(zhuǎn)例子3 “i”的翻轉(zhuǎn)。

“i”頁(yè)面的出現(xiàn)是翻過(guò)來(lái)的，是當(dāng)前頁(yè)的背面。

這些特殊的體例，雖然沒(méi)能削減頁(yè)面間的跳轉(zhuǎn)，但卻把跳轉(zhuǎn)潤(rùn)色的不那么生硬了，使得跳轉(zhuǎn)更生動(dòng)，更好理解。它們共同的思路是：讓當(dāng)前頁(yè)與目標(biāo)頁(yè)的關(guān)系更具象。目標(biāo)頁(yè)蓋住了當(dāng)前頁(yè);目標(biāo)頁(yè)把當(dāng)前頁(yè)推到旁邊去了;目標(biāo)頁(yè)在當(dāng)前頁(yè)的背面。

產(chǎn)品的結(jié)構(gòu)要簡(jiǎn)單些才是關(guān)鍵。

假如運(yùn)用這些體現(xiàn)體例，是不是就能把開(kāi)始的那個(gè)微博里賡續(xù)跳轉(zhuǎn)的問(wèn)題處理好了呢?或許能有些幫助，但要完美，恐怕也夠嗆。

在feedly的詳情頁(yè)里再點(diǎn)擊其中的鏈接，照舊得規(guī)規(guī)矩矩的打開(kāi)新頁(yè)面，上面的其他例子也類似。也就是說(shuō)，這些巧心思的設(shè)計(jì)也只能處理有限層級(jí)的頁(yè)面關(guān)系。

“能不跳轉(zhuǎn)就不跳轉(zhuǎn)，非得跳轉(zhuǎn)也盡量假裝不是跳轉(zhuǎn)?！边@其實(shí)都有一個(gè)前提：產(chǎn)品的結(jié)構(gòu)得簡(jiǎn)單點(diǎn)兒。

手機(jī)系統(tǒng)只提供了簡(jiǎn)裝的頁(yè)面間導(dǎo)航，我們費(fèi)盡心思也只是處理了一、兩層的頁(yè)面關(guān)系，要做到像PC網(wǎng)頁(yè)上那樣復(fù)雜的頁(yè)面間彼此互通，那就只能無(wú)限的“返回”了。手機(jī)系統(tǒng)提供的導(dǎo)航規(guī)范現(xiàn)實(shí)上也暗示了我們，就是不能把產(chǎn)品做得太復(fù)雜了，太復(fù)雜了搞不定。

當(dāng)然我并不贊許以現(xiàn)有的局限作為產(chǎn)品設(shè)計(jì)的依據(jù)，產(chǎn)品要做什么，不做什么，依舊應(yīng)該以用戶的目標(biāo)、使用情景、用戶義務(wù)為依據(jù)。手機(jī)上的局限或許可以理解為：我們不得不在這樣的局限下去做“以用戶為中間的設(shè)計(jì)”。

VIA:臭魚

分享名稱：手機(jī)上的交互設(shè)計(jì)，能不能跳轉(zhuǎn)
分享鏈接：http://jinyejixie.com/news9/280359.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站內(nèi)鏈、網(wǎng)站建設(shè)、ChatGPT、定制網(wǎng)站、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)