我的賬戶改版設計思路&方法

設計鏈接：https://www.behance.net/gallery/35957257/my-account

背景

2016年第一季度，我的賬戶(以下簡稱 myweb ) 的改版設計，涉及 myweb 首頁及各個子頁面。在這之前我一直在推動我司設計規範並建立了內網站點 ludesign 作為設計資源的調取載體，同時做了大量的基礎組件儲備，並梳理了整個 PC 端組件的架構層。所以，在這次改版中 ludesign 作為設計資源的調用平台非常給力，基本上在第一周的時間裡，就已經完成了我的賬戶所有頁面的改版工作，第二周有非常充裕的時間去細化各個部分的設計。

需求探索（關鍵詞）

業務方的需求：信息分類

用戶的聲音：一目了然

UED 的目標：輕量化、高效

競品分析

改版前，我做了 30家互聯網金融平台（25家國內＋5家國外） myweb 的競品分析；重點就排版、字體字型大小、色彩、圖形、圖像五個方面從後端到前端進行調查分析。

框架設計、結構搭建及樣式調整

通過之前對業務的需求理解、對交互設計階段的邏輯分析及用戶行為習慣的走查，確定 leftmenu 和 detail 頁面的基本框架，完成了改版的框架設計。

根據定採的數據，每天進入 myweb 的用戶占整個 http://lu.com 整體 UV／PV 較高，其中進入 myweb 新註冊用戶數量佔總進入流量接近 10%＋。所以，在設計上要綜合考慮新老客應展示不同頁面，以不同場景下的卡片式設計風格進行改版的結構搭建。

在視覺設計之前，交互設計師重新調整了 myweb 後台的信息架構。把右側 detail 內容層的信息，進行了分類及強化處理。對多個場景下會發生的變化進行了初步的設計。完成了改版的樣式調整。

設計過程中發現&解決問題

收款日曆展示方式

在 myweb 首頁改版設計時，我們碰到第一個分歧較大問題。是收款日曆（數據展示型日曆），在有無數據展示時整個模塊的處理方式上，到底在無數據情況下完全隱藏、收起、還是展示，加上之前的交互設計就是無數據情況下完全隱藏的設計，產生了非常大的分歧。最終，還是說服了對方，在無數據時收起用加配說明性文字的方式告知用戶暫無數據。總結下來，有三點在說服對方的過程中起了關鍵的作用。

1.確定問題存在。

在之前傾聽客戶之聲的反饋中，其中有一條就是我的賬戶收款日曆不顯示被當做 bug 的客戶投訴。馬上引起對方的重視和關注。

2.基於業務數據實際的情況。

有無數據關鍵環節出在產品的收益方式上。我司線上在售產品在收益方式差異較大，一次性還本付息、每月等額本息、首月付息每月等本、期中收款到期還清等等，在加上不同層級的用戶在購買產品的選擇上差異較大，造成的結果就是數據非常的不均勻。

3.站在用戶的角度

在這種情況下內部抽取了幾個用戶查看數據情況，發現較大幾率出現。連續三個月內用戶在登錄 myweb 查看收款日曆看到的場景時不同的，在一定時期內完全隱藏，而在另一段時間又出現了，這會讓用戶感到非常困惑。

++ 一個人不可能把所有問題都考慮的面面具到，一個好的設計的背後會有無數次針對用戶體驗提出的改進。改進的過程中爭論時無法避免的，運用數據、理性的推導和控制好理解偏差度是良好溝通方式的基石。++

設計不能局限在屏幕內－(隱私性的考量)

myweb 改版的設計完畢之後，我們在整體審視時發現一個問題；既在當下對於信息重要性分類、分層進行視覺處理後，給用戶帶來一個新的問題，總資產被提的很高，字體很大很強，甚至在正常坐姿距離以外的地方也可以看到總資產的情況。PC 讓用戶本身在隱私性上相比移動端要弱一些，如果說手機正在逐漸成為用戶的一個「器官」，那麼 PC 的公共屬性是應該比較強的，為了解決屏幕之外的這個問題，我在頁面的上距離總資產不遠的地方。增加了一個「小眼睛」讓用戶可以通過滑鼠的點擊隱藏和顯示所有敏感性信息的設計。同時整個設計在本品 App 和 PC 其它頁面做過相似的設計，用戶一定不會感到陌生。

跳出問題看問題

