之前寫(xiě)過(guò)一篇《零基礎(chǔ)如何成為交互設(shè)計(jì)師？聊聊我的學(xué)習(xí)三步法！》，通過(guò)該方法，我們可以對(duì)交互設(shè)計(jì)有個(gè)整體的了解，比如，知道了交互設(shè)計(jì)師的工作流程、需要掌握的技能、交互設(shè)計(jì)師的日常產(chǎn)出等等。

可是，紙上得來(lái)終覺(jué)淺，絕知此事要躬行，在我們了解那么多的理論知識(shí)，知道了交互設(shè)計(jì)師需要掌握的眾多技能后，又該從哪里開(kāi)始，該如何快速掌握這些理論，并應(yīng)用于實(shí)際工作之中呢？

還記得上高中那會(huì)，有一種英語(yǔ)練習(xí)題叫做“各個(gè)擊破”，比如我在“完形填空”方面比較薄弱，那么就買(mǎi)一本完形填空的練習(xí)題，每天晚上睡覺(jué)前練習(xí) 2~3 篇；又或者我在“閱讀理解”方面比較薄弱，那么就買(mǎi)一本閱讀理解的練習(xí)題，用同樣的方式去練習(xí)，這種有針對(duì)性的練習(xí)就叫做“各個(gè)擊破”，我當(dāng)時(shí)的英語(yǔ)成績(jī)就是通過(guò)這種方法提升上來(lái)的，練習(xí)效果可謂是立竿見(jiàn)影。

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

下面，我就以交互設(shè)計(jì)原則為例，講述一下，在了解了這些設(shè)計(jì)原則之后，怎么做才能更快的掌握這項(xiàng)技能，實(shí)現(xiàn)各個(gè)擊破。

首先，總結(jié)“設(shè)計(jì)原則全家桶”

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

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

其次，強(qiáng)化練習(xí)

“設(shè)計(jì)原則全家桶”就像是武功秘籍，有了武功秘籍，我們還需要勤加練習(xí)才能掌握，可是，該怎么練習(xí)呢？如果手上有項(xiàng)目的話，可以通過(guò)項(xiàng)目實(shí)戰(zhàn)進(jìn)行鞏固。如果手上沒(méi)有項(xiàng)目，我們?cè)撛趺催M(jìn)行鞏固呢？

我的方法是，找?guī)卓畛Ｓ玫漠a(chǎn)品，然后對(duì)這些產(chǎn)品進(jìn)行分析，分析這些產(chǎn)品，都應(yīng)用了哪些設(shè)計(jì)原則，它們是如何應(yīng)用這些原則的，有沒(méi)有不符合設(shè)計(jì)原則的地方，不符合設(shè)計(jì)原則地方背后的設(shè)計(jì)目的又是什么？

下面，我以淘寶 APP 為例，來(lái)簡(jiǎn)單說(shuō)一下該如何強(qiáng)化我們學(xué)習(xí)到的這些設(shè)計(jì)原則。

我們先來(lái)看下淘寶首頁(yè)都應(yīng)用了哪些設(shè)計(jì)原則？

頂部導(dǎo)航欄只有“訂閱、推薦”2 個(gè) tab 頁(yè)面，底部導(dǎo)航欄有“首頁(yè)、逛逛、消息、購(gòu)物車(chē)、我的淘寶”5 個(gè)版塊，這兩個(gè)導(dǎo)航欄應(yīng)用到了交互設(shè)計(jì) 5 原則中的“米勒定律”，也就是 7±2 原則。

簽到、會(huì)員碼、搜索欄等，應(yīng)用的是“格式塔--主題/背景原則”，即當(dāng)主題和背景重疊時(shí)，人們傾向于把大的元素當(dāng)做背景，把小的元素當(dāng)做主題。所以“簽到、會(huì)員碼、搜索欄等”被看做為主題，而后面灰色的部分被當(dāng)做了背景；同樣的，我們?cè)倏闯Ｓ霉δ軝冢竺娴陌咨ㄆ瑫?huì)被當(dāng)做背景，而中間的功能圖標(biāo)被當(dāng)做主題。

再看下面的產(chǎn)品展示區(qū)，應(yīng)用的是“格式塔--閉合性原則”，因?yàn)槭謾C(jī)屏幕有限，無(wú)法展示全部的內(nèi)容，所以最下面僅展示了部分圖片，以提示用戶下方還有更多的內(nèi)容。

繼續(xù)向上滑動(dòng)，可以看到這里的圖片擺放樣式采用了“格式塔-對(duì)稱(chēng)性原則”，而且這里對(duì)展示樣式進(jìn)行了優(yōu)化，采用了瀑布流的樣式，可以防止視覺(jué)疲勞，展示效果更勝一籌。

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

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

