交互技能樹06 | 如何積累交互模型？

05-03

本文轉載自我的微信公眾號「落羽敬齋」中的系列文章，有興趣的同學歡迎關注最新連載~

上個月我用了9篇文章終於把交互設計師職業技能的第一部分——思維部分講完了，從這個周末開始，我開始講「眼界」這部分。老實說，我只是作為設計師個人在寫些總結性質的文章，不是專業的學者或作家，因此所寫到的內容並不一定就是全的，甚至應該說一定有不少遺漏的地方，你在閱讀的時候，還需要自己多做思考，辯證地看待我提到的觀點。

言歸正傳，開始講眼界部分。

這是交互設計師的眼睛和藏書庫。有句話說得好，「道理我都懂，卻依然過不好這一生。」思維方式有了，你還需要有一定的專業知識、行業案例的積累才行，否則就算你想得很好，但是真到你要動手設計的時候，你會發現還是無從下手，因為你看得不夠多。就像你要想成為一名文學作家，首先就得有十年以上的閱讀量，涉獵古今中外各種文學名著和各種文體，你才有可能寫出文筆流暢、故事生動的散文或者小說來。就算你只想當一名野生的網文寫手，那也得先看他個幾千萬字的各類網路小說不是么？

慣例地繼續更新技能樹，現在已經到V1.6了，等到寫完這些文章，好像至少都要V3.0去了。不過也挺好，它會變成一棵參天大樹的，甚至在我把這個系列都寫完之後，還可以繼續生長。另外，這個技能樹確實很龐大，我把學習方法也附上來了：

WingST：技能樹是什麼，如何學習？?

zhuanlan.zhihu.com

作為交互設計師，第一種需要具備的眼界當然就是和交互相關的——交互模型。

交互設計模型是捕捉和積累有效的設計方案，並將其應用於類似問題的方法，這是嘗試將設計理論形式化，記錄最好的實踐方式，它可以幫助我們：

節省新項目的設計時間和精力；
提高設計方案的質量；
促進設計師與程序員的溝通；
幫助設計師成長。

這種模型化的設計概念源自建築設計，克里斯特福·亞歷山大（Christopher Alexander）撰寫了兩本影響力巨大的著作《模式語言》和《永恆的建築設計方式》，書中首次描述了建築設計模式這一概念，用以描述那些給居民帶來幸福感的建築設計精華。

而交互設計模式和建築設計模式有一個重要的區別，它不僅關注結構和元素的組織，還關注相應用戶活動的動態行為和變化。
——Alan Cooper，《About Face 4：交互設計精髓》

我在自學交互設計的過程中，自己發現了交互模型的這種規律，然後一直使用這種方式積累經驗和輔助設計，這對我的轉行過程幫助很大。後來我才看到原來Alan Cooper早就在書中提到了類似的交互設計模式，一方面遺憾沒有早點看到，另一方面也算是和大師不謀而合了，很開心。

交互模型單元

美國心理學家、體驗式學習大師 大衛·庫伯（David Kolb）認為，不能用經驗指導行動，應該從行動中歸納出經驗，把經驗升華為規律，再用規律指導行動。這就是他提出的庫伯學習圈，我們同樣可以用這種方式來學習和總結交互設計中的規律。

這部分內容我在之前的文章《交互設計中的規律》有講過，看過的同學也可以回顧一下。

行動中歸納經驗

我們平時都會使用一些電腦軟體和手機APP，你有留意到它們的界面和操作嗎？

比如iPhone的系統設置里，有一個WiFi設置界面，相信大家都很熟悉。

在現實世界中，我們是使用按下按鈕和撥動開關來啟動和關閉電器的，那在手機里我們如何開關WiFi呢？其實也是模擬撥動開關的效果，我們點擊界面最頂部的綠色開關，就會有一個撥動的小動畫，開關會從綠變白，WiFi也就關掉了。

我把軟體交互中這種簡單的交互操作叫做 交互模型單元（Interaction Module Unit），簡稱 IMU。比如開關操作，這種左邊有開關操作的功能名稱，右邊有一個點擊會切換的開關控制項，就構成了一個IMU。

