如何在交互細節中體現專業性？我歸納了4個層次！

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

圖 1 交互作品專業性的四個層次

1. 設計流程完整、方法得當

設計是有章法的，我們總結了那么多設計流程，設計方法論，就是希望設計師能夠學習借鑒，并運用到自己的設計作品中，讓設計作品從片面走向嚴謹，從主觀走向客觀。當我們審視交互作品時，是否遵循設計思維的工作流程，是否采用合適的設計理論指導，這種可視化的展現你思考過程的形式，成為快速篩選專業作品集的第一層漏斗，如果作品集里只有線框圖肯定是無法通過第一關作品集掃描的。

2. 設計目標拆解合理，策略得當

設計首先是要做正確的事情，簡單清楚的闡述項目背景和業務目標后，我們會看一下設計分析（包括用戶分析+競品分析+數據分析）的結論，結合二者 check 設計目標的合理性，設計策略與目標的匹配度，設計目標的推導及設計策略的制定，可以反映出交互設計師的邏輯推導能力和專業拆解能力。

3. 任務流程的創新性

任務流程的創新是相對大尺度的設計創新，如果能在某個高頻用戶任務上一步直達，快速提升用戶效率，往往可以產生業務飛躍性的結果和用戶驚喜，這能夠反應出設計師們的創新能力。

4. 交互細節的專業性

交互細節的專業性更多的體現在日常的設計實踐中，它將在在項目團隊內部塑造我們的專業形象。我將交互細節的專業性，又拆解成 3 重因素：完備性、精準性和直觀性。

圖 2 交互細節專業性的三個層次

完備性是基礎，設計師需將所有的交互邏輯和細節都進行闡述，避免缺失，徒增溝通成本和項目工期。

精準性是標準，在描述完備的基礎上，要盡可能精煉，準確，通俗易懂，不啰嗦冗余，減少大家的閱讀負擔，避免理解歧義。

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

下面我們就將完備性、精準性和直觀性分開來闡述：

1. 完備性

交互文檔的完備性大家可以參考之前的文章《如何輸出一份專業的交互設計文檔》來保證整體文檔結構的完備性。今天我們重點說一下設計方案本身的完備性。推薦大家可以通過《交互自查表》來進行設計和自檢，以保障交互細節的完備性和精準性。

圖 3 交互自檢表

因為交互設計的核心工作集中在架構層和框架層，所以我們的交互自檢表也主要圍繞這兩層來展開。

① 結構層

結構層由內到外，由整體到局部我將其劃分為 3 個模塊：信息架構、流程設計和交互設計。

在信息架構層面主要關注以下 5 點：

1. 整體信息架構是否清晰易理解，可拓展？
2. 導航模式是否清晰，易理解？
3. 頁面中信息層級是否清晰合理？信息視覺流是否流暢？
4. 文本和圖片標簽是否簡潔、通俗易懂？
5. 是否考慮引入搜索的必要性及搜索的權重？

在流程設計上主要關注以下 8 點：

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

在交互設計上主要關注以下 8 點：

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

② 框架層

框架層按照從整體到細節，我將其劃分成了 5 個模塊：布局、控件、選擇與輸入、文案、數據展示。

在布局展示上主要注意 3 點：

1. 頁面布局是否符合平臺/本品設計框架的規范？
2. 頁面功能布局是否符合行業設計一致性？
3. 頁面視覺動線是否流暢？

在控件設計上主要注意以下 4 點：

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

在選擇與輸入上主要注意一下 7 點：

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

在文案上主要注意以下 4 點：

1. 文案是否簡潔易懂，無歧義？
2. 同場景下用語是否準確一致？
3. 是否使用了生僻的專業術語？
4. 是否存在錯別字/大小寫混用/全角半角符號混用情況？

在數據展示上主要注意以下 7 點：

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

③ 特殊邏輯與系統特性

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

1. 特殊網絡狀態是否做出應對？（弱網、超時、無網）
2. 各種登錄狀態是否作出應對？（未登錄、注銷后、賬號切換、游客賬號）

在系統特性方面主要要考慮 4 類：

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

系統特性方面需根據產品所在平臺的要求去調整，這里是以 vivo 手機系統的要求來寫的，并不具有普適性。大家需要結合自己產品所在平臺的要求去總結。

2. 精準性

精準性和完備性其實都在交互自檢表中同時體現了。完備強調完整無遺漏缺失，精準強調的是清晰準確、精煉、無歧義。比如標簽命名、圖標選擇、文案表達、控件選擇都強調要精準，選擇最合適的元素、文案、數據形式、控件、布局和結構，讓界面設計更加符合用戶認知和操作習慣。

3. 直觀性

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

比如：在簡單流程表示時，可以直接用界面進行呈現，這樣對于操作元素和操作反饋之間的關系展示會比較清晰。

圖 4 更直觀的交互流程

再比如，在撰寫交互細節時，可以在界面上給撰寫的交互細節標上數字標號，并為每個交互細節提煉名稱，方便項目成員快速匹配交互說明和交互對象。

圖 5 更直觀的交互說明

再比如，當交互邏輯有調整時，統一用高亮色標識，讓項目成員可以一目了然的找到修改點。

圖 5 更直觀的交互修改點呈現

好了，到這里交互細節的設計、檢查和呈現就介紹完畢了。

歡迎關注作者微信公眾號：「悅姐聊設計」