有理有據(jù)，有面有料，是一個(gè)設(shè)計(jì)作品的專業(yè)體現(xiàn)。之前花了四篇小文（鏈接在文末），講述如何提升設(shè)計(jì)師設(shè)計(jì)作品的內(nèi)在含金量和外在形式感，今天，我們將用最后的篇幅，聊聊如何給設(shè)計(jì)作品創(chuàng)造一個(gè)盡可能完美的終局——交互文檔的細(xì)節(jié)。

千里之堤毀于蟻穴，再專業(yè)的交互設(shè)計(jì)，如果在后期交付時(shí)頻繁出現(xiàn)細(xì)節(jié)的缺失和補(bǔ)充，其實(shí)還是很容易遭受研發(fā)和測(cè)試同學(xué)diss的。甚至有可能因?yàn)橐粋€(gè)細(xì)節(jié)的疏忽，導(dǎo)致整體交互方案的崩盤，不得不從頭再來。

如果研發(fā)過程中發(fā)生這樣的設(shè)計(jì)事故，其實(shí)是非常影響團(tuán)隊(duì)士氣和個(gè)人專業(yè)影響力的。

設(shè)計(jì)細(xì)節(jié)篇，分兩個(gè)維度來闡述，一個(gè)是文檔外,一個(gè)是文檔內(nèi)。

文檔外，其實(shí)是要回歸設(shè)計(jì)的初衷，很多設(shè)計(jì)師包括我自己，設(shè)計(jì)久了，總愿意把自己當(dāng)作是用戶的代言人，盡可能的為用戶體驗(yàn)著想，絞盡腦汁的尋求最佳體驗(yàn)的設(shè)計(jì)，并以此為傲。

這如果是在產(chǎn)品發(fā)展的成熟期，功能相對(duì)穩(wěn)定，體驗(yàn)同質(zhì)化嚴(yán)重，這個(gè)時(shí)候追求的體驗(yàn)，尋求體驗(yàn)的突破是非常有意義的，可以讓產(chǎn)品獲得更多的口碑，從而帶來更多的用戶和收益。

但是如果是在探索期和成長(zhǎng)期，過度的追求單一維度的體驗(yàn)，可能反而會(huì)成為一種產(chǎn)品發(fā)展的桎梏，阻礙產(chǎn)品的成長(zhǎng)，而在衰退期追求的體驗(yàn)，則完全背離了公司作為商業(yè)組織的利益點(diǎn)，會(huì)顯得和整個(gè)項(xiàng)目組格格不入。

產(chǎn)品生命周期與用戶體驗(yàn)要求

所以對(duì)于探索期和衰退期的產(chǎn)品來說，設(shè)計(jì)師要盡可能考慮商業(yè)性和技術(shù)可行性。用最小的設(shè)計(jì)代價(jià)，快速的迭代，完成產(chǎn)品的目標(biāo)（驗(yàn)證價(jià)值或解決問題）。

如果設(shè)計(jì)師在這兩個(gè)階段太揪細(xì)節(jié)，可能會(huì)因?yàn)榈貌坏巾?xiàng)目的支持而心灰意冷。

技術(shù)可行性和商業(yè)收益，不是我們所擅長(zhǎng)的領(lǐng)域，通過前面的設(shè)計(jì)法則和用戶埋點(diǎn)也不能準(zhǔn)確推算，所以還需及時(shí)向技術(shù)及商務(wù)同學(xué)確認(rèn)，別人家能做的產(chǎn)品形態(tài)，咱們家技術(shù)框架不一定支持。別人家能做的精簡(jiǎn)，可能會(huì)損害咱們家的主營(yíng)業(yè)務(wù)。

涉及到這兩點(diǎn)，除非有自上而下的旨意，否則單憑設(shè)計(jì)之力無異于蚍蜉撼樹，很容易讓自己費(fèi)力不討好。

文檔內(nèi)的交互細(xì)節(jié)，主要在于文檔的完整性和閱讀體驗(yàn)，既要面面俱到，又要清晰簡(jiǎn)潔。

