交互設計 · 第 28講
👉 如何在交互細節中體現專業性？👈
如何判斷一個交互作品的專業性？我歸納了4個層次：
1、設計流程完整、方法得當。
設計是有章法的，我們總結了那麼多設計流程，設計方法論，就是希望設計師能夠學習借鑑，並運用到自己的設計作品中，讓設計作品從片面走向嚴謹，從主觀走向客觀。當我們審視交互作品時，是否遵循設計思維的工作流程，是否採用合適的設計理論指導，這種可視化的展現你思考過程的形式，成為快速篩選專業作品集的第一層漏斗，如果作品集裡只有線框圖肯定是無法通過第一關作品集掃描的。感興趣的小夥伴可以點擊文章《設計師常用模型一覽表》學習設計流程與方法。
2、設計目標拆解合理，策略得當。
設計首先是要做正確的事情，簡單清楚的闡述項目背景和業務目標後，我們會看一下設計分析（包括用戶分析+競品分析+數據分析）的結論，結合二者check設計目標的合理性，設計策略與目標的匹配度，設計目標的推導及設計策略的制定，可以反映出交互設計師的邏輯推導能力和專業拆解能力。感興趣的小夥伴可以點擊文章《設計師如何推導+拆解設計目標》學習。
3、任務流程的創新性。
任務流程的創新是相對大尺度的設計創新，如果能在某個高頻用戶任務上一步直達，快速提升用戶效率，往往可以產生業務飛躍性的結果和用戶驚喜，這能夠反應出設計師們的創新能力。感興趣的小夥伴可以點擊文章《手把手教你用戶流程設計》學習。
4、交互細節的專業性。
交互細節的專業性更多的體現在日常的設計實踐中，它將在在項目團隊內部塑造我們的專業形象。我將交互細節的專業性，又拆解成3重因素：完備性、精準性和直觀性。
完備性是基礎，設計師需將所有的交互邏輯和細節都進行闡述，避免缺失，徒增溝通成本和項目工期。
精準性是標準，在描述完備的基礎上，要儘可能精煉，準確，通俗易懂，不囉嗦冗餘，減少大家的閱讀負擔，避免理解歧義。
直觀性是進階，要將我們的項目成員也當做是用戶，將交互文檔主次呈現清晰，並儘可能的可視化，避免所有東西都用文字傳達，提升項目成員的閱讀+理解效率和體驗。
下面我們就將完備性、精準性和直觀性分開來闡述：
一。完備性
交互文檔的完備性大家可以參考之前的文章《如何輸出一份專業的交互設計文檔》來保證整體文檔結構的完備性。今天我們重點說一下設計方案本身的完備性。推薦大家可以通過《交互自查表》來進行設計和自檢，以保障交互細節的完備性和精準性。
因為交互設計的核心工作集中在架構層和框架層，所以我們的交互自檢表也主要圍繞這兩層來展開。
1.1 結構層
結構層由內到外，由整體到局部我將其劃分為3個模塊：信息架構、流程設計和交互設計。
在信息架構層面主要關注以下5點：
這跟我們《如何進行信息架構設計》中信息架構的4個組成部分是密切相關的。自檢要求部分描述較多，我將在小課堂中為大家詳細講述。
在流程設計上主要關注以下8點：
新功能是否需要引導，形式是否合適？
是否有其他相似的任務流程？是否可復用之前的流程？
是否能方便的找到每一步的操作入口，並正確的操作？
操作反饋是否能被用戶注意到，並正確理解？
操作後是否能很方便的撤銷？
逆向流程的設計是否有特殊考慮？
操作是否需要申請授權？未授權如何呈現？
任務被中斷後是否保存進度和狀態，如何繼續？
在交互設計上主要關注以下8點：
高頻操作的功能是否在拇指自然操作的熱區範圍內，且熱區足夠？
是否需要設計動效，增強頁面元素或頁面間的邏輯關係？
是否考慮了誤操作的情況和容錯性？
手勢使用是否符合用戶認知？是否與系統手勢衝突？
系統反饋是否需要一段等待時間，如何將處理狀態傳遞給用戶？
操作時和操作後是否有明顯的狀態變化讓用戶感知到操作正在/已經生效？
操作成功的狀態反饋是否符合用戶預期，可否增強用戶的情感反應？
是否考慮操作失敗的處理邏輯？能否幫助用戶儘快從錯誤中恢復？
1.2 框架層
框架層按照從整體到細節，我將其劃分成了5個模塊：布局、控件、選擇與輸入、文案、數據展示。
在布局展示上主要注意3點：
頁面布局是否符合平台/本品設計框架的規範？
頁面功能布局是否符合行業設計一致性？
頁面視覺動線是否流暢？
在控件設計上主要注意以下4點：
是否採用標準控件（組件）？
界面元素與所採用的控件是否契合匹配？
控件的樣式與其交互行為是否具有一致性？
控件的狀態是否考慮完備，不同狀態的區分是否明顯？
在選擇與輸入上主要注意一下7點：
輸入前是否提供提示，確保用戶能正確的輸入？（包括格式提醒、輸入目的提醒、舉例提醒等）
輸入中是否提供及時反饋？（輸入建議、錯誤提示）
輸入完成後是否提供及時反饋？（填寫錯誤、填寫正確、跳過未填）
是否指定了鍵盤類型？（英文鍵盤、數字鍵盤、密碼鍵盤等）
是否考慮到了鍵盤彈出引起的頁面遮擋?
表單是否需要拆分，以減少用戶的輸入壓力？
是否需要實時保存用戶輸入的數據或者進度？
在文案上主要注意以下4點：
文案是否簡潔易懂，無歧義？
同場景下用語是否準確一致？
是否使用了生僻的專業術語？
是否存在錯別字/大小寫混用/全角半角符號混用情況？
在數據展示上主要注意以下7點：
數據內容缺失是否顯示默認圖片/占位符等？
無法完整顯示的數據的處理策略？
數據過期如何提示或呈現給用戶？
數值是否要按特定的格式、單位顯示？
數據是否存在極值？
數據按什麼規則排序？
數據顯示是否涉及權限與隱私？
1.3 特殊邏輯與系統特性
在特殊邏輯方面主要要考慮2類：
特殊網絡狀態是否做出應對？（弱網、超時、無網）
各種登錄狀態是否作出應對？（未登錄、註銷後、賬號切換、遊客賬號）
在系統特性方面主要要考慮4類：
是否考慮夜間模式/隱私模式的展示邏輯和效果？
是否考慮系統分屏的展示邏輯？
是否考慮橫屏的展示邏輯？
是否考慮了摺疊屏/特殊屏幕的適配？
系統特性方面需根據產品所在平台的要求去調整，這裡是以vivo手機系統的要求來寫的，並不具有普適性。大家需要結合自己產品所在平台的要求去總結。
二。精準性
精準性和完備性其實都在交互自檢表中同時體現了。完備強調完整無遺漏缺失，精準強調的是清晰準確、精煉、無歧義。比如標籤命名、圖標選擇、文案表達、控件選擇都強調要精準，選擇最合適的元素、文案、數據形式、控件、布局和結構，讓界面設計更加符合用戶認知和操作習慣。
三。直觀性
直觀性主要是對交互文檔形式的要求，當我們的交互邏輯和描述面面俱到且準確精煉之後，更高一級的要求就是要直觀。通過合理的信息分類、組織以及可視化的方法讓交互文檔的信息傳遞更直接。這裡可以給大家舉幾個例子讓大家更好理解：
比如：在簡單流程表示時，可以直接用界面進行呈現，這樣對於操作元素和操作反饋之間的關係展示會比較清晰。
▲圖4更直觀的交互流程
再比如，在撰寫交互細節時，可以在界面上給撰寫的交互細節標上數字標號，並為每個交互細節提煉名稱，方便項目成員快速匹配交互說明和交互對象。
▲圖5更直觀的交互說明
再比如，當交互邏輯有調整時，統一用高亮色標識，讓項目成員可以一目了然的找到修改點。
▲圖5更直觀的交互修改點呈現
好了，到這裡交互細節的設計、檢查和呈現就介紹完畢了。
留言列表