編輯導(dǎo)語(yǔ)：交互設(shè)計(jì)自查表，是在項(xiàng)目中用來(lái)檢測(cè)設(shè)計(jì)方案是否可行和須密，對(duì)照交互自查表可以讓設(shè)計(jì)師的設(shè)計(jì)方案更加完整，確保沒(méi)有什么遺漏的點(diǎn)，從而保證用戶體驗(yàn)的完整性。本文作者結(jié)合工作經(jīng)驗(yàn)，總結(jié)了一份交互自查表，希望此表能幫助大家在工作中面對(duì)分支流程和異常情況的時(shí)候，提高處理效率。

設(shè)計(jì)自查是設(shè)計(jì)師常用的檢驗(yàn)工具，經(jīng)常以“自查表”形式呈現(xiàn)，可以幫助我們快速遍歷設(shè)計(jì)方案，修正遺漏或不周。

善用設(shè)計(jì)自查，不止可以避免在“設(shè)計(jì)評(píng)審”時(shí)被指出錯(cuò)誤的尷尬，還可以幫助設(shè)計(jì)師消除思考盲點(diǎn)，系統(tǒng)化地鍛煉與提升交互設(shè)計(jì)思維。

一、如何打造「專屬」設(shè)計(jì)自查表？

設(shè)計(jì)自查好處多多，但談起構(gòu)建一個(gè)比較全面和完整的自查表，很多人頓感千頭萬(wàn)緒，原因是交互設(shè)計(jì)在產(chǎn)品中處于一個(gè)交叉性非常強(qiáng)的位置，功能特性、UI細(xì)節(jié)、平臺(tái)/設(shè)備特性、異常流程……

方方面面都會(huì)涉及，構(gòu)建交互設(shè)計(jì)自查表應(yīng)該從哪些角度入手呢？如何做到全面、完整？

本文將以《智能小程序設(shè)計(jì)走查表》為例（以下簡(jiǎn)稱《小程序走查表》），講解基于產(chǎn)品/項(xiàng)目特點(diǎn)構(gòu)建交互設(shè)計(jì)自查表的思路，希望能夠幫助大家了解自查方法，觸類旁通建立自己的“個(gè)人專屬”自查表。

整體的構(gòu)建過(guò)程可總結(jié)為4個(gè)步驟：搭結(jié)構(gòu) → 填內(nèi)容 →用起來(lái) →迭代升級(jí)。

二、第一步：搭結(jié)構(gòu)

一個(gè)自查表常包含幾十條各式各樣的自查項(xiàng)，因此需要搭建一個(gè)易理解、好記憶的自查結(jié)構(gòu)，便于我們對(duì)眾多自查項(xiàng)留下印象，在實(shí)際應(yīng)用中能夠快速定位問(wèn)題。

《小程序自查表》的三大自查模塊結(jié)構(gòu)設(shè)定，借鑒了一個(gè)通俗的日常場(chǎng)景：“吃面”的步驟，方便使用者聯(lián)想記憶：

• 首先，一碗面端上桌，我們首先會(huì)有一個(gè)整體的印象“面的種類對(duì)嗎”“第一印象是否合格”，這一步可以對(duì)應(yīng)小程序的整體架構(gòu)、流程；
• 然后，我們可能會(huì)仔細(xì)看看“碗里有哪些食材”，“顏色、香味各幾分”，這一步可以對(duì)應(yīng)小程序的界面細(xì)節(jié)展現(xiàn)，包括控件、數(shù)據(jù)、文案、表單等；
• 最后，開始吃面了，過(guò)程中我們會(huì)感覺(jué)到“面嚼起來(lái)的口感”，或者發(fā)生特殊情形“湯滴到衣服上”，這一步可以對(duì)應(yīng)小程序的交互過(guò)程與反饋，以及各種特殊情形。

