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

往期回顧：

• 《騰訊高級設計師：交互知識樹系列之產品思維》
• 《騰訊高級設計師：交互知識樹系列之視覺思維》
• 《騰訊高級設計師：交互知識樹系列之開發思維》

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

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

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

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

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

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

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

一、交互模型單元

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

1. 行動中歸納經驗

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

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

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

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

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

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

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

控件當然是一種 IMU，但是 IMU 并不是僅僅包含控件這種單位，它還包含更多的內容。

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

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

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

2. 經驗升華成規律

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

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

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

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

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

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

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

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

因為這是手機上的 APP 界面，而在手機屏幕的上方，手指是不太好點的。所以在下面加一個「關閉」按鈕使用起來會更方便。

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

是不是很有意思？

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

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

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

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

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

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

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

二、交互模型庫

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

1. 我的 PC 截圖庫

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

2. 我的手機截圖庫

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

但是請注意，截圖庫 ≠ 交互模型庫。

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

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

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

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

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

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

3. 收集類軟件推薦

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

• 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） 在這本《設計交互界面》書中廣泛收集了各種交互設計模式，她同樣也發出了這樣的警告：「模式不是拿來就能用的商品，每一次模式的運用都有所不同。」

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

歡迎關注作者的微信公眾號：「落羽敬齋」

「結構化思維體系」

• 《用這個交互模型工具，讓你的設計過程更加體系化》
• 《為什么我們都應該學會組件化設計思維？》
• 《如何培養組件化設計思維？來看阿里設計師的經驗總結！》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com