交互設(shè)計(jì)：從詳情頁返回列表頁，應(yīng)該是回到頂端還是回到原地？

在一個(gè)列表頁上點(diǎn)擊某個(gè)項(xiàng)，進(jìn)入詳情頁，再從詳情頁返回列表頁，應(yīng)該是回到頂端還是回到原地?

　　返回到列表時(shí)，列表不應(yīng)刷新、頁面不應(yīng)回到頂端，應(yīng)該是返回原地，回到剛才離開的那個(gè)位置。

　　對(duì)于PC的網(wǎng)頁，這個(gè)問題并不典型，因?yàn)椋骆溄邮窃谠翱诖蜷_還是在新窗口中打開，這都還沒個(gè)定論，如果是在新窗口中打開，也就不存在返回列表頁的情況了。

　　現(xiàn)在移動(dòng)設(shè)備上，尤其是手機(jī)這么小的屏幕上，無節(jié)制的打開新窗口肯定不是什么好事兒，是得在同一個(gè)窗口里打開詳情頁了，那么，從詳情頁返回列表后的問題也就更明顯了。

　　PC網(wǎng)頁、移動(dòng)設(shè)備APP、軟件…應(yīng)該說，在所有數(shù)字產(chǎn)品中幾乎都會(huì)遇到這個(gè)問題。

　　像是這個(gè)客戶端：

　　點(diǎn)擊了左側(cè)某個(gè)項(xiàng)，右邊開始播放，左側(cè)tabs收起，再次打開左側(cè)tabs時(shí)，其實(shí)也是列表返回后的問題。

　　應(yīng)該返回原地，因?yàn)?hellip;

　　剛才點(diǎn)進(jìn)去看某一篇了，現(xiàn)在回來，很可能是想要繼續(xù)往下看列表。而且，回到原地才最不陌生，在不陌生的頁面上繼續(xù)操作，才最不恐懼。

　　其實(shí)我覺得并不需要太多的說理由，因?yàn)樵揪驮撊绱恕?/p>

　　列表就是一張張文件疊放在一起，每一張露出個(gè)標(biāo)題來，從上往下捋(lǚ)著看，看到哪個(gè)標(biāo)題感興趣了，就拿出來看看，看完之后，接著往下看列表。

　　展開、彈出詳情使得返回原地看上去更合理

　　用這些形式展示詳情，返回列表后列表保持不動(dòng)顯得更為理所應(yīng)當(dāng)。

　　如果彈出的詳情頁面更大些，充滿整個(gè)屏幕，完全擋住列表，要再看到列表，就得點(diǎn)彈出窗口上的叉子，這與跳轉(zhuǎn)到詳情頁就是一回事兒了。頁面內(nèi)的展開也是類似。這些應(yīng)該說是更形象的展示方式，比起最原始的跳轉(zhuǎn)頁面，更形象了。

　　這些形式也與普通的跳轉(zhuǎn)到詳情頁一樣，列表保持不動(dòng)，都要面對(duì)一些問題，也正是這些問題才讓更多的設(shè)計(jì)者選擇了刷新頁面，回到頁頂。

　　返回原地要面對(duì)的問題：

　　以前沒移動(dòng)設(shè)備，頁面主要是PC的網(wǎng)頁。返回后把重新載入頁面，頁面刷新了，也置頂了，這樣做的好處：

　　1、可以展示更新了的內(nèi)容;

　　2、知道當(dāng)前位置。頁頂?shù)膶?dǎo)航展示出了當(dāng)前是在哪個(gè)頁面，用戶也知道現(xiàn)在是在頁面頂端。

　　如果是返回原地，那這兩個(gè)好處就沒有了，變成需要解決的問題了。

　　為了這兩個(gè)好處而刷新、置頂，有點(diǎn)兒舍本逐末了。是否返回原地，判斷依據(jù)應(yīng)該是：怎么才是用戶好理解的，用起來方便的。既然有這樣的問題，我們就做出些配套設(shè)施直接來解決問題就好了。

　　配套設(shè)施

　　配套設(shè)施一、展示導(dǎo)航

　　展示出導(dǎo)航，讓用戶知道返回后回到的是哪個(gè)頁面。

