交互設計中的規律

本文轉載自我的微信公眾號「落羽敬齋」（wingstudy）。

昨天講了 庫伯學習圈 和正確的學習步驟，應該從行動中歸納出經驗，把經驗升華為規律，再用規律指導行動。今天就來講講我在學習交互設計時，是怎樣總結出一些有用的規律的，你同樣也能用這種方法學習別的東西。

行動中歸納經驗

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

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

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

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

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

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

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

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

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

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

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

經驗升華成規律

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

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

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

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

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

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

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

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

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

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

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

是不是很有意思？

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

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

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

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

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

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

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

打造屬於自己的IMU庫

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

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

心理表徵是一種與我們大腦正在思考的某個物體、某個觀點、某些信息或者其他任何事物相對應的心理結構，或具體或抽象。

——安德斯·艾利克森

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

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

當然了，只有這個庫還是不夠的，你還需要理解用戶心理、站在用戶的角度進行思考，才能真正做好交互設計。而這，應該是以後我們再繼續探討的話題了。

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

【書齋小箋】

這個方法是我一直在使用的，如果你想學習交互設計，推薦你多用這種方式進行思考和積累。

而如果你是一位視覺設計師，你可以想想在你的領域裡，有沒有類似IMU的概念呢？

我覺得當然是有的，你完全可以把它稱為 視覺模型單元（Visualization Module Unit），然後用同樣的方法去積累和打磨它們。

那玩遊戲呢？寫文章呢？

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