大廠(chǎng)經(jīng)驗(yàn)！四步教你打造「專(zhuān)屬」交互設(shè)計(jì)自查表！

什么是「設(shè)計(jì)自查」？

設(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ì)思維。

如何打造「專(zhuān)屬」交互設(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ēng)《小程序走查表》），講解基于產(chǎn)品/項(xiàng)目特點(diǎn)構(gòu)建交互設(shè)計(jì)自查表的思路，希望能夠幫助大家了解自查方法，觸類(lèi)旁通建立自己的“個(gè)人專(zhuān)屬”自查表。

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

注：《小程序走查表》（如圖，點(diǎn)擊查看線(xiàn)上版本）是百度小程序交互設(shè)計(jì)團(tuán)隊(duì)經(jīng)過(guò)長(zhǎng)期設(shè)計(jì)實(shí)踐總結(jié)而成，已在團(tuán)隊(duì)內(nèi)部推廣使用，并在官方文檔中公開(kāi)提供給廣大開(kāi)發(fā)者；發(fā)布一年多以來(lái)經(jīng)過(guò)幾次迭代升級(jí)，獲得了不錯(cuò)的反響。

第一步. 搭結(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è)整體的印象“面的種類(lèi)對(duì)嗎”“第一印象是否合格”，這一步可以對(duì)應(yīng)小程序的整體架構(gòu)、流程；
然后，我們可能會(huì)仔細(xì)看看“碗里有哪些食材”，“顏色、香味各幾分”，這一步可以對(duì)應(yīng)小程序的界面細(xì)節(jié)展現(xiàn)，包括控件、數(shù)據(jù)、文案、表單等；

最后，開(kāi)始吃面了，過(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)容及自查方法，供大家參考。

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

主要檢查點(diǎn)

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

自查案例

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

如下圖，作為一款輕型工具應(yīng)用，“減減鴨”的核心功能很簡(jiǎn)潔，他可以為用戶(hù)分析壓力情況、并通過(guò)兩個(gè)小游戲幫助用戶(hù)調(diào)節(jié)心情、減輕壓力；因此，減減鴨選用了扁平的1 字型信息架構(gòu)，將三個(gè)功能的入口排布在首?首屏，用戶(hù)可通過(guò)最短路徑快速觸達(dá)內(nèi)容；在用戶(hù)進(jìn)入功能并結(jié)束使用流程后，減減鴨界面提供直返首頁(yè)、以及進(jìn)入其他功能的快捷通道，形成路徑閉環(huán)。

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

控件

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

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

如下圖，減減鴨小程序頁(yè)面內(nèi)容層次清晰，通過(guò)控件的面積、色彩對(duì)比等突出用戶(hù)需關(guān)注的操作區(qū)，并在部分頁(yè)面加以動(dòng)效引導(dǎo)，使操作方法一目了然。此外，減減鴨3個(gè)主要功能模塊內(nèi)頁(yè)面布局橫向保持了較高一致性：操作區(qū)面積比例接近，且全部集中在頁(yè)面中下部。良好的一致性使用戶(hù)便于操作，且降低了學(xué)習(xí)成本。

數(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ù)用戶(hù)隱私，小程序?qū)Υ祟?lèi)信息基于統(tǒng)一規(guī)則進(jìn)行掩碼處理（手機(jī)號(hào)保留前3位后4位數(shù)字，身份證件等保留后4位數(shù)字），讓用戶(hù)用得放心。

文案

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

自查案例

“是否使用了生僻的專(zhuān)業(yè)術(shù)語(yǔ)？”

文案使用方面，小程序與其他移動(dòng)端應(yīng)用原則無(wú)異。在流程設(shè)計(jì)中，我們需要預(yù)先遍歷可能出現(xiàn)的分支情況，鋪設(shè)符合用戶(hù)認(rèn)知的反饋信息，如“出錯(cuò)了，請(qǐng)稍后再試”；避免直接曝露接口回調(diào)信息，如“DNS解析失敗”。

選擇與輸入

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

自查案例

“輸入前、中、后是否提供了恰當(dāng)?shù)姆答仯渴欠裰付随I盤(pán)類(lèi)型？”

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

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

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

交互過(guò)程與反饋

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

自查案例

“用戶(hù)拒絕授權(quán)后如何提示/呈現(xiàn)？”

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

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

系統(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è)、專(zhuān)題運(yùn)營(yíng)頁(yè)等個(gè)性化需求較強(qiáng)的頁(yè)面，則選用自定義頂導(dǎo)航，配合整體插畫(huà)背景、標(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. 形式上 - 隨取隨用

為方便取用，《小程序走查表》提供線(xiàn)上、線(xiàn)下2個(gè)版本：外部開(kāi)發(fā)者可使用在小程序文檔平臺(tái)公開(kāi)的線(xiàn)上版本，支持在線(xiàn)勾選；團(tuán)隊(duì)內(nèi)部設(shè)計(jì)師多使用線(xiàn)下版本，一張打印出的單面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ú)表，心中有表”的境界。

歡迎關(guān)注作者的微信公眾號(hào)：「百度MEUX」