　　移動(dòng)設(shè)備上，第一級(jí)的頁面會(huì)用整行的導(dǎo)航，或在屏幕頂端，或在底端。二、三級(jí)的頁面是有頁面標(biāo)題和返回按鈕。移動(dòng)設(shè)備上的產(chǎn)品層級(jí)通常不多，又有比較明確的設(shè)計(jì)規(guī)范，基本上，移動(dòng)設(shè)備上的產(chǎn)品，確保返回后的頁面展示清楚導(dǎo)航都能做的比較好。

　　對(duì)于PC軟件，像上面看到的搜狐影視這樣的客戶端產(chǎn)品，展示清楚導(dǎo)航基本也沒啥問題，內(nèi)容的列表怎么滾動(dòng)，導(dǎo)航或在上，或在左側(cè)，不跟著滾動(dòng)，一直都在。

　　對(duì)于PC網(wǎng)頁，就比較悲催了。由于古代網(wǎng)頁的技術(shù)局限，形成了現(xiàn)在網(wǎng)頁的傳統(tǒng)，所有內(nèi)容都是在一整個(gè)頁面里的，頁面往下滾動(dòng)，導(dǎo)航就滾出去了。不過現(xiàn)在也越來越多的網(wǎng)頁產(chǎn)品不再拘泥于這個(gè)局限了，當(dāng)導(dǎo)航要滾出屏幕時(shí)，讓導(dǎo)航浮動(dòng)起來，卡在頁面最頂端，比如，淘寶的詳情頁。這雖然也不見得是最好的形式，但至少這是個(gè)有益的嘗試。這個(gè)頁面需要有導(dǎo)航，而不僅僅是這個(gè)頁面的首屏需要有導(dǎo)航。

　　配套設(shè)施二、用滾動(dòng)條展示當(dāng)前所在位置

　　設(shè)施一是為了展示當(dāng)前頁面在整個(gè)產(chǎn)品中的位置，設(shè)施二是為了展示清楚當(dāng)前屏所顯示的是此頁面中的哪個(gè)部分，是頁面內(nèi)的導(dǎo)航。

　　其實(shí)并不需要強(qiáng)調(diào)要“用滾動(dòng)條”，這是具體的表現(xiàn)形式了，要的是展示清楚當(dāng)前屏在整個(gè)頁中的位置。不過，貌似除了滾動(dòng)條似乎也沒有什么更好的方式了。

　　現(xiàn)在移動(dòng)設(shè)備操作系統(tǒng)中，右邊的那個(gè)條，相比起傳統(tǒng)意義上的滾動(dòng)條，變窄了，也不能操作了，純粹是為展示當(dāng)前位置用的了。

　　IOS上的窄滾動(dòng)條只在用戶滾動(dòng)列表時(shí)才出現(xiàn)，意思是說，你要滾動(dòng)頁面時(shí)才會(huì)需要了解當(dāng)前位置，在閱讀頁面上內(nèi)容時(shí)，并不需要窄滾動(dòng)條。這個(gè)思路挺好的，對(duì)于小屏幕的移動(dòng)設(shè)備，“適時(shí)出現(xiàn)”這個(gè)設(shè)計(jì)思路尤其有用。但是在返回列表這個(gè)時(shí)候，我覺得也還是應(yīng)該忽現(xiàn)一下子。窄滾動(dòng)條出現(xiàn)的原則應(yīng)該是：需要的時(shí)候出現(xiàn)，而不是滾動(dòng)屏幕時(shí)出現(xiàn)。

　　配套設(shè)施三、提供“返回頂端”操作

　　回到了原地，這原地可能已經(jīng)是列表很靠下的位置了，要回到頂端，觸屏上連續(xù)向下翻動(dòng)也好，pc上連續(xù)滾鼠標(biāo)滾輪也好，都是體力活兒，而且是浪費(fèi)體力的活兒。所以需要有個(gè)返回頂端功能，不過形式倒不必拘泥。

