之前實習的時候，我發現我寫的交互規則說明會經常考慮不全面，導致會有返工。這幾天理了下交互輸出文檔里，交互規則的說明，以下是簡單的思維導圖，整理了幾個可以切入的地方，會分成幾篇文章來跟大家討論。

一、關于對象

對于一個產品，它的用戶會有很多類型。

比如未登錄的游客用戶和已經登錄的普通用戶；男性用戶與女性用戶；會員用戶和非會員用戶；認證用戶和非認證用戶；還有會員等級不一樣……

這些不僅會導致頁面顯示不一樣，還會導致用戶能夠使用的功能不一樣，我們需要給一個判定的規則，以及判斷的先后順序。

比如系統先判斷用戶是否登錄，對登錄成功的用戶，系統再判斷該用戶是否認證，對于認證用戶，再判斷是否為會員用戶，再判斷會員等級等，根據判斷的結果給出不同的頁面去向以及功能使用權限。

比如知乎，在登錄和未登錄的前后兩種情況，用戶可以使用的功能是不一樣的：

比如微博的會員用戶可使用評論圖片功能；視頻類 app 會員可播放 vip 視頻；黃油相機會員可使用所有付費素材等；比如寶寶樹還有針對媽媽使用的功能以及針對爸爸使用的功能，它們在個人中心也會有會員的專屬標志。

二、關于狀態

對于一個 app 里面，所有的信息元素以及功能元素都會有多種狀態，有默認狀態，常規狀態，特殊狀態等等。

1. 默認狀態

我們需要先設定一個默認狀態。

常見的要設定默認狀態的：有在進行表單里的單選框設計的時候，根據我們可以獲取的一些用戶信息，給用戶一個默認選項，當然這個選項最好是能夠符合用戶真實情況的，這樣能夠減少用戶的操作；

再比如默認文案，當用戶未輸入昵稱和個性簽名，或者未設置頭像時，我們可以給用戶一個默認的昵稱，個性簽名，頭像。

再比如默認鍵盤，當輸入一些數字信息（手機號，銀行卡號等）的時候，我們需要定義一個規則，讓系統調出數字鍵盤。

還有默認排序，比如搜索結果等列表頁，有一個默認排序，那這個默認排序是按照什么樣的規則進行排序的呢？也是我們需要定義好的。

還有默認選中，對于一些「同意XX協議」等，我們是否需要默認幫助用戶選中呢？這也是需要按照場景來定義規則的。

如果我們沒有在原型旁邊備注這些說明，可能程序員就會開發出一些很不友好的交互。

2. 特殊狀態

我覺得可以把一些非正常狀態稱為特殊狀態。比如頁面被刪除，無網絡，加載失敗，空白頁，系統錯誤，頁面刷新狀態等都稱為特殊狀態。

從用戶觸發操作開始到結果頁，我們可以根據一個判斷的邏輯來確認我們還存在哪些頁面。

舉個例子，對于沒有網絡的情況，針對不同場景，有不同處理情況。

比如可以用 toast彈框提醒用戶當前沒有網絡；還有用小插畫的形式告訴用戶當前沒有網絡；另外像TIM和微信在斷網的時候通過狀態條告訴用戶沒有網絡。

簡單理了下這幾種斷網狀態的區別：

其實關于空白狀態頁還有刷新狀態頁，也有許多值得考量的地方，比如局部刷新，全局刷新，加載刷新，下拉刷新，上拉刷新等等，大家也可以自己研究研究。

3. button、鏈接等控件的多狀態

拿按鈕來舉例子，針對iOS平臺，android平臺，WEB端，按鈕類型以及按鈕能夠呈現的狀態會有很多區別。

比如 iOS平臺，按鈕有 normal，highlighted，disabled，selected狀態（不過對于設計來說，按鈕應該只有可點擊狀態和不可點擊狀態，對于開發來說，可能涉及到的狀態會比較多，關于 iOS 的按鈕設計規范可以閱讀 iOS Human Interface Guidelines）

比如 android平臺，按鈕有 normal，hover，focused，pressed，disabled狀態等等。（關于 android按鈕設計規范可以閱讀 Material Design）

對于交互來說，很重要的是定義好按鈕是否可以點擊，在滿足了什么規則后才可以點擊，為用戶提供一個可視的反饋去表明當前的狀態。

如果沒有定義好可點擊規則，那么用戶會不斷去嘗試點擊，然后會出錯，系統可能就會一直給用戶 toast 提示，這個時候用戶體驗就會十分差。

舉個我覺得體驗不好的例子：

比如這一個 app 的登錄注冊頁，我在沒有輸入任何內容的時候，這個「繼續」button 是可以點擊的，每次點擊就會給我 toast 錯誤提示。本身不可點擊的東西，但是看起來就是可以點擊的，點擊后還給我 toast 提示，這樣本身對用戶就很不友好。

