07.04 交互自查表｜可用性優化實錄

<table><tbody>

除了乾貨，其它什麼也沒有

職場

數據

新媒體

設計

極客

H5 技術服務、開發等：021 37218818

「網易UEDC」

ID：NetEase_UEDC

網易郵件事業部資深交互設計師

作為交互設計師，大家對交互自查表必然不會陌生，相信不少同學也嘗試過建立自己的自查表。但不知道大家的這張自查表，最後是否有真正利用起來呢？其實，在我們的團隊，交互自查表就經歷過一段被束之高閣的時期，這份由幾位設計師共同整理確認的表格，在實際工作中，卻發現用不起來。就像一個產品，完成上線後，發現並沒有什麼用戶。作為產品的設計師，怎麼能容忍這種情況發生呢！於是，我就利用了週末的時間，對這份自查表進行了優化迭代。這一次，就和大家分享一下這次優化的過程和結果。

交互自查表的價值與目標

產品設計的一般流程大體包括：需求確立、方案輸出、效果跟進，這次的自查表優化也基本依循了這個思路展開。首先需要確認的是，設計師不使用自查表，是本身他們對自查這件事就沒有需求？還是我們的表格設計的不好？這裡就要回歸到當時我們建立自查表的初衷和目標。

交互自查表的價值：

• 幫助設計師更全面的審視自己的設計，在設計場景和細節處查漏補缺，確保思考的全面性和方案的完整性

• 將設計師的思考盲點進行可視化展現，藉以加強設計師對產品結構、用戶場景、交互細節的記憶與理解

建立自查表的最終目標：

真正的自查表，應該在設計師的頭腦中，在思考解決方案的過程中，自然的將設計需求、用戶場景、產品結構、交互流程進行梳理和輸出。而自查表只是我們在達成這個境界之前的一個輔助道具而已。

不過，顯然，我和我的小夥伴們都還沒有達到“手上無表，心中有表”的境界，所以這次的問題不是不需要，而是不好用，還是得從表格本身的設計上找原因。

自查表1.0的問題

首先，我們還是要了解一下優化前自查表的表現（如下圖）▼

建立自查表1.0時的部分思路：

1、交互設計的一些基本法則，如架構要合理、層級要精簡等，是設計師需要掌握的基礎理論，而我們的自查表建立更側重解決設計師對特殊場景、交互細節容易遺漏的問題，所以在內容上以場景列舉和說明為主。

2、自查表均分為兩個部分：場景完成性和流程完整性，這是設計師通常容易遺漏的方面。

3、郵箱大師有四個平臺需要同時規劃，而每個平臺的特性有所差異，因此為四個平臺各自建立了單獨的自查表，內容有通用的，也有差異的，方便各平臺設計師分別查看。

存在的問題：

1、文檔使用路徑長：

因為使用了 Excel 電子文檔，雖然對內容進行擴展很方便，但是每次要找到和打開這個文檔都是一個漫長的過程，【在電腦桌面／某個文件夾找到這個文檔 - 雙擊打開 - 等待程序啟動文檔打開】每一步都在增加使用成本；

2、閱讀體驗不佳：

首先整個文檔結構沒有處理好，第一眼看不懂，導致設計師對內容缺少一個整體的認知，查找起來也比較累；其次，內容閱讀同時包含橫向和縱向的結構，有時還會需要操作滾動條，這樣讀起來也比較累；

3、內容更新不及時：

這個不用說了，都沒有人用，自然也不會有人來關心它的更新了，導致很多新的設計問題沒有反應在上面。而且一共有四分文檔，每改一個地方，都要同時改四份，想想這個工作就不輕鬆。

自查表2.0的建立

鎖定問題後，就看如果解決了，這裡，我從兩個方面來對自查表進行優化：文檔格式和內容結構。

文檔格式：從線上到線下

我希望這份自查表可以讓設計師隨用隨取，而不需要一個複雜的查找等待的過程，那麼，我想到的一個比較好的辦法就是可以打印出來，從線上作業轉為線下作業，直接放在手邊，時不時就可以拿出來瞄上一眼，還可以根據需要進行標註。

而在此基礎上，也對內容設計提出了一些要求，比如所有內容必須承載在一張A4紙的大小上，甚至最好不要超過1頁，否則還要分頁或雙面查看，也不方便。

內容結構：馬里奧的交互自查表

內容結構的設計，很重要的一步就是對自查項的整理和分類。但同時，我也考慮到另外一個問題：郵箱大師涉及的自查項關鍵詞有幾十項，如何讓設計師更好的對文檔結構留下印象，甚至記住它們呢？這裡，我引用了一款經典遊戲《馬里奧》的界面來配合內容結構的搭建和介紹。

如上圖所示，是一張經典的馬里奧遊戲畫面，而在這裡，我們可以把這個畫面拆解為3大部分：背景環境（藍天白雲部分）、遊戲路徑（城堡障礙部分）、操作角色（馬里奧本體）

