如何判斷一個(gè)交互作品的專業(yè)性？我歸納了 4 個(gè)層次：

圖 1 交互作品專業(yè)性的四個(gè)層次

1. 設(shè)計(jì)流程完整、方法得當(dāng)

設(shè)計(jì)是有章法的，我們總結(jié)了那么多設(shè)計(jì)流程，設(shè)計(jì)方法論，就是希望設(shè)計(jì)師能夠?qū)W習(xí)借鑒，并運(yùn)用到自己的設(shè)計(jì)作品中，讓設(shè)計(jì)作品從片面走向嚴(yán)謹(jǐn)，從主觀走向客觀。當(dāng)我們審視交互作品時(shí)，是否遵循設(shè)計(jì)思維的工作流程，是否采用合適的設(shè)計(jì)理論指導(dǎo)，這種可視化的展現(xiàn)你思考過(guò)程的形式，成為快速篩選專業(yè)作品集的第一層漏斗，如果作品集里只有線框圖肯定是無(wú)法通過(guò)第一關(guān)作品集掃描的。

2. 設(shè)計(jì)目標(biāo)拆解合理，策略得當(dāng)

設(shè)計(jì)首先是要做正確的事情，簡(jiǎn)單清楚的闡述項(xiàng)目背景和業(yè)務(wù)目標(biāo)后，我們會(huì)看一下設(shè)計(jì)分析（包括用戶分析+競(jìng)品分析+數(shù)據(jù)分析）的結(jié)論，結(jié)合二者 check 設(shè)計(jì)目標(biāo)的合理性，設(shè)計(jì)策略與目標(biāo)的匹配度，設(shè)計(jì)目標(biāo)的推導(dǎo)及設(shè)計(jì)策略的制定，可以反映出交互設(shè)計(jì)師的邏輯推導(dǎo)能力和專業(yè)拆解能力。

3. 任務(wù)流程的創(chuàng)新性

任務(wù)流程的創(chuàng)新是相對(duì)大尺度的設(shè)計(jì)創(chuàng)新，如果能在某個(gè)高頻用戶任務(wù)上一步直達(dá)，快速提升用戶效率，往往可以產(chǎn)生業(yè)務(wù)飛躍性的結(jié)果和用戶驚喜，這能夠反應(yīng)出設(shè)計(jì)師們的創(chuàng)新能力。

4. 交互細(xì)節(jié)的專業(yè)性

交互細(xì)節(jié)的專業(yè)性更多的體現(xiàn)在日常的設(shè)計(jì)實(shí)踐中，它將在在項(xiàng)目團(tuán)隊(duì)內(nèi)部塑造我們的專業(yè)形象。我將交互細(xì)節(jié)的專業(yè)性，又拆解成 3 重因素：完備性、精準(zhǔn)性和直觀性。

圖 2 交互細(xì)節(jié)專業(yè)性的三個(gè)層次

完備性是基礎(chǔ)，設(shè)計(jì)師需將所有的交互邏輯和細(xì)節(jié)都進(jìn)行闡述，避免缺失，徒增溝通成本和項(xiàng)目工期。

精準(zhǔn)性是標(biāo)準(zhǔn)，在描述完備的基礎(chǔ)上，要盡可能精煉，準(zhǔn)確，通俗易懂，不啰嗦冗余，減少大家的閱讀負(fù)擔(dān)，避免理解歧義。

直觀性是進(jìn)階，要將我們的項(xiàng)目成員也當(dāng)做是用戶，將交互文檔主次呈現(xiàn)清晰，并盡可能的可視化，避免所有東西都用文字傳達(dá)，提升項(xiàng)目成員的閱讀+理解效率和體驗(yàn)。

下面我們就將完備性、精準(zhǔn)性和直觀性分開來(lái)闡述：

1. 完備性

交互文檔的完備性大家可以參考之前的文章《如何輸出一份專業(yè)的交互設(shè)計(jì)文檔》來(lái)保證整體文檔結(jié)構(gòu)的完備性。今天我們重點(diǎn)說(shuō)一下設(shè)計(jì)方案本身的完備性。推薦大家可以通過(guò)《交互自查表》來(lái)進(jìn)行設(shè)計(jì)和自檢，以保障交互細(xì)節(jié)的完備性和精準(zhǔn)性。

圖 3 交互自檢表

因?yàn)榻换ピO(shè)計(jì)的核心工作集中在架構(gòu)層和框架層，所以我們的交互自檢表也主要圍繞這兩層來(lái)展開。

