超周全的「交互規(guī)則說(shuō)明」基礎(chǔ)科普

之前實(shí)習(xí)的時(shí)候，我發(fā)現(xiàn)我寫(xiě)的交互規(guī)則說(shuō)明會(huì)經(jīng)?？紤]不周全，導(dǎo)致會(huì)有返工。這幾天理了下交互輸出文檔里，交互規(guī)則的說(shuō)明，以下是簡(jiǎn)單的思維導(dǎo)圖，整頓了幾個(gè)可以切入的地方，會(huì)分成幾篇文章來(lái)跟大家討論。

一、關(guān)于對(duì)象

對(duì)于一個(gè)產(chǎn)品，它的用戶會(huì)有許多類(lèi)型。

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

這些不僅會(huì)導(dǎo)致網(wǎng)頁(yè)表現(xiàn)不一樣，還會(huì)導(dǎo)致用戶能夠使用的功能不一樣，我們必要給一個(gè)判定的規(guī)則，以及判斷的先后順序。

比如體系先判斷用戶是否登錄，對(duì)登錄成功的用戶，體系再判斷該用戶是否認(rèn)證，對(duì)于認(rèn)證用戶，再判斷是否為會(huì)員用戶，再判斷會(huì)員等級(jí)等，根據(jù)判斷的效果給出不同的網(wǎng)頁(yè)去向以及功能使用權(quán)限。

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

比如微博的會(huì)員用戶可使用評(píng)論圖片功能；視頻類(lèi) app 會(huì)員可播放 vip 視頻；黃油相機(jī)會(huì)員可使用所有付費(fèi)素材等；比如寶寶樹(shù)還有針對(duì)媽媽使用的功能以及針對(duì)爸爸使用的功能，它們?cè)谛∥抑虚g也會(huì)有會(huì)員的專(zhuān)屬標(biāo)志。

二、關(guān)于狀況

對(duì)于一個(gè) app 里面，所有的信息元素以及功能元素都會(huì)有多種狀況，有默認(rèn)狀況，常規(guī)狀況，特別狀況等等。

1. 默認(rèn)狀況

我們必要先設(shè)定一個(gè)默認(rèn)狀況。

常見(jiàn)的要設(shè)定默認(rèn)狀況的：有在進(jìn)行表單里的單選框設(shè)計(jì)的時(shí)候，根據(jù)我們可以獲取的一些用戶信息，給用戶一個(gè)默認(rèn)選項(xiàng)，當(dāng)然這個(gè)選項(xiàng)最好是能夠吻合用戶真實(shí)情況的，如許能夠削減用戶的操作；

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

再比如默認(rèn)鍵盤(pán)，當(dāng)輸入一些數(shù)字信息（手機(jī)號(hào)，銀行卡號(hào)等）的時(shí)候，我們必要定義一個(gè)規(guī)則，讓體系調(diào)出數(shù)字鍵盤(pán)。

還有默認(rèn)排序，比如搜索效果等列表頁(yè)，有一個(gè)默認(rèn)排序，那這個(gè)默認(rèn)排序是按照什么樣的規(guī)則進(jìn)行排序的呢？也是我們必要定義好的。

還有默認(rèn)選中，對(duì)于一些「贊成XX協(xié)議」等，我們是否必要默認(rèn)幫助用戶選中呢？這也是必要按照?qǐng)鼍皝?lái)定義規(guī)則的。

假如我們沒(méi)有在原型旁邊備注這些說(shuō)明，可能程序員就會(huì)開(kāi)發(fā)出一些很不友愛(ài)的交互。

2. 特別狀況

我覺(jué)得可以把一些非正常狀況稱為特別狀況。比如網(wǎng)頁(yè)被刪除，無(wú)網(wǎng)絡(luò)，加載失敗，空白頁(yè)，體系錯(cuò)誤，網(wǎng)頁(yè)刷新?tīng)顩r等都稱為特別狀況。

從用戶觸發(fā)操作開(kāi)始到效果頁(yè)，我們可以根據(jù)一個(gè)判斷的邏輯來(lái)確認(rèn)我們還存在哪些網(wǎng)頁(yè)。

舉個(gè)例子，對(duì)于沒(méi)有網(wǎng)絡(luò)的情況，針對(duì)不同場(chǎng)景，有不同處理情況。

比如可以用 toast彈框提示用戶當(dāng)前沒(méi)有網(wǎng)絡(luò)；還有效小插畫(huà)的情勢(shì)告訴用戶當(dāng)前沒(méi)有網(wǎng)絡(luò)；另外像TIM和微信在斷網(wǎng)的時(shí)候通過(guò)狀況條告訴用戶沒(méi)有網(wǎng)絡(luò)。

