四步教你打造「專屬」交互設計自查表

四步教你打造「專屬」交互設計自查表

四步教你打造「專屬」交互設計自查表,觀點,百度MEUX,原創文章站酷網,中國設計師互動平台。

設計自查是設計師常用的檢驗工具,經常以“自查表”形式呈現,可以幫助我們快速遍歷設計方案,修正遺漏或不周。善用設計自查,不止可以避免在“設計評審”時被指出錯誤的尷尬,還可以幫助設計師消除思考盲點,系統化地鍛煉與提升交互設計思維。

如何打造「專屬」設計自查表?

設計自查好處多多,但談起構建一個比較全面和完整的自查表,很多人頓感千頭萬緒,原因是交互設計在產品中處於一個交叉性非常強的位置,功能特性、UI細節、平台/設備特性、異常流程……方方面面都會涉及,構建交互設計自查表應該從哪些角度入手呢?如何做到全面、完整?

本文將以《智能小程序設計走查表》為例(以下簡稱《小程序走查表》),講解基於產品/項目特點構建交互設計自查表的思路,希望能夠幫助大家了解自查方法,觸類旁通建立自己的“個人專屬”自查表。

整體的構建過程可總結為4個步驟:

“ 1.搭結構→ 2.填內容→3.用起來→4.迭代升級”

注: 《小程序走查表》 (可點擊查看線上版本,或在百度小程序文檔平台中搜索“設計走查表”查看)是百度小程序交互設計團隊經過長期設計實踐總結而成,已在團隊內部推廣使用,並在官方文檔中公開提供給廣大開發者;發布一年多以來經過幾次迭代升級,獲得了不錯的反響。

第一步:搭結構




一個自查表常包含幾十條各式各樣的自查項,因此需要搭建一個易理解、好記憶的自查結構,便於我們對眾多自查項留下印象,在實際應用中能夠快速定位問題。

《小程序自查表》的三大自查模塊結構設定,借鑒了一個通俗的日常場景:“吃麵”的步驟,方便使用者聯想記憶:

首先,一碗麵端上桌,我們首先會有一個整體的印象“面的種類對嗎”“第一印像是否合格”,這一步可以對應小程序的整體架構、流程;

然後,我們可能會仔細看看“碗裡有哪些食材”,“顏色、香味各幾分”,這一步可以對應小程序的界面細節展現,包括控件、數據、文案、表單等;

最後,開始吃麵了,過程中我們會感覺到“面嚼起來的口感”,或者發生特殊情形“湯滴到衣服上”,這一步可以對應小程序的交互過程與反饋,以及各種特殊情形。

由此形成的“底層→表層,整體→細節,常態→邊界”自查思路,與設計師產出方案的思考路徑保持一致,便於對照參考。

案例粗淺意在拋磚引玉,大家可以盡情發揮,用自己的方式去搭建自查表結構,適合自己的才是最好的。

第二步:填內容

設計自查具體查什麼,怎麼查呢? 《小程序走查表》的50個自查項,是基於以下原則,在團隊長期的項目經驗中沉澱得出的:

原則一:使設計符合基礎設計理論;

原則二:使設計符合產品的設計平台/設計對象特性。

這部分將通過官方出品的小程序showcase真實設計案例:減壓工具小程序“減減鴨”,以及一站式政務服務應用“中國政務服務平台”,講解《小程序走查表》各模塊自查項的內容及自查方法,供大家參考。

第一部分.信息架構與流程設計

主要檢查點

小程序是即用即走的輕應用,需注意使用簡潔的信息架構,使小程序的功能特色一目了然;使用順暢的用戶路徑,使用戶上手即用,無需學習成本。

自查案例

“整體信息架構是否清晰易理解,可拓展?返回和下一步是否符合用戶預期?”

如下圖,作為一款輕型工具應用,“減減鴨”的核心功能很簡潔,他可以為用戶分析壓力情況、並通過兩個小遊戲幫助用戶調節心情、減輕壓力;因此,減減鴨選用了扁平的1 字型信息架構,將三個功能的入口排佈在首⻚首屏,用戶可通過最短路徑快速觸達內容;在用戶進入功能並結束使用流程後,減減鴨界面提供直返首頁、以及進入其他功能的快捷通道,形成路徑閉環。

第二部分.界面呈現

a.控件

主要檢查點

通過對控件外觀、控件之間關係的正確表達,以及相似任務橫向一致性的把控,引導小程序功能使用,進一步降低用戶學習成本。

自查案例

“界面元素/控件之間的關係是否表達正確?控件的樣式&交互行為是否具有一致性?”

如下圖,減減鴨小程序頁面內容層次清晰,通過控件的面積、色彩對比等突出用戶需關注的操作區,並在部分頁面加以動效引導,使操作方法一目了然。此外,減減鴨3個主要功能模塊內頁面佈局橫向保持了較高一致性:操作區面積比例接近,且全部集中在頁面中下部。良好的一致性使用戶便於操作,且降低了學習成本。

b.數據與顯示