面面俱到是指要盡量包含所有流程、頁面及狀態(tài)，避免遺漏。它體現(xiàn)了一個(gè)交互設(shè)計(jì)師設(shè)計(jì)思維的嚴(yán)謹(jǐn)性和設(shè)計(jì)態(tài)度。

網(wǎng)上有很多關(guān)于交互走查表的模板，非常的全面，但就是因?yàn)樘^全面，反而讓很多新人設(shè)計(jì)師望而生畏，避而遠(yuǎn)之，這就失去了交互走查表本身的意義。

我認(rèn)為，交互走查表其實(shí)就是提供給設(shè)計(jì)師的一份幫助文檔，大家都知道在設(shè)計(jì)的時(shí)候，提示要盡可能的簡(jiǎn)短，要適時(shí)出現(xiàn)，要清晰簡(jiǎn)潔，遺憾的是我看到的交互走查表往往都不滿足這一條。

冗長(zhǎng)的交互走查表，就像是冗長(zhǎng)的幫助文檔一樣，把責(zé)任都推給了設(shè)計(jì)師，仿佛在說：誰讓你不按照我逐條檢查呢？

如果出現(xiàn)細(xì)節(jié)的遺漏，就變成了設(shè)計(jì)師自己的錯(cuò)。

誰都不想遺漏，但是后期設(shè)計(jì)時(shí)間往往真的就很緊迫，設(shè)計(jì)師除了細(xì)節(jié)的補(bǔ)充，可能還有其他很多任務(wù)需要做，大家只是想確認(rèn)一下而已，哪有時(shí)間和精力去看那么冗長(zhǎng)的“幫助文檔”。

所以發(fā)揮一下設(shè)計(jì)師的同理心，根據(jù)二八原則，80%設(shè)計(jì)師可能遺漏的問題都只是認(rèn)知走查表里20%的內(nèi)容，這20%的內(nèi)容也真正意義上影響我們80%的用戶和體驗(yàn)，是設(shè)計(jì)者最為關(guān)心的。

那么，我們是不是先把這20%的設(shè)計(jì)解決好呢？這才是真正急設(shè)計(jì)師之所急，站在設(shè)計(jì)師的角度考慮問題。

所以本文精心篩選出最容易被大家所忽略，且大多數(shù)設(shè)計(jì)又必須要考慮的異常分支，為大家整理了一份《設(shè)計(jì)細(xì)節(jié)check表》，以確保主體流程的主要設(shè)計(jì)“面面俱到”。（流程設(shè)計(jì)、布局設(shè)計(jì)，以及互動(dòng)設(shè)計(jì)，如果大家在前期有遵守對(duì)應(yīng)的設(shè)計(jì)原則，再加上數(shù)據(jù)的支持，應(yīng)該大方向都是正確的。我也希望大家盡量通過前期的理論和數(shù)據(jù)，去保證流程和整體設(shè)計(jì)的正確性，而不是要等到最后細(xì)節(jié)確認(rèn)的時(shí)候，才來審視檢驗(yàn)整體，讓細(xì)節(jié)篇，真的是在完善細(xì)節(jié)。）

設(shè)計(jì)細(xì)節(jié)Check表

我把這份《設(shè)計(jì)細(xì)節(jié)check表》按照從整體到局部進(jìn)行了歸類：

最大的單元是指每個(gè)任務(wù)流程的檢查，然后是頁面單元，因?yàn)轫撁嫔婕暗郊虞d的異常分支比較多，所以單獨(dú)拆出來和頁面狀態(tài)并列分別闡述。最后是組塊單元，主要包括輸入類和非輸入類的組件操作及反饋。

下面我們逐一來看：

一、流程檢查

流程檢查主要包括三點(diǎn)：

1. 和其他相似流程的一致性問題

秉承一致性原則，同一個(gè)產(chǎn)品，能保持一致的地方，要盡可能保持一致。

在實(shí)際項(xiàng)目中，同一個(gè)產(chǎn)品，往往有多個(gè)設(shè)計(jì)師，每個(gè)設(shè)計(jì)師都負(fù)責(zé)相對(duì)獨(dú)立的一大模塊，偶爾就會(huì)涉及到相似功能的設(shè)計(jì)，因?yàn)槭遣煌嗽谶M(jìn)行，所以設(shè)計(jì)出來的形態(tài)就可能不一致；

