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

毛天問 任宏

（沈陽航空航天大學(xué)，遼寧 沈陽 110135）

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

1 移動端組件庫發(fā)展現(xiàn)狀

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

2 原子化設(shè)計理念

2.1 原子化設(shè)計的來源

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

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

2.2 原子化設(shè)計的意義

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

3 金融場景下的組件設(shè)計分析

3.1 金融應(yīng)用下的體驗設(shè)計

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

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

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

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

圖2 體現(xiàn)“所見即所得”的證件掃描識別功能

3.2 視覺設(shè)計原則

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

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

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

3.2.2 數(shù)據(jù)展示的設(shè)計要素分析 數(shù)字是金融服務(wù)業(yè)務(wù)中非常重要的要素之一，諸如電商、支付、理財?shù)葓鼍爸卸紩性S多要素需要通過數(shù)字來直接表達(dá)，了解金融業(yè)務(wù)的特殊之處是做好數(shù)據(jù)展示部分設(shè)計的關(guān)鍵。

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

圖4 Mand Mobile 的icon 部分

表1 主流金融APP 的色彩設(shè)計

圖5 Ant Design 中表現(xiàn)層次感的陰影

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

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

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

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

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

3.3 交互動效設(shè)計

動效設(shè)計是通過動態(tài)效果，滿足用戶當(dāng)前心理需求，提升用戶體驗的設(shè)計過程。滿足用戶的心理需求包括引導(dǎo)用戶操作、對用戶的操作進(jìn)行反饋等；提升產(chǎn)品的用戶體驗包括減少用戶在使用過程中的不適感，增強(qiáng)產(chǎn)品的操作流暢度等。獨特的動效能樹立品牌效應(yīng)，提升品牌價值[5]。

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

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

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

4 結(jié)語

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

面向金融場景的移動端組件庫除了按鈕、模態(tài)窗、下拉框等常規(guī)組件外，還包括收銀臺、圖表等與業(yè)務(wù)緊密相關(guān)的組件，設(shè)計這些組件的過程中要遵循安全、簡單、易用的基本原則，凸顯金融產(chǎn)品穩(wěn)定與嚴(yán)謹(jǐn)?shù)奶攸c。

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