<code id="6mcsu"></code>
<li id="6mcsu"></li>
<li id="6mcsu"><dl id="6mcsu"></dl></li>
  • <code id="6mcsu"><tr id="6mcsu"></tr></code>
    或者

    互聯網金融體驗設計方法庫

    作者:麋鹿 瀏覽:160 發布時間:2017-09-27
    分享 評論 0

     在2017國際體驗設計大會中,來自“互聯網銀行用戶體驗聯合實驗室”的Ray和Louie在工作坊里為大家介紹了互聯網金融的通用設計流程。后續我們把在工作坊里面提到設計方法庫進行了再次整理和優化,在這里為大家詳細的介紹。

      

     

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

      微眾銀行的設計方法庫,主要由以下內容組成:WeBank DNA、WeBank UIkit、WeBank Turkey、WeBank Blocks、WeBank Lighthouse,接下來將詳細介紹這5個庫分別的含義和使用方法。

      1.

      

     

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

      用途:幫助設計團隊與產品經理建立統一的設計目標

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

      安全:

      操作上能讓用戶感知到可控

      有容錯機制,操作可逆

      用戶的知情權高于一切,信息傳遞能讓用戶理解明確

      統一的品牌形象,通過品牌的傳統讓用戶覺得信任可靠

      效率:

      交互操作一致

      將復雜的內容內置,呈現出更輕量的信息

      盡可能的解決用戶端起的記憶負擔

      操作與真實世界匹配,用戶可以快速的做出判斷和操作

      簡化操作,拆分主次,優先完成主要流程

      操作響應及時

      中立:

      信息真實,必要信息不隱藏,保持中立的態度

      不使用過分誘導的語言,信息不能出現歧義

      框架明晰,信息完整明了

      2.

      

     

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

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

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

      

     

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

      

     

      3.

      

     

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

      用途:快速調整細節并呈現結果

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

      

     

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

      4.

      

     

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

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

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

      

     

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

      5.

      

     

      “孤獨前行的時候,唯有燈塔給你指路,告訴你危險?!?/p>

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

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

      這樣下來,整個設計流程即漫長又繁復。于是,我們把風控和合規部門每一次反饋的意見和知識點沉淀下來,形成了我們的lighthouse,其中包含“不能出現”的內容和“建議出現”的內容兩個部分。

      “不能出現”的內容由于涉及到一些內部機密信息,所以在這里我們不方便公開展示。

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

      

     

      寫在最后

      

     

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


    亚洲自偷自偷偷色无码中文| 人妻丰满熟妇A v无码区不卡| 国产精品99无码一区二区| 久久中文字幕视频、最近更新| 成人无码小视频在线观看| 亚洲AV无码一区二区三区系列| 午夜视频在线观看www中文| 日韩乱码人妻无码中文字幕视频| 亚洲第一极品精品无码久久| 日韩精品一区二三区中文| 中文字幕亚洲欧美日韩2019| 日韩午夜福利无码专区a| 中文字幕免费视频| 久久人妻无码中文字幕| 狠狠躁狠狠躁东京热无码专区 | 一本无码中文字幕在线观| 日韩精品少妇无码受不了| 无码播放一区二区三区| 最近中文字幕大全中文字幕免费| 日韩亚洲国产中文字幕欧美| 天码av无码一区二区三区四区| yy111111少妇无码影院| 色噜噜综合亚洲av中文无码 | 日韩AV无码中文无码不卡电影| AV无码久久久久不卡蜜桃| 最近更新免费中文字幕大全| 最好看最新的中文字幕免费| 亚洲欧美日韩一区高清中文字幕| 人妻精品久久久久中文字幕一冢本| 亚洲国产精品无码久久SM| 久久午夜福利无码1000合集| 国产成人精品无码一区二区三区| 日韩欧美成人免费中文字幕| 我的小后妈中文翻译| 无码人妻一区二区三区一| 中文字幕无码播放免费| 日韩精品无码免费专区午夜不卡 | 无码AV动漫精品一区二区免费| www日韩中文字幕在线看| 无码夫の前で人妻を侵犯| 亚洲综合无码AV一区二区|