而它的輸入框也是很典型沒有定義規則，我可以在里面輸入超過11位的手機號，系統不會報錯，等我輸滿整個輸入框后，系統就開始反饋錯誤，然后我需要一個一個刪除，重新輸入。

雖然這種犯錯狀況少見，但是作為交互來說，我覺得應該減少用戶犯錯的幾率，所以這個頁面可以把規則定義為：只有當用戶輸入11位數字時，「繼續」button 可點擊，否則置灰，并且當用戶輸入到11位數字時，不能再繼續輸入…...

總結

• 在定義交互規則說明的時候，要注意使用對象的身份不一樣，可以使用的功能也會不一樣，頁面也會不一樣，比如登錄用戶和未登錄用戶，會員用戶和非會員用戶，男性用戶和女性用戶等等；
• 我們要給app里面所有的信息元素和功能元素定義默認狀態，比如默認選項，默認文案，默認鍵盤，默認排序，默認選中等；
• 我們還需要定義頁面存在的特殊狀態，比如頁面被刪除，無網絡，刷新，加載，無數據等情況；
• 關于控件的多狀態也是我們需要定義的，比如在不同平臺按鈕的多種狀態，按鈕在什么情況下可點擊等。

三、關于限制條件

關于限制條件，我覺得可以從兩方面入手——輸入限制和顯示限制。

1. 輸入限制

對于輸入，有文本輸入，數字輸入，圖片輸入，語音輸入等，以文本輸入的輸入框為例，簡單列了一些輸入限制需要考慮的問題，比如：

• 當未輸入內容時，是不可以發送的，那么該怎么告訴用戶不可發送呢？比如 button 不可點擊；
• 還有最小限制，有些需要輸入超過10個字才能發送，那該怎么告訴用戶最小輸入內容呢？
• 此外，輸入內容一般都會有最大限制，怎么告訴用戶輸入文本的最大限制呢？
• 當用戶輸入超過最大限制的時候，怎么告訴用戶不能繼續輸入了呢？是直接 toast 提示，還是限制用戶輸入，還是在每次輸入的時候，實時反饋用戶當前字數，以及還差多少字到達最大限制呢？
• 當輸入內容超出輸入框的時候，輸入框是不是會隨著輸入字數的增多而發生一定的變形呢？
• 當輸入內容過多的時候，輸入框內會存在不可見內容，那么不可見內容該怎么讓用戶知道呢？

這些問題都是定義交互設計規則時需要考慮的。

比如大眾點評：

它的輸入評論就是很典型的最小輸入限制 ，它在右下角給用戶一個即時變化的文本提示「加油，還差15個字」，并且當用戶未輸滿15個字，點擊「發表」后，toast 告訴用戶不能發表的原因。

還有一個很有意思的是 ，輸入超過15個字后，右下角的文案提示發生變化，期望通過積分獎勵的方式來激勵用戶輸入詳細的評論。

比如微博：

在發微博，當未輸入內容時，「發送」button 不可點擊 ；當用戶輸入內容后，發送 button 變為可點擊狀態，并且右下角出現記錄字數的提示；但是當輸入超過140字的時候，右下角的記錄字數的提示變為橙色，警告用戶輸入超出字數。

比如 TIM：

它的聊天對話輸入框，默認輸入框高度為第1張圖所示；

輸入內容超過一欄的時候，輸入框會隨著輸入內容的增加而變高，如圖2；

但是當高度增加到一定的程度的時候，就不會繼續增加，而是將一些輸入內容隱藏掉，而對于隱藏掉的內容，會顯現一半，告訴用戶可以上下滑動查看內容，如圖3。

2. 顯示限制

關于顯示限制，我覺得也有一些需要考慮的問題，比如：

• 對于文本的顯示，當內容較多時，是否需要全部顯示出來，對于不需要顯示的內容是怎么處理呢？
• 對于無顯示內容時，該怎么顯示呢？是空狀態代替呢？還是刪減掉一些內容？
• 對于數字的顯示，當數字比較小或者較大的時候，是否可以將某一個范圍的數字用統一的文案來表示呢？

比如好奇心日報：

它的 news 的標題，因為標題字數的不確定性，有長文本，短文本，所以標題可能會有一行、兩行、三行，但是當標題字數過多，超過三行，該怎么處理呢？

它的處理方式是，超過三行的文本之后內容直接不顯示。這個規則是交互設計需要在輸出文檔里定義好的，不然開發大哥也會沒有定義這個規則，最后運營給出的內容的標題過長時，整個頁面的布局就會顯得十分凌亂。

比如微信朋友圈：

