01問(wèn)題起源
這篇文章討論的話題來(lái)自于我自己工作中一個(gè)長(zhǎng)久存在的疑惑。我們用一個(gè)例子開(kāi)場(chǎng)：你運(yùn)營(yíng)著一個(gè)視頻網(wǎng)站，這個(gè)網(wǎng)站會(huì)給付費(fèi)高級(jí)用戶提供3種權(quán)益：跳過(guò)廣告、免費(fèi)音樂(lè)會(huì)員、積分折扣。那么你將會(huì)員權(quán)益頁(yè)設(shè)計(jì)成這樣：

這個(gè)時(shí)候就有一個(gè)充滿疑惑的用戶站出來(lái)了：這個(gè)頁(yè)面的意思是說(shuō)“我作為一個(gè)高級(jí)會(huì)員，同時(shí)享有3個(gè)權(quán)益，只是這個(gè)頁(yè)面展示不下了，所以我只能通過(guò)切換頁(yè)面的形式查看我的3個(gè)權(quán)益”，還是說(shuō)“優(yōu)質(zhì)大會(huì)員可以按下對(duì)應(yīng)的按鈕，從3個(gè)權(quán)益里挑選一個(gè)享受”？轉(zhuǎn)換成我們?cè)O(shè)計(jì)的語(yǔ)言來(lái)說(shuō)，也就是“這到底是一個(gè)tab，還是一組互斥的按鈕？”
為什么我們要把這兩個(gè)東西做得那么像？他們應(yīng)該長(zhǎng)這么像嗎？tab和按鈕、單選框、菜單之間到底有什么關(guān)系？這些問(wèn)題雖然聽(tīng)起來(lái)基礎(chǔ)，但深究起來(lái)縱橫50年來(lái)控件的發(fā)展史，是一個(gè)很值得研究品味的小細(xì)節(jié)。

02信息與行為，事物與事件

tab和按鈕，信息展示控件和選擇器之間的差異，根本上來(lái)說(shuō)是“信息”與“行為”、“事物”（thing）和“事件”（event）之間的差異。前者獨(dú)立于用戶的意圖和行為之外客觀存在，即使用戶永遠(yuǎn)不去看、不去使用這些東西，它們?nèi)匀淮嬖凇６笆录眲t需要事物加上人的操作行為才能完成。
就比如說(shuō)房間里有一箱子蘋(píng)果，這是一個(gè)客觀事實(shí)，蘋(píng)果也是一樣“事物”。而人中午肚子餓了，走過(guò)去拿起一個(gè)蘋(píng)果吃了，那么“食用蘋(píng)果”就是一個(gè)事件，這個(gè)流程需要“蘋(píng)果”這個(gè)事物，也需要人拿起來(lái)咀嚼、吞咽的動(dòng)作，這兩個(gè)要素共同組成了“食用蘋(píng)果”這個(gè)事實(shí)。在現(xiàn)實(shí)生活中“事物”和“事件”完全是兩個(gè)不同的概念，不會(huì)有人把這兩個(gè)事情混淆?！笆挛铩本秃孟衩~，而“事件”就是包含動(dòng)詞的主謂賓短語(yǔ)，前者看得見(jiàn)、摸得著，能夠被穩(wěn)定觀測(cè)，而后者不一定。比如要是有人告訴你“桌上有一個(gè)蘋(píng)果”，那么你一扭頭就看得見(jiàn)蘋(píng)果的確在桌上，因此這個(gè)事實(shí)是確鑿無(wú)誤的；但假如有小朋友跟你告狀“報(bào)告老師，小明剛才打我”，就不那么容易取證。然而在人機(jī)交互中，“動(dòng)作”和“行為”逐漸區(qū)分得不是那么清晰。
03命令行時(shí)代

人機(jī)交互發(fā)展之初，“信息”與“行為”、“事物”和“事件”可以很容易地區(qū)分。在用戶還得使用命令行操作電腦的時(shí)代，查看某個(gè)客觀存在的事物、進(jìn)行一項(xiàng)行為，共用了一個(gè)動(dòng)作：輸入指令。用戶需要使用這樣的方式來(lái)告訴機(jī)器我想去看什么、做什么，因此用戶可以閱讀文本，從語(yǔ)句字面意思判斷事物和事件、信息和行為。從一開(kāi)始的案例來(lái)講，比如用戶想要查看所有權(quán)益，就鍵入“查看權(quán)益”，看看打印出來(lái)的權(quán)益都有什么。假如系統(tǒng)要求用戶選擇某個(gè)權(quán)益，則用戶輸入權(quán)益代表的編號(hào)或者權(quán)益名字。

