前言

對于金融類 App，設計流行趨勢是什么？如何在設計中更好地體現銀行的企業理念和品牌特色？如何提高金融類產品的用戶體驗？本文總結了九大設計要素，幫助你理解金融類 App 的 UI 設計。

更多金融類產品的總結：

一、色彩

在色彩心理學中，藍色、綠色等冷色調，給人以冷靜、穩定的感覺，體現了金融產品的科技感和可靠性。而紅色、橙色、黃色，代表活力熱情，也會像五星紅旗帶給我們的民族自豪感，可以用于金融產品要傳達給用戶的情感色彩。

1. 品牌色

一般 app 的整體色調，都會根據品牌色來設計，像下圖的「招行企業銀行」的首頁，品牌色很好地應用在圖標、按鈕、文字鏈接、卡片背景、banner 這些地方。在界面設計中通過加入更多的品牌元素，可以潛移默化地讓用戶感受企業的價值，傳達企業對用戶負責的態度，提升用戶對產品乃至企業的信任感。

2. 彌散漸變色

其次，也可以采用近兩年流行的彌散漸變風格。彌散漸變是一種輕量舒緩的設計色彩。如果想要強化頂部導航欄或者個人中心頁面頂部的視覺感，利用品牌色作為背景顏色，會顯得頂部視覺厚重；如果利用白色或者淺灰色做背景色，而顯得單薄。

我們來看下圖，用彌散漸變處理的方式做頁面背景色或者在白色卡片的邊緣位置強化色彩，不僅可以豐富視覺表現力，還可以和卡片內容相呼應。所以不妨試下這種十分干凈清爽的新設計方式。

更多漸變形式：

二、文字

界面中另一個重要的構成元素是文字，文字向用戶傳達信息，合理的使用文字樣式非常重要。在金融界面中，我們常常用粗細體、字體大小、文字顏色深淺等來拉開文字層級，增強內容的可識別度。像 iOS15 設計風格，大標題導航也是這個道理。

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

三、圖標

圖標作為功能入口、用戶的操作載體，圖標的設計也可以為界面添彩。目前市面上，金融類 App 的圖標設計風格，主要分為以下三大類：

1. 線性圖標

輕質簡約，大多數 App 都采用這類風格。如下圖的「寧波銀行」的金剛區圖標設計，外部深色線框加內部彩色線條（品牌色橙色+對比色藍色+鄰近色黃色）點綴。

2. 面性圖標

顏色搭配豐富，視覺沖擊力強，頁面效果更加生動，常用于重要功能圖標的設計。下圖「京東云企業管家」首頁的功能圖標設計，面性圖標+毛玻璃質感，圖標更有質感和層次感。

3. 線面結合

新型的圖標流行趨勢，線高度概括圖標的含義，面裝飾點綴，風格獨特出彩。下圖是「漲樂財富通」的圖標設計，黑色線性邊框+紅色內部線條+漸變紅色圓形點綴。

四、布局

1. 留白

對于布局，除了基礎的信息功能框架，留白是關鍵。我們在工作中可以發現，很多高級感的設計通常都具有大片的留白。太過緊密的間距、沒有明顯的區分隔斷、復雜的背景，都會大大降低用戶的使用感。留白設計能使整個頁面不至于太過搶眼，可以給予設計呼吸的空間，讓用戶快速找到所需要的信息。

2. 圓角卡片

此外，圓角卡片的使用，也是布局流行趨勢之一，圓角會更突顯矩形內的內容，有助于用戶將視線聚焦于內容本身。大圓角有輕松活潑的感覺，小圓角、直角更像是一種強調，表現得嚴肅莊重，給人一種信任感。對于金融類 app 來講，該使用多大的圓角，是根據整個 app 的調性來定的。

比如「招行企業銀行」，因為是 B 端產品，整體的調性是專業、安全，加上其 logo 的內置圖形是招商銀行的品牌 logo“M”圖形，有棱有角的。所以在整個 App 的界面設計中，采用的是小圓角卡片，小圓角圖標等等。

五、插畫

無論在界面設計，還是在品牌營銷中，很多場景都需要插畫來塑造產品的氣質和氛圍。插畫有助于將我們的品牌故事講給用戶聽。這兩年流行的插畫風格多種多樣，那什么風格會更適合應用在金融類 App 的設計中呢？

1. 幾何插畫

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

2. 輕擬物插畫

在一些快速入口圖標，或者重要的卡片中，會采用輕擬物插畫設計來重點突出要素。下圖為「廣發銀行」發現精彩 app 的頭條頁面，就嵌入了輕擬物插畫，強化了這個卡片內容的色彩感和層次感。

3. 2.5d 插畫

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

六、品牌 IP

疫情第 3 年，隔離使得人們對于圖片所呈現出的故事和情感，有著更為強烈的情緒反應。在 App 界面設計中，越來越多的應用了情感化設計，來賦予產品一種擬人化的情感，與用戶互動，讓用戶感受產品的溫度。那相比于品牌或者 Slogan，品牌 IP 更具備這種實力。

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

七、微交互動效

UI 設計中通過微交互反饋告知用戶當前正在發生的事情，所處的狀態。細微的動效更能調動用戶情緒、取悅用戶，讓用戶的認知過程更為自然，用戶體驗更加精致到位。是一個很好塑造品牌個性的機會。

比如「平安數字口袋」app，上圖中的金融頁面的金融小工具模塊和頂部的投資 icon，作為重點功能入口采用了動態圖標微交互設計，吸引用戶眼球，輔助用戶理解。

八、數據可視化

大數據時代，數據的展示是必不可少的，所以在金融、理財、賬戶管理等頁面上，借助圖形化手段，更加清晰有效的傳達信息。

上方左圖是中國農業銀行基金經理信息的頁面，右圖是招商銀行的。左圖只能粗略感知到這個基金經理的盈利能力，右圖中可以對基金經理的投資風格一定了解。大片文字和圖文結合兩種方式相對比，數據可視化的優勢一目了然。

九、組件化、模塊化

組件化是利用原子系統從原子、分子、組織、模版、頁面來快速搭建頁面，讓設計語言標準化體系化。

模塊化是在組件化的基礎上，將產品分成幾個模塊，通過模塊的組合配置，就可以創建不用需求的產品，滿足客戶的定制需求。

下圖是我們兆日的設計體系部分截圖，我們的設計團隊構建了全面的設計組件庫，同時對接開發，一一對應實現 UI 控件。這樣設計更新迭代中可以非常高效通過更新組件庫去整體更新所有頁面樣式，方便協同辦公提升效能的同時，保證全渠道體驗一致性。

寫在最后

近兩年來接觸了大大小小幾個銀行項目，無論是 0 到 1 設計，還是改版設計都有一定的收獲和感悟。希望本次對金融類 App 設計的復盤能給大家提供一點思路，讓產品越來越好。同時也歡迎各位小伙伴來共同探討與指正～

歡迎關注團隊微信公眾號：兆日 UCD