前言

對(duì)于金融類 App，設(shè)計(jì)流行趨勢(shì)是什么？如何在設(shè)計(jì)中更好地體現(xiàn)銀行的企業(yè)理念和品牌特色？如何提高金融類產(chǎn)品的用戶體驗(yàn)？本文總結(jié)了九大設(shè)計(jì)要素，幫助你理解金融類 App 的 UI 設(shè)計(jì)。

更多金融類產(chǎn)品的總結(jié)：

一、色彩

在色彩心理學(xué)中，藍(lán)色、綠色等冷色調(diào)，給人以冷靜、穩(wěn)定的感覺(jué)，體現(xiàn)了金融產(chǎn)品的科技感和可靠性。而紅色、橙色、黃色，代表活力熱情，也會(huì)像五星紅旗帶給我們的民族自豪感，可以用于金融產(chǎn)品要傳達(dá)給用戶的情感色彩。

1. 品牌色

一般 app 的整體色調(diào)，都會(huì)根據(jù)品牌色來(lái)設(shè)計(jì)，像下圖的「招行企業(yè)銀行」的首頁(yè)，品牌色很好地應(yīng)用在圖標(biāo)、按鈕、文字鏈接、卡片背景、banner 這些地方。在界面設(shè)計(jì)中通過(guò)加入更多的品牌元素，可以潛移默化地讓用戶感受企業(yè)的價(jià)值，傳達(dá)企業(yè)對(duì)用戶負(fù)責(zé)的態(tài)度，提升用戶對(duì)產(chǎn)品乃至企業(yè)的信任感。

2. 彌散漸變色

其次，也可以采用近兩年流行的彌散漸變風(fēng)格。彌散漸變是一種輕量舒緩的設(shè)計(jì)色彩。如果想要強(qiáng)化頂部導(dǎo)航欄或者個(gè)人中心頁(yè)面頂部的視覺(jué)感，利用品牌色作為背景顏色，會(huì)顯得頂部視覺(jué)厚重；如果利用白色或者淺灰色做背景色，而顯得單薄。

我們來(lái)看下圖，用彌散漸變處理的方式做頁(yè)面背景色或者在白色卡片的邊緣位置強(qiáng)化色彩，不僅可以豐富視覺(jué)表現(xiàn)力，還可以和卡片內(nèi)容相呼應(yīng)。所以不妨試下這種十分干凈清爽的新設(shè)計(jì)方式。

更多漸變形式：

二、文字

界面中另一個(gè)重要的構(gòu)成元素是文字，文字向用戶傳達(dá)信息，合理的使用文字樣式非常重要。在金融界面中，我們常常用粗細(xì)體、字體大小、文字顏色深淺等來(lái)拉開(kāi)文字層級(jí)，增強(qiáng)內(nèi)容的可識(shí)別度。像 iOS15 設(shè)計(jì)風(fēng)格，大標(biāo)題導(dǎo)航也是這個(gè)道理。

另外，定制字體的使用，也十分流行。這幾年越來(lái)越多的公司，開(kāi)始定制字體，根據(jù)自己的品牌特質(zhì)去做一些特殊的字體。比如下圖的「支付寶」，這些金融數(shù)據(jù)的數(shù)字，采用特殊字體的方式來(lái)設(shè)計(jì)，視覺(jué)效果更佳。

三、圖標(biāo)

圖標(biāo)作為功能入口、用戶的操作載體，圖標(biāo)的設(shè)計(jì)也可以為界面添彩。目前市面上，金融類 App 的圖標(biāo)設(shè)計(jì)風(fēng)格，主要分為以下三大類：

1. 線性圖標(biāo)

輕質(zhì)簡(jiǎn)約，大多數(shù) App 都采用這類風(fēng)格。如下圖的「寧波銀行」的金剛區(qū)圖標(biāo)設(shè)計(jì)，外部深色線框加內(nèi)部彩色線條（品牌色橙色+對(duì)比色藍(lán)色+鄰近色黃色）點(diǎn)綴。

2. 面性圖標(biāo)

顏色搭配豐富，視覺(jué)沖擊力強(qiáng)，頁(yè)面效果更加生動(dòng)，常用于重要功能圖標(biāo)的設(shè)計(jì)。下圖「京東云企業(yè)管家」首頁(yè)的功能圖標(biāo)設(shè)計(jì)，面性圖標(biāo)+毛玻璃質(zhì)感，圖標(biāo)更有質(zhì)感和層次感。

