起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識四步教你打造「專屬」交互設計自查表
編輯導語：交互設計自查表，是在項目中用來檢測設計方案是否可行和須密，對照交互自查表可以讓設計師的設計方案更加完整，確保沒有什么遺漏的點，從而保證用戶體驗的完整性。本文作者結合工作經驗，總結了一份交互自查表，希望此表能幫助大家在工作中面對分支流程和異常情況的時候，提高處理效率。
設計自查是設計師常用的檢驗工具，經常以“自查表”形式呈現(xiàn)，可以幫助我們快速遍歷設計方案，修正遺漏或不周。
善用設計自查，不止可以避免在“設計評審”時被指出錯誤的尷尬，還可以幫助設計師消除思考盲點，系統(tǒng)化地鍛煉與提升交互設計思維。
一、如何打造「專屬」設計自查表？
設計自查好處多多，但談起構建一個比較全面和完整的自查表，很多人頓感千頭萬緒，原因是交互設計在產品中處于一個交叉性非常強的位置，功能特性、UI細節(jié)、平臺/設備特性、異常流程……
方方面面都會涉及，構建交互設計自查表應該從哪些角度入手呢？如何做到全面、完整？
本文將以《智能小程序設計走查表》為例（以下簡稱《小程序走查表》），講解基于產品/項目特點構建交互設計自查表的思路，希望能夠幫助大家了解自查方法，觸類旁通建立自己的“個人專屬”自查表。
整體的構建過程可總結為4個步驟：搭結構 → 填內容 →用起來 →迭代升級。
二、第一步：搭結構
一個自查表常包含幾十條各式各樣的自查項，因此需要搭建一個易理解、好記憶的自查結構，便于我們對眾多自查項留下印象，在實際應用中能夠快速定位問題。
《小程序自查表》的三大自查模塊結構設定，借鑒了一個通俗的日常場景：“吃面”的步驟，方便使用者聯(lián)想記憶：
- 首先，一碗面端上桌，我們首先會有一個整體的印象“面的種類對嗎”“第一印象是否合格”，這一步可以對應小程序的整體架構、流程；
- 然后，我們可能會仔細看看“碗里有哪些食材”，“顏色、香味各幾分”，這一步可以對應小程序的界面細節(jié)展現(xiàn)，包括控件、數(shù)據、文案、表單等；
- 最后，開始吃面了，過程中我們會感覺到“面嚼起來的口感”，或者發(fā)生特殊情形“湯滴到衣服上”，這一步可以對應小程序的交互過程與反饋，以及各種特殊情形。
由此形成的“底層→表層，整體→細節(jié)，常態(tài)→邊界”自查思路，與設計師產出方案的思考路徑保持一致，便于對照參考。
案例粗淺意在拋磚引玉，大家可以盡情發(fā)揮，用自己的方式去搭建自查表結構，適合自己的才是最好的。
三、第二步：填內容
設計自查具體查什么，怎么查呢？《小程序走查表》的50個自查項，是基于以下原則，在團隊長期的項目經驗中沉淀得出的：
- 原則一：使設計符合基礎設計理論；
- 原則二：使設計符合產品的設計平臺/設計對象特性。
這部分將通過官方出品的小程序showcase真實設計案例：減壓工具小程序“減減鴨”，以及一站式政務服務應用“中國政務服務平臺”，講解《小程序走查表》各模塊自查項的內容及自查方法，供大家參考。
1. 第一部分：信息架構與流程設計
主要檢查點：小程序是即用即走的輕應用，需注意使用簡潔的信息架構，使小程序的功能特色一目了然；使用順暢的用戶路徑，使用戶上手即用，無需學習成本。
自查案例：“整體信息架構是否清晰易理解，可拓展？返回和下一步是否符合用戶預期？”
如下圖，作為一款輕型工具應用，“減減鴨”的核心功能很簡潔，他可以為用戶分析壓力情況、并通過兩個小游戲幫助用戶調節(jié)心情、減輕壓力。
因此，減減鴨選用了扁平的1 字型信息架構，將三個功能的入口排布在首?首屏，用戶可通過最短路徑快速觸達內容；在用戶進入功能并結束使用流程后，減減鴨界面提供直返首頁、以及進入其他功能的快捷通道，形成路徑閉環(huán)。
2. 第二部分. 界面呈現(xiàn)
1）控件
主要檢查點：通過對控件外觀、控件之間關系的正確表達，以及相似任務橫向一致性的把控，引導小程序功能使用，進一步降低用戶學習成本。
自查案例：“界面元素/控件之間的關系是否表達正確？控件的樣式&交互行為是否具有一致性？”
如下圖，減減鴨小程序頁面內容層次清晰，通過控件的面積、色彩對比等突出用戶需關注的操作區(qū)，并在部分頁面加以動效引導，使操作方法一目了然。
此外，減減鴨3個主要功能模塊內頁面布局橫向保持了較高一致性：操作區(qū)面積比例接近，且全部集中在頁面中下部。良好的一致性使用戶便于操作，且降低了學習成本。
2）數(shù)據與顯示
主要檢查點：數(shù)據顯示層面，主要需關注數(shù)據的格式、單位、排序規(guī)則是否合理；以及各種極值狀態(tài)，如無數(shù)據、數(shù)據不完整時如何呈現(xiàn)。
自查案例：“數(shù)據顯示是否涉及權限與隱私？”
涉及權限與隱私的數(shù)據需注意掩碼、或隱藏處理，如下圖，“國家政務服務平臺”因其功能特殊性，多處涉及手機號碼或各種個人證件號碼的曝露，為保護用戶隱私，小程序對此類信息基于統(tǒng)一規(guī)則進行掩碼處理（手機號保留前3位后4位數(shù)字，身份證件等保留后4位數(shù)字），讓用戶用得放心。
3）文案
主要檢查點：文案應準確一致，符合功能情景，符合用戶的常規(guī)認知和習慣。
自查案例：“是否使用了生僻的專業(yè)術語？”
文案使用方面，小程序與其他移動端應用原則無異。
在流程設計中，我們需要預先遍歷可能出現(xiàn)的分支情況，鋪設符合用戶認知的反饋信息，如“出錯了，請稍后再試”；避免直接曝露接口回調信息，如“DNS解析失敗”。
4）選擇與輸入
主要檢查點：表單輸入過程的前、中、后，均需鋪設相應提示，如預置內容、輸入提示、輸入后反饋等，提示現(xiàn)在該做什么、告知操作結果，防止用戶“不知所措”。
自查案例：“輸入前、中、后是否提供了恰當?shù)姆答仯渴欠裰付随I盤類型？”
如下圖，“國家政務服務平臺”小程序的信息查詢流程，全程提供了各種形式的提示，輔助用戶順暢輸入：
- 輸入前：通過輸入框預置文案提示表單內容要求；
- 輸入中：根據表單內容配置對應的鍵盤類型，并在輸入框失焦、表單提交兩個節(jié)點設置錯誤校驗，及時反饋錯誤；
- 輸入完成、成功提交后：使用toast明確提示“提交成功”。
3. 第三部分. 過程和特殊情形
1）交互過程與反饋
主要檢查點：小程序雖小，也需全面考慮交互過程中的各種異常狀態(tài)，提供完備的容錯處理，如授權失敗、外部應用插入、斷網等狀況。
自查案例：“用戶拒絕授權后如何提示/呈現(xiàn)？”
如小程序功能有必要使用地理位置、相機、手機號等權限，需先通過授權面板提出申請，用戶同意后方可正常使用；反之，如用戶拒絕，小程序需考慮涉及權限的內容如何呈現(xiàn)，同時恰當提示，引導用戶自主開啟授權，避免用戶因手誤導致后續(xù)權限無法開啟。
如下案例，“國家政務服務平臺”小程序為了向用戶提供“本地化”的服務內容，在首頁向用戶提出地理位置授權申請。如用戶拒絕授權，頁面將顯示默認地區(qū)信息，并提示授權失??；同時，用戶下次進入頁面時，用彈窗提供開啟授權的路徑。
2）系統(tǒng)特性
主要檢查點：智能小程序是在移動端百度APP環(huán)境內運行的，因此需兼顧移動設備特性（單任務、觸摸屏、iOS、Android雙端差異等），以及智能小程序特性（小程序框架、基礎庫版本等）。
自查案例：“是否使用了適配小程序定位&內容展現(xiàn)的頂部導航欄？”
除去基礎頂導航樣式外，小程序支持自定義頂導航背景色、元素，可按需選用。
如上圖，“政務服務平臺”小程序的眾多頁面中，普通的數(shù)據錄入頁面選用基礎頂導航，信息展現(xiàn)清晰合理；首頁、專題運營頁等個性化需求較強的頁面，則選用自定義頂導航，配合整體插畫背景、標題位置定制，形成更佳的視覺效果，以凸顯小程序風格調性、營造場景沉浸感。
四、第三步：用起來
自查表建好之后，如何在日常工作里真正“用起來”，而不是三天熱度后就束之高閣？
《小程序走查表》從2個角度來解決這個問題：
1. 內容上：結構清晰
作為輕量型設計檢驗工具，自查表的結構從邏輯和視覺呈現(xiàn)上，都應該方便快速遍歷。
因此《小程序走查表》的全部自查項使用 50 個句式一致的問句呈現(xiàn)，使用者只需在檢查無問題的條目前標記完成，即可完成走查。
2. 形式上：隨取隨用
為方便取用，《小程序走查表》提供線上、線下2個版本：外部開發(fā)者可使用在小程序文檔平臺公開的線上版本，支持在線勾選；團隊內部設計師多使用線下版本，一張打印出的單面A4紙，無需翻頁，還可以根據需要進行標注。
五、第四步：迭代升級
自查表的構建不是一勞永逸的，我們需要在日常工作中結合項目踩坑經驗，補充新的內容，將經常犯錯的內容重點標記，讓自查表隨著設計師的成長而成長。
回憶我們入行第一個項目時遇到的問題，或許今天已經不再是問題了，自查表也是如此，不斷升級進階自查表的終極目標，是不再依靠自查表。
希望今天的分享可以給大家?guī)硪稽c思路，建立切實可用的自查表，早日達到“手上無表，心中有表”的境界。
作者：百度MEUX，百度移動生態(tài)用戶體驗設計中心，負責百度移動生態(tài)體系的用戶/商業(yè)產品的全鏈路體驗設計。
本文由@百度MEUX 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash, 基于CC0協(xié)議
請問可以分享表格嗎？