簡(jiǎn)單理了下這幾種斷網(wǎng)狀況的區(qū)別：

其實(shí)關(guān)于空白狀況頁(yè)還有刷新?tīng)顩r頁(yè)，也有很多值得考量的地方，比如局部刷新，全局刷新，加載刷新，下拉刷新，上拉刷新等等，大家也可以本身研究研究。

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

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

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

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

對(duì)于交互來(lái)說(shuō)，很緊張的是定義好按鈕是否可以點(diǎn)擊，在知足了什么規(guī)則后才可以點(diǎn)擊，為用戶提供一個(gè)可視的反饋去注解當(dāng)前的狀況。

假如沒(méi)有定義好可點(diǎn)擊規(guī)則，那么用戶會(huì)賡續(xù)去嘗試點(diǎn)擊，然后會(huì)出錯(cuò)，體系可能就會(huì)一向給用戶 toast 提醒，這個(gè)時(shí)候用戶體驗(yàn)就會(huì)十分差。

舉個(gè)我覺(jué)得體驗(yàn)不好的例子：

比如這一個(gè) app 的登錄注冊(cè)頁(yè)，我在沒(méi)有輸入任何內(nèi)容的時(shí)候，這個(gè)「繼承」button 是可以點(diǎn)擊的，每次點(diǎn)擊就會(huì)給我 toast 錯(cuò)誤提醒。自己不可點(diǎn)擊的東西，但是看起來(lái)就是可以點(diǎn)擊的，點(diǎn)擊后還給我 toast 提醒，如許自己對(duì)用戶就很不友愛(ài)。

而它的輸入框也是很典型沒(méi)有定義規(guī)則，我可以在里面輸入超過(guò)11位的手機(jī)號(hào)，體系不會(huì)報(bào)錯(cuò)，等我輸滿整個(gè)輸入框后，體系就開(kāi)始反饋錯(cuò)誤，然后我必要一個(gè)一個(gè)刪除，重新輸入。

雖然這種犯錯(cuò)狀態(tài)少見(jiàn)，但是作為交互來(lái)說(shuō)，我覺(jué)得應(yīng)該削減用戶犯錯(cuò)的幾率，所以這個(gè)網(wǎng)頁(yè)可以把規(guī)則定義為：只有當(dāng)用戶輸入11位數(shù)字時(shí)，「繼承」button 可點(diǎn)擊，否則置灰，并且當(dāng)用戶輸入到11位數(shù)字時(shí)，不能再繼承輸入……

總結(jié)

• 在定義交互規(guī)則說(shuō)明的時(shí)候，要細(xì)致使用對(duì)象的身份不一樣，可以使用的功能也會(huì)不一樣，網(wǎng)頁(yè)也會(huì)不一樣，比如登錄用戶和未登錄用戶，會(huì)員用戶和非會(huì)員用戶，男性用戶和女性用戶等等；

• 我們要給app里面所有的信息元素和功能元素定義默認(rèn)狀況，比如默認(rèn)選項(xiàng)，默認(rèn)文案，默認(rèn)鍵盤(pán)，默認(rèn)排序，默認(rèn)選中等；

• 我們還必要定義網(wǎng)頁(yè)存在的特別狀況，比如網(wǎng)頁(yè)被刪除，無(wú)網(wǎng)絡(luò)，刷新，加載，無(wú)數(shù)據(jù)等情況；

• 關(guān)于控件的多狀況也是我們必要定義的，比如在不同平臺(tái)按鈕的多種狀況，按鈕在什么情況下可點(diǎn)擊等。

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

關(guān)于限定條件，我覺(jué)得可以從兩方面入手——輸入限定和表現(xiàn)限定。

1. 輸入限定

對(duì)于輸入，有文本輸入，數(shù)字輸入，圖片輸入，語(yǔ)音輸入等，以文本輸入的輸入框?yàn)槔?，?jiǎn)單列了一些輸入限定必要考慮的題目，比如：

• 當(dāng)未輸入內(nèi)容時(shí)，是不可以發(fā)送的，那么該怎么告訴用戶不可發(fā)送呢？比如 button 不可點(diǎn)擊；

• 還有最小限定，有些必要輸入超過(guò)10個(gè)字才能發(fā)送，那該怎么告訴用戶最小輸入內(nèi)容呢？

• 此外，輸入內(nèi)容一樣平常都會(huì)有最大限定，怎么告訴用戶輸入文本的最大限定呢？

