全球互聯(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ò)編輯整理。