好了閒話少說,今天咱們的主題是“模式”modes 與模式的經典應用案例批量操作。

往期回顧:

首先要說明一點:模態modals 和模式modes 儘管都有個“模”字,但在界面設計上指的是不一樣的東西。前者是我們一般說的“帶黑色遮罩的彈窗或者頁面”,後者則指“同一個操作在不同的情況下,帶來不同的效果”,比如Photoshop 提供的各種工具就是模式切換的隱喻式說法。

在photoshop 中,用戶點擊一下“套索工具”然後按住鼠標左鍵,就可以在畫布上勾選一個範圍,點擊鼠標右鍵則可以對這個範圍進行操作。而點擊一下“畫筆工具”,儘管同樣是在畫布上按住鼠標左鍵,效果則變成了使用筆刷在畫布上畫出痕跡,這就是“共用同一個操作但效果不同”的模式切換。

此外,界面設計中還有一個和“模式”有點像的概念“視圖”view。通常來說,同一個界面與操作產生不同效果的稱為模式;同一套數據展示方式有差異的稱為視圖。這個就下次再聊了。

4000字乾貨!聊聊交互設計模式與批量操作

儘管在圖形化用戶界面的發展中,模式這個概念曾經被各路交互/界面設計師充分討論過,但實際上它並不是一個人機交互原生的概念,我個人推測“模式”的產生恰巧與非界面的產品設計有脫不開的關係。許多生活中的產品出於安全性、效率或者成本的考量會把屏幕設計的很小或者乾脆沒有屏幕,人和機器進行交互的方式也很簡單(一般是通過按鈕),這就導致這些產品能夠展示的信息很有限。那麼為了能夠區隔用戶的不同任務/意圖,用有限的按鈕實現不同功能,就採用了“模式”這種設計方式。

比如很多多功能的手錶既可以展示當前時間也可以拿來當鬧鐘或者計時器,那麼為了能在這麼小一點的屏幕上實現這麼多的功能,就需要一個“模式”按鈕來進行功能切換。切換模式後點擊調整時間按鈕,則可以達到選擇鬧鐘時間/調整計時時長/調整當前時間等不同的效果。

4000字乾貨!聊聊交互設計模式與批量操作

除了上述手錶的例子以外,“模式”還廣泛存在在各種簡單或複雜的民用/商用產品中,比如汽車的速度控制,就是一種速度與檔位協同完成的模式;而飛機的駕駛艙裡也有一個“模式操縱面板”,能讓飛機駕駛員在高度保持/垂直導航等模式中切換,對飛機的飛行高度/速度等作出調整。總之在產品設計的世界中“模式”的應用案例又多又復雜,相比之下界面交互中的“模式”就非常精簡好理解了。

4000字乾貨!聊聊交互設計模式與批量操作

在圖形化界面發展之初“模式”這個概念就被帶入了界面設計領域。也許是沒有跳脫產品設計的影響,此時的“模式”傾向於用硬件按鈕來解決問題,而沒有完全轉向界面操作。比如我們上次講過的Xerox Star 就設計了一個奇怪的“移動模式”,假如用戶想要移動一個文件到另一個文件夾,那麼他需要做以下幾步:

  • 先通過鼠標選中這個文件
  • 然後按一下鍵盤上的“移動”按鈕,讓計算機進入“移動模式”,此時屏幕上會出現“移動模式”的字樣,用戶不可以做任何與移動無關的操作,除非退出該模式
  • 此時他再用鼠標點擊一下目標文件夾,移動命令就會被執行

4000字乾貨!聊聊交互設計模式與批量操作

現在來看這個“模式”設計真是既反直覺效率又低下,因當時此很多設計師也在思考界面設計是否真的需要“模式”這個東西。和屏幕有限、交互方式有限的產品設計不同,電腦有鼠標有大屏幕,一方面用戶在同一個場景下可做的事情大大增多,另一方面設計師也可以通過拆分界面、增加功能入口的方式來讓用戶聚焦當前任務而沒必要採用模式。因此蘋果在1992 年發布的Macintosh 人機界面指南中開始將“無模式”modelessness 作為蘋果產品的一大賣點。用戶能在任何情況下完成任何行為,而不必要進入某個特殊的“模式”。比如我們上面提到的“移動”操作,在Mac 中就變成了我們熟悉的按下拖動,簡單快捷。

