產(chǎn)品經(jīng)理四步教你打造「專屬」交互設(shè)計自查表

1、編輯導(dǎo)語：交互設(shè)計自查表，是在項目中用來檢測設(shè)計方案是否可行和密，對照交互自查表可以讓設(shè)計師的設(shè)計方案更加完整，確保沒有什么遺漏的點，從而保證用戶體驗的完整性。本文作者結(jié)合工作經(jīng)驗，總結(jié)了一份交互自查表，希望此表能幫助大家在工作中面對分支流程和異常情況的時候，提高處理效率。設(shè)計自查是設(shè)計師常用的檢驗工具，經(jīng)常以 “自查表 ”形式呈現(xiàn)，可以幫助我們快速遍歷設(shè)計方案，修正遺漏或不周。善用設(shè)計自查，不止可以避免在 “設(shè)計評審 ”時被指出錯誤的尷尬，還可以幫助設(shè)計師消除思考盲點，系統(tǒng)化地鍛煉與提升交互設(shè)計思維。設(shè)計自查好處多多，但談起構(gòu)建一個比較全面和完整的自查表，很多人頓感千頭萬緒，原因是交互設(shè)計在

2、產(chǎn)品中處于一個交叉性非常強的位置，功能特性、UI細(xì)節(jié)、平臺/設(shè)備特性、異常流程 方方面面都會涉及，構(gòu)建交互設(shè)計自查表應(yīng)該從哪些角度入手呢？如何做到全面、完整？本文將以智能小程序設(shè)計走查表為例（以下簡稱小程序走查表），講解基于產(chǎn)品/ 項目特點構(gòu)建交互設(shè)計自查表的思路，希望能夠幫助大家了解自查方法，觸類旁通建立自己的 “個人專屬” 自查表。整體的構(gòu)建過程可總結(jié)為4個步驟：搭結(jié)構(gòu)-填內(nèi)容-用起來-迭代升 級。一個自查表常包含幾十條各式各樣的自查項，因此需要搭建一個易理解、好記憶的自查結(jié)構(gòu)，便于我們對眾多自查項留下印象，在實際應(yīng)用中能夠快速定位問題。小程序自查表的三大自查模塊結(jié)構(gòu)設(shè)定，借鑒了一個通俗的

3、日常場景： “吃面 ”的步驟，方便使用者聯(lián)想記憶：由此形成的 底層-表層，整體-細(xì)節(jié)，常態(tài)-邊界”自查思路，與設(shè)計師產(chǎn)出方案的思考路徑保持一致，便于對照參考。案例粗淺意在拋磚引玉，大家可以盡情發(fā)揮，用自己的方式去搭建自查表結(jié)構(gòu)，適合自己的才是最好的。設(shè)計自查具體查什么，怎么查呢？小程序走查表的 50 個自查項，是基于以下原則，在團隊長期的項目經(jīng)驗中沉淀得出的：這部分將通過官方出品的小程序showcased實設(shè)計案例：減壓工具小程序“減減鴨” ，以及一站式政務(wù)服務(wù)應(yīng)用“中國政務(wù)服務(wù)平臺 ” ，講解小程序走查表各模塊自查項的內(nèi)容及自查方法，供大家參考。主要檢查點：小程序是即用即走的輕應(yīng)用，需注意使

4、用簡潔的信息架構(gòu)，使小程序的功能特色一目了然；使用順暢的用戶路徑，使用戶上手即用，無需學(xué)習(xí)成本。自查案例： “整體信息架構(gòu)是否清晰易理解，可拓展？返回和下一步是否符合用戶預(yù)期？ ”如下圖，作為一款輕型工具應(yīng)用， “減減鴨” 的核心功能很簡潔，他可以為用戶分析壓力情況、并通過兩個小游戲幫助用戶調(diào)節(jié)心情、減輕壓力。因此，減減鴨選用了扁平的 1 字型信息架構(gòu)，將三個功能的入口排布在首?首屏，用戶可通過最短路徑快速觸達(dá)內(nèi)容；在用戶進(jìn)入功能并結(jié)束使用流程后，減減鴨界面提供直返首頁、以及進(jìn)入其他功能的快捷通道，形成路徑閉環(huán)。1）控件主要檢查點：通過對控件外觀、控件之間關(guān)系的正確表達(dá)，以及相似任務(wù)橫向一致性

5、的把控，引導(dǎo)小程序功能使用，進(jìn)一步降低用戶學(xué)習(xí)成本。自查案例： “界面元素 /控件之間的關(guān)系是否表達(dá)正確？控件的樣式&交互行為是否具有一致性？ ”如下圖，減減鴨小程序頁面內(nèi)容層次清晰，通過控件的面積、色彩對比等突出用戶需關(guān)注的操作區(qū)，并在部分頁面加以動效引導(dǎo)，使操作方法一目了然。此外，減減鴨 3 個主要功能模塊內(nèi)頁面布局橫向保持了較高一致性：操作區(qū)面積比例接近，且全部集中在頁面中下部。良好的一致性使用戶便于操作，且降低了學(xué)習(xí)成本。2）數(shù)據(jù)與顯示主要檢查點：數(shù)據(jù)顯示層面，主要需關(guān)注數(shù)據(jù)的格式、單位、排序規(guī)則是否合理；以及各種極值狀態(tài)，如無數(shù)據(jù)、數(shù)據(jù)不完整時如何呈現(xiàn)。自查案例： “數(shù)據(jù)顯示是否涉及

