全球互聯(lián)的今天，網(wǎng)站制作公司設(shè)計(jì)師們在面對各種客戶對于電商平臺(tái)或者APP開發(fā)應(yīng)用的時(shí)候，對于網(wǎng)站制作APP程序開發(fā)服務(wù)商的設(shè)計(jì)師而言都會(huì)使用到交互設(shè)計(jì)，網(wǎng)站制作公司設(shè)計(jì)師們，這幾天整理了交互輸出文檔，交互規(guī)則的說明，以下是簡單的思維導(dǎo)圖，整理了幾個(gè)可以切入的地方，用以對即將需要設(shè)計(jì)制作服務(wù)的您一個(gè)前期規(guī)劃參考。
一、關(guān)于網(wǎng)站制作項(xiàng)目時(shí)設(shè)計(jì)師要先清楚對象
對于一個(gè)產(chǎn)品，它的用戶會(huì)有很多類型。比如未登錄的游客用戶和已經(jīng)登錄的普通用戶；男性用戶與女性用戶；會(huì)員用戶和非會(huì)員用戶；認(rèn)證用戶和非認(rèn)證用戶；還有會(huì)員等級(jí)不一樣……這些不僅會(huì)導(dǎo)致頁面顯示不一樣，還會(huì)導(dǎo)致用戶能夠使用的功能不一樣，網(wǎng)站制作公司設(shè)計(jì)師們需要給一個(gè)判定的規(guī)則，以及判斷的先后順序。比如系統(tǒng)先判斷用戶是否登錄，對登錄成功的用戶，系統(tǒng)再判斷該用戶是否認(rèn)證，對于認(rèn)證用戶，再判斷是否為會(huì)員用戶，再判斷會(huì)員等級(jí)等，根據(jù)判斷的結(jié)果給出不同的頁面去向以及功能使用權(quán)限。比如知乎，在登錄和未登錄的前后兩種情況，用戶可以使用的功能是不一樣的：比如微博的會(huì)員用戶可使用評(píng)論圖片功能；視頻類 app 會(huì)員可播放 vip 視頻；黃油相機(jī)會(huì)員可使用所有付費(fèi)素材等；比如寶寶樹還有針對媽媽使用的功能以及針對爸爸使用的功能，它們在個(gè)人中心也會(huì)有會(huì)員的專屬標(biāo)志。
二、關(guān)于狀態(tài)
對于一個(gè)PC端網(wǎng)站或者 app 里面，所有的信息元素以及功能元素都會(huì)有多種狀態(tài)，有默認(rèn)狀態(tài)，常規(guī)狀態(tài)，特殊狀態(tài)等等。
1. 默認(rèn)狀態(tài)
網(wǎng)站制作公司設(shè)計(jì)師們需要先設(shè)定一個(gè)默認(rèn)狀態(tài)。常見的要設(shè)定默認(rèn)狀態(tài)的：有在進(jìn)行表單里的單選框設(shè)計(jì)的時(shí)候，根據(jù)網(wǎng)站制作公司設(shè)計(jì)師們可以獲取的一些用戶信息，給用戶一個(gè)默認(rèn)選項(xiàng)，當(dāng)然這個(gè)選項(xiàng)最好是能夠符合用戶真實(shí)情況的，這樣能夠減少用戶的操作；再比如默認(rèn)文案，當(dāng)用戶未輸入昵稱和個(gè)性簽名，或者未設(shè)置頭像時(shí)，網(wǎng)站制作公司設(shè)計(jì)師們可以給用戶一個(gè)默認(rèn)的昵稱，個(gè)性簽名，頭像。再比如默認(rèn)鍵盤，當(dāng)輸入一些數(shù)字信息（手機(jī)號(hào)，銀行卡號(hào)等）的時(shí)候，網(wǎng)站制作公司設(shè)計(jì)師們需要定義一個(gè)規(guī)則，讓系統(tǒng)調(diào)出數(shù)字鍵盤。還有默認(rèn)排序，比如搜索結(jié)果等列表頁，有一個(gè)默認(rèn)排序，那這個(gè)默認(rèn)排序是按照什么樣的規(guī)則進(jìn)行排序的呢？也是網(wǎng)站制作公司設(shè)計(jì)師們需要定義好的。還有默認(rèn)選中，對于一些「同意XX協(xié)議」等，網(wǎng)站制作公司設(shè)計(jì)師們是否需要默認(rèn)幫助用戶選中呢？這也是需要按照場景來定義規(guī)則的。如果網(wǎng)站制作公司設(shè)計(jì)師們沒有在原型旁邊備注這些說明，可能程序員就會(huì)開發(fā)出一些很不友好的交互。
2. 特殊狀態(tài)
網(wǎng)站制作公司設(shè)計(jì)師覺得可以把一些非正常狀態(tài)稱為特殊狀態(tài)。比如頁面被刪除，無網(wǎng)絡(luò)，加載失敗，空白頁，系統(tǒng)錯(cuò)誤，頁面刷新狀態(tài)等都稱為特殊狀態(tài)。從用戶觸發(fā)操作開始到結(jié)果頁，網(wǎng)站制作公司設(shè)計(jì)師們可以根據(jù)一個(gè)判斷的邏輯來確認(rèn)網(wǎng)站制作公司設(shè)計(jì)師們還存在哪些頁面。舉個(gè)例子，對于沒有網(wǎng)絡(luò)的情況，針對不同場景，有不同處理情況。比如可以用 toast彈框提醒用戶當(dāng)前沒有網(wǎng)絡(luò)；還有用小插畫的形式告訴用戶當(dāng)前沒有網(wǎng)絡(luò)；另外像TIM和微信在斷網(wǎng)的時(shí)候通過狀態(tài)條告訴用戶沒有網(wǎng)絡(luò)。簡單理了下這幾種斷網(wǎng)狀態(tài)的區(qū)別：其實(shí)關(guān)于空白狀態(tài)頁還有刷新狀態(tài)頁，也有許多值得考量的地方，比如局部刷新，全局刷新，加載刷新，下拉刷新，上拉刷新等等，大家也可以自己研究研究。
3. button、鏈接等控件的多狀態(tài)
拿按鈕來舉例子，針對iOS平臺(tái)，android平臺(tái)，WEB端，按鈕類型以及按鈕能夠呈現(xiàn)的狀態(tài)會(huì)有很多區(qū)別。比如 iOS平臺(tái)，按鈕有 normal，highlighted，disabled，selected狀態(tài)（不過對于設(shè)計(jì)來說，按鈕應(yīng)該只有可點(diǎn)擊狀態(tài)和不可點(diǎn)擊狀態(tài)，對于開發(fā)來說，可能涉及到的狀態(tài)會(huì)比較多，關(guān)于 iOS 的按鈕設(shè)計(jì)規(guī)范可以閱讀 iOS Human Interface Guidelines）比如 android平臺(tái)，按鈕有 normal，hover，focused，pressed，disabled狀態(tài)等等。（關(guān)于 android按鈕設(shè)計(jì)規(guī)范可以閱讀 Material Design）對于交互來說，很重要的是定義好按鈕是否可以點(diǎn)擊，在滿足了什么規(guī)則后才可以點(diǎn)擊，為用戶提供一個(gè)可視的反饋去表明當(dāng)前的狀態(tài)。如果沒有定義好可點(diǎn)擊規(guī)則，那么用戶會(huì)不斷去嘗試點(diǎn)擊，然后會(huì)出錯(cuò)，系統(tǒng)可能就會(huì)一直給用戶 toast 提示，這個(gè)時(shí)候用戶體驗(yàn)就會(huì)十分差。
舉個(gè)網(wǎng)站制作公司設(shè)計(jì)師覺得體驗(yàn)不好的例子：
比如這一個(gè) app 的登錄注冊頁，網(wǎng)站制作公司設(shè)計(jì)師在沒有輸入任何內(nèi)容的時(shí)候，這個(gè)「繼續(xù)」button 是可以點(diǎn)擊的，每次點(diǎn)擊就會(huì)給設(shè)計(jì)師 toast 錯(cuò)誤提示。本身不可點(diǎn)擊的東西，但是看起來就是可以點(diǎn)擊的，點(diǎn)擊后還給設(shè)計(jì)師 toast 提示，這樣本身對用戶就很不友好。而它的輸入框也是很典型沒有定義規(guī)則，網(wǎng)站制作公司設(shè)計(jì)師可以在里面輸入超過11位的手機(jī)號(hào)，系統(tǒng)不會(huì)報(bào)錯(cuò)，等網(wǎng)站制作公司設(shè)計(jì)師輸滿整個(gè)輸入框后，系統(tǒng)就開始反饋錯(cuò)誤，然后網(wǎng)站制作公司設(shè)計(jì)師需要一個(gè)一個(gè)刪除，重新輸入。雖然這種犯錯(cuò)狀況少見，但是作為交互來說，設(shè)計(jì)師覺得應(yīng)該減少用戶犯錯(cuò)的幾率，所以這個(gè)頁面可以把規(guī)則定義為：只有當(dāng)用戶輸入11位數(shù)字時(shí)，「繼續(xù)」button 可點(diǎn)擊，否則置灰，并且當(dāng)用戶輸入到11位數(shù)字時(shí)，不能再繼續(xù)輸入……
總結(jié)：在定義交互規(guī)則說明的時(shí)候，要注意使用對象的身份不一樣，可以使用的功能也會(huì)不一樣，頁面也會(huì)不一樣，比如登錄用戶和未登錄用戶，會(huì)員用戶和非會(huì)員用戶，男性用戶和女性用戶等等；網(wǎng)站制作公司設(shè)計(jì)師們要給app里面所有的信息元素和功能元素定義默認(rèn)狀態(tài)，比如默認(rèn)選項(xiàng)，默認(rèn)文案，默認(rèn)鍵盤，默認(rèn)排序，默認(rèn)選中等；網(wǎng)站制作公司設(shè)計(jì)師們還需要定義頁面存在的特殊狀態(tài)，比如頁面被刪除，無網(wǎng)絡(luò)，刷新，加載，無數(shù)據(jù)等情況；關(guān)于控件的多狀態(tài)也是網(wǎng)站制作公司設(shè)計(jì)師們需要定義的，比如在不同平臺(tái)按鈕的多種狀態(tài)，按鈕在什么情況下可點(diǎn)擊等。
三、關(guān)于限制條件關(guān)于限制條件，網(wǎng)站制作公司設(shè)計(jì)師覺得可以從兩方面入手——輸入限制和顯示限制。
1. 輸入限制
對于輸入，有文本輸入，數(shù)字輸入，圖片輸入，語音輸入等，以文本輸入的輸入框?yàn)槔唵瘟辛艘恍┹斎胂拗菩枰紤]的問題，比如：當(dāng)未輸入內(nèi)容時(shí)，是不可以發(fā)送的，那么該怎么告訴用戶不可發(fā)送呢？比如 button 不可點(diǎn)擊；還有最小限制，有些需要輸入超過10個(gè)字才能發(fā)送，那該怎么告訴用戶最小輸入內(nèi)容呢？此外，輸入內(nèi)容一般都會(huì)有最大限制，怎么告訴用戶輸入文本的最大限制呢？當(dāng)用戶輸入超過最大限制的時(shí)候，怎么告訴用戶不能繼續(xù)輸入了呢？是直接 toast 提示，還是限制用戶輸入，還是在每次輸入的時(shí)候，實(shí)時(shí)反饋用戶當(dāng)前字?jǐn)?shù)，以及還差多少字到達(dá)最大限制呢？當(dāng)輸入內(nèi)容超出輸入框的時(shí)候，輸入框是不是會(huì)隨著輸入字?jǐn)?shù)的增多而發(fā)生一定的變形呢？當(dāng)輸入內(nèi)容過多的時(shí)候，輸入框內(nèi)會(huì)存在不可見內(nèi)容，那么不可見內(nèi)容該怎么讓用戶知道呢？這些問題都是定義交互設(shè)計(jì)規(guī)則時(shí)需要考慮的。比如大眾點(diǎn)評(píng)：它的輸入評(píng)論就是很典型的最小輸入限制 ，它在右下角給用戶一個(gè)即時(shí)變化的文本提示「加油，還差15個(gè)字」，并且當(dāng)用戶未輸滿15個(gè)字，點(diǎn)擊「發(fā)表」后，toast 告訴用戶不能發(fā)表的原因。還有一個(gè)很有意思的是 ，輸入超過15個(gè)字后，右下角的文案提示發(fā)生變化，期望通過積分獎(jiǎng)勵(lì)的方式來激勵(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)擊狀態(tài)，并且右下角出現(xiàn)記錄字?jǐn)?shù)的提示；但是當(dāng)輸入超過140字的時(shí)候，右下角的記錄字?jǐn)?shù)的提示變?yōu)槌壬?，警告用戶輸入超出字?jǐn)?shù)。比如 TIM：它的聊天對話輸入框，默認(rèn)輸入框高度為第1張圖所示；輸入內(nèi)容超過一欄的時(shí)候，輸入框會(huì)隨著輸入內(nèi)容的增加而變高，如圖2；但是當(dāng)高度增加到一定的程度的時(shí)候，就不會(huì)繼續(xù)增加，而是將一些輸入內(nèi)容隱藏掉，而對于隱藏掉的內(nèi)容，會(huì)顯現(xiàn)一半，告訴用戶可以上下滑動(dòng)查看內(nèi)容，如圖3。
2. 顯示限制
關(guān)于顯示限制，網(wǎng)站制作公司設(shè)計(jì)師覺得也有一些需要考慮的問題，比如：對于文本的顯示，當(dāng)內(nèi)容較多時(shí)，是否需要全部顯示出來，對于不需要顯示的內(nèi)容是怎么處理呢？對于無顯示內(nèi)容時(shí)，該怎么顯示呢？是空狀態(tài)代替呢？還是刪減掉一些內(nèi)容？對于數(shù)字的顯示，當(dāng)數(shù)字比較小或者較大的時(shí)候，是否可以將某一個(gè)范圍的數(shù)字用統(tǒng)一的文案來表示呢？比如好奇心日報(bào)：它的 news 的標(biāo)題，因?yàn)闃?biāo)題字?jǐn)?shù)的不確定性，有長文本，短文本，所以標(biāo)題可能會(huì)有一行、兩行、三行，但是當(dāng)標(biāo)題字?jǐn)?shù)過多，超過三行，該怎么處理呢？
它的處理方式是，超過三行的文本之后內(nèi)容直接不顯示。這個(gè)規(guī)則是交互設(shè)計(jì)需要在輸出文檔里定義好的，不然開發(fā)大哥也會(huì)沒有定義這個(gè)規(guī)則，最后運(yùn)營給出的內(nèi)容的標(biāo)題過長時(shí)，整個(gè)頁面的布局就會(huì)顯得十分凌亂。
比如微信朋友圈：
當(dāng)用戶發(fā)的朋友圈內(nèi)容超過一定字?jǐn)?shù)的時(shí)候，在顯示的時(shí)候，并不是全部顯示的，會(huì)將一部分內(nèi)容隱藏起來，給用戶一個(gè)類似于「查看全文」的入口。網(wǎng)站制作公司設(shè)計(jì)師覺得這么做其中一個(gè)原因是：因?yàn)榉笥讶σ话闶窃谒槠瘯r(shí)間的場景下，用戶對大段的文字其實(shí)是沒有閱讀的欲望的，反倒是一些小段的文字比較容易閱讀，如果用戶感興趣，自然會(huì)點(diǎn)開全文閱讀；另外一個(gè)原因大概是因?yàn)槿匡@示的話，會(huì)存在刷屏情況，導(dǎo)致一屏只能顯示1個(gè)用戶的動(dòng)態(tài)，沒法激發(fā)人「刷」朋友圈的欲望。關(guān)于數(shù)字的顯示規(guī)則，比如未讀消息數(shù)，超過一定數(shù)量的時(shí)候，是顯示消息具體數(shù)字呢？還是顯示「99+」，「999+」呢？或者顯示「…」呢?當(dāng)超過一定數(shù)字的時(shí)候，QQ消息未讀數(shù)顯示的是「99+」，微信消息未讀消息數(shù)顯示的是「…」再比如最小數(shù)字限制，網(wǎng)易云音樂的評(píng)論的發(fā)布時(shí)間，它的「剛剛」和「1分鐘前」是分開的，而對于微信里剛發(fā)的朋友圈，則把1分鐘內(nèi)發(fā)的朋友圈統(tǒng)稱為「1分鐘前」。
四、關(guān)于用戶操作
關(guān)于用戶操作的交互規(guī)則，網(wǎng)站制作公司設(shè)計(jì)師覺得需要考慮的問題有：
交互的方式，比如采取何種手勢操作？用戶進(jìn)行什么操作可以獲取焦點(diǎn)，失去焦點(diǎn)？比如鍵盤的呼入與隱藏。還有用戶可觸擊的熱區(qū)范圍是哪塊區(qū)域？以及常規(guī)的操作流程是怎么樣的？用戶正確操作有沒有即時(shí)反饋？錯(cuò)誤操作有沒有即時(shí)提醒？對于手勢操作，在不同情景里，用戶在屏幕上同樣的動(dòng)作可能會(huì)引發(fā)不同的結(jié)果，比如「雙擊」這個(gè)動(dòng)作，可能產(chǎn)生的結(jié)果是「放大」或者是「開啟/關(guān)閉」，網(wǎng)站制作公司設(shè)計(jì)師們可以把「雙擊」等用戶在屏幕間進(jìn)行的動(dòng)作稱為「觸發(fā)動(dòng)作」；
當(dāng)然同樣的結(jié)果會(huì)由不同的動(dòng)作觸發(fā)產(chǎn)生，比如「放大」這個(gè)結(jié)果，可能是由「雙擊」 產(chǎn)生或者「捏放」產(chǎn)生，也可能是「長按拖動(dòng)」產(chǎn)生，網(wǎng)站制作公司設(shè)計(jì)師們可以把「放大」等用戶的操作在特定情景下引發(fā)的結(jié)果稱為「觸發(fā)行為」；這一切還是視情景而定，但是在交互說明文檔里需要依據(jù)產(chǎn)品明確定義好。觸屏設(shè)備中觸發(fā)的手勢操作多種多樣，但都是一些基本的手勢操作組合演變而成，常見的手勢操作有：Tap（單擊）、Double tap（雙擊）、Drag（拖拽）、Flick（輕滑）、Pinch（捏合）、Spread（捏放）、Press（長按）、Press and tap（雙指長按）Press and Drag（長按拖動(dòng)）、Rotate（雙指旋轉(zhuǎn)）、Multi-finger tap、Multi-finger drag、Squeeze等等。常見的觸發(fā)行為有：Adjust（調(diào)整，這種情況在照片后期處理里面最常用），Bundle（多選），Delete（刪除），Duplicate（復(fù)制），Move（移動(dòng)），Rolate（旋轉(zhuǎn)），Scale down（縮?。?，Scale up（放大）等等。這里只是列了幾個(gè)常用的基本手勢，提醒大家包括網(wǎng)站制作公司設(shè)計(jì)師自己在輸出交互文檔的時(shí)候，不會(huì)忘記定義手勢操作的基本規(guī)則。而關(guān)于手勢操作想了解更詳細(xì)的話，建議看看國外很多 HCI 的文章，比如 Luck Wroblewski 的「Touch Gesture Reference Guide」。
總結(jié)
在交互規(guī)則說明里，網(wǎng)站制作公司設(shè)計(jì)師們需要定義好限制條件，可以從輸入限制和顯示限制兩個(gè)方面來考慮；
對于輸入限制，網(wǎng)站制作公司設(shè)計(jì)師們需要定義好最小輸入限制和最大輸入限制，以及如何展示給用戶；
當(dāng)用戶超出這種限制條件時(shí)，網(wǎng)站制作公司設(shè)計(jì)師們需要如何提醒用戶；
輸入框也會(huì)隨著輸入內(nèi)容的多少存在一定程度的變形，但是也是有規(guī)則要遵循的；
對于不可見內(nèi)容，可以通過一些方式讓用戶知道它的存在；
對于顯示限制，當(dāng)顯示內(nèi)容過多時(shí)，是不是需要全部顯示出來，對于不需要顯示的內(nèi)容用什么樣的處理方式；
對于數(shù)字的顯示，當(dāng)數(shù)字比較小或者較大的時(shí)候，可以將某一個(gè)范圍的數(shù)字用統(tǒng)一的簡潔形式來表示；
網(wǎng)站制作公司設(shè)計(jì)師們還需要定義好用戶操作，包括手勢操作，獲取、失去焦點(diǎn)，熱區(qū)范圍，操作流程等。深圳網(wǎng)站制作公司博納網(wǎng)絡(luò)編輯整理。
