之前寫過一篇《零基礎如何成為交互設計師？聊聊我的學習三步法！》，通過該方法，我們可以對交互設計有個整體的了解，比如，知道了交互設計師的工作流程、需要掌握的技能、交互設計師的日常產出等等。

可是，紙上得來終覺淺，絕知此事要躬行，在我們了解那么多的理論知識，知道了交互設計師需要掌握的眾多技能后，又該從哪里開始，該如何快速掌握這些理論，并應用于實際工作之中呢？

還記得上高中那會，有一種英語練習題叫做“各個擊破”，比如我在“完形填空”方面比較薄弱，那么就買一本完形填空的練習題，每天晚上睡覺前練習 2~3 篇；又或者我在“閱讀理解”方面比較薄弱，那么就買一本閱讀理解的練習題，用同樣的方式去練習，這種有針對性的練習就叫做“各個擊破”，我當時的英語成績就是通過這種方法提升上來的，練習效果可謂是立竿見影。

既然這種方法效果很好，我們可不可以把它應用在“交互設計技能”的掌握上呢？答案是肯定的。

下面，我就以交互設計原則為例，講述一下，在了解了這些設計原則之后，怎么做才能更快的掌握這項技能，實現各個擊破。

首先，總結“設計原則全家桶”

交互設計原則有很多，為了能夠更快、更全面的掌握這項技能，我們需要將設計原則進行匯總，整合為“設計原則全家桶”（總結方法我就不在這里贅述了，感興趣的同學可以查看上文）。

這里我匯總了四個常用的設計原則，古騰堡原則、格式塔原則、尼爾森十大可用性原則、交互設計 5 大原則（這里簡單說明一下，本來是交互設計 7 大原則，其中“接近性原則”在格式塔原則中已包含，“防錯原則”在尼爾森原則中也已包含，所有我把這兩個原則去掉了，一來可以簡化原則，二來可以減輕記憶負擔）。我們可以通過提取關鍵詞的方式，把這些原則的“主要內容、在設計中的應用”通過“關鍵詞+圖片”的形式提煉出來，然后匯總為“設計原則全家桶”。（全家桶相關文章見文末）

其次，強化練習

“設計原則全家桶”就像是武功秘籍，有了武功秘籍，我們還需要勤加練習才能掌握，可是，該怎么練習呢？如果手上有項目的話，可以通過項目實戰進行鞏固。如果手上沒有項目，我們該怎么進行鞏固呢？

我的方法是，找幾款常用的產品，然后對這些產品進行分析，分析這些產品，都應用了哪些設計原則，它們是如何應用這些原則的，有沒有不符合設計原則的地方，不符合設計原則地方背后的設計目的又是什么？

下面，我以淘寶 APP 為例，來簡單說一下該如何強化我們學習到的這些設計原則。

我們先來看下淘寶首頁都應用了哪些設計原則？

頂部導航欄只有“訂閱、推薦”2 個 tab 頁面，底部導航欄有“首頁、逛逛、消息、購物車、我的淘寶”5 個版塊，這兩個導航欄應用到了交互設計 5 原則中的“米勒定律”，也就是 7±2 原則。

簽到、會員碼、搜索欄等，應用的是“格式塔--主題/背景原則”，即當主題和背景重疊時，人們傾向于把大的元素當做背景，把小的元素當做主題。所以“簽到、會員碼、搜索欄等”被看做為主題，而后面灰色的部分被當做了背景；同樣的，我們再看常用功能欄，后面的白色卡片會被當做背景，而中間的功能圖標被當做主題。

再看下面的產品展示區，應用的是“格式塔--閉合性原則”，因為手機屏幕有限，無法展示全部的內容，所以最下面僅展示了部分圖片，以提示用戶下方還有更多的內容。

繼續向上滑動，可以看到這里的圖片擺放樣式采用了“格式塔-對稱性原則”，而且這里對展示樣式進行了優化，采用了瀑布流的樣式，可以防止視覺疲勞，展示效果更勝一籌。