6、權(quán)限與隱私？ ”涉及權(quán)限與隱私的數(shù)據(jù)需注意掩碼、或隱藏處理，如下圖， “國家政務(wù)服務(wù)平臺 ” 因其功能特殊性，多處涉及手機號碼或各種個人證件號碼的曝露，為保護用戶隱私，小程序?qū)Υ祟愋畔⒒诮y(tǒng)一規(guī)則進(jìn)行掩碼處理（手機號保留前3 位后 4 位數(shù)字，身份證件等保留后4 位數(shù)字），讓用戶用得放心。3）文案主要檢查點：文案應(yīng)準(zhǔn)確一致，符合功能情景，符合用戶的常規(guī)認(rèn)知和習(xí)慣。自查案例： “是否使用了生僻的專業(yè)術(shù)語？ ”文案使用方面，小程序與其他移動端應(yīng)用原則無異。在流程設(shè)計中，我們需要預(yù)先遍歷可能出現(xiàn)的分支情況，鋪設(shè)符合用戶認(rèn)知的反饋信息，如 “出錯了，請稍后再試” ；避免直接曝露接口回調(diào)信息，如“DNS

7、單析失敗”。4）選擇與輸入主要檢查點：表單輸入過程的前、中、后，均需鋪設(shè)相應(yīng)提示，如預(yù)置內(nèi)容、輸入提示、輸入后反饋等，提示現(xiàn)在該做什么、告知操作結(jié)果，防止用戶“不知所措 ” 。自查案例： “輸入前、中、后是否提供了恰當(dāng)?shù)姆答?？是否指定了鍵盤類型？ ”如下圖， “國家政務(wù)服務(wù)平臺 ”小程序的信息查詢流程，全程提供了各種形式的提示，輔助用戶順暢輸入：1）交互過程與反饋主要檢查點：小程序雖小，也需全面考慮交互過程中的各種異常狀態(tài)，提供完備的容錯處理，如授權(quán)失敗、外部應(yīng)用插入、斷網(wǎng)等狀況。自查案例： “用戶拒絕授權(quán)后如何提示/ 呈現(xiàn)？ ”如小程序功能有必要使用地理位置、相機、手機號等權(quán)限，需先通過授權(quán)

8、面板提出申請，用戶同意后方可正常使用；反之，如用戶拒絕，小程序需考慮涉及權(quán)限的內(nèi)容如何呈現(xiàn)，同時恰當(dāng)提示，引導(dǎo)用戶自主開啟授權(quán)，避免用戶因手誤導(dǎo)致后續(xù)權(quán)限無法開啟。如下案例， “國家政務(wù)服務(wù)平臺 ”小程序為了向用戶提供 “本地化 ”的服務(wù)內(nèi)容，在首頁向用戶提出地理位置授權(quán)申請。如用戶拒絕授權(quán)，頁面將顯示默認(rèn)地區(qū)信息，并提示授權(quán)失??；同時，用戶下次進(jìn)入頁面時，用彈窗提供開啟授權(quán)的路徑。2）系統(tǒng)特性主要檢查點：智能小程序是在移動端百度APP 環(huán)境內(nèi)運行的，因此需兼顧移動設(shè)備特性（單任務(wù)、觸摸屏、 iOS、 Android 雙端差異等），以及智能小程序特性（小程序框架、基礎(chǔ)庫版本等）。自查案例： “

9、是否使用了適配小程序定位& 內(nèi)容展現(xiàn)的頂部導(dǎo)航欄？ ”除去基礎(chǔ)頂導(dǎo)航樣式外，小程序支持自定義頂導(dǎo)航背景色、元素，可按需選用。如上圖， “政務(wù)服務(wù)平臺 ”小程序的眾多頁面中，普通的數(shù)據(jù)錄入頁面選用基礎(chǔ)頂導(dǎo)航，信息展現(xiàn)清晰合理；首頁、專題運營頁等個性化需求較強的頁面，則選用自定義頂導(dǎo)航，配合整體插畫背景、標(biāo)題位置定制，形成更佳的視覺效果，以凸顯小程序風(fēng)格調(diào)性、營造場景沉浸感。自查表建好之后，如何在日常工作里真正 “用起來 ” ，而不是三天熱度后就束之高閣？小程序走查表從2 個角度來解決這個問題：作為輕量型設(shè)計檢驗工具，自查表的結(jié)構(gòu)從邏輯和視覺呈現(xiàn)上，都應(yīng)該方便快速遍歷。因此小程序走查表的全部自查項使用 50 個句式一致的問句呈現(xiàn)，使用者只需在檢查無問題的條目前標(biāo)記完成，即可完成走查。為方便取用，小程序走查表提供線上、線下2 個版本：外部開發(fā)者可使用在小程序文檔平臺公開的線上版本，支持在線勾選；團隊內(nèi)部設(shè)計師多使用線下版本，一張打印出的單面A4 紙，無