3. 線面結(jié)合

新型的圖標(biāo)流行趨勢(shì)，線高度概括圖標(biāo)的含義，面裝飾點(diǎn)綴，風(fēng)格獨(dú)特出彩。下圖是「漲樂(lè)財(cái)富通」的圖標(biāo)設(shè)計(jì)，黑色線性邊框+紅色內(nèi)部線條+漸變紅色圓形點(diǎn)綴。

四、布局

1. 留白

對(duì)于布局，除了基礎(chǔ)的信息功能框架，留白是關(guān)鍵。我們?cè)诠ぷ髦锌梢园l(fā)現(xiàn)，很多高級(jí)感的設(shè)計(jì)通常都具有大片的留白。太過(guò)緊密的間距、沒(méi)有明顯的區(qū)分隔斷、復(fù)雜的背景，都會(huì)大大降低用戶的使用感。留白設(shè)計(jì)能使整個(gè)頁(yè)面不至于太過(guò)搶眼，可以給予設(shè)計(jì)呼吸的空間，讓用戶快速找到所需要的信息。

2. 圓角卡片

此外，圓角卡片的使用，也是布局流行趨勢(shì)之一，圓角會(huì)更突顯矩形內(nèi)的內(nèi)容，有助于用戶將視線聚焦于內(nèi)容本身。大圓角有輕松活潑的感覺(jué)，小圓角、直角更像是一種強(qiáng)調(diào)，表現(xiàn)得嚴(yán)肅莊重，給人一種信任感。對(duì)于金融類 app 來(lái)講，該使用多大的圓角，是根據(jù)整個(gè) app 的調(diào)性來(lái)定的。

比如「招行企業(yè)銀行」，因?yàn)槭?B 端產(chǎn)品，整體的調(diào)性是專業(yè)、安全，加上其 logo 的內(nèi)置圖形是招商銀行的品牌 logo“M”圖形，有棱有角的。所以在整個(gè) App 的界面設(shè)計(jì)中，采用的是小圓角卡片，小圓角圖標(biāo)等等。

五、插畫(huà)

無(wú)論在界面設(shè)計(jì)，還是在品牌營(yíng)銷中，很多場(chǎng)景都需要插畫(huà)來(lái)塑造產(chǎn)品的氣質(zhì)和氛圍。插畫(huà)有助于將我們的品牌故事講給用戶聽(tīng)。這兩年流行的插畫(huà)風(fēng)格多種多樣，那什么風(fēng)格會(huì)更適合應(yīng)用在金融類 App 的設(shè)計(jì)中呢？

1. 幾何插畫(huà)

一般幾何圖形多為產(chǎn)品界面和宣傳內(nèi)容的抽象，線條和幾何色塊的結(jié)合，搭建出用戶實(shí)際使用場(chǎng)景，更加簡(jiǎn)潔、清晰。下圖為「中信銀行」首頁(yè)，banner 就是采用幾何圖形插畫(huà)設(shè)計(jì)風(fēng)格，繪制了一幅居家悠閑的畫(huà)面，挺符合中信銀行的定位：“有溫度的銀行”“信守溫度”。

2. 輕擬物插畫(huà)

在一些快速入口圖標(biāo)，或者重要的卡片中，會(huì)采用輕擬物插畫(huà)設(shè)計(jì)來(lái)重點(diǎn)突出要素。下圖為「廣發(fā)銀行」發(fā)現(xiàn)精彩 app 的頭條頁(yè)面，就嵌入了輕擬物插畫(huà)，強(qiáng)化了這個(gè)卡片內(nèi)容的色彩感和層次感。

3. 2.5d 插畫(huà)

2.5d 立體的造型，本身更有真實(shí)感，在界面設(shè)計(jì)中可以吸引用戶更細(xì)致的欣賞。下圖為「京東云企業(yè)管家」的首頁(yè)，新人福利模塊就采用了 2.5d 插畫(huà)風(fēng)格。

六、品牌 IP