主要檢查點

數據顯示層面,主要需關注數據的格式、單位、排序規則是否合理;以及各種極值狀態,如無數據、數據不完整時如何呈現

自查案例

“數據顯示是否涉及權限與隱私?”

涉及權限與隱私的數據需注意掩碼、或隱藏處理。如下圖,“國家政務服務平台”因其功能特殊性,多處涉及手機號碼或各種個人證件號碼的曝露,為保護用戶隱私,小程序對此類信息基於統一規則進行掩碼處理(手機號保留前3位後4位數字,身份證件等保留後4位數字),讓用戶用得放心。

c.文案

主要檢查點

文案應準確一致,符合功能情景,符合用戶的常規認知和習慣。

自查案例

“是否使用了生僻的專業術語?”

文案使用方面,小程序與其他移動端應用原則無異。在流程設計中,我們需要預先遍歷可能出現的分支情況,鋪設符合用戶認知的反饋信息,如“出錯了,請稍後再試”;避免直接曝露接口回調信息,如“DNS解析失敗”。

d.選擇與輸入

主要檢查點

表單輸入過程的前、中、後,均需鋪設相應提示,如預置內容、輸入提示、輸入後反饋等,提示現在該做什麼、告知操作結果,防止用戶“不知所措”。

自查案例

“輸入前、中、後是否提供了恰當的反饋?是否指定了鍵盤類型?”

如下圖,“國家政務服務平台”小程序的信息查詢流程,全程提供了各種形式的提示,輔助用戶順暢輸入:

- 輸入前,通過輸入框預置文案提示表單內容要求;

- 輸入中,根據表單內容配置對應的鍵盤類型,並在輸入框失焦、表單提交兩個節點設置錯誤校驗,及時反饋錯誤;

- 輸入完成、成功提交後,使用toast明確提示“提交成功”。

第三部分.過程和特殊情形


a.交互過程與反饋

主要檢查點

小程序雖小,也需全面考慮交互過程中的各種異常狀態,提供完備的容錯處理,如授權失敗、外部應用插入、斷網等狀況。

自查案例

“用戶拒絕授權後如何提示/呈現?”

如小程序功能有必要使用地理位置、相機、手機號等權限,需先通過授權面板提出申請,用戶同意後方可正常使用;反之,如用戶拒絕,小程序需考慮涉及權限的內容如何呈現,同時恰當提示,引導用戶自主開啟授權,避免用戶因手誤導致後續權限無法開啟。

如下案例,“國家政務服務平台”小程序為了向用戶提供“本地化”的服務內容,在首頁向用戶提出地理位置授權申請,如用戶拒絕授權,頁面將顯示默認地區信息,並提示授權失敗;同時,用戶下次進入頁面時,用彈窗提供開啟授權的路徑。

b.系統特性

主要檢查點

智能小程序是在移動端百度APP環境內運行的,因此需兼顧移動設備特性(單任務、觸摸屏、iOS、Android雙端差異等),以及智能小程序特性(小程序框架、基礎庫版本等) 。

自查案例

“是否使用了適配小程序定位&內容展現的頂部導航欄?”

除去基礎頂導航樣式外,小程序支持自定義頂導航背景色、元素,可按需選用。

如上圖,“政務服務平台”小程序的眾多頁面中,普通的數據錄入頁面選用基礎頂導航,信息展現清晰合理;首頁、專題運營頁等個性化需求較強的頁面,則選用自定義頂導航,配合整體插畫背景、標題位置定制,形成更佳的視覺效果,以凸顯小程序風格調性、營造場景沉浸感。

第三步:用起來

自查表建好之後,如何在日常工作裡真正“用起來”,而不是三天熱度後就束之高閣? 《小程序走查表》從2個角度來解決這個問題

內容上-結構清晰

作為輕量型設計檢驗工具,自查表的結構從邏輯和視覺呈現上,都應該方便快速遍歷,因此《小程序走查表》的全部自查項使用50 個句式一致的問句呈現,使用者只需在檢查無問題的條目前標記完成,即可完成走查。

形式上-隨取隨用

為方便取用,《小程序走查表》提供線上、線下2個版本:外部開發者可使用在小程序文檔平台公開的線上版本,支持在線勾選;團隊內部設計師多使用線下版本,一張打印出的單面A4紙,無需翻頁,還可以根據需要進行標註。

第四步:迭代升級

自查表的構建不是一勞永逸的,我們需要在日常工作中結合項目踩坑經驗,補充新的內容,將經常犯錯的內容重點標記,讓自查表隨著設計師的成長而成長。

回憶我們入行第一個項目時遇到的問題,或許今天已經不再是問題了,自查表也是如此,不斷升級進階自查表的終極目標,是不再依靠自查表,希望今天的分享可以給大家帶來一點思路,建立切實可用的自查表,早日達到“手上無表,心中有表”的境界。


感謝閱讀,以上內容均由百度MEUX團隊原創設計,以及百度MEUX版權所有,轉載請註明出處,違者必究,謝謝您的合作。

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。