4000字乾貨!聊聊交互設計模式與批量操作

然而“模式”是不是完全過時了、完全不適合界面設計?也不盡然。首先,在一些和實物產品相關的地方,模式還是留下了它的痕跡。比如我們現在電腦鍵盤上的大小寫鎖定按鈕也是個“模式”設計。當用戶按下這個鍵的時候,電腦進入大寫模式,鍵盤打出來的字都是大寫的;再次按下這個按鈕則退出此模式。

另外在界面設計領域也有設計師對模式持不同態度,比如寫可用性十原則的那個尼爾森,就在1996 年寫了一篇文章談到他對“模式”這個東西不一樣的觀點。在他看來,“模式”這個東西的本意是“聚焦用戶的注意力、減少用戶可以做的操作,以便於用戶能更快捷地找到在當下具體場景中所需的操作與信息”,並且模式思維其實天然存在在人的日常生活中,比如一個人在廚房裡做的事肯定和在游泳池裡做的事不一樣。

這篇文章有興趣可見:

儘管如此,尼爾森也承認當時的“模式”具有一個很討人厭的問題:模式的切換很麻煩,用戶也總是忘記自己身處某個模式下,因此可能會做出此模式無效的錯誤操作。所以為了解決這個問題,尼爾森覺得採用彈簧模式( spring-loaded modes )作為普通模式的替代品更好。這種模式最廣泛的應用就是鍵盤上的shift 鍵:按下shift 時多選模式生效,此時可以點選多個文件,一旦鬆開shift 則馬上退出多選模式,這樣一來用戶就不會忘記自己身處某個模式下了。

儘管模式在界面設計中存在感越來越弱,但除了PS“工具”之外,仍然有兩個非常廣泛存在的模式設計:查看/編輯模式、批量操作模式。今天咱們會主要聊批量操作模式。

嚴格來講“批量操作”即同時對多個對象進行操作,它可用多種方式實現而並不局限於“模式”,但是現在市面上比較通行的處理辦法或多或少還是採用了模式的思路,因此我把這兩個東西放在一起說。

我這裡舉個例子:比如說你是一個賣海鮮的小店主,為了讓自己店裡的海鮮賣的好點,你決定上抖音給你的海鮮打廣告。但打廣告這個東西得多試,哪條廣告語、哪個產品能火很難說,所以你在抖音的廣告系統上新建了60 條廣告,每條用的廣告視頻和標題都有些差異,這樣最後哪條廣告火你就繼續投哪條,不火的就下掉不燒錢了。

4000字乾貨!聊聊交互設計模式與批量操作

但是這麼多的廣告管理起來很不方便。比如經過你的一番研究,發現抖音的受眾好像都比較喜歡大蝦的廣告,對螃蟹圖片不怎麼感冒,轉化數據很難看。所以你打算把所有帶了螃蟹圖片的20 條廣告都關閉投放。那我們能怎麼做呢?

1. 隱式模式

按照傳統的模式思維,我們可以像Xerox Star 一樣,通過某種辦法讓用戶進入多選模式,在這個模式下用戶可以進行一些特定的操作,比如批量刪除。然後在批量模式打開的狀態下,出現多選模式需要用到的組件:多選框與多選操作欄。此時其他和多選模式無關的操作,比如“新建廣告”則被置灰,除非用戶退出模式,否則不可點擊。

4000字乾貨!聊聊交互設計模式與批量操作

這樣設計相信很多同學能馬上看出問題:操作效率太低了。打開模式按鈕以後,還需要進行多選操作,然後選擇對應批量操作。其實假如用戶選擇了多個項,我們就可以預判這個用戶是想要對這多個項進行操作,沒必要要求用戶先打開一個批量模式開關