• 當(dāng)用戶輸入超過(guò)最大限定的時(shí)候，怎么告訴用戶不能繼承輸入了呢？是直接 toast 提醒，照舊限定用戶輸入，照舊在每次輸入的時(shí)候，實(shí)時(shí)反饋用戶當(dāng)前字?jǐn)?shù)，以及還差多少字到達(dá)最大限定呢？

• 當(dāng)輸入內(nèi)容超出輸入框的時(shí)候，輸入框是不是會(huì)隨著輸入字?jǐn)?shù)的增多而發(fā)生肯定的變形呢？

• 當(dāng)輸入內(nèi)容過(guò)多的時(shí)候，輸入框內(nèi)會(huì)存在不可見(jiàn)內(nèi)容，那么不可見(jiàn)內(nèi)容該怎么讓用戶知道呢？

這些題目都是定義交互設(shè)計(jì)規(guī)則時(shí)必要考慮的。

比如大眾點(diǎn)評(píng)：

它的輸入評(píng)論就是很典型的最小輸入限定 ，它在右下角給用戶一個(gè)即時(shí)轉(zhuǎn)變的文本提醒「加油，還差15個(gè)字」，并且當(dāng)用戶未輸滿15個(gè)字，點(diǎn)擊「發(fā)表」后，toast 告訴用戶不能發(fā)表的緣故原由。

還有一個(gè)很故意思的是 ，輸入超過(guò)15個(gè)字后，右下角的文案提醒發(fā)生轉(zhuǎn)變，期望通過(guò)積分獎(jiǎng)勵(lì)的體例來(lái)激勵(lì)用戶輸入細(xì)致的評(píng)論。

比如微博：

在發(fā)微博，當(dāng)未輸入內(nèi)容時(shí)，「發(fā)送」button 不可點(diǎn)擊 ；當(dāng)用戶輸入內(nèi)容后，發(fā)送 button 變?yōu)榭牲c(diǎn)擊狀況，并且右下角出現(xiàn)記錄字?jǐn)?shù)的提醒；但是當(dāng)輸入超過(guò)140字的時(shí)候，右下角的記錄字?jǐn)?shù)的提醒變?yōu)槌壬?，警告用戶輸入超出字?jǐn)?shù)。

比如 TIM：

它的聊天對(duì)話輸入框，默認(rèn)輸入框高度為第1張圖所示；

輸入內(nèi)容超過(guò)一欄的時(shí)候，輸入框會(huì)隨著輸入內(nèi)容的增長(zhǎng)而變高，如圖2；

但是當(dāng)高度增長(zhǎng)到肯定的程度的時(shí)候，就不會(huì)繼承增長(zhǎng)，而是將一些輸入內(nèi)容隱蔽掉，而對(duì)于隱蔽掉的內(nèi)容，會(huì)展現(xiàn)一半，告訴用戶可以上下滑動(dòng)查看內(nèi)容，如圖3。

2. 表現(xiàn)限定

關(guān)于表現(xiàn)限定，我覺(jué)得也有一些必要考慮的題目，比如：

• 對(duì)于文本的表現(xiàn)，當(dāng)內(nèi)容較多時(shí)，是否必要悉數(shù)表現(xiàn)出來(lái)，對(duì)于不必要表現(xiàn)的內(nèi)容是怎么處理呢？

• 對(duì)于無(wú)表現(xiàn)內(nèi)容時(shí)，該怎么表現(xiàn)呢？是空狀況代替呢？照舊刪減掉一些內(nèi)容？

• 對(duì)于數(shù)字的表現(xiàn)，當(dāng)數(shù)字比較小或者較大的時(shí)候，是否可以將某一個(gè)范圍的數(shù)字用同一的文案來(lái)透露表現(xiàn)呢？

比如好奇心日?qǐng)?bào)：

它的 news 的題目，由于題目字?jǐn)?shù)的不確定性，有長(zhǎng)文本，短文本，所以題目可能會(huì)有一行、兩行、三行，但是當(dāng)題目字?jǐn)?shù)過(guò)多，超過(guò)三行，該怎么處理呢？

它的處理體例是，超過(guò)三行的文本之后內(nèi)容直接不表現(xiàn)。這個(gè)規(guī)則是交互設(shè)計(jì)必要在輸出文檔里定義好的，不然開(kāi)發(fā)大哥也會(huì)沒(méi)有定義這個(gè)規(guī)則，最后運(yùn)營(yíng)給出的內(nèi)容的題目過(guò)長(zhǎng)時(shí)，整個(gè)網(wǎng)頁(yè)的布局就會(huì)顯得十分凌亂。

比如微信同伙圈：