當你記住了這個IMU可以作為功能開關之後，你下次需要自己設計功能開關的時候，你就可以用上。比如QQ音樂中就有同樣的控制項：

看到了吧？上圖中的「定時關閉」、「僅WiFi聯網」和「流量提醒」就是和剛剛的WiFi開關同樣的功能開關式的IMU。

可能你會有疑問了，為什麼你要稱它為 交互模型單元（IMU）呢？它明明就是一個簡單的控制項而已，叫控制項就好了嘛。

問得好，控制項當然是一種IMU，但是IMU並不是僅僅包含控制項這種單位，它還包含更多的內容。

比如在下圖QQ音樂的首頁中，你應該在哪裡放入一個裡面包含個人中心和各種設置的系統菜單呢？它的交互操作是怎樣的？內容該如何布局比較好？

於是你就發現了，QQ音樂的設計師在界面最左上角放了個三條橫線的按鈕，點擊之後就能展開菜單了。

也就是剛才看過的包含三個開關的那張圖，它其實是從界面的最左邊滑出來的一整個菜單，菜單里是從上到下的列表式布局，每一項都可以點擊跳轉到下級界面進行選或者是直接進行開關操作，最下面還有設置界面的入口和退出登錄按鈕。

經驗升華成規律

於是你就可以把那個三條線的菜單按鈕和上面的這整個滑出的菜單作為一個IMU，把它作為菜單的一種展示形式存進你的交互知識庫里。

存進去之前，你還需要思考幾個問題：

什麼情況下使用這個菜單IMU比較合適？（菜單中需要展示的內容比較多的時候）
這個菜單IMU適合展示什麼類型的內容？（從上到下的列表式結構比較合適）
它有什麼局限性？（佔用面積比較大，過場動畫幅度大，更適合沉浸式的操作）
如果不用從左滑入的動畫，換成從上往下滑入會怎樣？（可以改成從上往下或者從下往上滑入，但是也要相應地把菜單右側的留白改成在下面或者上面）

只有把這幾個問題思考清楚了，下次等你需要用到這個菜單IMU的時候，你才能使用得好。

比如問題4如果你想明白了，你就完全可以做出下面的這種菜單：

乍看起來好像和剛才那個菜單IMU不一樣，但是不就是換成從下往上滑入的方式嘛！裡面的內容同樣還是列表式結構，留白改為放上面了，下面還多了一個「關閉」按鈕。

為什麼下面要多一個關閉按鈕？

剛才那個左側的菜單IMU並沒有「關閉」按鈕啊，只要點擊右邊的空白區域就可以關閉菜單了。想想看，這個為什麼不能點擊上面的空白區域來關閉菜單？

對，因為這是手機上的APP界面，而手機屏幕的上方手指是不太好點的。

所以在下面加一個「關閉」按鈕使用起來會更方便。

於是你又得到了一個 底部菜單IMU，它是從底部向上滑入的，內容是列表式，下方多了一個「關閉」按鈕。

是不是很有意思？

你完全可以繼續思考，這個新的菜單IMU真的只能是列表嗎？還能用來放其他類型的內容嗎？如果把縱向的列表改成橫向的圖標會怎麼樣？

當然可以啊，然後你就又會得到一個新的 底部菜單IMU：

當你需要分享歌曲的時候可以打開這個菜單，它可以放很多社交APP的入口，用來選擇你要分享的平台如微信、QQ和微博等。

下面的「關閉」怎麼變成了「取消」？

因為剛才那個是歌曲的播放列表，上一個操作是「打開」，所以對應的操作是「關閉」。而這個是你點擊「分享」按鈕觸發的分享菜單，於是對應的操作就變成了「取消分享」，簡稱「取消」。

是不是很神奇，明明我們最開始看到的只是一個菜單IMU，怎麼想著想著就變成了三個？

不止如此，你完全可以把任何一個你看到的IMU都進行如此的思考和改造，根據你的應用場景製作成合理的 新IMU，這就是 用規律指導行動。

交互模型庫

作為一個交互設計師，我在剛入行的時候，每天都在：按照上文說的思考方式，把所有見到的APP界面進行截圖、分析和拆解，然後存入我腦海中的IMU庫里。不僅僅是手機APP里有，電腦軟體、網頁還有遊戲里全都有大量的IMU供你參考，這真是一個令人興奮的積累過程。