由此形成的“底層→表層，整體→細(xì)節(jié)，常態(tài)→邊界”自查思路，與設(shè)計(jì)師產(chǎn)出方案的思考路徑保持一致，便于對(duì)照參考。

案例粗淺意在拋磚引玉，大家可以盡情發(fā)揮，用自己的方式去搭建自查表結(jié)構(gòu)，適合自己的才是最好的。

三、第二步：填內(nèi)容

設(shè)計(jì)自查具體查什么，怎么查呢？《小程序走查表》的50個(gè)自查項(xiàng)，是基于以下原則，在團(tuán)隊(duì)長(zhǎng)期的項(xiàng)目經(jīng)驗(yàn)中沉淀得出的：

• 原則一：使設(shè)計(jì)符合基礎(chǔ)設(shè)計(jì)理論；
• 原則二：使設(shè)計(jì)符合產(chǎn)品的設(shè)計(jì)平臺(tái)/設(shè)計(jì)對(duì)象特性。

這部分將通過(guò)官方出品的小程序showcase真實(shí)設(shè)計(jì)案例：減壓工具小程序“減減鴨”，以及一站式政務(wù)服務(wù)應(yīng)用“中國(guó)政務(wù)服務(wù)平臺(tái)”，講解《小程序走查表》各模塊自查項(xiàng)的內(nèi)容及自查方法，供大家參考。

1. 第一部分：信息架構(gòu)與流程設(shè)計(jì)

主要檢查點(diǎn)：小程序是即用即走的輕應(yīng)用，需注意使用簡(jiǎn)潔的信息架構(gòu)，使小程序的功能特色一目了然；使用順暢的用戶路徑，使用戶上手即用，無(wú)需學(xué)習(xí)成本。

自查案例：“整體信息架構(gòu)是否清晰易理解，可拓展？返回和下一步是否符合用戶預(yù)期？”

如下圖，作為一款輕型工具應(yīng)用，“減減鴨”的核心功能很簡(jiǎn)潔，他可以為用戶分析壓力情況、并通過(guò)兩個(gè)小游戲幫助用戶調(diào)節(jié)心情、減輕壓力。

因此，減減鴨選用了扁平的1 字型信息架構(gòu)，將三個(gè)功能的入口排布在首?首屏，用戶可通過(guò)最短路徑快速觸達(dá)內(nèi)容；在用戶進(jìn)入功能并結(jié)束使用流程后，減減鴨界面提供直返首頁(yè)、以及進(jìn)入其他功能的快捷通道，形成路徑閉環(huán)。

2. 第二部分. 界面呈現(xiàn)

1）控件

主要檢查點(diǎn)：通過(guò)對(duì)控件外觀、控件之間關(guān)系的正確表達(dá)，以及相似任務(wù)橫向一致性的把控，引導(dǎo)小程序功能使用，進(jìn)一步降低用戶學(xué)習(xí)成本。

自查案例：“界面元素/控件之間的關(guān)系是否表達(dá)正確？控件的樣式&交互行為是否具有一致性？”

如下圖，減減鴨小程序頁(yè)面內(nèi)容層次清晰，通過(guò)控件的面積、色彩對(duì)比等突出用戶需關(guān)注的操作區(qū)，并在部分頁(yè)面加以動(dòng)效引導(dǎo)，使操作方法一目了然。

此外，減減鴨3個(gè)主要功能模塊內(nèi)頁(yè)面布局橫向保持了較高一致性：操作區(qū)面積比例接近，且全部集中在頁(yè)面中下部。良好的一致性使用戶便于操作，且降低了學(xué)習(xí)成本。

2）數(shù)據(jù)與顯示

主要檢查點(diǎn)：數(shù)據(jù)顯示層面，主要需關(guān)注數(shù)據(jù)的格式、單位、排序規(guī)則是否合理；以及各種極值狀態(tài)，如無(wú)數(shù)據(jù)、數(shù)據(jù)不完整時(shí)如何呈現(xiàn)。