但命令行界面這種交互形式畢竟效率太低，也并不利于形成用戶對(duì)于系統(tǒng)完整穩(wěn)健的心智模型，因此隨著電腦作為家用生產(chǎn)力工具的地位不斷提升、新的操作設(shè)備“鼠標(biāo)”的普及，圖形化用戶界面（GUI）應(yīng)運(yùn)而生。
在命令行向圖形化用戶界面過(guò)渡的階段，兩種新的交互樣式首先出現(xiàn)：菜單和輸入框。早期的菜單與輸入框的樣式非常粗糙，與傳統(tǒng)命令行界面差異很小，因此計(jì)算機(jī)從業(yè)者將早期只能展示字符而無(wú)法展示圖形、所以只能用菜單、文本輸入框作為主要交互形式的計(jì)算機(jī)帶點(diǎn)嘲諷地稱(chēng)為“熒光屏打字機(jī)”（Glass Teletypes）。

在這個(gè)階段，“菜單”僅僅是一個(gè)簡(jiǎn)陋的、有別于主屏幕的展示容器，甚至我們今天熟悉的“對(duì)話框”（dialog box），也可以被理解為菜單的一種變體。至于菜單上究竟是放“行為”還是“信息”、“事物”還是“事件”根本就無(wú)所謂，因?yàn)橛脩羧匀灰灶?lèi)命令行時(shí)代的交互方式，也就是用閱讀文本的方式來(lái)理解事物。
04圖形化界面時(shí)代

圖形化用戶界面極大地改變了用戶和電腦交互的方式。鼠標(biāo)的普及讓用戶界面的元素更多、結(jié)構(gòu)更加復(fù)雜，用戶體驗(yàn)和心理學(xué)的研究成果也孕育、催生出了許多新的交互樣式。其中就包含了一個(gè)對(duì)當(dāng)今控件形態(tài)影響巨大的概念：漸進(jìn)展示（progressive disclosure）。
一般認(rèn)為Xerox公司1981年的Xerox Star是最先在圖形化界面中使用選擇器/tab的產(chǎn)品，雖然這個(gè)電腦商業(yè)成績(jī)不咋地，但在用戶界面方面做出了很多貢獻(xiàn)。在這個(gè)用戶界面中，設(shè)計(jì)師為了讓用戶不需要像命令行界面時(shí)代一樣不停地通過(guò)打字、記憶命令短語(yǔ)來(lái)與計(jì)算機(jī)交互，因此決定采用以下策略：

• 將高頻使用的項(xiàng)目全部展示給用戶，無(wú)需打字，只要在選項(xiàng)中選擇即可：這個(gè)策略催生了選擇器組件

• 將暫時(shí)不需要使用和展示的信息收起來(lái)，只在用戶點(diǎn)擊按鈕時(shí)再漸進(jìn)展示：這個(gè)策略催生了tab

Xerox Star時(shí)代的控件樣式非常粗糙，不管是tab、開(kāi)關(guān)還是多選器，都以按鈕的樣式呈現(xiàn)，因此某個(gè)選項(xiàng)到底是什么意思、具體怎么用，依然依賴(lài)閱讀文案來(lái)判斷。比如用戶看到“對(duì)齊方式：左對(duì)齊/右對(duì)齊/居中對(duì)齊”，就應(yīng)該能理解是在3個(gè)對(duì)齊方式中選擇一個(gè)，而看到“展示：字符/段落”，就應(yīng)該理解是在選擇展示和字符有關(guān)的設(shè)置項(xiàng)，還是和段落有關(guān)的設(shè)置項(xiàng)。
而為什么tab、選擇器成為了我們今天看見(jiàn)的樣子？這又不得不提鼠標(biāo)的普及讓一種全新的交互形式：直接操作（direct manipulation）進(jìn)入了交互設(shè)計(jì)師的視野。按今天的說(shuō)法，直接操作一般指“直接對(duì)對(duì)象進(jìn)行操作”，比如用鼠標(biāo)直接用拖動(dòng)的形式進(jìn)行文件排序、放大縮小、位置移動(dòng)等操作。相比菜單、文本輸入框，這種操作形式更快速、反饋更充足、更符合直覺(jué)。比如我們現(xiàn)在非常熟悉的“把某個(gè)文件拖動(dòng)到回收站”這個(gè)操作，就是直接操作的一個(gè)經(jīng)典案例。