我的PC截圖庫

這裡不僅包含所有PC端競品的截圖，還包含我們自己軟體的各種截圖，甚至各種Tips和安裝的過程我都有截圖，當然還有各種我覺得做得不錯的網站，可以說是非常全了。

我的手機截圖庫

手機上的APP那就更多了，但不知多少人會有這種隨手截圖的習慣。APP雖然一直都在那裡，但是隨著設計版本和時間的變化，它們也會各種變樣，如果你看到有趣的交互方式不趁早截下來，等你真的要找的時候可就沒有了，想想Path和Instagram的界面都變了幾次了。

但是請注意！

截圖庫 ≠ 交互模型庫！！！

還記得嗎，所謂的交互模型單元（IMU）是需要你對界面中的交互展示方式、操作方式進行分解和分析，思考每個IMU的作用、使用條件、環境以及各自的優劣，才算是真的完成了收集，截圖僅僅是幫助你記憶的一個環節而已。

所以請別再問我交互模型庫的存儲方式，它當然應該存在你的大腦里。

IMU這個概念其實也是《刻意練習》這本書里提到的心理表徵的一種：

心理表徵是一種與我們大腦正在思考的某個物體、某個觀點、某些信息或者其他任何事物相對應的心理結構，或具體或抽象。
——安德斯·艾利克森（Anders Ericsson）

所以做交互設計也和圍棋、象棋大師在下棋的時候的思考模式很像，在這種情況下，我應該用哪一種走法（也就是IMU）來應對呢？他們心中正是有足夠多、理解足夠深刻的心理表徵，才有可能在非常短的時間內在腦海中進行大量的「檢索」，從而得出最合適的走法。

還記得在《倚天屠龍記》里，張三丰是傳授張無忌太極劍這門功夫的嗎？剛開始張無忌是有樣學樣，按著張三丰教的招式一步步學下來，等到學完之後，張三丰問他還記得多少，這傢伙竟然只記得一大半？

「無忌，我教你的還記得多少？」「回太師傅，我只記得一大半」
「那，現在呢？」「已經剩下一小半了」
「那，現在呢？」「我已經把所有的全忘記了！」
「好，你可以上了！」

是張無忌智商不高嗎？

並非如此。正相反，他一下子就掌握了這門工夫的精髓。

只有當你積累了足夠多的IMU，建立了自己的交互模型庫之後，你才有可能隨心所欲地設計新產品和新應用。而對這些IMU的理解深刻與否，則決定了你做出來的東西是生搬硬套的，還是達到了「重劍無鋒，大巧不工」的境界。

收集類軟體推薦

俗話說「工欲善其事必先利其器」，我就順手推薦一下自己平時在使用的圖片收集類軟體吧。

FastStone Capture（截圖）：極為小巧的截圖工具（只有幾M），功能卻能滿足一切需要。我最喜歡的功能是自動截取活動窗口（不用手動選定窗口）、滾動窗口截圖（網頁截圖神器）、自動保存到文件夾（省時省力），它甚至還有屏幕取色器和屏幕標尺（測量屏幕上兩點間的像素距離），可以用來走查開發的設計還原效果。更過分的是，它居然還有屏幕錄像功能……
XnView（圖片瀏覽）：替代ACDSee的軟體，也是只有二十幾M，並且支持幾百種圖片格式（包括PSD和PDF），還能隨意調整窗口布局，查看大圖片的性能也非常好，還可以對圖片進行簡單的編輯、批量重命名，再也不用什麼美圖看看之類的了；
Eagle（圖片瀏覽）：最近新發現的圖片收集類軟體，對標Inboard，卻有比它更強大的圖片預覽（支持GIF、視頻）和篩選功能（標籤分類、圖片形狀、顏色），最關鍵的是全平台，而且可以用一百多的價格買斷終身License。

上述的三款軟體，前兩種已經伴隨了我職業生涯的全部9年時間，一直用得非常趁手，強烈推薦！唯一可惜的是都只有Win版，隨著我最近轉戰Mac平台，開始用得少了一些。第三款Eagle是最近發現的，確實比較好用，並且支持全平台，大家也可以試試看。

