手機上的交互設計，能不能跳轉

跳轉太多了，就搞不懂了。

PC上的網頁，頁面間反復跳轉是再正常不過的了，從首頁進入搜索效果頁，再到詳情頁，再跳到相關內容的詳情頁…不過到了手機上，無節(jié)制的跳轉就有點兒問題了。

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

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

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

更多層級，更多點擊操作，降低了使用效率。

即使沒有繞暈，更多的層級，更多的深入，更多的點擊操作，也降低了使用效率。

掘圖志的手機版，在列表頁直接就可以看到圖片、打開視頻：

你一定被上面的化學先生吸引了注重力，其實我高中時也見過化學先生拿500毫升的燒杯喝水?？钥詞這里要說的是：這個手機版網站不需要進入到詳情頁，只是瀏覽列表就可以了，看到感愛好的視頻，直接點擊就打開那個全屏的視頻播放頁了。假如每篇文章在列表頁上只顯示前面一小部分內容，要進入到詳情頁才能看全文、播視頻，那樣做雖然也沒啥舛錯，但用起來就比較累了。

相比于有些網站的手機版只是把頁面做的小了些，掘圖志的手機版更多的考慮到了手機用戶的使用情景，不僅看上去簡單，而且用起來也效率高。

層級太多了看不懂;即使看得懂，層級多了用起來也麻煩，因此：手機上能不跳轉就不跳轉。那我們就來看看有沒有辦法削減跳轉…

對于從列表頁打開詳情頁這種情況，Google reader的體例是個典型：

直接在頁面內睜開，沒有進入詳情頁這回事兒了，天然也就沒有了進入后再返回的操勞。

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

變“進入詳情頁”為“在當前頁內睜開”，這是專門給列表->詳情這種情況用的。前面提到的微博，用這個辦法似乎也解決不了什么問題，其實我們面對的多數產品都很難保證一個頁搞定。

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

假裝不跳轉例子1：Feedly的詳情浮出。

點擊后，它浮現出來了，點左箭頭按鈕，或者點詳情頁上的任何無鏈接位置都能收起來。

要把這種體例理解為是打開了一個彈出窗口，或許也可以，那它就是十惡不赦的模式化窗口了，現實上傳統(tǒng)的進入詳情頁都可以被認為是等同于模式化窗口的，或者說，模式化窗口這種概念在現在的設計中已經不那么有意義了。(呃，這話題似乎相當有點兒復雜，應該單獨拿出來好好聊聊，在這兒就不再往下說了吧，在這括號里是說不曉暢了。)

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

這個形式更像是手機上的微博里點擊一張圖片，圖片直接浮現出來，再點擊圖片就又還原了。

假裝不跳轉例子2：Path的左右滑動。

點了一個tab，右側的頁面滑動過來，其實照舊跳轉頁面，但是這樣的形式讓跳轉看上去更像是滑過來的，不是脫離了當前頁去到了另外一個頁。

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

假裝不跳轉例子3 “i”的翻轉。

“i”頁面的出現是翻過來的，是當前頁的背面。

這些特殊的體例，雖然沒能削減頁面間的跳轉，但卻把跳轉潤色的不那么生硬了，使得跳轉更生動，更好理解。它們共同的思路是：讓當前頁與目標頁的關系更具象。目標頁蓋住了當前頁;目標頁把當前頁推到旁邊去了;目標頁在當前頁的背面。

產品的結構要簡單些才是關鍵。

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

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

“能不跳轉就不跳轉，非得跳轉也盡量假裝不是跳轉。”這其實都有一個前提：產品的結構得簡單點兒。

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

當然我并不贊許以現有的局限作為產品設計的依據，產品要做什么，不做什么，依舊應該以用戶的目標、使用情景、用戶義務為依據。手機上的局限或許可以理解為：我們不得不在這樣的局限下去做“以用戶為中間的設計”。

VIA:臭魚

分享名稱：手機上的交互設計，能不能跳轉
分享鏈接：http://www.muchs.cn/news9/280359.html

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

廣告

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