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

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

一、關(guān)于對象

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

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

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

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

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

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

二、關(guān)于狀況

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

1. 默認(rèn)狀況

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

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

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

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

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

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

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

2. 特別狀況

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

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

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

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

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

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

1. 輸入限定

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

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

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

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

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

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

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

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

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

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

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

比如微博：

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

比如 TIM：

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

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

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

2. 表現(xiàn)限定

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

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

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

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

比如好奇心日報：

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

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

比如微信同伙圈：

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

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

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

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

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

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

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

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

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

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

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

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

• 用戶精確操作有沒有即時反饋？錯誤操作有沒有即時提示？

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

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

這統(tǒng)統(tǒng)照舊視情景而定，但是在交互說明文檔里必要依據(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)于手勢操作想了解更細(xì)致的話，建議看看國外許多 HCI 的文章，比如 Luck Wroblewski 的「Touch Gesture Reference Guide」。

總結(jié)

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

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

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

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

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

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

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

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

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

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

圖片素材作者：Paul Olek