2022-7-22 純純
首先要說明一點(diǎn)：模態(tài)modals和模式modes盡管都有個(gè)“模”字，但在界面設(shè)計(jì)上指的是不一樣的東西。前者是我們一般說的“帶黑色遮罩的彈窗或者頁面”，后者則指“同一個(gè)操作在不同的情況下，帶來不同的效果”，比如Photoshop提供的各種工具就是模式切換的隱喻式說法。
在photoshop中，用戶點(diǎn)擊一下“套索工具”然后按住鼠標(biāo)左鍵，就可以在畫布上勾選一個(gè)范圍，點(diǎn)擊鼠標(biāo)右鍵則可以對(duì)這個(gè)范圍進(jìn)行操作。而點(diǎn)擊一下“畫筆工具”，盡管同樣是在畫布上按住鼠標(biāo)左鍵，效果則變成了使用筆刷在畫布上畫出痕跡，這就是“共用同一個(gè)操作但效果不同”的模式切換。
此外，界面設(shè)計(jì)中還有一個(gè)和“模式”有點(diǎn)像的概念“視圖”view。通常來說，同一個(gè)界面與操作產(chǎn)生不同效果的稱為模式；同一套數(shù)據(jù)展示方式有差異的稱為視圖。這個(gè)就下次再聊了。
盡管在圖形化用戶界面的發(fā)展中，模式這個(gè)概念曾經(jīng)被各路交互/界面設(shè)計(jì)師充分討論過，但實(shí)際上它并不是一個(gè)人機(jī)交互原生的概念，我個(gè)人推測“模式”的產(chǎn)生恰巧與非界面的產(chǎn)品設(shè)計(jì)有脫不開的關(guān)系。許多生活中的產(chǎn)品出于安全性、效率或者成本的考量會(huì)把屏幕設(shè)計(jì)的很小或者干脆沒有屏幕，人和機(jī)器進(jìn)行交互的方式也很簡單（一般是通過按鈕），這就導(dǎo)致這些產(chǎn)品能夠展示的信息很有限。那么為了能夠區(qū)隔用戶的不同任務(wù)/意圖，用有限的按鈕實(shí)現(xiàn)不同功能，就采用了“模式”這種設(shè)計(jì)方式。
比如很多多功能的手表既可以展示當(dāng)前時(shí)間也可以拿來當(dāng)鬧鐘或者計(jì)時(shí)器，那么為了能在這么小一點(diǎn)的屏幕上實(shí)現(xiàn)這么多的功能，就需要一個(gè)“模式”按鈕來進(jìn)行功能切換。切換模式后點(diǎn)擊調(diào)整時(shí)間按鈕，則可以達(dá)到選擇鬧鐘時(shí)間/調(diào)整計(jì)時(shí)時(shí)長/調(diào)整當(dāng)前時(shí)間等不同的效果。
除了上述手表的例子以外，“模式”還廣泛存在在各種簡單或復(fù)雜的民用/商用產(chǎn)品中，比如汽車的速度控制，就是一種速度與檔位協(xié)同完成的模式；而飛機(jī)的駕駛艙里也有一個(gè)“模式操縱面板”，能讓飛機(jī)駕駛員在高度保持/垂直導(dǎo)航等模式中切換，對(duì)飛機(jī)的飛行高度/速度等作出調(diào)整?？傊诋a(chǎn)品設(shè)計(jì)的世界中“模式”的應(yīng)用案例又多又復(fù)雜，相比之下界面交互中的“模式”就非常精簡好理解了。
02模式在界面設(shè)計(jì)的興衰
在圖形化界面發(fā)展之初“模式”這個(gè)概念就被帶入了界面設(shè)計(jì)領(lǐng)域。也許是沒有跳脫產(chǎn)品設(shè)計(jì)的影響，此時(shí)的“模式”傾向于用硬件按鈕來解決問題，而沒有完全轉(zhuǎn)向界面操作。比如我們上次講過的Xerox Star就設(shè)計(jì)了一個(gè)奇怪的“移動(dòng)模式”，假如用戶想要移動(dòng)一個(gè)文件到另一個(gè)文件夾，那么他需要做以下幾步：
現(xiàn)在來看這個(gè)“模式”設(shè)計(jì)真是既反直覺效率又低下，因當(dāng)時(shí)此很多設(shè)計(jì)師也在思考界面設(shè)計(jì)是否真的需要“模式”這個(gè)東西。和屏幕有限、交互方式有限的產(chǎn)品設(shè)計(jì)不同，電腦有鼠標(biāo)有大屏幕，一方面用戶在同一個(gè)場景下可做的事情大大增多，另一方面設(shè)計(jì)師也可以通過拆分界面、增加功能入口的方式來讓用戶聚焦當(dāng)前任務(wù)而沒必要采用模式。因此蘋果在1992年發(fā)布的Macintosh人機(jī)界面指南中開始將“無模式”modelessness作為蘋果產(chǎn)品的一大賣點(diǎn)。用戶能在任何情況下完成任何行為，而不必要進(jìn)入某個(gè)特殊的“模式”。比如我們上面提到的“移動(dòng)”操作，在Mac中就變成了我們熟悉的按下拖動(dòng)，簡單快捷。
然而“模式”是不是完全過時(shí)了、完全不適合界面設(shè)計(jì)？也不盡然。首先，在一些和實(shí)物產(chǎn)品相關(guān)的地方，模式還是留下了它的痕跡。比如我們現(xiàn)在電腦鍵盤上的大小寫鎖定按鈕也是個(gè)“模式”設(shè)計(jì)。當(dāng)用戶按下這個(gè)鍵的時(shí)候，電腦進(jìn)入大寫模式，鍵盤打出來的字都是大寫的；再次按下這個(gè)按鈕則退出此模式。另外在界面設(shè)計(jì)領(lǐng)域也有設(shè)計(jì)師對(duì)模式持不同態(tài)度，比如寫可用性十原則的那個(gè)尼爾森，就在1996年寫了一篇文章談到他對(duì)“模式”這個(gè)東西不一樣的觀點(diǎn)。在他看來，“模式”這個(gè)東西的本意是“聚焦用戶的注意力、減少用戶可以做的操作，以便于用戶能更快捷地找到在當(dāng)下具體場景中所需的操作與信息”，并且模式思維其實(shí)天然存在在人的日常生活中，比如一個(gè)人在廚房里做的事肯定和在游泳池里做的事不一樣。
這篇文章有興趣可見：https://www.nngroup.com/articles/anti-mac-interface/
盡管如此，尼爾森也承認(rèn)當(dāng)時(shí)的“模式”具有一個(gè)很討人厭的問題：模式的切換很麻煩，用戶也總是忘記自己身處某個(gè)模式下，因此可能會(huì)做出此模式無效的錯(cuò)誤操作。所以為了解決這個(gè)問題，尼爾森覺得采用彈簧模式（ spring-loaded modes ）作為普通模式的替代品更好。這種模式最廣泛的應(yīng)用就是鍵盤上的shift鍵：按下shift時(shí)多選模式生效，此時(shí)可以點(diǎn)選多個(gè)文件，一旦松開shift則馬上退出多選模式，這樣一來用戶就不會(huì)忘記自己身處某個(gè)模式下了。
03作為模式的批量操作
盡管模式在界面設(shè)計(jì)中存在感越來越弱，但除了PS“工具”之外，仍然有兩個(gè)非常廣泛存在的模式設(shè)計(jì)：查看/編輯模式、批量操作模式。今天咱們會(huì)主要聊批量操作模式。嚴(yán)格來講“批量操作”即同時(shí)對(duì)多個(gè)對(duì)象進(jìn)行操作，它可用多種方式實(shí)現(xiàn)而并不局限于“模式”，但是現(xiàn)在市面上比較通行的處理辦法或多或少還是采用了模式的思路，因此我把這兩個(gè)東西放在一起說。
我這里舉個(gè)例子：比如說你是一個(gè)賣海鮮的小店主，為了讓自己店里的海鮮賣的好點(diǎn)，你決定上抖音給你的海鮮打廣告。但打廣告這個(gè)東西得多試，哪條廣告語、哪個(gè)產(chǎn)品能火很難說，所以你在抖音的廣告系統(tǒng)上新建了60條廣告，每條用的廣告視頻和標(biāo)題都有些差異，這樣最后哪條廣告火你就繼續(xù)投哪條，不火的就下掉不燒錢了。
但是這么多的廣告管理起來很不方便。比如經(jīng)過你的一番研究，發(fā)現(xiàn)抖音的受眾好像都比較喜歡大蝦的廣告，對(duì)螃蟹圖片不怎么感冒，轉(zhuǎn)化數(shù)據(jù)很難看。所以你打算把所有帶了螃蟹圖片的20條廣告都關(guān)閉投放。那我們能怎么做呢？
1.隱式模式
按照傳統(tǒng)的模式思維，我們可以像Xerox Star一樣，通過某種辦法讓用戶進(jìn)入多選模式，在這個(gè)模式下用戶可以進(jìn)行一些特定的操作，比如批量刪除。然后在批量模式打開的狀態(tài)下，出現(xiàn)多選模式需要用到的組件：多選框與多選操作欄。此時(shí)其他和多選模式無關(guān)的操作，比如“新建廣告”則被置灰，除非用戶退出模式，否則不可點(diǎn)擊。
這樣設(shè)計(jì)相信很多同學(xué)能馬上看出問題：操作效率太低了。打開模式按鈕以后，還需要進(jìn)行多選操作，然后選擇對(duì)應(yīng)批量操作。其實(shí)假如用戶選擇了多個(gè)項(xiàng)，我們就可以預(yù)判這個(gè)用戶是想要對(duì)這多個(gè)項(xiàng)進(jìn)行操作，沒必要要求用戶先打開一個(gè)批量模式開關(guān)
因此，為了解決這個(gè)問題，在保持表格復(fù)雜性可以容忍的條件下，大多數(shù)平臺(tái)會(huì)將模式的進(jìn)入方式設(shè)計(jì)得比較含蓄：只要用戶選中了多選框，就進(jìn)入多選模式——我把這種設(shè)計(jì)叫做隱式模式。比如最近比較火的產(chǎn)品cubox，就采用了這樣的模式設(shè)計(jì)。除去進(jìn)入模式的方式不同，其他的設(shè)計(jì)點(diǎn)和60年前的Xerox Star差異不大。
同樣的隱式模式，google mail就做得更加精簡一些。用戶仍然通過點(diǎn)擊多選框進(jìn)入多選模式，但是只禁用了“刷新”這個(gè)會(huì)清除所有多選狀態(tài)的操作，其他的大部分操作仍然可用。同時(shí)也不再提供退出模式的選擇。
那是不是隱式模式相比起來就更好，模式按鈕就不能再用了呢？也不是。咱們之前提過，“批量操作模式”之所以可以做成隱式的，是因?yàn)楫?dāng)用戶選擇多個(gè)項(xiàng)時(shí)，其意圖就已經(jīng)很明確了。但某些時(shí)候，我們無法清晰捕捉到用戶的意圖，所以還得用戶自己手動(dòng)把模式打開。比如假如這個(gè)廣告投放的列表是有優(yōu)先級(jí)排序的，在頁面中排序越高的廣告就能得到越多的用戶預(yù)算（這句話我瞎說的，知道什么意思就行）。但之前的廣告表格已經(jīng)非常復(fù)雜了，再插入一套排序組件會(huì)讓整個(gè)頁面的復(fù)雜程度再上一個(gè)臺(tái)階，那此時(shí)應(yīng)該怎么辦？
此時(shí)我們的“排序功能”仍然是用模式實(shí)現(xiàn)的，但要求用戶先點(diǎn)擊一下排序觸發(fā)模式。這樣做雖然操作效率上不如隱式模式，但有效降低了頁面復(fù)雜度，并且也能讓新用戶意識(shí)到這個(gè)功能的存在，保證功能的可見性。
2.彈簧模式
我們上面介紹過了，電腦的設(shè)計(jì)本身自帶了一個(gè)彈簧模式設(shè)計(jì)：shift鍵。按下shift鍵之后用戶可以選中列表中的一個(gè)范圍，而不需要一個(gè)個(gè)地去點(diǎn)選。因此我們在做表格批量操作的時(shí)候也可以考慮支持這個(gè)鍵控，方便有批量操作訴求的用戶批量進(jìn)行選中。
3.不使用模式
雖然我們?nèi)荚谥v模式，但實(shí)際上批量操作不用模式也能做。不用模式的時(shí)候一般有兩種情況：第一，盡管使用模式區(qū)隔使用場景、隱藏一部分功能的設(shè)計(jì)方式保證了頁面的簡潔，但也帶來了另一個(gè)問題：可見性低。在沒有進(jìn)入批量操作模式之前，用戶不清楚自己能做什么多選操作。在咱們抖音投廣告的案例中只有“刪除”、“下線”兩個(gè)操作，所以這個(gè)問題體現(xiàn)的不太明顯。但有些場景下，列表中的項(xiàng)有非常多的屬性，所以可能可做的批量操作很多。比如用戶可能會(huì)需要批量改廣告標(biāo)題、改出價(jià)、改投放時(shí)段等等。因此用戶思考的順序是：我需要做某批量操作->我觀察到系統(tǒng)提供了這個(gè)操作功能->我開始進(jìn)行這個(gè)操作。
因此，對(duì)于一些注重操作效率、用戶專業(yè)程度高的系統(tǒng)來說，為了能夠讓用戶能夠在進(jìn)入本頁面時(shí)就能進(jìn)行所有操作，愿意犧牲一部分頁面簡潔性去換取更高的操作效率。這樣的系統(tǒng)往往選擇直接將批量相關(guān)的操作直接暴露在頁面中，因此對(duì)于設(shè)計(jì)師的排版技能有更高的要求。
在上面兩種樣式中，多選/批量操作都直接放在頁面中，不再使用模式呈現(xiàn)。因此當(dāng)頁面上按鈕比較多的時(shí)候，一般會(huì)將所有批量操作收起來做成下拉菜單。
第二，注意到我們上面所有說的批量操作都比較簡單，比如“刪除”、“下線”一步即可完成，因此用戶主要的心理成本和操作成本都?jí)涸诙噙x操作上，也就是操作本身不難，只是操作的對(duì)象很多。但有些批量操作本身非常復(fù)雜、需要花費(fèi)很多時(shí)間，那么再通過為一個(gè)管理列表添加模式來解決問題，就不太合理。比如假如我們的“抖音廣告”新出了一個(gè)功能，允許用戶自己創(chuàng)作新的圖片，然后把創(chuàng)作出來的圖片批量應(yīng)用在已經(jīng)有的廣告上。此時(shí)顯然我們再要求用戶先從廣告列表中選擇廣告，就不現(xiàn)實(shí)了。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：白話說交互 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net