原文鏈接：
http://www.smashingmagazine.com/2014/02/24/off-the-beaten-canvas-exploring-the-potential-of-the-off-canvas-pattern/
作者：Kyle Peatt??翻譯：石洋
在移動(dòng)版式中彈出式畫布菜單已經(jīng)替代了導(dǎo)航條模式，甚至一些桌面版式也紛紛效仿。他們有充分的理由這樣做，因?yàn)閺棾鍪疆嫴际且粋€(gè)很好的保持內(nèi)容的同時(shí)給用戶很多附加信息的方法。
這篇文章我們將會(huì)探討為什么彈出式畫布成為如此成功的一種導(dǎo)航模式，并展示了它更大的潛能。從產(chǎn)品列表頁(yè)面中的過(guò)濾器到購(gòu)物車到最近瀏覽的產(chǎn)品列表，這種模式的潛力無(wú)窮。我們是時(shí)候探索彈出式畫布可以走多遠(yuǎn)了。
龍來(lái)了
此前相信你已經(jīng)看過(guò)飛出的彈出式菜單。你知道那些側(cè)邊欄從邊緣滑到屏幕的App嗎？到如今，這些已經(jīng)是老生常談了。最近他們?nèi)藲獗┰龅脑蛑皇窃谝苿?dòng)端，窗口的概念幾乎消失了。市場(chǎng)上大多數(shù)設(shè)備窗口的可控性很小。
取而代之，我們只有兩個(gè)層面的工作要做：視口和畫布。它們提供了很多可能性，設(shè)計(jì)師已經(jīng)開(kāi)始挑戰(zhàn)被限制的視口了。彈出式畫布被少量用于桌面，在這種情景中變得非常重要。
因?yàn)橐苿?dòng)設(shè)備大小的限制，設(shè)計(jì)師需要釋放空間，用彈出式畫布可以使我們做到不迫使用戶錯(cuò)失內(nèi)容或者離開(kāi)它們?cè)谄聊恢械奈恢?。在桌面上，我們很少離開(kāi)畫布，因?yàn)檫@并不需要。在移動(dòng)端，彈出畫布是一個(gè)開(kāi)創(chuàng)性的概念，開(kāi)創(chuàng)了設(shè)計(jì)可能性的新邊界。它通過(guò)繪制未開(kāi)發(fā)的版圖為愿意冒險(xiǎn)的人提供寶貴的財(cái)富。對(duì)于設(shè)計(jì)師來(lái)說(shuō)這是一次難得的創(chuàng)造全新設(shè)計(jì)的機(jī)會(huì)。
早期探索者
當(dāng)然，我們不是第一個(gè)超越畫布并勇敢面對(duì)未知的。與美洲大陸類似，我們只記得最著名的首次登陸的那些人。因此，F(xiàn)acebook是我們的哥倫布。
Facebook開(kāi)始著手一個(gè)移動(dòng)設(shè)備屏幕上非常特殊的問(wèn)題。它的導(dǎo)航菜單很長(zhǎng)，有很多與用戶相關(guān)的內(nèi)容。用戶需要探索導(dǎo)航并且不離開(kāi)所在時(shí)間線上的位置。如果他們決定不通過(guò)導(dǎo)航離開(kāi)，他們應(yīng)該可以回到他們所在的位置。
普通的導(dǎo)航模式無(wú)法滿足需求。菜單對(duì)于訪問(wèn)整個(gè)屏幕來(lái)說(shuō)太長(zhǎng)了，如果它在畫布上所有地方出現(xiàn)，會(huì)導(dǎo)致用戶脫離內(nèi)容。對(duì)于這個(gè)問(wèn)題的解決方式是鎖定畫布并推到右邊——展示了下面的導(dǎo)航。使用彈出式畫布像一種全新的概念。
繪制全新的版圖
這種方式奏效的原因或者說(shuō)為什么它感覺(jué)如此自然，是因?yàn)檫@個(gè)動(dòng)作非常自然。將一些東西暫時(shí)移到一邊并重新確定關(guān)注中心，同時(shí)保證用戶可以瞥見(jiàn)之前的所作所為，在現(xiàn)實(shí)世界中這是一種非常平常的舉動(dòng)。我們會(huì)在跳到一個(gè)部分的時(shí)候保留自己所在的位置。我們將拇指放在一個(gè)位置然后去看某本書的注腳。我們?cè)谡壹{稅申報(bào)某一行項(xiàng)目的收據(jù)時(shí)會(huì)折角突出一張。
這些都是彈出式畫布效法的實(shí)例：保留你所在的位置，從而可以回到之前正在做的事情上。彈出式畫布是一種與移動(dòng)端內(nèi)容交互的非常好的方式，因?yàn)樗鉀Q了一個(gè)突出的問(wèn)題：焦點(diǎn)。
在移動(dòng)端，焦點(diǎn)是我們所擁有的全部。這導(dǎo)致了保證內(nèi)容可見(jiàn)變得非常困難。我們迫使用戶上下滾動(dòng)，我們隱藏、顯示內(nèi)容，做所有我想讓用戶做的事情?；瑒?dòng)條，指出了用戶在頁(yè)面上的哪個(gè)位置，通?？床坏?，并且回到某一個(gè)準(zhǔn)確的位置通常很難。上下文對(duì)用戶的心理地圖很重要、沒(méi)有上下文他們會(huì)迷失并離開(kāi)網(wǎng)站。
通過(guò)彈出式畫布，我們可以保證內(nèi)容在頁(yè)面上的同時(shí)呈現(xiàn)大量的新信息。彈出式視窗可以在用戶不迷失的前提下保持新交互和內(nèi)容全部頁(yè)面的價(jià)值。這是一種非常強(qiáng)大的模式，一些潛能我們還沒(méi)開(kāi)始揭示。
平地綜合征
彈出式畫布盡管有很多可能性，我們并不真正愿意拓寬它的邊界。我們?cè)O(shè)計(jì)師身上有一種不愿意實(shí)驗(yàn)的傾向。我們更愿意實(shí)施已經(jīng)被證明的模式，我們最不可能批判性思考為什么一種模式是成功的。當(dāng)然，我們知道彈出式畫布是一種很好的導(dǎo)航，但僅僅這些還不夠。
Facoebook創(chuàng)造這種模式時(shí)沒(méi)有解決一個(gè)導(dǎo)航問(wèn)題，解決的是一個(gè)交互問(wèn)題。需要一種方法呈現(xiàn)大量交互和信息又不使用戶從最初目的中分心——時(shí)間軸。我們要把彈出式畫布理解成內(nèi)容策略而不是導(dǎo)航模式。我們?nèi)绾蜗蛴脩舫尸F(xiàn)更多的信息而不是使他們從手頭做的事情上分心？
Facebook同樣沒(méi)有限制彈出式視窗導(dǎo)航，而是將它用在聯(lián)系消息列表上。這或許是彈出式視窗更好的應(yīng)用，因?yàn)橛脩舴浅A向于迅速打開(kāi)側(cè)邊欄，看看誰(shuí)在線，在回來(lái)瀏覽時(shí)間軸之前給他們發(fā)條消息。像這樣的模式不是不可變的。事實(shí)上唯一更好的方法是我們不斷地做用戶實(shí)驗(yàn)。Facebook徹底改革了我們展示移動(dòng)內(nèi)容的方式，但是很少有人接過(guò)火炬繼續(xù)前進(jìn)。
當(dāng)心塞壬之歌（譯者注：誘人而虛偽的言語(yǔ)）
要注意風(fēng)險(xiǎn)。我們不應(yīng)僅僅因?yàn)閯?chuàng)新或者流行而使用彈出式畫布。在Web發(fā)展過(guò)程中每種方法都有它的優(yōu)勢(shì)和局限性。彈出式畫布并不適合所有情況。當(dāng)你需要保證用戶不離開(kāi)主要內(nèi)容卻要提供很多信息或者復(fù)雜的交互的時(shí)候，它是最好的方式。
如果只有少數(shù)幾個(gè)導(dǎo)航項(xiàng)目或者你提供的補(bǔ)充信息很短，這種模式帶來(lái)的混亂將大于便利。記住它保證原有內(nèi)容視角的前提下提供了一個(gè)新視角，每當(dāng)打開(kāi)彈出式視窗時(shí)會(huì)消耗一些流量。如果補(bǔ)充信息非常少，那么用關(guān)閉或者下推交互代替，并且把用戶留在屏幕上。
其他要記住的事情還有彈出式畫布比其他方法需要更強(qiáng)的處理能力瀏覽器性能。這必須通過(guò)好的框架來(lái)緩和（看看結(jié)尾我的建議），這些問(wèn)題依然存在。如果你沒(méi)有為提供這種模式好的退回操作老設(shè)備和沒(méi)有JavaScript支持的設(shè)備它們會(huì)被落下。我介紹progressively?enhancing——例如為舊瀏覽器提供一種簡(jiǎn)單的解決方案，檢測(cè)新特性是否支持，提供瀏覽器可以支持的最優(yōu)解。
填寫詳細(xì)信息
因此，什么彈窗的優(yōu)勢(shì)？下面是幾個(gè)突出這種模式的價(jià)值的例子。
購(gòu)物車
今年早些時(shí)候我設(shè)計(jì)Garmin電商網(wǎng)站，跟典型“測(cè)試用戶”聊天（也就是我女朋友）。我們談了移動(dòng)電商網(wǎng)站上她喜歡什么不喜歡什么。她提出的最大的一個(gè)問(wèn)題是她常常想檢查購(gòu)物車?yán)锓帕耸裁矗且龅竭@點(diǎn)，她必須離開(kāi)正在瀏覽的內(nèi)容訪問(wèn)購(gòu)物車頁(yè)面。
這讓我靈光一閃。為什么不用彈出式畫布列出購(gòu)物車信息？用戶可以在任何時(shí)候快速點(diǎn)開(kāi)購(gòu)物車看看里面有什么。他們同樣可以迅速結(jié)賬——有效的從結(jié)賬程序中移除一整個(gè)步驟。如果你在電商工作，你知道這樣的話結(jié)賬流程步數(shù)變少，減少用戶放棄購(gòu)物車的可能性。
為了教用戶這個(gè)功能，我設(shè)計(jì)成用戶將商品加入購(gòu)物車時(shí)購(gòu)物車彈出式視窗滑出。這種即時(shí)教程非常有用，這個(gè)時(shí)機(jī)也很合適，因?yàn)樯唐繁患尤胭?gòu)物車之前用戶不需要知道購(gòu)物車。如果你正在建設(shè)一個(gè)電子商務(wù)網(wǎng)站，你或許已經(jīng)具備實(shí)現(xiàn)它的東西。
許多網(wǎng)站當(dāng)用戶鼠標(biāo)懸浮在購(gòu)物車圖標(biāo)上或者添加產(chǎn)品時(shí)展示購(gòu)物車預(yù)覽。你可以輕易的在這飛出的小窗口里改變選擇。例如響應(yīng)式網(wǎng)站彈出式視窗購(gòu)物車，Zazzle結(jié)賬。
我們不能從Garmin的桌面網(wǎng)站頁(yè)面上利用現(xiàn)有的購(gòu)物車信息，所以我們用“AJAX”（譯者注：創(chuàng)建交互式 Web 應(yīng)用程序而無(wú)需犧牲瀏覽器兼容性的流行方法）漸進(jìn)優(yōu)化處理購(gòu)物車頁(yè)面信息。我們的工程團(tuán)隊(duì)將購(gòu)物車信息儲(chǔ)存在局部?jī)?chǔ)存器中，這樣我們就不需要每次頁(yè)面加載的時(shí)候核對(duì)它們。在用戶執(zhí)行某種會(huì)導(dǎo)致信息變化的動(dòng)作時(shí)會(huì)更新。
這樣設(shè)計(jì)出高效的功能性的購(gòu)物車彈出式視窗。用戶可以從他們所在的任何頁(yè)面做所有跟常規(guī)購(gòu)物車一樣的事情——更新數(shù)量，添加優(yōu)惠碼。這個(gè)彈出式窗口在不使用戶失去什么的前提下通過(guò)自然的方式添加了功能。
產(chǎn)品過(guò)濾器
另一個(gè)極好的電子商務(wù)網(wǎng)站彈出式視窗用例是覆蓋分類頁(yè)面和產(chǎn)品列表頁(yè)面的過(guò)濾器。許多桌面布局排布大量過(guò)濾器供用戶分析和選擇產(chǎn)品列表。傳統(tǒng)方式在移動(dòng)端處理這些非常困難：你可以向用戶呈現(xiàn)長(zhǎng)列表過(guò)濾器或者展示產(chǎn)品，但兩項(xiàng)不能同時(shí)進(jìn)行。
通過(guò)彈出式畫布用戶可以點(diǎn)開(kāi)過(guò)濾器，切換他們喜歡的產(chǎn)品然后輕松回到已經(jīng)更新的產(chǎn)品列表。他們不會(huì)離開(kāi)原來(lái)的地方的同時(shí)獲得了所有的桌面布局的功能。如果顯示出一小部分內(nèi)容，用戶將很快得到其行為對(duì)應(yīng)的反饋。當(dāng)用戶切換過(guò)濾器時(shí)產(chǎn)品列表將會(huì)及更新。
頁(yè)面歷史記錄
彈出式畫布當(dāng)然不只局限于電子商務(wù)。當(dāng)我們?cè)O(shè)計(jì)Style.com的新移動(dòng)網(wǎng)站時(shí)目標(biāo)之一是讓用戶在時(shí)尚收藏和深入網(wǎng)站陳列窗之間輕松切換。在這個(gè)網(wǎng)站上切換內(nèi)容如此常見(jiàn)以至于用戶需要一種方式輕松的記錄他們?cè)?jīng)看過(guò)的所有東西。
開(kāi)發(fā)者應(yīng)用可以滑出和展示每一個(gè)用戶在網(wǎng)站中進(jìn)行過(guò)操作的商品的彈出式畫布，用縮略圖按照時(shí)間順序展示。找到以前瀏覽過(guò)的收藏只需滑動(dòng)列表這么簡(jiǎn)單。
評(píng)論
另一個(gè)效仿發(fā)布網(wǎng)站模式的有效應(yīng)用是展示評(píng)論。越來(lái)越多的網(wǎng)站效仿Medium允許用戶直接在單獨(dú)一行或文章中的段落評(píng)論。這個(gè)功能常常在移動(dòng)版本缺失，Medium對(duì)此感到很愧疚。彈出式畫布對(duì)此問(wèn)題是一種極好的解決方案。點(diǎn)擊評(píng)論標(biāo)志將彈出一個(gè)包含可見(jiàn)線條的評(píng)論。一個(gè)上下文彈出畫布評(píng)論條飛到文章位置，不過(guò)只是在桌面版式中。用戶可以集中注意力閱讀文章本身，當(dāng)他們對(duì)評(píng)論感興趣時(shí)，可以快速查看其他人對(duì)于他們閱讀的這段說(shuō)了什么。
這種想法可以應(yīng)用到博客和新聞網(wǎng)站。設(shè)想一下，閱讀一篇帶注腳的科學(xué)或者其他主題的文章。每一鏈接可以打開(kāi)一個(gè)包含相關(guān)注腳的的彈出式視窗。用戶可以快速獲得他們需要的信息且不會(huì)錯(cuò)過(guò)網(wǎng)頁(yè)內(nèi)容。這樣事實(shí)上可以改進(jìn)閱讀體驗(yàn)，這是數(shù)字設(shè)計(jì)師夢(mèng)寐以求的。
終極先鋒
所有上面列舉的例子擁用一個(gè)共性。彈出式視窗幫助用戶，但是用戶的成功并不取決于應(yīng)用彈出式視窗。他們可以不通過(guò)彈出式視窗使用購(gòu)物車或者瀏覽歷史記錄再或評(píng)論。彈出式畫布決不是必須的，但是它讓生活變得更加簡(jiǎn)單了。用戶更喜歡逗留或者買東西，讀更多文章看更多廣告。
我們需要停止自滿。正因?yàn)镕acebook的導(dǎo)航彈出式視窗工作的很好，但沒(méi)有使之成為“導(dǎo)航模式”。讓我們批判性的思考每一種模式做了什么和為什么有效。這在移動(dòng)端尤其重要，誰(shuí)的模式?jīng)]有桌面端成熟，就有充分的理由讓移動(dòng)設(shè)計(jì)師離開(kāi)。
你可能發(fā)現(xiàn)了，我僅僅討論了彈出式畫布視窗。這是偷了個(gè)小懶。當(dāng)我們考慮到彈出式畫布，我們不假思索的想到彈出式視窗。但實(shí)際上只是更有可能是彈出式畫布視窗而已。
數(shù)不盡的方法和模式正在等著設(shè)計(jì)師勇士去發(fā)現(xiàn)。我們的畫布不盡相同，他們分享了很多部分，每一部分稍有不同。我們的彈出式畫布解決方案同樣也應(yīng)該是不同的。
作為網(wǎng)頁(yè)設(shè)計(jì)師，我們不斷的走過(guò)相同的路徑，如果足夠幸運(yùn)的話或許能發(fā)現(xiàn)一條捷徑。但是地圖通常是不變的。我們自滿，在那些別人走過(guò)的步驟里折回，路徑被磨得越來(lái)越深。我們需要做探路者。就像Facebook引領(lǐng)我們用彈出式視窗利用屏幕以外空間，我們需要探索新版圖。也許現(xiàn)在我們只需要尋找彈出式視窗的新用法?；蛟S以后我們會(huì)找到完整的新彈出式畫布理論?；蛟S真正愛(ài)冒險(xiǎn)的人會(huì)發(fā)現(xiàn)全新的交互層次。
在這里為前沿設(shè)計(jì)師和他們繪制的地圖干杯。
