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

一、關(guān)于對象

對于一個產(chǎn)品，它的用戶會有很多類型。

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

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

比如系統(tǒng)先判斷用戶是否登錄，對登錄成功的用戶，系統(tǒng)再判斷該用戶是否認證，對于認證用戶，再判斷是否為會員用戶，再判斷會員等級等，根據(jù)判斷的結(jié)果給出不同的頁面去向以及功能使用權(quán)限。

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

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

二、關(guān)于狀態(tài)

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

1. 默認狀態(tài)

我們需要先設(shè)定一個默認狀態(tài)。

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

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

再比如默認鍵盤，當(dāng)輸入一些數(shù)字信息（手機號，銀行卡號等）的時候，我們需要定義一個規(guī)則，讓系統(tǒng)調(diào)出數(shù)字鍵盤。

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

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

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

2. 特殊狀態(tài)

我覺得可以把一些非正常狀態(tài)稱為特殊狀態(tài)。比如頁面被刪除，無網(wǎng)絡(luò)，加載失敗，空白頁，系統(tǒng)錯誤，頁面刷新狀態(tài)等都稱為特殊狀態(tài)。

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

舉個例子，對于沒有網(wǎng)絡(luò)的情況，針對不同場景，有不同處理情況。

比如可以用 toast彈框提醒用戶當(dāng)前沒有網(wǎng)絡(luò)；還有用小插畫的形式告訴用戶當(dāng)前沒有網(wǎng)絡(luò)；另外像TIM和微信在斷網(wǎng)的時候通過狀態(tài)條告訴用戶沒有網(wǎng)絡(luò)。

簡單理了下這幾種斷網(wǎng)狀態(tài)的區(qū)別：

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

3. button、鏈接等控件的多狀態(tài)

拿按鈕來舉例子，針對iOS平臺，android平臺，WEB端，按鈕類型以及按鈕能夠呈現(xiàn)的狀態(tài)會有很多區(qū)別。

比如 iOS平臺，按鈕有 normal，highlighted，disabled，selected狀態(tài)（不過對于設(shè)計來說，按鈕應(yīng)該只有可點擊狀態(tài)和不可點擊狀態(tài)，對于開發(fā)來說，可能涉及到的狀態(tài)會比較多，關(guān)于 iOS 的按鈕設(shè)計規(guī)范可以閱讀 iOS Human Interface Guidelines）

比如 android平臺，按鈕有 normal，hover，focused，pressed，disabled狀態(tài)等等。（關(guān)于 android按鈕設(shè)計規(guī)范可以閱讀 Material Design）

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

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

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

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

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

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

總結(jié)

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

三、關(guān)于限制條件

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

1. 輸入限制

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

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

這些問題都是定義交互設(shè)計規(guī)則時需要考慮的。

比如大眾點評：

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

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

比如微博：

在發(fā)微博，當(dāng)未輸入內(nèi)容時，「發(fā)送」button 不可點擊 ；當(dāng)用戶輸入內(nèi)容后，發(fā)送 button 變?yōu)榭牲c擊狀態(tài)，并且右下角出現(xiàn)記錄字數(shù)的提示；但是當(dāng)輸入超過140字的時候，右下角的記錄字數(shù)的提示變?yōu)槌壬嬗脩糨斎氤鲎謹?shù)。

比如 TIM：

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

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

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

2. 顯示限制

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

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

比如好奇心日報：

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

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

比如微信朋友圈：

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

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

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

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

當(dāng)超過一定數(shù)字的時候，QQ消息未讀數(shù)顯示的是「99+」，微信消息未讀消息數(shù)顯示的是「…」

再比如最小數(shù)字限制，網(wǎng)易云音樂的評論的發(fā)布時間，它的「剛剛」和「1分鐘前」是分開的，而對于微信里剛發(fā)的朋友圈，則把1分鐘內(nèi)發(fā)的朋友圈統(tǒng)稱為「1分鐘前」。

四、關(guān)于用戶操作

關(guān)于用戶操作的交互規(guī)則，我覺得需要考慮的問題有：

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

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

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

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

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

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

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

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

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

總結(jié)

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

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

歡迎關(guān)注作者的微信公眾號：「UED設(shè)計筆記」

圖片素材作者：Paul Olek

「設(shè)計走查好文合集」

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