觸屏版
全國(guó)服務(wù)熱線:0571-87205688
登錄
注冊(cè)
客戶中心
關(guān)注云客
在2017國(guó)際體驗(yàn)設(shè)計(jì)大會(huì)中,來(lái)自“互聯(lián)網(wǎng)銀行用戶體驗(yàn)聯(lián)合實(shí)驗(yàn)室”的Ray和Louie在工作坊里為大家介紹了互聯(lián)網(wǎng)金融的通用設(shè)計(jì)流程。后續(xù)我們把在工作坊里面提到設(shè)計(jì)方法庫(kù)進(jìn)行了再次整理和優(yōu)化,在這里為大家詳細(xì)的介紹。
設(shè)計(jì)的方案可以無(wú)窮盡,但成體系的設(shè)計(jì)方法才是幫助我們?cè)趧?chuàng)意道路上繼續(xù)走下去的利器。之前的博文《從0到1,進(jìn)步的未來(lái)—微眾銀行APP項(xiàng)目小結(jié)》介紹了在微眾銀行設(shè)計(jì)前期的一些設(shè)計(jì)案例及方法。實(shí)際上,經(jīng)過(guò)了2年的沉淀與打磨,我們也打造了一套服務(wù)互聯(lián)網(wǎng)金融行業(yè)的設(shè)計(jì)方法庫(kù)。
微眾銀行的設(shè)計(jì)方法庫(kù),主要由以下內(nèi)容組成:WeBank DNA、WeBank UIkit、WeBank Turkey、WeBank Blocks、WeBank Lighthouse,接下來(lái)將詳細(xì)介紹這5個(gè)庫(kù)分別的含義和使用方法。
1.
“DNA就像是一段核心編碼,它決定了事物發(fā)展方向,參與了生命運(yùn)作的全過(guò)程。本質(zhì)的定位準(zhǔn)確了,其發(fā)展才不會(huì)偏離。”
用途:幫助設(shè)計(jì)團(tuán)隊(duì)與產(chǎn)品經(jīng)理建立統(tǒng)一的設(shè)計(jì)目標(biāo)
WeBank DNA是微眾銀行app給用戶傳遞出的統(tǒng)一且不會(huì)輕易變化的設(shè)計(jì)感。用戶可以通過(guò)直觀的界面操作,可以感知到微眾銀行的價(jià)值觀和設(shè)計(jì)觀。這套DNA,也是我們?cè)谠O(shè)計(jì)過(guò)程中評(píng)判和選擇方案的基礎(chǔ)標(biāo)準(zhǔn)。根據(jù)多次用戶研究的結(jié)論,推導(dǎo)出中立、效率、安全是微眾銀行APP的設(shè)計(jì)DNA。每一個(gè)核心元素下面,包含了更詳細(xì)的設(shè)計(jì)原則去詮釋元素的運(yùn)用方式。
安全:
操作上能讓用戶感知到可控
有容錯(cuò)機(jī)制,操作可逆
用戶的知情權(quán)高于一切,信息傳遞能讓用戶理解明確
統(tǒng)一的品牌形象,通過(guò)品牌的傳統(tǒng)讓用戶覺(jué)得信任可靠
效率:
交互操作一致
將復(fù)雜的內(nèi)容內(nèi)置,呈現(xiàn)出更輕量的信息
盡可能的解決用戶端起的記憶負(fù)擔(dān)
操作與真實(shí)世界匹配,用戶可以快速的做出判斷和操作
簡(jiǎn)化操作,拆分主次,優(yōu)先完成主要流程
操作響應(yīng)及時(shí)
中立:
信息真實(shí),必要信息不隱藏,保持中立的態(tài)度
不使用過(guò)分誘導(dǎo)的語(yǔ)言,信息不能出現(xiàn)歧義
框架明晰,信息完整明了
2.
“把最基礎(chǔ)的元素組建成有效的信息,是一個(gè)從點(diǎn)到線的過(guò)程。從線到面的,則把有效信息的界面組建成為UI kit。讓單一的高效,變成大面積的高效?!?/p>
用途:設(shè)計(jì)團(tuán)隊(duì)快速輸出標(biāo)準(zhǔn)化的設(shè)計(jì)方案
UI kit是設(shè)計(jì)師在實(shí)際工作中的基礎(chǔ)設(shè)計(jì)工具,其本質(zhì)是將可以復(fù)用的內(nèi)容標(biāo)準(zhǔn)化、模版化,可以幫助我們快速、規(guī)范的組建設(shè)計(jì)稿。在搭建控件庫(kù)的過(guò)程中,我們參考了iOS設(shè)計(jì)規(guī)范,對(duì)頁(yè)面組件重新分解,UI kit的組成有以下幾個(gè)重點(diǎn)內(nèi)容:
根據(jù)團(tuán)隊(duì)設(shè)計(jì)師軟件使用的環(huán)境,我們制作了視覺(jué)還原程度的Sketch 版本UI kit。在接到不需要改變頁(yè)面結(jié)構(gòu)的需求時(shí),交互設(shè)計(jì)師可以直接使用控件,輸出的設(shè)計(jì)稿可直接進(jìn)入研發(fā)流程。視覺(jué)設(shè)計(jì)師不用再重復(fù)做一些細(xì)節(jié)文案的修修補(bǔ)補(bǔ),可以更專注于信息傳達(dá)和視覺(jué)優(yōu)化的需求。
3.
“如果只有設(shè)計(jì)跑得快,項(xiàng)目的推動(dòng)是仍然是乏力的。提升緯度,把高效的設(shè)計(jì)方法擴(kuò)展到研發(fā)層面,讓方法工具更加立體化,則是推進(jìn)項(xiàng)目的有效途徑?!?/p>
用途:快速調(diào)整細(xì)節(jié)并呈現(xiàn)結(jié)果
UI kit提高了設(shè)計(jì)師的工作效率和質(zhì)量,Turkey——微眾前端代碼可視化平臺(tái)則是為ui開(kāi)源做好準(zhǔn)備,在代碼復(fù)用和維護(hù)方面起到了重要作用。取名為turkey是因?yàn)轫?xiàng)目組初期的代號(hào)為火雞,本著“不忘初心,方得始終”的工匠精神,取了這個(gè)具有特殊含義又充滿活力的名字,也體現(xiàn)了平臺(tái)的靈活、開(kāi)放性。整個(gè)平臺(tái)由3個(gè)部分組成:組件區(qū)、裝配區(qū)、調(diào)整區(qū)。
在UI kit的基礎(chǔ)上,將每個(gè)設(shè)計(jì)元件的代碼錄入到平臺(tái)中,形成組件區(qū)。拖動(dòng)組件區(qū)中的控件到中間的手機(jī)屏幕中(裝配區(qū)),在右側(cè)調(diào)整區(qū)則會(huì)出現(xiàn)相應(yīng)的代碼。面對(duì)完全不需要修改設(shè)計(jì)內(nèi)容的需求時(shí),前端工程師可以更快速直觀的修改代碼,并且讓實(shí)現(xiàn)效果直觀地在組合區(qū)中展現(xiàn)出來(lái)。對(duì)于產(chǎn)品經(jīng)理、設(shè)計(jì)師、前端工程師協(xié)同辦公來(lái)說(shuō),是一個(gè)高效的輸出工具,同時(shí)也是非常有效的溝通工具。
4.
“設(shè)計(jì)組合就像搭積木一樣,用最基本的模塊也可以拼出多種不一樣的結(jié)果。因此模塊本身既是獨(dú)立的完整體,又能與更多的模塊拼接?!?/p>
用途:以標(biāo)準(zhǔn)化模塊進(jìn)行快速合作
在微眾銀行APP的整個(gè)業(yè)務(wù)中,有很多內(nèi)容是受到嚴(yán)格的監(jiān)管的。當(dāng)然,監(jiān)管也使得我們的流程更安全。這些流程模塊,在短期內(nèi)是不會(huì)輕易改變的。在實(shí)際項(xiàng)目中,我們歸納出以下模塊:驗(yàn)密流程、購(gòu)買流程、開(kāi)戶注冊(cè)流程、人臉驗(yàn)證流程、風(fēng)險(xiǎn)評(píng)測(cè)流程。我們把這些流程封裝稱為一個(gè)個(gè)模塊,在APP內(nèi)所有要用到這些內(nèi)容的地方都保持調(diào)用一致的界面、一致的代碼。
舉個(gè)例子:APP中有很多流程都需要驗(yàn)證密碼,無(wú)論是什么情況需要驗(yàn)密,所有的密碼輸入流程總是保證體驗(yàn)是一致的。這樣一來(lái),既降低了用戶認(rèn)知的成本,也使得這些公用的模塊在修改和監(jiān)管的過(guò)程中,可以更規(guī)范和有效。與外部項(xiàng)目、公司合作的過(guò)程中,也是作為固定不會(huì)更改流程的內(nèi)容進(jìn)行交付。
5.
“孤獨(dú)前行的時(shí)候,唯有燈塔給你指路,告訴你危險(xiǎn)。”
用途:檢查方案每一步是否觸碰到風(fēng)險(xiǎn)項(xiàng)
做與金融相關(guān)的設(shè)計(jì)會(huì)要求設(shè)計(jì)師知業(yè)務(wù)、懂業(yè)務(wù),所以專業(yè)的金融知識(shí)是需要設(shè)計(jì)師去學(xué)習(xí)積累的。而WeBank Lighthouse(燈塔)沉淀的是專業(yè)知識(shí)以外,與設(shè)計(jì)執(zhí)行相關(guān)的風(fēng)控監(jiān)管要點(diǎn)。在沒(méi)有l(wèi)ighthouse之前,我們每一個(gè)方案都是在設(shè)計(jì)完成后才能給風(fēng)控和合規(guī)部門審核,如果出現(xiàn)了問(wèn)題,再返回到設(shè)計(jì)側(cè)進(jìn)行調(diào)整。
這樣下來(lái),整個(gè)設(shè)計(jì)流程即漫長(zhǎng)又繁復(fù)。于是,我們把風(fēng)控和合規(guī)部門每一次反饋的意見(jiàn)和知識(shí)點(diǎn)沉淀下來(lái),形成了我們的lighthouse,其中包含“不能出現(xiàn)”的內(nèi)容和“建議出現(xiàn)”的內(nèi)容兩個(gè)部分。
“不能出現(xiàn)”的內(nèi)容由于涉及到一些內(nèi)部機(jī)密信息,所以在這里我們不方便公開(kāi)展示。
“建議出現(xiàn)”的內(nèi)容包括以下幾個(gè)類別:不可缺少的金融要素信息、符合設(shè)計(jì)規(guī)范的文案圖示、突顯設(shè)計(jì)DNA的文案圖示以及能夠幫助提高轉(zhuǎn)化率的文案圖示等細(xì)節(jié)要素。在設(shè)計(jì)方案交付前,我們使用lighthouse走查方案,經(jīng)過(guò)了風(fēng)險(xiǎn)自查的這個(gè)流程后,風(fēng)控合規(guī)審核的通過(guò)率得到了很高的提升,也降低了設(shè)計(jì)反復(fù)修改的次數(shù)。在項(xiàng)目復(fù)盤的時(shí)候,再把新的知識(shí)點(diǎn)繼續(xù)補(bǔ)充到lighthouse中。
寫在最后
以上的5個(gè)方法,服務(wù)于整個(gè)設(shè)計(jì)流程,也產(chǎn)生于設(shè)計(jì)流程中的每一步。有了這些方法支撐,無(wú)論設(shè)計(jì)構(gòu)思還是設(shè)計(jì)執(zhí)行,效率都得到了極大的提高。也讓更安全、更舒適的產(chǎn)品體驗(yàn)得以實(shí)現(xiàn)。
超實(shí)用!寫給設(shè)計(jì)師的移動(dòng)頁(yè)面適配小知識(shí)
如何減低網(wǎng)站跳出率增加頁(yè)面停留時(shí)間
說(shuō)點(diǎn)屏幕外的交互設(shè)計(jì):界面設(shè)計(jì) ≠ 屏幕設(shè)計(jì)
網(wǎng)站基礎(chǔ)優(yōu)化的24個(gè)基礎(chǔ)知識(shí)點(diǎn)你是否都做到位
展會(huì)信息發(fā)布的5個(gè)方法
網(wǎng)頁(yè)關(guān)鍵詞的權(quán)重與排名哪些因素影響
ALT屬性作用與最佳寫法
網(wǎng)站過(guò)度優(yōu)化表現(xiàn)在4個(gè)方面
品牌關(guān)鍵詞在推廣中的三點(diǎn)作用
告訴你虛擬主機(jī)、云主機(jī)的區(qū)別
評(píng)論(0人參與,0條評(píng)論)
發(fā)布評(píng)論
最新評(píng)論