疫情第 3 年，隔離使得人們對(duì)于圖片所呈現(xiàn)出的故事和情感，有著更為強(qiáng)烈的情緒反應(yīng)。在 App 界面設(shè)計(jì)中，越來(lái)越多的應(yīng)用了情感化設(shè)計(jì)，來(lái)賦予產(chǎn)品一種擬人化的情感，與用戶互動(dòng)，讓用戶感受產(chǎn)品的溫度。那相比于品牌或者 Slogan，品牌 IP 更具備這種實(shí)力。

比如廣發(fā)銀行的“小發(fā)羊”。「廣發(fā)銀行」是一家廣州起源的銀行，小發(fā)羊融入了廣州本地人的性格屬性（慢性子、愛(ài)吃、精打細(xì)算、很師奶），同時(shí)也匹配了銀行業(yè)務(wù)本身的需求。在 app 的界面設(shè)計(jì)中，小發(fā)羊應(yīng)用在了啟動(dòng)頁(yè)的設(shè)計(jì)、廣告設(shè)計(jì)以及養(yǎng)成類社交游戲和 IP 周邊品牌館，讓用戶從業(yè)務(wù)和日常生活都離不開(kāi)。

七、微交互動(dòng)效

UI 設(shè)計(jì)中通過(guò)微交互反饋告知用戶當(dāng)前正在發(fā)生的事情，所處的狀態(tài)。細(xì)微的動(dòng)效更能調(diào)動(dòng)用戶情緒、取悅用戶，讓用戶的認(rèn)知過(guò)程更為自然，用戶體驗(yàn)更加精致到位。是一個(gè)很好塑造品牌個(gè)性的機(jī)會(huì)。

比如「平安數(shù)字口袋」app，上圖中的金融頁(yè)面的金融小工具模塊和頂部的投資 icon，作為重點(diǎn)功能入口采用了動(dòng)態(tài)圖標(biāo)微交互設(shè)計(jì)，吸引用戶眼球，輔助用戶理解。

八、數(shù)據(jù)可視化

大數(shù)據(jù)時(shí)代，數(shù)據(jù)的展示是必不可少的，所以在金融、理財(cái)、賬戶管理等頁(yè)面上，借助圖形化手段，更加清晰有效的傳達(dá)信息。

上方左圖是中國(guó)農(nóng)業(yè)銀行基金經(jīng)理信息的頁(yè)面，右圖是招商銀行的。左圖只能粗略感知到這個(gè)基金經(jīng)理的盈利能力，右圖中可以對(duì)基金經(jīng)理的投資風(fēng)格一定了解。大片文字和圖文結(jié)合兩種方式相對(duì)比，數(shù)據(jù)可視化的優(yōu)勢(shì)一目了然。

九、組件化、模塊化

組件化是利用原子系統(tǒng)從原子、分子、組織、模版、頁(yè)面來(lái)快速搭建頁(yè)面，讓設(shè)計(jì)語(yǔ)言標(biāo)準(zhǔn)化體系化。

模塊化是在組件化的基礎(chǔ)上，將產(chǎn)品分成幾個(gè)模塊，通過(guò)模塊的組合配置，就可以創(chuàng)建不用需求的產(chǎn)品，滿足客戶的定制需求。

下圖是我們兆日的設(shè)計(jì)體系部分截圖，我們的設(shè)計(jì)團(tuán)隊(duì)構(gòu)建了全面的設(shè)計(jì)組件庫(kù)，同時(shí)對(duì)接開(kāi)發(fā)，一一對(duì)應(yīng)實(shí)現(xiàn) UI 控件。這樣設(shè)計(jì)更新迭代中可以非常高效通過(guò)更新組件庫(kù)去整體更新所有頁(yè)面樣式，方便協(xié)同辦公提升效能的同時(shí)，保證全渠道體驗(yàn)一致性。

寫(xiě)在最后

近兩年來(lái)接觸了大大小小幾個(gè)銀行項(xiàng)目，無(wú)論是 0 到 1 設(shè)計(jì)，還是改版設(shè)計(jì)都有一定的收獲和感悟。希望本次對(duì)金融類 App 設(shè)計(jì)的復(fù)盤(pán)能給大家提供一點(diǎn)思路，讓產(chǎn)品越來(lái)越好。同時(shí)也歡迎各位小伙伴來(lái)共同探討與指正～

歡迎關(guān)注團(tuán)隊(duì)微信公眾號(hào)：兆日 UCD