淘寶關(guān)于其他原則的應(yīng)用示例還有很多，比如淘寶首頁(yè)的“下拉刷新→松手刷新→正在刷新”，應(yīng)用的是“尼爾森--狀態(tài)可見(jiàn)原則”；用戶購(gòu)買(mǎi)商品后發(fā)現(xiàn)不合適，可以申請(qǐng)退貨或換貨，應(yīng)用的是“尼爾森--用戶可控原則”；淘寶客服功能，可以在線為用戶答疑解惑，應(yīng)用的是“尼爾森-的人性化原則”，等等，這里我就不再一一舉例了。

強(qiáng)化練習(xí)的目的就是為了加深記憶，形成條件反射。以后，不管是做競(jìng)品分析，還是自己設(shè)計(jì)原型，就能快速想到這些設(shè)計(jì)原則。遵循這些原則，即使我們沒(méi)有太多的實(shí)戰(zhàn)經(jīng)驗(yàn)，也可以設(shè)計(jì)出符合基本規(guī)范的原型圖，減少低級(jí)錯(cuò)誤的可能性。

最后，實(shí)戰(zhàn)練習(xí)

武功秘籍我們已經(jīng)練習(xí)的差不多了，可是威力如何還需要進(jìn)一步的檢驗(yàn)。如何檢驗(yàn)學(xué)習(xí)的效果呢，那就是通過(guò)項(xiàng)目實(shí)戰(zhàn)。

《刻意練習(xí)》中作者說(shuō)“人的學(xué)習(xí)受到情景的制約或促進(jìn)，你要學(xué)習(xí)的東西將應(yīng)用在什么情境中，那么你就應(yīng)該在什么樣的情境中學(xué)習(xí)這些東西。比如，你要學(xué)習(xí)編程，就應(yīng)該在 GitHub 里學(xué)習(xí)，因?yàn)槟阋院缶幊叹褪峭ㄟ^(guò) GitHub”。同樣的，我們想掌握交互設(shè)計(jì)原則，那么就需要在交互設(shè)計(jì)中學(xué)習(xí)，也就是結(jié)合實(shí)際項(xiàng)目進(jìn)行實(shí)踐。

這里我通過(guò)一個(gè)實(shí)際案例，來(lái)簡(jiǎn)單介紹一下，在實(shí)際項(xiàng)目中該如何應(yīng)用這些原則。

現(xiàn)在有個(gè)功能優(yōu)化的需求，給“黨費(fèi)繳納”增加一個(gè)“待繳費(fèi)用戶查詢(xún)以及發(fā)送短信提醒”的功能，那么我們?cè)谠O(shè)計(jì)原型的時(shí)候會(huì)應(yīng)用到哪些設(shè)計(jì)原則呢？

先看原型圖，下面這兩個(gè)頁(yè)面應(yīng)用到了“狀態(tài)可見(jiàn)、接近性、相似性、奧卡姆剃刀原則、一致性原則，以及古騰堡原則”。

其中，查詢(xún)記錄為空和查詢(xún)記錄不為空，應(yīng)用到了“尼爾森--狀態(tài)可見(jiàn)原則”；

查詢(xún)條件（快速查詢(xún)、精確查詢(xún)）和下面的查詢(xún)結(jié)果，應(yīng)用的是“格式塔--接近性原則”；

查詢(xún)結(jié)果中，人們傾向于把“選擇框、姓名、聯(lián)系方式”聯(lián)系在一起，這里應(yīng)用的就是“格式塔--相似性原則”。

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

再看有查詢(xún)結(jié)果的這個(gè)頁(yè)面，這個(gè)頁(yè)面和手機(jī)通訊錄頁(yè)面是不是很相似？所以這里應(yīng)用的是“尼爾森--一致性原則”；

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

我們?cè)倏聪旅鎯蓚€(gè)頁(yè)面，這兩個(gè)頁(yè)面主要應(yīng)用的是“尼爾森--狀態(tài)可見(jiàn)原則”，當(dāng)點(diǎn)擊用戶前面的按鈕時(shí)，左下角會(huì)實(shí)時(shí)顯示“已選中 xx 項(xiàng)”，然后點(diǎn)擊「發(fā)送短信提醒」按鈕時(shí)，會(huì)彈出“發(fā)送成功”的 toast 提示。

上面考慮的都是正常的情況，假如用戶未選擇任何選項(xiàng)，直接點(diǎn)擊了「發(fā)送短信提醒」按鈕，這個(gè)時(shí)候該怎么處理呢？這時(shí)“尼爾森--容錯(cuò)原則”就派上用場(chǎng)了，增加一個(gè)“請(qǐng)選擇您要提醒的用戶”toast 提示就可以啦。

總結(jié)

《刻意練習(xí)》的作者告訴我們，“1 萬(wàn)小時(shí)定律”是個(gè)偽命題，學(xué)習(xí)需要講究方法，同時(shí)也是有方法可尋的。通過(guò)“總結(jié)歸納→強(qiáng)化練習(xí)→項(xiàng)目實(shí)戰(zhàn)”的方式，我們就可以將交互設(shè)計(jì)必備的技能在較短的時(shí)間內(nèi)各個(gè)擊破。

設(shè)計(jì)原則全家桶參考鏈接：