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

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

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

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

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

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

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

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

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

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

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

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

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

面面俱到是指要盡量包含所有流程、頁面及狀態(tài)，避免遺漏。它體現(xiàn)了一個交互設(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ì)的時候，提示要盡可能的簡短，要適時出現(xiàn)，要清晰簡潔，遺憾的是我看到的交互走查表往往都不滿足這一條。

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

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

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

所以發(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ì)，以及互動設(shè)計(jì)，如果大家在前期有遵守對應(yīng)的設(shè)計(jì)原則，再加上數(shù)據(jù)的支持，應(yīng)該大方向都是正確的。我也希望大家盡量通過前期的理論和數(shù)據(jù)，去保證流程和整體設(shè)計(jì)的正確性，而不是要等到最后細(xì)節(jié)確認(rèn)的時候，才來審視檢驗(yàn)整體，讓細(xì)節(jié)篇，真的是在完善細(xì)節(jié)。）

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

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

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

下面我們逐一來看：

一、流程檢查

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

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

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

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

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

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

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

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

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

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

二、加載狀態(tài)

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

1. 是否預(yù)加載

預(yù)加載的時機(jī)是什么時候，預(yù)加載的內(nèi)容有多少？（對于用戶會長時瀏覽的內(nèi)容，一般建議預(yù)加載，預(yù)加載的內(nèi)容一般會結(jié)合內(nèi)容大小、瀏覽時長、甚至網(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)來的，很可能會快速滑動到目標(biāo)內(nèi)容。

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

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

5. 加載超時處理

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

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

三、頁面狀態(tài)

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

1. 無內(nèi)容，或者內(nèi)容被刪除后的空狀態(tài)。（一般會有一個默認(rèn)引導(dǎo)圖，告知結(jié)果，并附加鼓勵操作的行為引導(dǎo)）；
2. 有內(nèi)容時，且內(nèi)容比較豐富時，要考慮各種內(nèi)容及條數(shù)的多種組合樣式，特別是極端組合樣式，要檢查一下看起來是否合理，是否影響整體界面樣式；
3. 是否需要新功能引導(dǎo)。比如有新功能，希望用戶嘗試，或這是進(jìn)行設(shè)計(jì)重構(gòu)以后，功能布局發(fā)生了變化，要考慮用戶是否還能找到原來的功能；
4. 頁面時效性。活動類有時效性的內(nèi)容，還需要考慮超過有效期后是否顯示，以及如何顯示，一般剛結(jié)束，都需要有一個收尾頁面，便于用戶查看活動結(jié)果?；顒酉戮€后可能還有一個下線不可訪問頁面，引導(dǎo)用戶向其他活動，或者其他功能頁面進(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)及反饋。這個要考慮的會多一點(diǎn)，主要包括正確/錯誤的實(shí)時反饋，超過輸入上線時的處理方式（截?cái)鄌r提示）、輸入非標(biāo)準(zhǔn)字段的包容性，以及輸入內(nèi)容是否實(shí)時保存。

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

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

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

1. 默認(rèn)狀態(tài)。沒什么好說的；
2. 懸停狀態(tài)，是否需要有懸停tips提示，這個一般只有PC端才有；
3. 按下狀態(tài)，也稱點(diǎn)擊態(tài)。（一般需要設(shè)置單獨(dú)的視覺樣式，以給用戶明確的視覺反饋，正在響應(yīng)用戶的操作）；
4. 彈起狀態(tài)，也稱已點(diǎn)擊或者已查看的狀態(tài)（對于同類型的多條并列信息，通常建議添加已點(diǎn)擊/查看狀態(tài)，或者返回時，讓用戶明確點(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)面面俱到了。

再考慮所有內(nèi)容的可讀性，建議參考上一篇《設(shè)計(jì)師專業(yè)表達(dá)·形式篇》從形式上把控設(shè)計(jì)細(xì)節(jié)，讓交互文檔可讀性更強(qiáng)，降低用戶的閱讀成本。

設(shè)計(jì)呈現(xiàn)有理有據(jù)，有面有料，到此篇介紹完畢，希望對你的設(shè)計(jì)會有所幫助，如果你在設(shè)計(jì)呈現(xiàn)時，還有其他疑問，歡迎留言一起交流~

#相關(guān)閱讀#

《設(shè)計(jì)師專業(yè)表達(dá)·數(shù)字篇》

《設(shè)計(jì)師專業(yè)表達(dá)·法則篇》

《設(shè)計(jì)師專業(yè)表達(dá)·數(shù)據(jù)篇》

《設(shè)計(jì)師專業(yè)表達(dá)·形式篇》

本文由@合顏悅設(shè) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash, 基于CC0協(xié)議