應用語境

語言環境（語境，Context）主要指語言活動賴以進行的時間、場合、地點等因素，也包括表達、領會的前言後語和上下文。
——百度百科

有了這麼多的IMU，那我們就能隨便拿來就用了嗎？

非也非也。

交互設計模型永遠不能脫離應用語境而像零件或是樂高積木一樣機械地拼湊使用，提出建築模式語言的亞歷山大指出，情境在模式表現形式上具有決定性作用，因此，建築模式是預製建築的對立面。模式展開的環境極其重要，它的子模式、母模式以及相近的其他模式（比如上文說的QQ音樂的那幾種彈出菜單）同樣十分關鍵，在使用交互設計模型時也同樣如此。

應用語境包含的幾個因素

時間（流程節點）：用戶是在什麼流程中的什麼環節打開這個界面的，這決定了是用一個新界面好，還是只需要在當前界面彈出一個選擇控制項；
場合（平台環境）：當前平台是Windows、Mac這樣的桌面平台，還是iOS、Android這樣的移動平台，又或者是跨平台的Web環境？這決定了你要使用哪種類型的IMU，如果你在移動端上用了一個PC上的下拉菜單，那用戶會罵娘的，手指根本點不到那裡面的選項啊喂！
地點（具體界面）：同樣是給頁面分類，在APP的首頁中，你應該優先使用下方的主導航；在APP的下級頁面里，你就應該使用上方的Tab。

我在知乎上發布《交互設計中的規律》那篇文章之後，有朋友提出疑問說IMU的這種方式不合理，因為沒有考慮到設計的實現模型和用戶的心理模型的問題，也有前端同學提出這種方式沒有考慮到前端開發，可能具體溝通的時候會有困難。

其實他們可能都沒有仔細看完我的文章，我們當然不能孤立地看待每個IMU，哪有可以不用考慮用戶心理和應用場景的設計方式？

感謝你提出意見，不過我確實有考慮這種情況，請參見原文：
什麼情況下使用這個菜單IMU比較合適？（菜單中需要展示的內容比較多的時候）這個菜單IMU適合展示什麼類型的內容？（從上到下的列表式結構比較合適）它有什麼局限性？（佔用面積比較大，過場動畫幅度大，更適合沉浸式的操作）如果不用從左滑入的動畫，換成從上往下滑入會怎樣？（可以改成從上往下或者從下往上滑入，但是也要相應地把菜單右側的留白改成在下面或者上面）
只有把這幾個問題思考清楚了，下次等你需要用到這個菜單IMU的時候，你才能使用得好。我並沒有說這每一個IMU要脫離於界面樣式和用戶的心理模型而存在，只是在基於我們對這種操作形式深刻理解之後，把一種常用的、被驗證是可行的模塊存進我們的知識庫中，便於以後調用而已。

每一個設計除了樣式本身，我們都需要考慮用戶心理和具體的技術實現、應用場景，這些只是作為經驗積累而存在，具體在應用的時候還是要分析這些模塊是否適合當前產品和場景，才有可能設計好的。

正如同 Alan Cooper 所說的，「設計模式的運用，沒有捷徑，也沒有立竿見影的解決方案」，珍妮弗·泰德維爾（Jenifer Tidwell）在這本《設計交互界面》書中廣泛收集了各種交互設計模式，她同樣也發出了這樣的警告：「模式不是拿來就能用的商品，每一次模式的運用都有所不同。」

我找了一圈，目前並沒有什麼書能夠幫你收集到足夠多的交互模型，那本《設計交互界面》已經是2012年出版的書了，國內早已沒貨，書中的案例也過時很久了。

所以想要理解這些交互模型和應用語境，真的沒有什麼捷徑可走，唯有一步步地積累而已。

系列文章

交互技能樹01 | 交互設計師該會的技能有哪些？
交互技能樹02 | 交互設計師的用戶思維
交互技能樹03 | 交互設計師的邏輯思維
交互技能樹04 | 交互設計師的視覺思維
交互技能樹05 | 交互設計師的開發思維

題圖的圖片授權基於：CC0協議

歡迎關注我的微信公眾號：落羽敬齋（wingstudy）