面向金融場景的移動端UI 組件設計要素分析

毛天問 任宏

（沈陽航空航天大學，遼寧 沈陽 110135）

在互聯網高速發展的今天，產品設計的流程已經十分成熟。互聯網公司員工為了避免重復的勞動，追求更高效的工作，會把需要復用的界面控件匯總并分類，形成一個對內對外都能提高效率與控制標準化的工具庫，也稱為組件庫。設計組件化的概念本身是從程序開發的組件化演變而來，這種思維也可以幫助設計師高效地管理設計稿。對企業而言，一個美觀易用的開源組件庫也能給公司帶來良好的口碑。

1 移動端組件庫發展現狀

移動端業務比PC 端業務擁有更多的受眾，其中有部分用戶完全沒有PC 端的操作習慣，并且考慮到移動設備的渲染性能等因素，很多企業都會在有PC 端組件庫的情況下再單獨搭建一套移動端組件庫。螞蟻金服的Ant Design Mobile，滴滴出行的Cube UI 以及微信的WeUI 都是國內比較著名的移動端組件庫，瀏覽這幾個組件庫后可以發現由于業務屬性的不同，金融、社交、電商等品類APP 都有自己獨特的組件結構，而同類型的APP 里的產品結構都大同小異，對大部分用戶來說已經形成了一套比較成熟的排版結構，如果貿然大幅度更改可能會招致用戶的反感，畢竟又增加了用戶的學習成本。所以對于一個成熟產品而言，創新與差異應該體現在組件的細節上。

2 原子化設計理念

2.1 原子化設計的來源

原子化設計也可以稱為原子化構建、顆粒化管理，通過這種方式構建的設計系統也稱為原子設計系統，其核心理念其實就是把頁面里所有組件都拆解到最小元素，然后對顏色、文字、形狀等基本元素進行歸納，并據此不斷組合成更復雜的組件如按鈕、列表乃至整個頁面。

這個概念最初是由設計師Brad Frost 提出，這與Facebook 在2013 年5 月推出的開源框架React 設計思想十分相似，在大型軟件項目開發中，組件化是一種共識，它一方面提高了開發效率，另一方面降低了維護成本[1]。在2014 年Google 推出了Material Design，其設計系統的概念也愈發成熟。時至今日，互聯網上成千上萬的應用都采取這種方式來搭建。

2.2 原子化設計的意義

原子設計系統最大的優點在于改動時減少了重復的工作，即修改一個組件的樣式后，系統中所有運用了此組件的部分都會被修改。如前文所述，原子化設計與組件化開發思想核心概念是一致的，這也減少了設計部門與開發部門的溝通成本。總而言之，原子化設計的優點便是UI 組件庫存在的意義。

3 金融場景下的組件設計分析

3.1 金融應用下的體驗設計

在互聯網技術高速發展的背景下，互聯網金融已經悄無聲息地融入了每個人的生活，吃穿住行等移動支付場景已經成為了中國特色，以往需要通過銀行和金融公司購買的理財服務現在也會主動“上門”，無論是用戶還是商家的需求，都可以在同一個平臺得到滿足。

在種類繁多的金融APP 中，各種表單的填寫，驗證碼與密碼的輸入、圖表展示等都是使用頻率較高的功能，而在這種場景下，界面元素的設計要遵循安全、高效、易用等原則。在梳理了高頻功能組件的視覺和開發規范后，搭建組件庫的工作就能有條不紊地進行了（如圖1）。

Mand Mobile 是滴滴出行基于金融場景的開源組件庫，組件分為4 個大類，分別是基礎組件、反饋組件、表單以及金融業務組件。前三者是在各種類型的應用中使用頻率都非常高的組件，而業務組件部分主要用于證件識別、資金流轉、文檔保存等場景。在Mand Mobile 官網中，設計原則是直觀簡單、安全可控、體貼專業[2]。官網給出了幾個例子來詮釋這幾項原則，如掃描銀行卡這類與圖像識別有關的功能，會將快照與輸入框的識別結果進行對照展示，卡號是否正確一目了然（如圖2）。在一個頁面有多種操作可能的情況下，只關注核心任務，區分主次以避免出現多個操作按鈕，同理在展示復雜信息時，默認只展示第一層級的信息給用戶，其余層級給予隱藏。對于資金流轉、業務辦理等不能馬上給予用戶反饋的操作，需要設計合理的進度節點，清晰地向用戶傳達時間概念，避免用戶焦慮。

圖1 滴滴出行基于金融場景的Mand Mobile 組件庫

圖2 體現“所見即所得”的證件掃描識別功能

3.2 視覺設計原則

3.2.1 色彩要素分析 色彩是傳達品牌風格的良好方式，也是APP 界面設計領域中的一種符號，是界面設計的靈魂。開源組件庫會建議使用者在保證產品體驗一致性的前提下配置各個組件的顏色。用戶在使用金融產品時，優先級最高的需求還是安全，所以在定義功能色時，可以選取一到兩種代表穩重、專業的顏色來作為基礎色，比如藍色、黑色、銀色等偏冷的色調。除此之外，代表健康、保障、操作成功的綠色和表示警告、強提示報錯的紅色以及與“禁用”綁定多年的灰色都不適合做過多更改，這類功能色的作用在用戶心中已經根深蒂固，改變它們只會誘導用戶犯下錯誤，是非常危險且得不償失的行為。