　　pc上有越來越多的網(wǎng)站給自己的長(zhǎng)列表右下角加上“top”按鈕了。移動(dòng)設(shè)備上，如果總是在屏幕上貼個(gè)“top”按鈕就太討人嫌了，IOS提供了很隱蔽的top功能：點(diǎn)列表最上面分割線的區(qū)域。這也是個(gè)很智慧的方式。因?yàn)?，操作系統(tǒng)是個(gè)針對(duì)熟手的產(chǎn)品，功能隱晦些，需要些學(xué)習(xí)成本是可以接受的，學(xué)會(huì)了以后，用起來效率很高。

　　配套設(shè)施四、“新信息”提示

　　以前網(wǎng)頁上返回直接就刷新頁面，更新的內(nèi)容就刷出來了。如果是返回原地，那么，有了新消息，就給及時(shí)告訴用戶。

　　用戶是老板，面對(duì)著排成一列的大批文件，正在逐個(gè)文件標(biāo)題的看，其中一些會(huì)抽出來仔細(xì)看。這時(shí)，又來了幾分新文件，作為一位稱職的秘書，應(yīng)該怎么做?不告訴老板肯定不對(duì);把文件放在文件長(zhǎng)列的最前面并把老板直接拉過去，這也不好;應(yīng)該告訴老板一聲：“又來幾份新的”如果能更體貼，還可以附加一句：“其中還有一份是特重要的某某項(xiàng)目的文件。”

　　稱職的秘書就是我們的產(chǎn)品，有新消息時(shí)，應(yīng)該提示，而且得讓用戶看見，目前的微博，移動(dòng)設(shè)備的版本，會(huì)在屏幕底部的導(dǎo)航上顯示出個(gè)數(shù)字，而網(wǎng)頁版的只是在列表最上面多頂出來一行提示，只要頁面滾下去了，就看不到這個(gè)提示了。

　　配套設(shè)施五、跳去“新消息”之前的閱讀位置，應(yīng)該mark

　　這個(gè)功能出現(xiàn)在用戶去查看新消息之后，是上一個(gè)功能：“新信息”提示的補(bǔ)充。

　　用戶點(diǎn)擊了“新信息”的提示，去查看新信息了，看過了最新的之后，很有可能是要回到剛才中斷的那個(gè)位置繼續(xù)往下看。如果之前已經(jīng)滾了好幾屏了，那個(gè)位置就不那么容易找了。

　　這個(gè)功能是一個(gè)典型的為任務(wù)而設(shè)計(jì)的功能，完全是為了這種特定的任務(wù)情景而設(shè)計(jì)的，與產(chǎn)品的結(jié)構(gòu)沒什么關(guān)系。

　　之所以會(huì)想到這么個(gè)功能，源于對(duì)任務(wù)的羅列，我自己甚至將其成為“任務(wù)羅列法”，這個(gè)方法是這樣的：在完成了產(chǎn)品基本架構(gòu)設(shè)計(jì)的基礎(chǔ)上，無限詳盡的描述所有可能的任務(wù)，來檢驗(yàn)現(xiàn)有的產(chǎn)品，確保重要任務(wù)很順利，次要任務(wù)能達(dá)成，沒有任務(wù)完不成。

　　補(bǔ)充上以上五個(gè)配套設(shè)施， “返回原地”基本上就比較ok了。提供這五個(gè)個(gè)配套設(shè)施的基本思路是：

　　1. 描述當(dāng)前狀況;

　　2. 提供可行的操作。

　　設(shè)施一、導(dǎo)航，設(shè)施二、頁面內(nèi)導(dǎo)航，都是在展示當(dāng)前狀況。設(shè)施三、回到頂端，對(duì)于提供了可以做的操作。設(shè)施四、提示有新信息，即是描述狀況同時(shí)也提供相應(yīng)操作。設(shè)施五、mark之前的閱讀位置，描述的是用戶點(diǎn)擊了新消息之前的狀況，同時(shí)提供相應(yīng)操作。

　　“返回原地”的適用范圍

　　對(duì)于PC、移動(dòng)設(shè)備、網(wǎng)頁、APP，“返回到原地”這個(gè)設(shè)計(jì)方案都是適用的，但在時(shí)間維度上，卻不能無限制的擴(kuò)大。

　　如果是昨天睡前刷過微博，在一個(gè)詳情頁關(guān)閉了微博APP，今天早上起來再打開微博APP，還要保證返回到列表頁原地不動(dòng)，恐怕價(jià)值就不大了。

