DID Wallet 4.0 設計方法分享

作者： 曹雯（ArcBlock UX 設計師）

鳴謝： 感謝我們的外部設計導師 Rokey Zhang 對設計流程、方法的悉心指導和幫助；感謝我們的外部設計師 Ni Cheng 對細節設計的貢獻； 感謝各位早期參與Beta朋友們的反饋和幫助。

今年我們發布了全新的錢包4.0，這次設計我們推翻了原先整個架構，優化了原有品牌，目的是為了更好的用戶體驗以及提升核心競爭力。

老用戶不難發現我們對品牌進行了大改，不僅如此，產品框架也大翻新：資產頁被放在了進入產品的首屏，取代掉之前定位模糊的應用列表，交易記錄被塞到了首頁的第二個Tab裡，最後一個Tab留給了即時通訊。

我們為什麼敢於大刀闊斧改了這麼多？接下來一步步揭秘這背後的設計故事。

修復產品指南針

過去的3個版本裡，有一個問題是最嚴重也是最棘手的，那就是產品定位表現並不明確，這次我們利用一次完整的線上工作坊，將目光聚焦於產品核心差異點上，在不斷發散思維和討論定位，最終形成了明確清晰的設計方向，也讓我們團隊設計和開發達到了空前的統一。

1. 線上工作坊

2. 分組統計

3. 分析結果

Tips：上圖中，用戶核心場景裡之所以把瀏覽管理放在資產劃轉的上面，是因為在產品核心差異點裡，團隊更多的票數都投了資產瀏覽與管理這塊。

重組產品架構

1. 核心場景對應底部

由上面的討論和投票可得出我們產品的三個核心，也就能確定產品3個Tab的架構，以及其關鍵的關注點。

產品具體設計Tab時，我們調整了三個Tab的順序，是按照目前用戶觸點頻率高低來排序的，目前來說用戶更常管理資產，偶爾玩應用，看資訊推送較少一些。

2. 核心功能對應置頂

頂部Top Bar依舊保留我們的身份設定和掃碼，這兩項全局高頻的功能。右上角的用戶卡片為未來拓展更多去中心化身份功能保留了不可撼動的地位，設定較低頻就塞進下一级中。

3. 構建整體框架

設計核心場景下的UX流程時，可以先將場景細分成幾個可以獨立的場景，比如：首次使用錢包的場景中提煉三個，然後分別設定其場景的設計原則。

下圖是我們一開始設計的架構圖，頁面上除了之前已經確定的頂部和底部以外，別的都用模組的形式來表現，並且頁面之間設定好基本的交互方式，低保真的原型圖可以讓我們關注整體，抓大放小。

Tips：頁面中模組體積越大，比重就越高，需要我們提前設定好每個模組的優先級後，調整為大概的高度再進行細化。

逐步推進UX設計

1. 構建子流程

核心場景的原型圖設計確定後，就可以按照優先級開始構建某個核心場景下的所有頁面結構原型圖了。

Tips：具體場景下，需要針對某些功能入口進行優化，使用頻率高或者地位更重要的模組，應該使用更短的到達路徑。

2. 模組化設計

當全部核心頁面的子流程頁面也都確定了，就可以進入下一步，以模組為單元的細化，從低保真跨向中保真設計。

內容設計

以探索頁面為例，針對Feed推送模組內容進行的一次思維發散。

結構設計

有一些複雜的模組需要進一步拆解成小模組。 不用細化到元素內容，用色塊即可，下面舉例中是按照承載模組的大小進行劃分的。

拆解模組設計

對模組的樣式進一步設計發散。接下來的設計不要被這一步的發散所限制，這裡只是為了激發更多想法。下圖中，對模組的樣式又進一步發散，比如：卡片、列表等。

組合拼接

將頁面上設計好的模組拼起來，形成中保真原型圖。

Tips：正好這時開發已經等候多時，所以模組的設計和中保真功能開發工作可以並行。

下圖為以首頁為例設計經過了三個等級的設計演變，最終變為高保真UI圖。

高保真討論

這個階段我們利用了Notion線上文件，透過分享文件連結，團隊留言討論的方式，一步步確認方案，將討論過程完全保留在子頁面「History」中，有利於後期回溯。

設計風格

產出規範

比較合適的規範可以依據：形式結構 > 邏輯 > 使用場景 > 狀態，一層層遞進，不重複造輪子。

Tips