在進行顆粒度更細膩的頁面設計時，即 myweb 新客認證模塊時，又發生了一次影響範圍更大的分歧。交互、產品、業務都參與了進來。之前的 myweb 有一個專門的模塊即用戶新手的四項認證的引導。這個模塊的尺寸在整個頁面中顯的非常大，目的就在於引導用戶進行身份認證、銀行卡綁定、設置交易密碼和設置安保問題。我司是一個非常注重風險控制的金融互聯網平台，在安全層級上這個模塊非常非常的重要。為此，我們改版後在新的設計上大大縮小了模塊的面積，並把整個模塊提到了想對更高的位置上，同時也與產品、業務和交互達成了一致。

1.深挖問題充分理解

我們在早期需求探索的過程中，發現之前的設計是採用了1234步順序引導的方式來設計這個模塊的，其背後的實現模型的邏輯是，用戶必須順序進行身份》銀行卡》交易密碼》安保問題；在這次的改版過程中，負責組合鑒權交互的同事對底層的功能進行了新的設計，可以實現非同步的認證方式。在得知這個信息後，我們及時採用了新的設計對整個環節進行了信息的同步。

2.巧用數據讓數據說話

通過之前的信息同步，板塊存在與否和新的設計樣式上，我們再次進行了一次深度討論。經過向數據團隊尋求緊急數據支持後，拿到的數據讓我們大家非常非常的糾結，因為數據正好不多不少接近零界限。通過對數據的比較分析，隨著數據層級的深入，最後決定按照單一功能從數據上的貢獻度，再進行大量的走查和設計驗證。最終，我們確定了暫時去掉大模塊，通過加強視覺引導的手段來解決問題。同時也準備好應對的設計方案，待後期上線後的數據驗證。

更「好」看的排版（容易讀）

互聯網金融平台會涉及到大量的表單，其中信息和數據可視化設計是非常重要的項目。在設計資金進入明細表單時，之前的設計是嚴格按照數據結構和實現模型來做的，即按照從左到右列的順序是 "時間>事由>收入>支出>賬戶餘額" 。對此改版設計中專門對此類情況進行了重新的梳理和設計，新的設計從左到右列的順序是： "時間>收入／支出（用較小的字型大小備註事由）>賬戶餘額" 。讓用戶從左到右閱讀起來就是什麼時間>發生了什麼>結果是什麼，其主要的目的就是讓用戶更方便更快捷的閱讀，讓內容更「好」看。

字體、字型大小

改版後的 myweb 在所有使用到的文字部分，都進行了數字、中文、英文的區別對待，分別制定不同的字體。在用戶「看數據」的場景下，我們對具體的內容進行了強化和放大處理，對於所有標題和解釋也做了減弱設計，在視覺上給出了一定的區分。

色彩體系

在項目非常早的階段就是需要確定整個的用色體系，限定顏色範圍。在顏色的使用上緊貼 CIS 顏色，選用等角度上相對近似的顏色作為輔助色。

剔除難以記憶的圖標

改版後，我們剔除了原版中大量的 Icon。這些 Icon 的存在會加重用戶的記憶負擔，在業務場景和信息層面的考量下，必須使用 Icon 的地方，採用 SVG 格式，製作 Font Icon 在提高精細度的同時也為後期的迭代和更新提供了有力的支撐。

屏幕高度

在行動點的布局和設計的考量下，改版後進行了分屏設計。屏幕高度按照550-800之間。在一個屏幕區間又有多個行動點的情況下，分清主次、重點突出核心行動點。

不同頁面相同功能保持設計一致性

myweb 上次改版距離在三年前，期間也經歷過無數次的修改、添加、刪減；經歷過非常多的設計師，也存在非常多種多樣的設計；甚至很多熟悉情況的設計師、產品都已經離開蠻久了。這次改版中對所有頁面涉及的所有組件進行修改、刪減，對模塊進行打散，提煉出最小化的公共元素非常重要。這樣做的目的是讓前端開發工程師在項目早期充分準備公共部分組件的設計。

感想

視覺設計在當下非常容易變成刷油漆的工作，如何提高貢獻度需要具備更多的知識和能力。更廣闊的視角、更熟悉業務、比交互更細膩、對數據敏感、善於溝通和協調。視覺設計是從感性的角度切入，用理性的方式思考。緊貼專業，用專業的設計服務於商業服務於內容。最後重視數據，用數據來驗證設計。

推薦閱讀：