騰訊內(nèi)部分享！超周全的互聯(lián)網(wǎng)金融體驗設(shè)計的方法庫

2018/2/8 15:23:25來源：互聯(lián)網(wǎng)

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

設(shè)計的方案可以無限盡，但成系統(tǒng)的設(shè)計方法才是幫助我們在創(chuàng)意道路上繼承走下去的利器。之前的博文《從0到1，提高的將來—微眾銀行APP項目小結(jié)》介紹了在微眾銀行設(shè)計前期的一些設(shè)計案例及方法。現(xiàn)實上，經(jīng)過了2年的沉淀與打磨，我們也打造了一套服務(wù)互聯(lián)網(wǎng)金融行業(yè)的設(shè)計方法庫。

微眾銀行的設(shè)計方法庫，重要由以下內(nèi)容組成：

WeBank DNA
WeBank UIkit
WeBank Turkey
WeBank Blocks
WeBank Lighthouse

接下來將細(xì)致介紹這5個庫分別的含義和使用方法。

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

用途：幫助設(shè)計團(tuán)隊與產(chǎn)品經(jīng)理建立同一的設(shè)計目標(biāo)

WeBank DNA是微眾銀行app給用戶傳遞出的同一且不會輕易轉(zhuǎn)變的設(shè)計感。用戶可以通過直觀的界面操作，可以感知到微眾銀行的價值觀和設(shè)計觀。這套DNA，也是我們在設(shè)計過程中評判和選擇方案的基礎(chǔ)標(biāo)準(zhǔn)。根據(jù)多次用戶研究的結(jié)論，推導(dǎo)出中立、服從、安全是微眾銀行APP的設(shè)計DNA。每一個核心元素下面，包含了更細(xì)致的設(shè)計原則去解釋元素的運用體例。

安全

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

服從

交互操作同等。
將復(fù)雜的內(nèi)容內(nèi)置，呈現(xiàn)出更輕量的信息。
盡可能的解決用戶端起的記憶負(fù)擔(dān)。
操作與真實世界匹配，用戶可以快速的做出判斷和操作。
簡化操作，拆分主次，優(yōu)先完成重要流程。
操作相應(yīng)及時。

中立

信息真實，需要信息不隱蔽，保持中立的態(tài)度。
不使用過分誘導(dǎo)的語言，信息不能出現(xiàn)歧義。
框架明晰，信息完備明了。

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

用途：設(shè)計團(tuán)隊快速輸出標(biāo)準(zhǔn)化的設(shè)計方案

UI kit是設(shè)計師在現(xiàn)實工作中的基礎(chǔ)設(shè)計工具，其本質(zhì)是將可以復(fù)用的內(nèi)容標(biāo)準(zhǔn)化、模版化，可以幫助我們快速、規(guī)范的組建設(shè)計稿。在搭建控件庫的過程中，我們參考了iOS設(shè)計規(guī)范，對網(wǎng)頁組件重新分解，UI kit的組成有以下幾個重點內(nèi)容：

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

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

用途：快速調(diào)整細(xì)節(jié)并呈現(xiàn)效果

UI kit進(jìn)步了設(shè)計師的工作服從和質(zhì)量，Turkey——微眾前端代碼可視化平臺則是為ui開源做好預(yù)備，在代碼復(fù)用和維護(hù)方面起到了緊張作用。取名為turkey是由于項目組初期的代號為火雞，本著「不忘初心，方得始終」的工匠精神，取了這個具有特別含義又充滿活力的名字，也表現(xiàn)了平臺的天真、開放性。整個平臺由3個部分組成：組件區(qū)、裝置區(qū)、調(diào)整區(qū)。

在UI kit的基礎(chǔ)上，將每個設(shè)計元件的代碼錄入到平臺中，形成組件區(qū)。拖動組件區(qū)中的控件到中心的手機屏幕中（裝置區(qū)），在右側(cè)調(diào)整區(qū)則會出現(xiàn)響應(yīng)的代碼。面對完全不必要修改設(shè)計內(nèi)容的需求時，前端工程師可以更快速直觀的修改代碼，并且讓實現(xiàn)結(jié)果直觀地在組合區(qū)中顯現(xiàn)出來。對于產(chǎn)品經(jīng)理、設(shè)計師、前端工程師協(xié)同辦公來說，是一個高效的輸出工具，同時也是特別很是有用的溝通工具。

△ 設(shè)計組合就像搭積木一樣，用最基本的模塊也可以拼出多種不一樣的效果。因此模塊自己既是自力的完備體，又能與更多的模塊拼接。

用途：以標(biāo)準(zhǔn)化模塊進(jìn)行快速合作

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

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

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

用途：檢查方案每一步是否觸遇到風(fēng)險項

做與金融相干的設(shè)計會要求設(shè)計師知營業(yè)、懂營業(yè)，所以專業(yè)的金融知識是必要設(shè)計師去學(xué)習(xí)積累的。而WeBank Lighthouse（燈塔）沉淀的是專業(yè)知識以外，與設(shè)計實行相干的風(fēng)控監(jiān)管要點。在沒有l(wèi)ighthouse之前，我們每一個方案都是在設(shè)計完成后才能給風(fēng)控和合規(guī)部門審核，假如出現(xiàn)了題目，再返回到設(shè)計側(cè)進(jìn)行調(diào)整。

如許下來，整個設(shè)計流程即漫長又繁復(fù)。于是我們把風(fēng)控和合規(guī)部門每一次反饋的意見和知識點沉淀下來，形成了我們的lighthouse，其中包含“不能出現(xiàn)”的內(nèi)容和“建議出現(xiàn)”的內(nèi)容兩個部分?！覆荒艹霈F(xiàn)」的內(nèi)容因為涉及到一些內(nèi)部機密信息，所以在這里我們不方便公開展示。

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