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