梳理適合自己的交互自查表

年底了，工作節奏逐漸空閑起來，回顧一下這大半年的工作內容和踩過的坑，發現其實很多問題都是易被忽略或經常重複出現的那種，於是腦海里想起來一個東西——交互自查表。

作為設計師，如何保證設計質量保證自己的專業性，在方案輸出後不被項目組成員以及老闆們提出各種挑戰？交互自查表就是用於解決這些問題的工具。那麼應該如何進行高效的設計自查？我看到過網上有各種版本，總覺得沒有貼合自己的需求，於是就結合自己平時的項目經驗及其他同學分享的內容，梳理出來這份適合自己的自查表。但這絕對不是終結版，還會持續不斷更新優化，最終以提升設計質量，保證設計方案經得起檢驗。

一、明確用戶核心使用場景及影響因素

不同的產品對應的用戶場景和操作流程是不同的，設計投入前定好的那些功能需求，在設計產出後再回過頭來檢驗一遍方案是否真正滿足用戶需求？在體驗上是否還有優化空間？以及各種影響因素都要一併考慮進去。

• 在哪些主場景下完成什麼任務？
• 有哪些核心影響因素？

二、整理產品框架及流程

按照核心任務梳理流程，檢驗整理的流程圖是否有問題。設計稿常常在開始設計和中間過程會經過不斷地調整，結合各方意見最終定稿，所以很難保證原本設定好的流程是否會發生變化，這裡都需要設計師進行把控，從整體到局部，防止出現邏輯問題，保證最重要的核心任務流完成。

框架布局

• 框架結構：能否承載產品功能？明確操作區域、內容區域等是否合理統一？
• 信息層次：是否清晰，重要的信息是否優先展示
• 信息組織：是否可合併歸類，沒有重複信息
• 功能操作：是否易操作，重要、頻繁觸發的功能按鈕是否在手機的可操作區域
• 導航：廣度和深度是否適中、易操作、拓展性好；導航完整性，頂部菜單、手風琴菜單、麵包屑（二級以上菜單）、步驟導航（不要超過5步）
• 頁面打開方式：當前頁打開（單個服務刷新頁面）、在新窗口中打開（兩個服務兩種內容的跳轉）的場景總結
• 頁面滾動方式：系統滾動條滾動、指定區域滾動
• 顏色：背景色、線條色、圖標顏色、多種狀態色（成功、失敗、失效、未完成、審核中等）、告警顏色（緊急>重要>次要>提示>正常）、文本顏色（標題、次級重要信息、置灰文字、鏈接文字）

流程

• 核心任務流程：從頭到尾是否能順暢走通
• 全景圖：全站頁面分布和組織情況，頁面之間的跳轉關係
• 框架圖：關鍵界面的框架梳理，體現優先順序關係
• 異常流程：退出、撤銷、重置、返回、不通過、過期失效
• 返回：從哪裡來是否可以回到那裡去
• 保存：複雜任務流是否支持保存或自動保存；意外退出前保存提示
• 複雜狀態之間的變化關係：子流程梳理輔助說明

三、按頁面流逐一梳理界面內容細節

接著，以頁面流仔細梳理每一個界面的內容細節。枚舉了最基本的幾種內容形式

文本內容

• 文本長度：是否有限制？
• 文案內容：是否完整、通俗易懂、有趣
• 超過負載時如何顯示？
• 核心辭彙是否統一（如各種用戶角色名稱）
• 重要、複雜的操作內容是否有清晰的解釋說明？
• 瀏覽到內容底部的情感化表達

控制項

• 按鈕類型：主按鈕、次按鈕、幽靈按鈕、虛線按鈕是否按需區分使用（一般一個界面或視窗中只有一個主按鈕）
• 按鈕狀態：默認、經過、點擊、置灰、選中、載入中（提交按鈕）；其中不同狀態下按鈕的置灰，是否有說明為什麼不可用？以及按鈕激活條件是什麼？
• 鏈接：點擊後顏色是否有變化
• 選擇組件：單選、多選、tab選，是否有默認選中項
• 輸入框：輸入及時校驗，有錯誤時定位；有特殊輸入條件限制的輸入框是否有明確說明

表格

• 基礎表格：內容項過多時，考慮將次要身份鑒別類信息隱藏，滑鼠浮動到對應欄位後浮窗顯示
• 表格排序：默認排序和切換排序，核心欄位的默認寬度
• 表格操作：考慮在當前表格內完成（頁內編輯）；批量操作時對於互斥的選項處理
• 對齊：一般文字左對齊，數字右對齊
• 摺疊、展開 ：主要內容在列內顯示，更多內容點擊展開顯示
• 分頁：表格內容翻頁展示還是無限載入？若分頁每頁顯示多少條內容

彈窗