自查案例：“數(shù)據(jù)顯示是否涉及權(quán)限與隱私？”

涉及權(quán)限與隱私的數(shù)據(jù)需注意掩碼、或隱藏處理，如下圖，“國(guó)家政務(wù)服務(wù)平臺(tái)”因其功能特殊性，多處涉及手機(jī)號(hào)碼或各種個(gè)人證件號(hào)碼的曝露，為保護(hù)用戶隱私，小程序?qū)Υ祟愋畔⒒诮y(tǒng)一規(guī)則進(jìn)行掩碼處理（手機(jī)號(hào)保留前3位后4位數(shù)字，身份證件等保留后4位數(shù)字），讓用戶用得放心。

3）文案

主要檢查點(diǎn)：文案應(yīng)準(zhǔn)確一致，符合功能情景，符合用戶的常規(guī)認(rèn)知和習(xí)慣。

自查案例：“是否使用了生僻的專業(yè)術(shù)語(yǔ)？”

文案使用方面，小程序與其他移動(dòng)端應(yīng)用原則無(wú)異。

在流程設(shè)計(jì)中，我們需要預(yù)先遍歷可能出現(xiàn)的分支情況，鋪設(shè)符合用戶認(rèn)知的反饋信息，如“出錯(cuò)了，請(qǐng)稍后再試”；避免直接曝露接口回調(diào)信息，如“DNS解析失敗”。

4）選擇與輸入

主要檢查點(diǎn)：表單輸入過(guò)程的前、中、后，均需鋪設(shè)相應(yīng)提示，如預(yù)置內(nèi)容、輸入提示、輸入后反饋等，提示現(xiàn)在該做什么、告知操作結(jié)果，防止用戶“不知所措”。

自查案例：“輸入前、中、后是否提供了恰當(dāng)?shù)姆答?？是否指定了鍵盤類型？”

如下圖，“國(guó)家政務(wù)服務(wù)平臺(tái)”小程序的信息查詢流程，全程提供了各種形式的提示，輔助用戶順暢輸入：

• 輸入前：通過(guò)輸入框預(yù)置文案提示表單內(nèi)容要求；
• 輸入中：根據(jù)表單內(nèi)容配置對(duì)應(yīng)的鍵盤類型，并在輸入框失焦、表單提交兩個(gè)節(jié)點(diǎn)設(shè)置錯(cuò)誤校驗(yàn)，及時(shí)反饋錯(cuò)誤；
• 輸入完成、成功提交后：使用toast明確提示“提交成功”。

3. 第三部分. 過(guò)程和特殊情形

1）交互過(guò)程與反饋

主要檢查點(diǎn)：小程序雖小，也需全面考慮交互過(guò)程中的各種異常狀態(tài)，提供完備的容錯(cuò)處理，如授權(quán)失敗、外部應(yīng)用插入、斷網(wǎng)等狀況。

自查案例：“用戶拒絕授權(quán)后如何提示/呈現(xiàn)？”

如小程序功能有必要使用地理位置、相機(jī)、手機(jī)號(hào)等權(quán)限，需先通過(guò)授權(quán)面板提出申請(qǐng)，用戶同意后方可正常使用；反之，如用戶拒絕，小程序需考慮涉及權(quán)限的內(nèi)容如何呈現(xiàn)，同時(shí)恰當(dāng)提示，引導(dǎo)用戶自主開啟授權(quán)，避免用戶因手誤導(dǎo)致后續(xù)權(quán)限無(wú)法開啟。

如下案例，“國(guó)家政務(wù)服務(wù)平臺(tái)”小程序?yàn)榱讼蛴脩籼峁氨镜鼗钡姆?wù)內(nèi)容，在首頁(yè)向用戶提出地理位置授權(quán)申請(qǐng)。如用戶拒絕授權(quán)，頁(yè)面將顯示默認(rèn)地區(qū)信息，并提示授權(quán)失??；同時(shí)，用戶下次進(jìn)入頁(yè)面時(shí)，用彈窗提供開啟授權(quán)的路徑。