① 結(jié)構(gòu)層

結(jié)構(gòu)層由內(nèi)到外，由整體到局部我將其劃分為 3 個(gè)模塊：信息架構(gòu)、流程設(shè)計(jì)和交互設(shè)計(jì)。

在信息架構(gòu)層面主要關(guān)注以下 5 點(diǎn)：

1. 整體信息架構(gòu)是否清晰易理解，可拓展？
2. 導(dǎo)航模式是否清晰，易理解？
3. 頁(yè)面中信息層級(jí)是否清晰合理？信息視覺流是否流暢？
4. 文本和圖片標(biāo)簽是否簡(jiǎn)潔、通俗易懂？
5. 是否考慮引入搜索的必要性及搜索的權(quán)重？

在流程設(shè)計(jì)上主要關(guān)注以下 8 點(diǎn)：

1. 新功能是否需要引導(dǎo)，形式是否合適？
2. 是否有其他相似的任務(wù)流程？是否可復(fù)用之前的流程？
3. 是否能方便的找到每一步的操作入口，并正確的操作？
4. 操作反饋是否能被用戶注意到，并正確理解？
5. 操作后是否能很方便的撤銷？
6. 逆向流程的設(shè)計(jì)是否有特殊考慮？
7. 操作是否需要申請(qǐng)授權(quán)？未授權(quán)如何呈現(xiàn)？
8. 任務(wù)被中斷后是否保存進(jìn)度和狀態(tài)，如何繼續(xù)？

在交互設(shè)計(jì)上主要關(guān)注以下 8 點(diǎn)：

1. 高頻操作的功能是否在拇指自然操作的熱區(qū)范圍內(nèi)，且熱區(qū)足夠？
2. 是否需要設(shè)計(jì)動(dòng)效，增強(qiáng)頁(yè)面元素或頁(yè)面間的邏輯關(guān)系？
3. 是否考慮了誤操作的情況和容錯(cuò)性？
4. 手勢(shì)使用是否符合用戶認(rèn)知？是否與系統(tǒng)手勢(shì)沖突？
5. 系統(tǒng)反饋是否需要一段等待時(shí)間，如何將處理狀態(tài)傳遞給用戶？
6. 操作時(shí)和操作后是否有明顯的狀態(tài)變化讓用戶感知到操作正在/已經(jīng)生效？
7. 操作成功的狀態(tài)反饋是否符合用戶預(yù)期，可否增強(qiáng)用戶的情感反應(yīng)？
8. 是否考慮操作失敗的處理邏輯？能否幫助用戶盡快從錯(cuò)誤中恢復(fù)？

② 框架層

框架層按照從整體到細(xì)節(jié)，我將其劃分成了 5 個(gè)模塊：布局、控件、選擇與輸入、文案、數(shù)據(jù)展示。

在布局展示上主要注意 3 點(diǎn)：

1. 頁(yè)面布局是否符合平臺(tái)/本品設(shè)計(jì)框架的規(guī)范？
2. 頁(yè)面功能布局是否符合行業(yè)設(shè)計(jì)一致性？
3. 頁(yè)面視覺動(dòng)線是否流暢？

在控件設(shè)計(jì)上主要注意以下 4 點(diǎn)：

1. 是否采用標(biāo)準(zhǔn)控件（組件）？
2. 界面元素與所采用的控件是否契合匹配？
3. 控件的樣式與其交互行為是否具有一致性？
4. 控件的狀態(tài)是否考慮完備，不同狀態(tài)的區(qū)分是否明顯？

在選擇與輸入上主要注意一下 7 點(diǎn)：

1. 輸入前是否提供提示，確保用戶能正確的輸入？（包括格式提醒、輸入目的提醒、舉例提醒等）
2. 輸入中是否提供及時(shí)反饋？（輸入建議、錯(cuò)誤提示）
3. 輸入完成后是否提供及時(shí)反饋？（填寫錯(cuò)誤、填寫正確、跳過(guò)未填）
4. 是否指定了鍵盤類型？（英文鍵盤、數(shù)字鍵盤、密碼鍵盤等）
5. 是否考慮到了鍵盤彈出引起的頁(yè)面遮擋?
6. 表單是否需要拆分，以減少用戶的輸入壓力？
7. 是否需要實(shí)時(shí)保存用戶輸入的數(shù)據(jù)或者進(jìn)度？