　　“返回原地”隱含的前提是：剛才從這兒離開的，返回來時(shí)，用戶應(yīng)該多少還對(duì)位置有點(diǎn)兒印象。

　　“返回原地”目的是：用戶繼續(xù)瀏覽列表比較方便，如果昨天看過微博，今天早上起來再打開微博，恐怕“繼續(xù)閱讀”的可能性就很小了。

　　這里討論的是從列表離開的情況，如果不是列表頁呢?如果是從一個(gè)首頁，或者其他什么頁面，進(jìn)入某個(gè)下一級(jí)頁面，然后再返回來，是不是也應(yīng)該返回原地呢?

　　以列表為研究對(duì)象，是從比較簡(jiǎn)單也最常見的情況入手研究問題。搞清楚了之后，對(duì)于更復(fù)雜的情況，我們也可以依據(jù)這些結(jié)論來做判斷。

　　扯遠(yuǎn)了…

　　關(guān)于“描述當(dāng)前狀況，提供可行的操作”，這里設(shè)計(jì)配套設(shè)施用到了。以前關(guān)于按鈕應(yīng)該表狀態(tài)還是表操作曾經(jīng)討論過。對(duì)于有開/關(guān)兩種狀態(tài)的按鈕，比如靜音按鈕，播放/暫停按鈕，按鈕上的圖標(biāo)應(yīng)該表達(dá)怎樣的含義?是表達(dá)“當(dāng)前是有聲狀態(tài)”?還是表達(dá)“按這個(gè)按鈕可以靜音”?最完整的表現(xiàn)就是應(yīng)該表現(xiàn)出：1、當(dāng)前是什么狀態(tài);2、還能做什么操作。

　　在返回列表這個(gè)問題上又用到了這個(gè)理解。實(shí)際上這是一個(gè)具有普遍意義的理解方式，對(duì)于一個(gè)系統(tǒng)，首先應(yīng)該展示清楚當(dāng)前是什么狀況，比如：正在下載中，處于編輯狀態(tài)，系統(tǒng)故障中…然后還需要根據(jù)當(dāng)前狀態(tài)提供對(duì)應(yīng)的操作：正在下載，那應(yīng)該提供中斷操作;正在編輯狀態(tài)中，提供編輯的功能;系統(tǒng)故障中，是不是可以刷新?

　　關(guān)于列表這種形式與現(xiàn)實(shí)的映射，這個(gè)理解，在這兒是為了輔助理解列表的返回，其實(shí)這種理解還有更多的價(jià)值，比如：列表與詳情頁之間的切換形式，列表頁之間的切換形式，翻頁與向下加載更多的取舍…

　　關(guān)于“用戶是老板，產(chǎn)品是秘書”，這是一種對(duì)產(chǎn)品的定位，在研發(fā)產(chǎn)品的過程中，這種角色定位不僅是對(duì)產(chǎn)品整體方向的把握這種抽象層面的指導(dǎo)，對(duì)于新消息該怎么提示這種具體設(shè)計(jì)也有價(jià)值。

　　當(dāng)然，并不見得所有產(chǎn)品都得是秘書，也許你的產(chǎn)品是位專業(yè)的顧問，或者是熱情洋溢的主持人。

　　關(guān)于“任務(wù)羅列法”，無限詳盡的去描述用戶在使用這個(gè)產(chǎn)品時(shí)會(huì)是什么樣子。雖然我們平時(shí)也經(jīng)常在設(shè)計(jì)完成后這樣過一遍，看看能不能走通，但往往是檢驗(yàn)的過于簡(jiǎn)單。我建議將這些任務(wù)的描述寫下來，像寫小說那樣，幾百字幾千字，寫著寫著就能發(fā)現(xiàn)問題了。

　　有些產(chǎn)品，結(jié)構(gòu)簡(jiǎn)單，但卻會(huì)被反復(fù)使用，使用情景很多很復(fù)雜，比如：一個(gè)下載列表，一個(gè)郵件收件箱，對(duì)于這樣的產(chǎn)品，任務(wù)羅列往往比較有用。