通過對市面上5 款金融APP 的研究，可以發現每款應用都會用自己的主題色來作為主圖標與Icon 的主要顏色（表一中不同應用的藍色色值不是嚴格相等的），其中藍色出現的頻率最高，藍色給人的感覺更多是信任、放松、撫慰和冷靜睿智[3]，而且對主要的弱視群體（紅綠色盲）十分友好。

而在金融APP 必備的理財板塊中，表1 的5 款APP都無一例外使用了紅色和加粗的百分比數字來表現收益率，這體現了基金與股票的“高風險”“高收益”等特點，在這種場景下紅色自然是最契合用戶心理預期的顏色（如表2）。

3.2.2 數據展示的設計要素分析 數字是金融服務業務中非常重要的要素之一，諸如電商、支付、理財等場景中都會有許多要素需要通過數字來直接表達，了解金融業務的特殊之處是做好數據展示部分設計的關鍵。

圖3 對于敏感信息的遮擋處理

圖4 Mand Mobile 的icon 部分

表1 主流金融APP 的色彩設計

圖5 Ant Design 中表現層次感的陰影

表2 主流金融APP 的字體選擇

在金融APP 中，金額一般精確到小數點后兩位，即精確到分，在金額整數位位數大于等于4 時，采用三位分節法，用戶可以更清晰地識別數字。DIN 是一款起源自德國鐵路的無襯線字體，字形比較瘦長，具有嚴謹、可識別度高的特點。目前市面上幾款主流金融產品都采用了DIN 和T-star Pro 兩款字體來展示數字。

在進行查看銀行卡號和輸入密碼等操作時，要對部分內容進行遮擋處理，保證“安全可控”原則，讓用戶知曉自己的隱私沒有受到侵犯（如圖3）。

3.2.3 SVG 與Icon font 組件庫的Icon 通常都是SVG 與Icon font 格式，與傳統的png、jpeg 等格式相比，SVG 更為輕便，而且還涵蓋了Alpha 通道、濾鏡效果等能力，并且具備了矢量功能。而Icon font 是網頁制作過程中為提高網頁的加載速度和滿足響應式布局而采用的一種特殊的網頁字體[4]，只支持純色，是非常適合線性圖標的格式。

Icon 組件部分還是遵循可復用的原則，都是比較簡單的且會多次出現的元素，在返回、分享、刷新、查看說明、確認等高頻場景中都能使用（如圖4）。設計風格推薦采用主流的扁平化風格，優點是過濾掉冗余的裝飾元素，讓用戶集中于數字界面，也更容易契合組件庫的其他組件。

3.3 交互動效設計

動效設計是通過動態效果，滿足用戶當前心理需求，提升用戶體驗的設計過程。滿足用戶的心理需求包括引導用戶操作、對用戶的操作進行反饋等；提升產品的用戶體驗包括減少用戶在使用過程中的不適感，增強產品的操作流暢度等。獨特的動效能樹立品牌效應，提升品牌價值[5]。

動效設計除了要滿足流暢平滑的基本準則以外，還有幾個重要的原則：

①克制：優秀的動效設計一定是克制的，不能阻礙和影響用戶的操作，特別是金融APP 的屬性決定了它需要保持比較穩重安全的風格，所以動效的首要任務是對功能的準確表達，其次才是美觀的表現。為了避免吸引用戶過多的注意力，時長最好控制在0.5 秒至1秒之內。

②自然：自然的動效背后體現的是自然運動規律，能讓用戶在使用產品的過程中產生共鳴（如圖5），例如iOS 系統中的回彈與慣性效果，Ant Design 中的按鈕組件的漣漪效果，都借鑒了現實生活中的物理規律。

4 結語

數字化生活給人類帶來了許多便利，現在人們會用便攜的移動終端去完成購物、生活繳費、購買理財產品等行為。產品的用戶體驗和迭代效率都是直接影響企業生存的要素，構建一個對內能提高生產效率，對外能輸出企業價值的組件庫是優化產品的必經之路。

面向金融場景的移動端組件庫除了按鈕、模態窗、下拉框等常規組件外，還包括收銀臺、圖表等與業務緊密相關的組件，設計這些組件的過程中要遵循安全、簡單、易用的基本原則，凸顯金融產品穩定與嚴謹的特點。

通過對比市面上幾款主流金融APP 的設計要素后可以發現，藍色是最受金融產品青睞的主題色，代表理財產品收益的百分率適合用紅色數字表示，最常見的數字字體是DIN 系列和T-star Pro，處理用戶輸入時最穩妥的選擇是使用默認字體Helvetica。扁平化依舊是目前最流行的風格，這種風格與自然穩重的交互動效相結合可以保證良好的用戶體驗。