而藉此，對應自查表的3大模板：

• 環境：硬件環境、軟件環境、郵箱環境（郵箱大師支持各種類型的郵箱，而不同郵箱下，支持的功能存在或多或少的差異）

• 流程路徑：入口、頁面和控件、前進表現、後退表現、提示信息

• 用戶操作：手勢、鼠標、鍵盤、其他（Touchbar、觸控板、語音等）

然後，在大框架的基礎上，再進行進一步細化，如流程路徑部分：

• 以遊戲起點和終點，對應用戶操作的入口和結果

• 以關卡頁面，對應用戶的頁面和控件設計

• 以角色的前進後退，對應用戶的下一步和返回操作

• 以界面提示信息，對應各類界面提示引導

以上，是希望借一張圖就讓大家能夠回憶起自查表的整體結構，方便記憶和定位內容。

結構確認好後，便依照分類將需要設計師注意的信息填入框架內。這些信息大多以關鍵詞的形式存在，畢竟設計師還是對自己的產品有一定了解的，自查表中的關鍵詞只要達到提示的目的即可（這樣也是為了節省空間啦，畢竟要壓縮到一頁紙上）。每一個細節點在這裡就不一一介紹了，因為不同的產品設計的關鍵詞必然不同，關於內容，還是需要大家根據自己的產品以及設計時常遇到的問題，自己去完善。最後成品如下▼

PS：設計分析和最後思考兩個部分是在後期進一步優化的時候加上的，主要希望設計師進一步確認需求分析是否完整，以及考慮自己的設計是否還有優化的空間。

使用場景與總結

至此，自查表的結構設計就完成了，但是整體的可用性優化工作可還差一步，那就是在團隊內推廣新的自查表，和團隊成員再一次溝通新表格的設計思路和使用方法，以確保大家對新的自查表有所瞭解並願意使用它。這裡，提前幫助大家打印好表格，並準備一個輔助的PPT也是必要的工作。

最後，為大家總結一下這份自查表的一些適用場景：

1、設計評審後

往往在設計評審後，都會暴露出設計上大大小小的一些問題，這個時候，不妨拿出自查表，看看這些問題是否都有記錄，如果沒有，就加一項，如果已經有了，就加重標記一下。既是加強自己的記憶，又同時在為文檔做補充，一段時間後，可以把標記的新內容，再更新到電子文檔上（如一個版本結束後，更新一次）。

以下是我自己在幾代自查表上做的批註▼

2、設計完成後

這個不用說，自查表建立的目的就是為了設計師自己檢查交互場景和細節的。為什麼放在後面，就是想要提醒大家對之前已經批註過的錯誤要格外注意一下。

3、新人培訓時

這個算是衍生出來的一種使用場景，團隊新人一般對產品結構和功能還都不是很瞭解，自查表上一些關鍵詞是很好的學習輔助工具。導師可以通過名詞解釋的方式，向新同學介紹相關的知識點，幫助其快速瞭解，如：

• 大師帳號是什麼？有什麼作用？

• 什麼是 IMAP 協議，什麼是 POP3 協議？什麼情況下要注意這些協議的差別？

• 產品文案有哪些規範？

OK，那關於自查表的優化過程就介紹到這裡，表格內容依然會不斷改進，也歡迎大家提供看法和建議～工具的建立最終還是為人服務，“能用起來”是很基礎也很重要的一個要求，先用起來，之後在實際使用過程中，不斷的進行優化改進，以匹配個人或項目團隊當下的需求，讓其能真正為大家解決問題。希望今天的分享可以給大家帶來一點思路，建立切實可用的自查表，早日達到“手上無表，心中有表”的境界。

其他你會感興趣的內容

回覆 python查閱熱門機器學習語言榜

回覆 GitHub瞭解七大頂級生產力工具

回覆 排版獲取更多專業圖文排版教程

回覆 代碼學習其他高階代碼創業設計

回覆 H 5開啟移動營銷的技術進階路

H5、平面、視頻等數字營銷服務請致電

TEL：（021）3721 8818

客戶案例：APEC 峰會 | 中國航天科技集團 | 香奈兒 | 肯德基（湖南） | 中國國際航空 | 湖北省電視臺 | 河南衛視 | 浙江省人民廣播電臺 | 三生製藥 | 交通銀行 | 建設銀行 | 真格基金 | 南方週末 | 上海閔行教育學院 | 牛津大學出版社 | 新東方集團 | 偉巴斯特 | 雪佛蘭汽車 | 觀致汽車 | 雷諾汽車 | TNS 新華信 |

抱歉，除了乾貨，其他什麼也沒有。

閱讀更多 JZ多媒體解決方案 的文章

關鍵字: 軟件 馬里奧 設計師