騰訊內部分享！超全面的互聯(lián)網金融體驗設計的方法庫

zake : 在2017國際體驗設計大會中，來自「互聯(lián)網銀行用戶體驗聯(lián)合實驗室」的Ray和Louie在工作坊里為大家介紹了互聯(lián)網金融的通用設計流程（參考鏈接）。后續(xù)我們把在工作坊里面提到設計方法庫進行了再次整理和優(yōu)化，在這里為大家詳細的介紹。

設計的方案可以無窮盡，但成體系的設計方法才是幫助我們在創(chuàng)意道路上繼續(xù)走下去的利器。之前的博文《從0到1，進步的未來—微眾銀行APP項目小結》介紹了在微眾銀行設計前期的一些設計案例及方法。實際上，經過了2年的沉淀與打磨，我們也打造了一套服務互聯(lián)網金融行業(yè)的設計方法庫。

微眾銀行的設計方法庫，主要由以下內容組成：

• WeBank DNA
• WeBank UIkit
• WeBank Turkey
• WeBank Blocks
• WeBank Lighthouse

接下來將詳細介紹這5個庫分別的含義和使用方法。

△ DNA就像是一段核心編碼，它決定了事物發(fā)展方向，參與了生命運作的全過程。本質的定位準確了，其發(fā)展才不會偏離。

用途：幫助設計團隊與產品經理建立統(tǒng)一的設計目標

WeBank DNA是微眾銀行app給用戶傳遞出的統(tǒng)一且不會輕易變化的設計感。用戶可以通過直觀的界面操作，可以感知到微眾銀行的價值觀和設計觀。這套DNA，也是我們在設計過程中評判和選擇方案的基礎標準。根據多次用戶研究的結論，推導出中立、效率、安全是微眾銀行APP的設計DNA。每一個核心元素下面，包含了更詳細的設計原則去詮釋元素的運用方式。

安全

• 操作上能讓用戶感知到可控。
• 有容錯機制，操作可逆。
• 用戶的知情權高于一切，信息傳遞能讓用戶理解明確。
• 統(tǒng)一的品牌形象，通過品牌的傳統(tǒng)讓用戶覺得信任可靠。

效率

• 交互操作一致。
• 將復雜的內容內置，呈現出更輕量的信息。
• 盡可能的解決用戶端起的記憶負擔。
• 操作與真實世界匹配，用戶可以快速的做出判斷和操作。
• 簡化操作，拆分主次，優(yōu)先完成主要流程。
• 操作響應及時。

中立

• 信息真實，必要信息不隱藏，保持中立的態(tài)度。
• 不使用過分誘導的語言，信息不能出現歧義。
• 框架明晰，信息完整明了。

△ 把最基礎的元素組建成有效的信息，是一個從點到線的過程。從線到面的，則把有效信息的界面組建成為UI kit。讓單一的高效，變成大面積的高效。

用途：設計團隊快速輸出標準化的設計方案

UI kit是設計師在實際工作中的基礎設計工具，其本質是將可以復用的內容標準化、模版化，可以幫助我們快速、規(guī)范的組建設計稿。在搭建控件庫的過程中，我們參考了iOS設計規(guī)范，對頁面組件重新分解，UI kit的組成有以下幾個重點內容：

根據團隊設計師軟件使用的環(huán)境，我們制作了視覺還原程度的Sketch 版本UI kit。在接到不需要改變頁面結構的需求時，交互設計師可以直接使用控3 件，輸出的設計稿可直接進入研發(fā)流程。視覺設計師不用再重復做一些細節(jié)文案的修修補補，可以更專注于信息傳達和視覺優(yōu)化的需求。

△ 如果只有設計跑得快，項目的推動是仍然是乏力的。提升緯度，把高效的設計方法擴展到研發(fā)層面，讓方法工具更加立體化，則是推進項目的有效途徑。

用途：快速調整細節(jié)并呈現結果