雖然直接操作今天看來(lái)是理所當(dāng)然的，小學(xué)生都知道怎么把文件拖到廢紙簍。但80年代用戶圖形化界面誕生之初，用戶對(duì)家用電腦根本沒(méi)什么概念，更不要提鼠標(biāo)拖動(dòng)這種高端操作了。那么，設(shè)計(jì)師要如何教育用戶學(xué)會(huì)使用直接操作這種新的交互形式？
這個(gè)答案是：引入隱喻（metaphor）。簡(jiǎn)單來(lái)講，隱喻即為“用直接或間接的方式，說(shuō)明A和B很像、A具有B的特性，或者可以用操作B的方式操作A”。將用戶完全不熟悉的人機(jī)交互概念用日常生活中的事物表述出來(lái)，就能使其將自己的生活經(jīng)驗(yàn)移植/應(yīng)用到人機(jī)交互中，從而降低學(xué)習(xí)成本、使用戶通過(guò)直覺(jué)也能辨別出某個(gè)功能該怎么用。比如上面提到的“將文件移入廢紙簍”，就是一個(gè)非常出色的、不言而喻的隱喻：

因此，當(dāng)設(shè)計(jì)師發(fā)現(xiàn)使用隱喻是行之有效的用戶教育形式時(shí)，隱喻就成了當(dāng)時(shí)流行的設(shè)計(jì)思路。順著這個(gè)思路越走越遠(yuǎn)，最終誕生了像mircosoft bob這樣類(lèi)似游戲界面的浮夸系統(tǒng)樣式，我放出來(lái)給各位嘲笑兩下。

話說(shuō)回來(lái)，使用隱喻這股風(fēng)潮也影響了控件的樣式設(shè)計(jì)。比如1988年蘋(píng)果開(kāi)發(fā)的一個(gè)可視化編程軟件Fabrik，就采用了現(xiàn)實(shí)生活中“文件夾上的標(biāo)簽”作為隱喻來(lái)設(shè)計(jì)tab，此舉暗示用戶可以快速地在不同頁(yè)面中跳轉(zhuǎn)，就像現(xiàn)實(shí)生活中根據(jù)文件夾標(biāo)簽來(lái)翻找文件夾中的文件一樣。

此時(shí)我們可以發(fā)現(xiàn)，F(xiàn)abrik使用隱喻的“tab選項(xiàng)卡”和Xerox Star純按鈕圖形化的“tab選項(xiàng)卡”在樣式上開(kāi)始存在差別。用戶無(wú)法再?gòu)奈淖稚先ダ斫膺@個(gè)控件的交互方式，而需要從圖形上去分辨、動(dòng)用自己日常生活的經(jīng)驗(yàn)。因此從這個(gè)角度上來(lái)說(shuō)，不同樣式的控件映射不同的現(xiàn)實(shí)物體，不同的現(xiàn)實(shí)物體應(yīng)該對(duì)應(yīng)著不同的交互方式。比如“單項(xiàng)選擇”radio button使用的隱喻，就是收音機(jī)按鈕。這種按鈕按下去一個(gè)其他的按鈕就會(huì)都彈起來(lái)，所以每次只能選中1。而“多項(xiàng)選擇”check box使用的隱喻則是紙質(zhì)調(diào)查表/備忘錄上的打勾格子，因此可以選擇多個(gè)。
“按收音機(jī)按鈕”和“在備忘錄上打鉤”，都是動(dòng)態(tài)的“事件”，而只有“文件夾里的分頁(yè)標(biāo)簽”是靜態(tài)的“事物”，這種隱喻性質(zhì)之間的差異讓人對(duì)于tab和單選框用途差異作出直覺(jué)性的判斷。因此因此盡管在80～90年代沒(méi)有引起充分討論，但系統(tǒng)設(shè)計(jì)中，一般會(huì)把tab用作靜態(tài)頁(yè)面的導(dǎo)航，而將單選框/多選框用作動(dòng)態(tài)選擇行為。以Apple II（1986或1987）為例：

相比之下，“菜單”作為最古老的交互控件形式，它的常見(jiàn)樣式（下拉菜單）在隱喻流行起來(lái)之前就基本固定，可以算為人機(jī)交互虛擬環(huán)境下一種原生的概念，所以菜單的使用場(chǎng)景反而不受隱喻、不受現(xiàn)實(shí)生活中物體的特性影響。它結(jié)構(gòu)簡(jiǎn)單、有大量空間來(lái)寫(xiě)說(shuō)明文案，因此作為控件的實(shí)用性很強(qiáng)，放“靜態(tài)信息”也沒(méi)問(wèn)題，放“動(dòng)作”也行，有點(diǎn)像一個(gè)“收納抽屜”。