因此,為了解決這個問題,在保持表格複雜性可以容忍的條件下,大多數平台會將模式的進入方式設計得比較含蓄:只要用戶選中了多選框,就進入多選模式——我把這種設計叫做隱式模式。比如最近比較火的產品cubox,就採用了這樣的模式設計。除去進入模式的方式不同,其他的設計點和60年前的Xerox Star差異不大。

4000字乾貨!聊聊交互設計模式與批量操作

同樣的隱式模式,google mail 就做得更加精簡一些。用戶仍然通過點擊多選框進入多選模式,但是只禁用了“刷新”這個會清除所有多選狀態的操作,其他的大部分操作仍然可用。同時也不再提供退出模式的選擇。

4000字乾貨!聊聊交互設計模式與批量操作

那是不是隱式模式相比起來就更好,模式按鈕就不能再用了呢?也不是。咱們之前提過,“批量操作模式”之所以可以做成隱式的,是因為當用戶選擇多個項時,其意圖就已經很明確了。但某些時候,我們無法清晰捕捉到用戶的意圖,所以還得用戶自己手動把模式打開。

比如假如這個廣告投放的列表是有優先級排序的,在頁面中排序越高的廣告就能得到越多的用戶預算(這句話我瞎說的,知道什麼意思就行)。但之前的廣告表格已經非常複雜了,再插入一套排序組件會讓整個頁面的複雜程度再上一個台階,那此時應該怎麼辦?

4000字乾貨!聊聊交互設計模式與批量操作

此時我們的“排序功能”仍然是用模式實現的,但要求用戶先點擊一下排序觸發模式。這樣做雖然操作效率上不如隱式模式,但有效降低了頁面複雜度,並且也能讓新用戶意識到這個功能的存在,保證功能的可見性。

2. 彈簧模式

我們上面介紹過了,電腦的設計本身自帶了一個彈簧模式設計:shift 鍵。按下shift 鍵之後用戶可以選中列表中的一個範圍,而不需要一個個地去點選。因此我們在做表格批量操作的時候也可以考慮支持這個鍵控,方便有批量操作訴求的用戶批量進行選中。

3. 不使用模式

雖然我們全篇都在講模式,但實際上批量操作不用模式也能做。不用模式的時候一般有兩種情況:

第一,儘管使用模式區隔使用場景、隱藏一部分功能的設計方式保證了頁面的簡潔,但也帶來了另一個問題:可見性低。在沒有進入批量操作模式之前,用戶不清楚自己能做什麼多選操作。

在咱們抖音投廣告的案例中只有“刪除”、“下線”兩個操作,所以這個問題體現的不太明顯。但有些場景下,列表中的項有非常多的屬性,所以可能可做的批量操作很多。比如用戶可能會需要批量改廣告標題、改出價、改投放時段等等。因此用戶思考的順序是:我需要做某批量操作->我觀察到系統提供了這個操作功能->我開始進行這個操作。

4000字乾貨!聊聊交互設計模式與批量操作

因此,對於一些注重操作效率、用戶專業程度高的系統來說,為了能夠讓用戶能夠在進入本頁面時就能進行所有操作,願意犧牲一部分頁面簡潔性去換取更高的操作效率。這樣的系統往往選擇直接將批量相關的操作直接暴露在頁面中,因此對於設計師的排版技能有更高的要求。

4000字乾貨!聊聊交互設計模式與批量操作

在上面兩種樣式中,多選/批量操作都直接放在頁面中,不再使用模式呈現。因此當頁面上按鈕比較多的時候,一般會將所有批量操作收起來做成下拉菜單。

第二,注意到我們上面所有說的批量操作都比較簡單,比如“刪除”、“下線”一步即可完成,因此用戶主要的心理成本和操作成本都壓在多選操作上,也就是操作本身不難,只是操作的對像很多。但有些批量操作本身非常複雜、需要花費很多時間,那麼再通過為一個管理列表添加模式來解決問題,就不太合理。

比如假如我們的“抖音廣告”新出了一個功能,允許用戶自己創作新的圖片,然後把創作出來的圖片批量應用在已經有的廣告上。此時顯然我們再要求用戶先從廣告列表中選擇廣告,就不現實了。

by [艾迪網頁亞洲行銷研究中心]