但對(duì)于用戶來說，使用相似功能的人，往往可能是同一撥人，設(shè)計(jì)的不一致，體驗(yàn)就會(huì)有差異，不僅對(duì)于用戶來說學(xué)習(xí)成本高，而且對(duì)于項(xiàng)目組來說同時(shí)維系兩套不同的設(shè)計(jì)，成本也比較高。

2. 逆向流程標(biāo)注

如果一個(gè)流程的正向流程和逆向流程是完全一致的，一般無需特別說明，但是如果返回時(shí)需要跳過某些頁面或者狀態(tài)快速返回，則需要進(jìn)行特殊標(biāo)注，否則可能會(huì)被研發(fā)同學(xué)遺漏。

3. 流程進(jìn)度的保存機(jī)制

當(dāng)遇到特殊情況，程序崩潰，后臺(tái)殺死，斷電等，進(jìn)度是否能夠能自動(dòng)保存并恢復(fù)，如果需要，就需要考慮恢復(fù)的時(shí)機(jī)和形式。

說完流程，再來說單獨(dú)的頁面。談到頁面時(shí)，首先要談的是加載狀態(tài)，畢竟頁面不是憑空就有的。

二、加載狀態(tài)

加載狀態(tài)主要要考慮以下幾點(diǎn)：

1. 是否預(yù)加載

預(yù)加載的時(shí)機(jī)是什么時(shí)候，預(yù)加載的內(nèi)容有多少？（對(duì)于用戶會(huì)長(zhǎng)時(shí)瀏覽的內(nèi)容，一般建議預(yù)加載，預(yù)加載的內(nèi)容一般會(huì)結(jié)合內(nèi)容大小、瀏覽時(shí)長(zhǎng)、甚至網(wǎng)絡(luò)狀態(tài)綜合決定）

2. 加載前的狀態(tài)

在信息未加載出來前，界面是顯示空白引導(dǎo)，還是默認(rèn)占位符，還是顯示上一次的緩存內(nèi)容？（一般有緩存優(yōu)先顯示緩存，無緩存先顯示默認(rèn)占位符，等內(nèi)容加載完成后再進(jìn)行替換）

3. 加載進(jìn)度顯示

是否顯示加載圖標(biāo)，進(jìn)度條，是否可以取消加載？（一般情況下等待超過0.1s，就能夠被用戶感知到，就建議顯示加載圖標(biāo)，以便用戶知道程序已經(jīng)接收到并在響應(yīng)用戶的操作指令。如果等待超過1秒，就建議顯示進(jìn)度條，并提供取消操作，便于用戶自主控制）

4. 加載機(jī)制

是全部加載，還是分布加載顯示？（一般情況下，在2~3屏內(nèi)的有限內(nèi)容，或者完全非同類的內(nèi)容，是可以一次性全部加載的，因?yàn)橛脩艨赡芫褪菦_著某一類內(nèi)容進(jìn)來的，很可能會(huì)快速滑動(dòng)到目標(biāo)內(nèi)容。

而對(duì)于同類型的圖文信息，而且是內(nèi)容比較多時(shí)，一般都會(huì)采取分布加載的形式，避免浪費(fèi)多數(shù)用戶的流量。

視頻播放機(jī)制、廣告圖片加載等，一般還要考慮網(wǎng)絡(luò)情況，一般WIFI情況下，因?yàn)閷?duì)流量及網(wǎng)速的要求低，所以采用自動(dòng)播放視頻，自動(dòng)顯示圖片、播放廣告等，更容易被用戶所接收）

5. 加載超時(shí)處理

是否自動(dòng)重試加載，何時(shí)進(jìn)行超時(shí)提示等。（很多產(chǎn)品在設(shè)計(jì)時(shí)，如果不是完全無網(wǎng)絡(luò)，僅僅是網(wǎng)絡(luò)信息不穩(wěn)定，會(huì)嘗試自動(dòng)加載，以避免用戶手動(dòng)操作。如果自動(dòng)加載超過上限，才會(huì)提示讓用戶稍后再試）