05混亂的90年代～千禧年

90年代到00年代計(jì)算機(jī)/網(wǎng)絡(luò)行業(yè)發(fā)展的勢(shì)頭有目共睹，使用場(chǎng)景的不斷增長(zhǎng)使得頁(yè)面的復(fù)雜性指數(shù)級(jí)提升。因此交互設(shè)計(jì)師也就需要去不斷地思考控件之間的層級(jí)關(guān)系、差異、適用的場(chǎng)景等等。這個(gè)時(shí)代各個(gè)大廠制定過(guò)許多關(guān)于“行為”與“信息”之間的規(guī)則，然后又一一將它們推翻。我們?nèi)匀灰晕④泈indows和蘋(píng)果作為案例，看看他們的嘗試。
windows很快注意到了“行為”和“信息”之間的差異。在html那種藍(lán)色帶下劃線的超鏈接按鈕樣式流行起來(lái)以后，windows認(rèn)為這種按鈕看起來(lái)“安全、沒(méi)有破壞力”，“不太嚴(yán)肅”，容易讓用戶聯(lián)想起網(wǎng)頁(yè)超鏈接那種頁(yè)面之間的跳轉(zhuǎn)。所以在windows 7的規(guī)范手冊(cè)中，指導(dǎo)設(shè)計(jì)師應(yīng)該盡量采用帶邊框、有陰影的按鈕樣式來(lái)承載“行為”。

然而另一方面，windows 7對(duì)于tab/單選框的定位是模糊的。它允許使用選項(xiàng)卡tab來(lái)替代單選操作，只有被選中的tab下的修改才會(huì)生效。允許tab和單選操作進(jìn)行互換在業(yè)界也有一些反對(duì)聲音，比如說(shuō)寫(xiě)2000年《GUI設(shè)計(jì)禁忌》的Jeff Johnson就認(rèn)為tab最好是只作為導(dǎo)航使用，而非選擇器，因?yàn)檫@樣做混淆了“信息展示”與“行為選擇”的差異。

最后，文字型按鈕的出現(xiàn)，使得用戶逐漸分不清什么是“tab”，什么不是“tab”。windows7時(shí)代也出現(xiàn)了縱向排列的tab，用于支持tab太多導(dǎo)致橫向空間不夠用的情況。很不巧，windows的另一個(gè)控件wizard有著長(zhǎng)得很像縱向tab的側(cè)邊欄。這個(gè)側(cè)邊欄綜合排列了信息導(dǎo)航、功能快捷操作等多種類(lèi)型的入口。因此“tab”或者類(lèi)“tab”的組件使用場(chǎng)景被進(jìn)一步拉扯、拓寬。

相比windows，mac的做法更加討巧。mac OS有單選框，但是他們也同時(shí)包含了非常類(lèi)似xerox star原始樣式的選項(xiàng)卡視圖（tab view）與分段控件（segmented control）。兩者雖然看起來(lái)一模一樣，但從規(guī)范的角度上來(lái)說(shuō)，前者負(fù)責(zé)信息展示，后者負(fù)責(zé)在單選、甚至多選的動(dòng)作操作，可以說(shuō)是非常掩耳盜鈴，總體傾向于不區(qū)分“選擇器”和“選項(xiàng)卡tab”樣式。mac的這種控件既不使用隱喻，甚者有時(shí)也不寫(xiě)文案，要求用戶通過(guò)控件出現(xiàn)的位置和上下文來(lái)判斷其用途。之所以蘋(píng)果敢應(yīng)用這種簡(jiǎn)潔中帶著些許豪橫的設(shè)計(jì)思路，我個(gè)人認(rèn)為主要仍是因?yàn)槠洚a(chǎn)品比較大眾化、場(chǎng)景沒(méi)那么復(fù)雜。

05扁平化時(shí)代與隱喻失效

經(jīng)過(guò)了00年代控件的發(fā)展，10年以后有兩件事情極大地影響了用戶的心智。iOS7帶起來(lái)的扁平化設(shè)計(jì)風(fēng)潮，使得控件整體樣式往極簡(jiǎn)、輕量的方向突飛猛進(jìn)。原來(lái)不同控件的形狀、色彩差異很大，用戶不容易弄混按鈕、單選框和tab，但在扁平化設(shè)計(jì)的思路下，所有控件都用方塊甚至文字本身來(lái)代表，這樣做無(wú)疑削弱了控件的可識(shí)別性。