當用戶發的朋友圈內容超過一定字數的時候，在顯示的時候，并不是全部顯示的，會將一部分內容隱藏起來，給用戶一個類似于「查看全文」的入口。

我覺得這么做其中一個原因是：因為翻朋友圈一般是在碎片化時間的場景下，用戶對大段的文字其實是沒有閱讀的欲望的，反倒是一些小段的文字比較容易閱讀，如果用戶感興趣，自然會點開全文閱讀；

另外一個原因大概是因為全部顯示的話，會存在刷屏情況，導致一屏只能顯示1個用戶的動態，沒法激發人「刷」朋友圈的欲望。

關于數字的顯示規則，比如未讀消息數，超過一定數量的時候，是顯示消息具體數字呢？還是顯示「99+」，「999+」呢？或者顯示「…」呢?

當超過一定數字的時候，QQ消息未讀數顯示的是「99+」，微信消息未讀消息數顯示的是「…」

再比如最小數字限制，網易云音樂的評論的發布時間，它的「剛剛」和「1分鐘前」是分開的，而對于微信里剛發的朋友圈，則把1分鐘內發的朋友圈統稱為「1分鐘前」。

四、關于用戶操作

關于用戶操作的交互規則，我覺得需要考慮的問題有：

• 交互的方式，比如采取何種手勢操作？
• 用戶進行什么操作可以獲取焦點，失去焦點？比如鍵盤的呼入與隱藏。
• 還有用戶可觸擊的熱區范圍是哪塊區域？
• 以及常規的操作流程是怎么樣的？
• 用戶正確操作有沒有即時反饋？錯誤操作有沒有即時提醒？

對于手勢操作，在不同情景里，用戶在屏幕上同樣的動作可能會引發不同的結果，比如「雙擊」這個動作，可能產生的結果是「放大」或者是「開啟/關閉」，我們可以把「雙擊」等用戶在屏幕間進行的動作稱為「觸發動作」；

當然同樣的結果會由不同的動作觸發產生，比如「放大」這個結果，可能是由「雙擊」 產生或者「捏放」產生，也可能是「長按拖動」產生，我們可以把「放大」等用戶的操作在特定情景下引發的結果稱為「觸發行為」；

這一切還是視情景而定，但是在交互說明文檔里需要依據產品明確定義好。

觸屏設備中觸發的手勢操作多種多樣，但都是一些基本的手勢操作組合演變而成，常見的手勢操作有：

Tap（單擊）、Double tap（雙擊）、Drag（拖拽）、Flick（輕滑）、Pinch（捏合）、Spread（捏放）、Press（長按）、Press and tap（雙指長按）、Press and Drag（長按拖動）、Rotate（雙指旋轉）、Multi-finger tap、Multi-finger drag、Squeeze等等。

常見的觸發行為有：Adjust（調整，這種情況在照片后期處理里面最常用），Bundle（多選），Delete（刪除），Duplicate（復制），Move（移動），Rolate（旋轉），Scale down（縮?。?，Scale up（放大）等等。

這里只是列了幾個常用的基本手勢，提醒大家包括我自己在輸出交互文檔的時候，不會忘記定義手勢操作的基本規則。

而關于手勢操作想了解更詳細的話，建議看看國外很多 HCI 的文章，比如 Luck Wroblewski 的「Touch Gesture Reference Guide」。

總結

• 在交互規則說明里，我們需要定義好限制條件，可以從輸入限制和顯示限制兩個方面來考慮；
• 對于輸入限制，我們需要定義好最小輸入限制和最大輸入限制，以及如何展示給用戶；
• 當用戶超出這種限制條件時，我們需要如何提醒用戶；
• 輸入框也會隨著輸入內容的多少存在一定程度的變形，但是也是有規則要遵循的；
• 對于不可見內容，可以通過一些方式讓用戶知道它的存在；
• 對于顯示限制，當顯示內容過多時，是不是需要全部顯示出來，對于不需要顯示的內容用什么樣的處理方式；
• 對于數字的顯示，當數字比較小或者較大的時候，可以將某一個范圍的數字用統一的簡潔形式來表示；
• 我們還需要定義好用戶操作，包括手勢操作，獲取、失去焦點，熱區范圍，操作流程等。

關于交互規則說明里的反饋，下一篇文章再跟大家繼續分享交流。希望以上總結不合理不全面的地方，大家可以與我討論。

歡迎關注作者的微信公眾號：「UED設計筆記」

圖片素材作者：Paul Olek

「設計走查好文合集」

• 《看了都說好！如何建立交互設計自查表？》
• 《實戰經驗！交互設計師如何做好設計走查的工作？》
• 《用騰訊高手的交互自查表，快速搞定設計中的分支流程和異常情況》
• 《網易可用性優化實錄！如何讓你的交互設計自查表真正用起來？》