UI kit提高了設計師的工作效率和質量，Turkey——微眾前端代碼可視化平臺則是為ui開源做好準備，在代碼復用和維護方面起到了重要作用。取名為turkey是因為項目組初期的代號為火雞，本著「不忘初心，方得始終」的工匠精神，取了這個具有特殊含義又充滿活力的名字，也體現了平臺的靈活、開放性。整個平臺由3個部分組成：組件區(qū)、裝配區(qū)、調整區(qū)。

在UI kit的基礎上，將每個設計元件的代碼錄入到平臺中，形成組件區(qū)。拖動組件區(qū)中的控件到中間的手機屏幕中（裝配區(qū)），在右側調整區(qū)則會出現相應的代碼。面對完全不需要修改設計內容的需求時，前端工程師可以更快速直觀的修改代碼，并且讓實現效果直觀地在組合區(qū)中展現出來。對于產品經理、設計師、前端工程師協(xié)同辦公來說，是一個高效的輸出工具，同時也是非常有效的溝通工具。

△ 設計組合就像搭積木一樣，用最基本的模塊也可以拼出多種不一樣的結果。因此模塊本身既是獨立的完整體，又能與更多的模塊拼接。

用途：以標準化模塊進行快速合作

在微眾銀行APP的整個業(yè)務中，有很多內容是受到嚴格的監(jiān)管的。當然，監(jiān)管也使得我們的流程更安全。這些流程模塊，在短期內是不會輕易改變的。在實際項目中，我們歸納出以下模塊：驗密流程、購買流程、開戶注冊流程、人臉驗證流程、風險評測流程。我們把這些流程封裝稱為一個個模塊，在APP內所有要用到這些內容的地方都保持調用一致的界面、一致的代碼。

舉個例子：APP中有很多流程都需要驗證密碼，無論是什么情況需要驗密，所有的密碼輸入流程總是保證體驗是一致的。這樣一來，既降低了用戶認知的成本，也使得這些公用的模塊在修改和監(jiān)管的過程中，可以更規(guī)范和有效。與外部項目、公司合作的過程中，也是作為固定不會更改流程的內容進行交付。

△ 孤獨前行的時候，唯有燈塔給你指路，告訴你危險。

用途：檢查方案每一步是否觸碰到風險項

做與金融相關的設計會要求設計師知業(yè)務、懂業(yè)務，所以專業(yè)的金融知識是需要設計師去學習積累的。而WeBank Lighthouse（燈塔）沉淀的是專業(yè)知識以外，與設計執(zhí)行相關的風控監(jiān)管要點。在沒有l(wèi)ighthouse之前，我們每一個方案都是在設計完成后才能給風控和合規(guī)部門審核，如果出現了問題，再返回到設計側進行調整。

這樣下來，整個設計流程即漫長又繁復。于是我們把風控和合規(guī)部門每一次反饋的意見和知識點沉淀下來，形成了我們的lighthouse，其中包含“不能出現”的內容和“建議出現”的內容兩個部分。「不能出現」的內容由于涉及到一些內部機密信息，所以在這里我們不方便公開展示。

「建議出現」的內容包括以下幾個類別：不可缺少的金融要素信息、符合設計規(guī)范的文案圖示、突顯設計DNA的文案圖標以及能夠幫助提高轉化率的文案圖標等細節(jié)要素。在設計方案交付前，我們使用lighthouse走查方案，經過了風險自查的這個流程后，風控合規(guī)審核的通過率得到了很高的提升，也降低了設計反復修改的次數。在項目復盤的時候，再把新的知識點繼續(xù)補充到lighthouse中。

總結

以上的5個方法，服務于整個設計流程，也產生于設計流程中的每一步。有了這些方法支撐，無論設計構思還是設計執(zhí)行，效率都得到了極大的提高。也讓更安全、更舒適的產品體驗得以實現。

「必看！互聯(lián)網設計之道」

• 《互聯(lián)網產品設計中，如何制作一套設計規(guī)范？》
• 《如何打造創(chuàng)新有價值的極致體驗？》
• 《精髓干貨！一組精挑細選的用戶體驗設計網站和書目》

原文地址：騰訊CDC

【優(yōu)設網 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網： UiiiUiii.com是優(yōu)設旗下優(yōu)質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com