2）系統(tǒng)特性

主要檢查點(diǎn)：智能小程序是在移動(dòng)端百度APP環(huán)境內(nèi)運(yùn)行的，因此需兼顧移動(dòng)設(shè)備特性（單任務(wù)、觸摸屏、iOS、Android雙端差異等），以及智能小程序特性（小程序框架、基礎(chǔ)庫(kù)版本等）。

自查案例：“是否使用了適配小程序定位&內(nèi)容展現(xiàn)的頂部導(dǎo)航欄？”

除去基礎(chǔ)頂導(dǎo)航樣式外，小程序支持自定義頂導(dǎo)航背景色、元素，可按需選用。

如上圖，“政務(wù)服務(wù)平臺(tái)”小程序的眾多頁(yè)面中，普通的數(shù)據(jù)錄入頁(yè)面選用基礎(chǔ)頂導(dǎo)航，信息展現(xiàn)清晰合理；首頁(yè)、專題運(yùn)營(yíng)頁(yè)等個(gè)性化需求較強(qiáng)的頁(yè)面，則選用自定義頂導(dǎo)航，配合整體插畫背景、標(biāo)題位置定制，形成更佳的視覺(jué)效果，以凸顯小程序風(fēng)格調(diào)性、營(yíng)造場(chǎng)景沉浸感。

四、第三步：用起來(lái)

自查表建好之后，如何在日常工作里真正“用起來(lái)”，而不是三天熱度后就束之高閣？

《小程序走查表》從2個(gè)角度來(lái)解決這個(gè)問(wèn)題：

1. 內(nèi)容上：結(jié)構(gòu)清晰

作為輕量型設(shè)計(jì)檢驗(yàn)工具，自查表的結(jié)構(gòu)從邏輯和視覺(jué)呈現(xiàn)上，都應(yīng)該方便快速遍歷。

因此《小程序走查表》的全部自查項(xiàng)使用 50 個(gè)句式一致的問(wèn)句呈現(xiàn)，使用者只需在檢查無(wú)問(wèn)題的條目前標(biāo)記完成，即可完成走查。

2. 形式上：隨取隨用

為方便取用，《小程序走查表》提供線上、線下2個(gè)版本：外部開發(fā)者可使用在小程序文檔平臺(tái)公開的線上版本，支持在線勾選；團(tuán)隊(duì)內(nèi)部設(shè)計(jì)師多使用線下版本，一張打印出的單面A4紙，無(wú)需翻頁(yè)，還可以根據(jù)需要進(jìn)行標(biāo)注。

五、第四步：迭代升級(jí)

自查表的構(gòu)建不是一勞永逸的，我們需要在日常工作中結(jié)合項(xiàng)目踩坑經(jīng)驗(yàn)，補(bǔ)充新的內(nèi)容，將經(jīng)常犯錯(cuò)的內(nèi)容重點(diǎn)標(biāo)記，讓自查表隨著設(shè)計(jì)師的成長(zhǎng)而成長(zhǎng)。

回憶我們?nèi)胄械谝粋€(gè)項(xiàng)目時(shí)遇到的問(wèn)題，或許今天已經(jīng)不再是問(wèn)題了，自查表也是如此，不斷升級(jí)進(jìn)階自查表的終極目標(biāo)，是不再依靠自查表。

希望今天的分享可以給大家?guī)?lái)一點(diǎn)思路，建立切實(shí)可用的自查表，早日達(dá)到“手上無(wú)表，心中有表”的境界。

作者：百度MEUX，百度移動(dòng)生態(tài)用戶體驗(yàn)設(shè)計(jì)中心，負(fù)責(zé)百度移動(dòng)生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗(yàn)設(shè)計(jì)。

本文由@百度MEUX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash, 基于CC0協(xié)議