其次我們上文說(shuō)過(guò)，隱喻的運(yùn)作方式是讓用戶將生活中常見(jiàn)事物與控件做類(lèi)比。然而時(shí)過(guò)境遷，當(dāng)用戶生活中常見(jiàn)的事物已經(jīng)飛速變化，老舊的隱喻就會(huì)失效。文件夾選項(xiàng)卡、收音機(jī)按鈕……這些東西早就是老黃歷了，假如“隱喻”需要事先解釋才能讓用戶理解，那么它就不再能起作用。因此對(duì)于很多年紀(jì)很小的新用戶來(lái)說(shuō)，用選項(xiàng)卡tab承載行為操作并沒(méi)有什么不妥當(dāng)——畢竟今天文件夾都不太常見(jiàn)了。
06我們到底該怎么做？
先說(shuō)結(jié)論：

• 不要制造沒(méi)必要的規(guī)矩

• 對(duì)于絕大多數(shù)場(chǎng)景比較簡(jiǎn)單的產(chǎn)品，菜單/單選/tab不區(qū)分也無(wú)所謂

• 對(duì)于復(fù)雜工具型/企業(yè)級(jí)產(chǎn)品，無(wú)論是移動(dòng)端還是PC/Web，最好區(qū)分操作/信息展示控件，嚴(yán)格區(qū)分單選和tab的樣式。

首先第一條：不要制造不必要的規(guī)矩。這條其實(shí)有點(diǎn)違背交互設(shè)計(jì)師的天性，我們天生就受不了含含糊糊的灰色地帶。但控件的運(yùn)用中，貼合場(chǎng)景比遵守某條據(jù)說(shuō)行業(yè)通用的“規(guī)矩”要重要很多。比如說(shuō)我聽(tīng)有些設(shè)計(jì)師的分享里提到他們會(huì)比較嚴(yán)格的要求作為導(dǎo)航控件的tab上不能放操作，而菜單才是操作的聚合。后半句話我們已經(jīng)在上文論證過(guò)了，沒(méi)有的事，菜單從誕生之初就放啥都行。對(duì)于前半句話我想出示一個(gè)案例：

這張截圖來(lái)自淘寶的千牛商家工作臺(tái)里，這是一個(gè)給淘寶賣(mài)家的商家后臺(tái)，它把“發(fā)布寶貝”操作露出放在縱向?qū)Ш剑ü们乙步衪ab吧）上。這顯然是一個(gè)高頻操作。在這個(gè)案例里，你可以說(shuō)它還有其他的布局方式和解法，但是要說(shuō)因?yàn)榘巡僮鞣旁趖ab上就能導(dǎo)致多么嚴(yán)重的用戶體驗(yàn)問(wèn)題或者多么嚴(yán)重的控件定義問(wèn)題，那也大可不必那么夸張。
對(duì)于大多數(shù)C端產(chǎn)品，不區(qū)分單選/tab，或者在一些定制化程度比較高的頁(yè)面中用tab替代單選是可以接受的。其一是因?yàn)闊o(wú)數(shù)產(chǎn)品長(zhǎng)時(shí)間的驗(yàn)證說(shuō)明，用戶在這些比較放松、簡(jiǎn)單的場(chǎng)景下并沒(méi)有那么糾結(jié)控件樣式。其二是因?yàn)镃端產(chǎn)品的“信息”和“行為”其實(shí)沒(méi)有現(xiàn)實(shí)生活中那么分明，往往處于比較曖昧、你中有我我中有你的情況中。以“定酒店”為例，“查看酒店的信息”是信息展示，“訂酒店”則是動(dòng)作流程，但用戶從哪一步開(kāi)始轉(zhuǎn)“查看”為“動(dòng)作”的呢？不一定。

最后的最后，工具型/企業(yè)級(jí)產(chǎn)品不能應(yīng)用C端產(chǎn)品的設(shè)計(jì)邏輯。復(fù)雜場(chǎng)景下（比如tab有嵌套關(guān)系、比如既有tab又有選擇器）依然能讓用戶準(zhǔn)確無(wú)誤地理解控件的意圖和交互形式，是交互設(shè)計(jì)時(shí)必須思考的問(wèn)題。比如在windows新的fluent規(guī)范中，已經(jīng)絕口不提t(yī)ab和單選框之間的互換關(guān)系，tab被定義為純粹的導(dǎo)航控件，樣式也保持了和單選/多選的差異。
? ? ? ? ?

本文為轉(zhuǎn)載 僅供個(gè)人學(xué)習(xí)使用