點擊首頁上方的搜索框，進入搜索頁面，搜索框下方展示了歷史搜索數據，且按用戶的搜索信息倒序排列，最后搜索的內容展示在最前面，很明顯這里使用的是“尼爾森-靈活高效原則”。

再來看產品詳情頁，該頁面使用了“古騰堡原則”，最重要的兩個信息（產品信息、購買按鈕），一個展示在左上，一個展示在右下；其他信息分別展示在中間、右上及左下方位置。同時這里也使用了“交互設計 5 大定律中的費茨定律”，把“購買”按鈕放在距離用戶手指最近的位置，并占據底部導航欄三分之一的面積，這樣的設計，既方便了用戶的操作，又提升了產品的購買率，一舉兩得。

淘寶關于其他原則的應用示例還有很多，比如淘寶首頁的“下拉刷新→松手刷新→正在刷新”，應用的是“尼爾森--狀態可見原則”；用戶購買商品后發現不合適，可以申請退貨或換貨，應用的是“尼爾森--用戶可控原則”；淘寶客服功能，可以在線為用戶答疑解惑，應用的是“尼爾森-的人性化原則”，等等，這里我就不再一一舉例了。

強化練習的目的就是為了加深記憶，形成條件反射。以后，不管是做競品分析，還是自己設計原型，就能快速想到這些設計原則。遵循這些原則，即使我們沒有太多的實戰經驗，也可以設計出符合基本規范的原型圖，減少低級錯誤的可能性。

最后，實戰練習

武功秘籍我們已經練習的差不多了，可是威力如何還需要進一步的檢驗。如何檢驗學習的效果呢，那就是通過項目實戰。

《刻意練習》中作者說“人的學習受到情景的制約或促進，你要學習的東西將應用在什么情境中，那么你就應該在什么樣的情境中學習這些東西。比如，你要學習編程，就應該在 GitHub 里學習，因為你以后編程就是通過 GitHub”。同樣的，我們想掌握交互設計原則，那么就需要在交互設計中學習，也就是結合實際項目進行實踐。

這里我通過一個實際案例，來簡單介紹一下，在實際項目中該如何應用這些原則。

現在有個功能優化的需求，給“黨費繳納”增加一個“待繳費用戶查詢以及發送短信提醒”的功能，那么我們在設計原型的時候會應用到哪些設計原則呢？

先看原型圖，下面這兩個頁面應用到了“狀態可見、接近性、相似性、奧卡姆剃刀原則、一致性原則，以及古騰堡原則”。

其中，查詢記錄為空和查詢記錄不為空，應用到了“尼爾森--狀態可見原則”；

查詢條件（快速查詢、精確查詢）和下面的查詢結果，應用的是“格式塔--接近性原則”；

查詢結果中，人們傾向于把“選擇框、姓名、聯系方式”聯系在一起，這里應用的就是“格式塔--相似性原則”。

快速查中的“近一月、近三月、近半年”快捷操作按鈕，應用的是“奧卡姆剃刀原則中的減少用戶操作次數，給出合理選項原則”；

再看有查詢結果的這個頁面，這個頁面和手機通訊錄頁面是不是很相似？所以這里應用的是“尼爾森--一致性原則”；

還有右下角的「發送短信提醒」按鈕，應用的是“古騰堡原則”。

我們再看下面兩個頁面，這兩個頁面主要應用的是“尼爾森--狀態可見原則”，當點擊用戶前面的按鈕時，左下角會實時顯示“已選中 xx 項”，然后點擊「發送短信提醒」按鈕時，會彈出“發送成功”的 toast 提示。

上面考慮的都是正常的情況，假如用戶未選擇任何選項，直接點擊了「發送短信提醒」按鈕，這個時候該怎么處理呢？這時“尼爾森--容錯原則”就派上用場了，增加一個“請選擇您要提醒的用戶”toast 提示就可以啦。

總結

《刻意練習》的作者告訴我們，“1 萬小時定律”是個偽命題，學習需要講究方法，同時也是有方法可尋的。通過“總結歸納→強化練習→項目實戰”的方式，我們就可以將交互設計必備的技能在較短的時間內各個擊破。

設計原則全家桶參考鏈接：