• 遮罩：是否有背景遮罩
• 操作：主行動點是否突顯，有無取消操作
• 核心、毀滅性操作是否有二次確認提示？
• 足不出戶：避免濫用 Modal 進行二次確認，考慮使用覆蓋層直接操作，並支持撤銷
• 無線modality：按照規範使用相應modality

四、交互與反饋

上一步主要是一個產品看起來怎麼樣；而這一步是這個產品用起來會怎麼樣，用戶如何跟產品交流？在滿足產品基本功能的基礎上，如何更大的優化用戶體驗？

從A狀態到B狀態

A.觸發時

• 觸發源：操作按鈕在當前界面中是否明確
• 觸發區域：操作按鈕是否易操作易觸達
• 未釋放狀態：考慮內容過多或展示過快時支持長按停留內容；是否可以取消，例如發送語音消息，此時是否允許用戶取消發送；

B.觸發後

• 結果反饋：是否有反饋，反饋是否備註清楚，選擇輕（tip/小紅點）、中（Toast）、重（提示框）提示優先順序別是否恰當；常見的結果類型有成功、失敗、空（搜索）、無許可權；觸發的控制項是否有狀態變化
• 載入狀態：狀態改變的等待時間是否超過3S左右，如果太長是否需要加入載入狀態
• 轉場動效：是否需要添加有趣的轉場動效
• 撤銷：是否支持撤銷操作

刷新和載入

• 刷新：自動還是手動刷新？每次刷新載入多少條內容？刷新失敗如何提示？
• 無線刷新：頂部下拉、底部上拉，安卓有刷新按鈕
• 載入：複雜頁面是否有副列表載入？預覽、保存、提交的完成時間若超過3S是否有載入的過渡狀態？新載入內容是否有高亮底紋顯示？

通知機制

• 迴流：多端任務流是否需發送通知（釘釘、郵件、旺信、簡訊等）拉用戶回到平台？發送通知的觸髮狀態是否交代清楚
• 消息推送：是否需要消息推送C用戶，調用系統通知還是第三方還是其他方式
• 推送策略：是否備註通知的推送時間、表現形式、失效策略

五、特殊情景再複查

此外，還有一些特殊情況要考慮，多是一些很容易疏忽的細節，需要對於這些特殊因素再次複查是否遺漏

硬體設備

• 橫豎屏：是否支持橫屏顯示，橫豎屏時布局及功能是否完整
• 解析度高低：解析度情況下是否會有適配問題，例如5s等小屏手機下內容展示及操作區域是否足夠？
• 硬體、系統版本：不同手機的物理按鍵、系統等不同，是否需要備註
• 應用版本：新增功能是否影響老版本，是否需要升級
• 硬體交互：定位、藍牙是否打開？需要調用GPS、相機的使用許可權嗎？如何讓用戶更加願意授權？

模式

• 編輯模式：編輯模式下出現意外情況是否提示保存或自動保存已填信息
• 夜間模式：是否需要考慮夜間模式（有沒有光線較暗的場景）
• 無圖模式：數據流量環境下是否提示切換無圖模式
• 低電量模式：是否減弱部分視覺效果，停用富文本內容的自動刷新與下載
• 沉浸模式：如全屏模式、VR模式，考慮退出操作的便捷性和信息提示弱打斷

網路狀態

• 沒有網路（無網）
• 網路超時（斷網）
• 網路太慢（弱網）
• 網路環境變化：從WiFi到數據流量環境時是否需要切換視圖
• 載入失敗：是否自動重新載入？

異常

• 異常操作：連續多次點擊給予反饋、統一設備登錄多個賬號驗證碼、統一IP；連續破壞性操作n項內容時是否需要身份驗證
• 數據相關：進入頁面後伺服器獲取不到數據；搜索無結果狀態；數據載入時間較長時預設默認圖片、狀態、內容框架；
• 錯誤提示頁：404頁面、即將上線、頁面失效、服務下線、系統繁忙，考慮出錯頁面內容情感化表達以減弱用戶的受挫感

賬號許可權

• 未登錄：登錄和未登錄按鈕許可權差別，需要登錄後才可操作的功能是否備註
• 用戶許可權：需要讀取許可權嗎？如何描述讀取內容讓用戶讀？不同許可權管理

其他

• 是否需新手引導頁
• 是否需要進行埋點，以便分析用戶行為？
• 技術可行性
• 必要的動效提供

總結

其實，交互自查的核心目標是：工作效率和質量的一併提升。這決定了自查表應該是不冗餘的，在高效迭代的產品進程中能夠快速發揮作用，通過自查表可以減少技術返工，不能因為要檢查而拉長設計交付的時期。但是現在自查表還是過長，後續我會根據在實際項目中的檢驗不斷精細打磨，歡迎大家指正。最後附上梳理好的交互自查表：