頁面加載出來后，就要要考頁面本身的狀態(tài)了。

三、頁面狀態(tài)

需要考慮的異常頁面狀態(tài)主要有以下幾種：

1. 無內(nèi)容，或者內(nèi)容被刪除后的空狀態(tài)。（一般會(huì)有一個(gè)默認(rèn)引導(dǎo)圖，告知結(jié)果，并附加鼓勵(lì)操作的行為引導(dǎo)）；
2. 有內(nèi)容時(shí)，且內(nèi)容比較豐富時(shí)，要考慮各種內(nèi)容及條數(shù)的多種組合樣式，特別是極端組合樣式，要檢查一下看起來是否合理，是否影響整體界面樣式；
3. 是否需要新功能引導(dǎo)。比如有新功能，希望用戶嘗試，或這是進(jìn)行設(shè)計(jì)重構(gòu)以后，功能布局發(fā)生了變化，要考慮用戶是否還能找到原來的功能；
4. 頁面時(shí)效性。活動(dòng)類有時(shí)效性的內(nèi)容，還需要考慮超過有效期后是否顯示，以及如何顯示，一般剛結(jié)束，都需要有一個(gè)收尾頁面，便于用戶查看活動(dòng)結(jié)果?；顒?dòng)下線后可能還有一個(gè)下線不可訪問頁面，引導(dǎo)用戶向其他活動(dòng)，或者其他功能頁面進(jìn)行轉(zhuǎn)移。

考慮完整體頁面后，最后再來考慮一下頁面內(nèi)的組件狀態(tài)。先來看一下輸入類。

四、輸入框/文本框

輸入框/文本框要考慮的主要有三點(diǎn)：

1. 默認(rèn)狀態(tài)。是否有默認(rèn)提示，是僅僅是填寫提示，還是可以直接提交的示范內(nèi)容？（現(xiàn)在越來越多的產(chǎn)品，為了減少用戶的輸入成本，開始在默認(rèn)框中填入示范文本，考慮一下你的產(chǎn)品是否需要）；
2. 不可用狀態(tài)，考慮是否需要；
3. 輸入狀態(tài)及反饋。這個(gè)要考慮的會(huì)多一點(diǎn)，主要包括正確/錯(cuò)誤的實(shí)時(shí)反饋，超過輸入上線時(shí)的處理方式（截?cái)鄌r提示）、輸入非標(biāo)準(zhǔn)字段的包容性，以及輸入內(nèi)容是否實(shí)時(shí)保存。

最后看一下非輸入類的操作組件。

五、文本/圖標(biāo)按鈕、連接誒、可操作的卡片/列表

“文本/圖標(biāo)按鈕、鏈接、可操作的卡片/列表”要考慮一下幾點(diǎn)：

1. 默認(rèn)狀態(tài)。沒什么好說的；
2. 懸停狀態(tài)，是否需要有懸停tips提示，這個(gè)一般只有PC端才有；
3. 按下狀態(tài)，也稱點(diǎn)擊態(tài)。（一般需要設(shè)置單獨(dú)的視覺樣式，以給用戶明確的視覺反饋，正在響應(yīng)用戶的操作）；
4. 彈起狀態(tài)，也稱已點(diǎn)擊或者已查看的狀態(tài)（對(duì)于同類型的多條并列信息，通常建議添加已點(diǎn)擊/查看狀態(tài)，或者返回時(shí)，讓用戶明確點(diǎn)擊的的選項(xiàng)，確認(rèn)瀏覽的進(jìn)度位置）；
5. 不可點(diǎn)擊狀態(tài)。說明不可點(diǎn)擊的條件即可。

如果設(shè)計(jì)完成后，初步檢查以上五項(xiàng)內(nèi)容，基本上可以確定主題流程的主要設(shè)計(jì)內(nèi)容已經(jīng)面面俱到了。

文章來源：人人都是產(chǎn)品經(jīng)理