當(dāng)用戶發(fā)的同伙圈內(nèi)容超過(guò)肯定字?jǐn)?shù)的時(shí)候，在表現(xiàn)的時(shí)候，并不是悉數(shù)表現(xiàn)的，會(huì)將一部分內(nèi)容隱蔽起來(lái)，給用戶一個(gè)類(lèi)似于「查看全文」的入口。

我覺(jué)得這么做其中一個(gè)緣故原由是：由于翻同伙圈一樣平常是在碎片化時(shí)間的場(chǎng)景下，用戶對(duì)大段的筆墨其實(shí)是沒(méi)有閱讀的欲望的，反倒是一些小段的筆墨比較容易閱讀，假如用戶感愛(ài)好，天然會(huì)點(diǎn)開(kāi)全文閱讀；

另外一個(gè)緣故原由也許是由于悉數(shù)表現(xiàn)的話，會(huì)存在刷屏情況，導(dǎo)致一屏只能表現(xiàn)1個(gè)用戶的動(dòng)態(tài)，沒(méi)法激發(fā)人「刷」同伙圈的欲望。

關(guān)于數(shù)字的表現(xiàn)規(guī)則，比如未讀新聞數(shù)，超過(guò)肯定數(shù)量的時(shí)候，是表現(xiàn)新聞詳細(xì)數(shù)字呢？照舊表現(xiàn)「99+」，「999+」呢？或者表現(xiàn)「…」呢?

當(dāng)超過(guò)肯定數(shù)字的時(shí)候，QQ新聞未讀數(shù)表現(xiàn)的是「99+」，微信新聞未讀新聞數(shù)表現(xiàn)的是「…」

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

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

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

• 交互的體例，比如采取何種手勢(shì)操作？

• 用戶進(jìn)行什么操作可以獲取焦點(diǎn)，失去焦點(diǎn)？比如鍵盤(pán)的呼入與隱蔽。

• 還有效戶可觸擊的熱區(qū)范圍是哪塊區(qū)域？

• 以及常規(guī)的操作流程是怎么樣的？

• 用戶精確操作有沒(méi)有即時(shí)反饋？錯(cuò)誤操作有沒(méi)有即時(shí)提示？

對(duì)于手勢(shì)操作，在不憐憫景里，用戶在屏幕上同樣的動(dòng)作可能會(huì)引發(fā)不同的效果，比如「雙擊」這個(gè)動(dòng)作，可能產(chǎn)生的效果是「放大」或者是「開(kāi)啟/關(guān)閉」，我們可以把「雙擊」等用戶在屏幕間進(jìn)行的動(dòng)作稱為「觸發(fā)動(dòng)作」；

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

這統(tǒng)統(tǒng)照舊視情景而定，但是在交互說(shuō)明文檔里必要依據(jù)產(chǎn)品明確定義好。

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

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

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

這里只是列了幾個(gè)常用的基本手勢(shì)，提示大家包括我本身在輸出交互文檔的時(shí)候，不會(huì)忘掉定義手勢(shì)操作的基本規(guī)則。

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

總結(jié)

• 在交互規(guī)則說(shuō)明里，我們必要定義好限定條件，可以從輸入限定和表現(xiàn)限定兩個(gè)方面來(lái)考慮；

• 對(duì)于輸入限定，我們必要定義好最小輸入限定和最大輸入限定，以及如何展示給用戶；

• 當(dāng)用戶超出這種限定條件時(shí)，我們必要如何提示用戶；

• 輸入框也會(huì)隨著輸入內(nèi)容的多少存在肯定程度的變形，但是也是有規(guī)則要遵循的；

• 對(duì)于不可見(jiàn)內(nèi)容，可以通過(guò)一些體例讓用戶知道它的存在；

• 對(duì)于表現(xiàn)限定，當(dāng)表現(xiàn)內(nèi)容過(guò)多時(shí)，是不是必要悉數(shù)表現(xiàn)出來(lái)，對(duì)于不必要表現(xiàn)的內(nèi)容用什么樣的處理體例；

• 對(duì)于數(shù)字的表現(xiàn)，當(dāng)數(shù)字比較小或者較大的時(shí)候，可以將某一個(gè)范圍的數(shù)字用同一的簡(jiǎn)潔情勢(shì)來(lái)透露表現(xiàn)；

• 我們還必要定義好用戶操作，包括手勢(shì)操作，獲取、失去焦點(diǎn)，熱區(qū)范圍，操作流程等。

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

迎接關(guān)注作者的微信公眾號(hào)：「UED設(shè)計(jì)筆記」

圖片素材作者：Paul Olek