在文案上主要注意以下 4 點(diǎn)：

1. 文案是否簡(jiǎn)潔易懂，無(wú)歧義？
2. 同場(chǎng)景下用語(yǔ)是否準(zhǔn)確一致？
3. 是否使用了生僻的專業(yè)術(shù)語(yǔ)？
4. 是否存在錯(cuò)別字/大小寫混用/全角半角符號(hào)混用情況？

在數(shù)據(jù)展示上主要注意以下 7 點(diǎn)：

1. 數(shù)據(jù)內(nèi)容缺失是否顯示默認(rèn)圖片/占位符等？
2. 無(wú)法完整顯示的數(shù)據(jù)的處理策略？
3. 數(shù)據(jù)過(guò)期如何提示或呈現(xiàn)給用戶？
4. 數(shù)值是否要按特定的格式、單位顯示？
5. 數(shù)據(jù)是否存在極值？
6. 數(shù)據(jù)按什么規(guī)則排序？
7. 數(shù)據(jù)顯示是否涉及權(quán)限與隱私？

③ 特殊邏輯與系統(tǒng)特性

在特殊邏輯方面主要要考慮 2 類：

1. 特殊網(wǎng)絡(luò)狀態(tài)是否做出應(yīng)對(duì)？（弱網(wǎng)、超時(shí)、無(wú)網(wǎng)）
2. 各種登錄狀態(tài)是否作出應(yīng)對(duì)？（未登錄、注銷后、賬號(hào)切換、游客賬號(hào)）

在系統(tǒng)特性方面主要要考慮 4 類：

1. 是否考慮夜間模式/隱私模式的展示邏輯和效果？
2. 是否考慮系統(tǒng)分屏的展示邏輯？
3. 是否考慮橫屏的展示邏輯？
4. 是否考慮了折疊屏/特殊屏幕的適配？

系統(tǒng)特性方面需根據(jù)產(chǎn)品所在平臺(tái)的要求去調(diào)整，這里是以 vivo 手機(jī)系統(tǒng)的要求來(lái)寫的，并不具有普適性。大家需要結(jié)合自己產(chǎn)品所在平臺(tái)的要求去總結(jié)。

2. 精準(zhǔn)性

精準(zhǔn)性和完備性其實(shí)都在交互自檢表中同時(shí)體現(xiàn)了。完備強(qiáng)調(diào)完整無(wú)遺漏缺失，精準(zhǔn)強(qiáng)調(diào)的是清晰準(zhǔn)確、精煉、無(wú)歧義。比如標(biāo)簽命名、圖標(biāo)選擇、文案表達(dá)、控件選擇都強(qiáng)調(diào)要精準(zhǔn)，選擇最合適的元素、文案、數(shù)據(jù)形式、控件、布局和結(jié)構(gòu)，讓界面設(shè)計(jì)更加符合用戶認(rèn)知和操作習(xí)慣。

3. 直觀性

直觀性主要是對(duì)交互文檔形式的要求，當(dāng)我們的交互邏輯和描述面面俱到且準(zhǔn)確精煉之后，更高一級(jí)的要求就是要直觀。通過(guò)合理的信息分類、組織以及可視化的方法讓交互文檔的信息傳遞更直接。這里可以給大家舉幾個(gè)例子讓大家更好理解：

比如：在簡(jiǎn)單流程表示時(shí)，可以直接用界面進(jìn)行呈現(xiàn)，這樣對(duì)于操作元素和操作反饋之間的關(guān)系展示會(huì)比較清晰。

圖 4 更直觀的交互流程

再比如，在撰寫交互細(xì)節(jié)時(shí)，可以在界面上給撰寫的交互細(xì)節(jié)標(biāo)上數(shù)字標(biāo)號(hào)，并為每個(gè)交互細(xì)節(jié)提煉名稱，方便項(xiàng)目成員快速匹配交互說(shuō)明和交互對(duì)象。

圖 5 更直觀的交互說(shuō)明

再比如，當(dāng)交互邏輯有調(diào)整時(shí)，統(tǒng)一用高亮色標(biāo)識(shí)，讓項(xiàng)目成員可以一目了然的找到修改點(diǎn)。

圖 5 更直觀的交互修改點(diǎn)呈現(xiàn)

好了，到這里交互細(xì)節(jié)的設(shè)計(jì)、檢查和呈現(xiàn)就介紹完畢了。

作者：悅姐聊設(shè)計(jì)