【交互基本功】如何避免漏掉交互細節

新手交互（從業0-1年）經常會漏掉很多交互細節，交互稿里除了美麗的頁面流程圖，再憋不出更細緻的說明了。n

怎樣全面地思考才能避免漏掉交互細節呢？下面就講講（踩了兩年坑的）我的思路。n

界面上的元素基本可被分為「內容」及「可操作控制項」兩種。只要將這兩種元素所涉及的交互細節講透，那交互稿的完整性上基本無懈可擊了。

所謂「內容」就是作為信息呈現而存在的，有時可能是鏈接。通俗來講就是顯示在頁面上告訴用戶這是個 「What」 的那些元素。n

所謂「可操作控制項」，就是用戶對內容作出操作時使用的控制項，包括btn、switch、下拉框、輸入框、滑竿等等。承接上面的說法，就是告訴用戶可以「Do What」 的元素。n

拿蝦米音樂播放的這個界面為例：

我們分別來講，如何對這兩種元素思考交互細節：

內容

從顯示上，內容分三大基本狀態：空狀態、理想狀態、溢出狀態。

我們來細化一下三大基本狀態。n

1. 空狀態，例如，頁面啥啥都沒有時的狀態；由於某些信息沒有填寫而造成的列表為空的狀態；某些圖片區域為空時的默認圖片等等。
2. 理想狀態，即為元素在大部分情況正常顯示時的狀態。
3. 溢出狀態，比如某title字數多出可顯示區域時如何顯示；內容多出一頁如何分頁等。

另外，內容本身常常也會包含狀態，比如商品未上架、已上架、已下架等狀態；比如訂單未付款、待發貨、已發貨、已完成等狀態。通常，產品經理在PRD等文檔里會寫明內容本身的狀態，而在一些流程尚不完善的公司，交互要理清楚所有要顯示的對象的狀態。n

可操作控制項

可操作控制項同樣有三大基本狀態：未操作、操作中、操作完 狀態。

（是不是想到了大象放進冰箱分幾步！恭喜你，想到你就能記住了！）

1. 未操作狀態，即這個控制項的默認狀態。比如，上面蝦米音樂播放器里，音量滑竿，默認是在中間。再比如，一些下拉框，會默認顯示為「請選擇XX」。在這個狀態下，同樣要考慮控制項不可點擊的情況。比如某活動結束已經不能報名，則報名btn置灰不可點。
2. 操作中狀態，包括懸停、點擊、輸入等情況。 除了設計規範里經常見到的btn在正常、懸停、點擊狀態下的顯示，還有個例子是，在手機中輸入框中輸入文字時，需顯示鍵盤，鍵盤的出現是否對頁面有影響？
3. 操作完狀態，可能會跳頁面、可能會氣泡反饋、可能變成另一個btn（比如朋友圈點個贊，那個贊的btn變成了「取消」）、對於表單來說，還可能有出錯狀態，輸入格式有誤等等。

此時，再翻出那些收(cong)藏(mei)已(kan)久(guo)的大牛UI設計規範，結合上面提到的六大規範，是不是感覺茅塞頓開了？

總結一下，新手交互在製作交互稿時，可以把頁面中的元素分為 內容和可操作控制項兩大類，再分別對控制項的不同狀態進行思考說明，便可讓交互稿更加完整！

（封面圖片來源iPhone App Wireframing Kit）

補充閱讀：

如何建立交互設計自查表 | 網易用戶體驗設計中心

推薦閱讀：