從多個細節分析金融類UI設計

Sponsor

最近看到很多關于設計趨勢的文章，然而作為UI設計師，不要麻木追求這些設計手法，比如金融行業的APP來說能更好的呈現內容給用戶會更重要，今天分享與金融有關的UI設計介紹，從 Banner、圖標、數字、分割線及漲跌幅樣式等多個細節進行研究，對未來做金融或相關 APP 會有很好的參考價值。

作者：JackYuu
個人主頁：https://www.zcool.com.cn/u/1982432

目錄

• banner的樣式
• 數字及分割線
• 合適的圖標
• 漲跌幅標簽樣式

一、Banner的樣式

Banner的核心使命是吸引用戶關注，然后被點擊。所以它會是主題性明確，突出關鍵內容并有效抓住用戶眼球的一種廣告。

Banner的設計形式大致可以分為:通欄式、卡片式、面包條

通欄式

常規產品做法，主要出現在電商類、商品類的App,通欄的banner特點: 更具沉浸感，更容易吸引用戶注意

卡片式

卡片式的banner靈活度比較高，呈現在界面上的樣式多樣化，如下圖，3種卡片式banner,不一樣的切換方式。

卡片式banner的采用可撐開界面，使其留白變大，讓界面更具呼吸感

面包條

通常運用到電商類或者其他app的特殊活動，其特點是異形，設計多樣化，可以同時具有動效，更能吸引用戶點擊

金融類的App，對于- -些貸款類或是小理財型的金融產品，有時候還會通過運營活動，提高用戶的留存率。但如果是金融交易平臺，它們對banner的所帶來UV轉化的要求并不是很大，交易平臺類的產品更著重信息的展示，市場的實時變化及操作的便捷性。

banner通欄，用戶更容易將注意力集中在每個banner內容本身，其視覺流線在往下瀏覽時，因為沒有留白的引導，被banner直接割裂，造成在banner.上的停留時間更長。

當banner不通欄的時候，左右的間距可以更好的引導用戶往下瀏覽，且卡片式banner,因為上下的留白間距，會使界面具有呼吸感，如果是金融交易平臺的產品，著重點是信息的展示及操作的便捷性，banner并不需要太重點運營，這時小卡片的banner是-個不錯的樣式選擇。

二、數字

金融類的產品，多數是數字的信息，對于數字的對齊方式、展現形式是有講究的。

下圖左右兩張圖，覺得哪張圖更能提升用戶的瀏覽效率?

左圖列表中的價格是左對齊，從左往右看，一下子很難看識別出數字的體量;

而右圖價格是右對齊，用戶判斷數字的體量，通常是從右往左通過后面的位數來判斷千位、萬位，右對齊的方式可以提升用戶的瀏覽效率;

而對于左對齊的24小時成交額，可以通過增加逗號，將數字間隔開，提升數字體量的判斷效率

當數字特別大的時候，除了加逗號，也可以用K、M去表達，提升瀏覽效率

三、分割線

針對線條顏色的分析，對市面上主流的App進行了研究，截取界面吸取分割線顏色進行對比研究，界面有微信、QQ、天貓、京東、優酷、今日頭條等20個左右

對各個App進行分析總結，可以發現，部分產品運用顏色有著以下規律:

當產品種類繁多，有著大量的圖片、視頻等信息時(如: 京東天貓、新聞類、視頻類)，則采用了淺色的線條顏色，這樣可以減少對信息的干擾，專注信息的閱讀;

當元素較少，文字信息過多時，則采用深色線條分割層次;

金融多數信息都是數字，可合理的利用深色分割線去分割層次，以避免滿屏的數字不知所措

分割線的通欄與不通欄

在App上，我們會看到界面的分割線有些是通欄的，有些是不通欄(即分割線距離屏幕左邊是有一定間距的)，這并不是開發的還原度不好，視覺上說，通欄與不通欄就是一個整體和割裂的關系，如圖

左圖不通欄的分割線，使得每個小模塊中的每個列表都顯得相對具有聯系性，而右圖中的每個列表信息就顯得相對獨立。

也有一些列表采用無分割線的做法，利用格式塔原理，讓用戶把信息自行分組。無分割線處理方式可以拉開間距，讓界面輕量化，適合一些功能簡單的App,對于一些用戶群體廣，內容繁雜且層級較深的產品，處理得不好，會顯得頁面雜亂無章。記得QQ曾有一-版本，將消息列表的分割線全部去除，之后下一版本又加上了分割線，消息列表的信息會比較多，頭像、人名，消息，消息數量、時間，信息過多的情況下，無分割線的做法會讓界面雜亂，相反，增加深色分割線去分割層次，讓界面有序。

四、合適的圖標

圖標是具有明確指代含義的計算機圖形。圖標的表達形式各式各樣，這里將圖標大致分為以下類別:

擬物、輕擬物、線性、陰刻、陽刻、線面結合

擬物

利用一切裝飾效果，諸如陰影，透視，紋理，漸變等手段再現原有物體效果，表現出真實世界的物體形態。擬物化風格的優勢是將原本包含較多現實元素的抽象內容具象化，使其更直觀地傳遞給用戶,降低學習成本，使用戶易于接受，提高產品的認知度。

輕擬物

通過簡單的圖形，簡單的色彩組合，表現物體的特點，即平面化、微質感。輕擬物豐富易用，識別度高，經常運用到App的活動icon。

線性圖標

通過線條構成圖標，線條的粗細決定圖標表達的特性，或是優雅精致，或是厚重嚴謹。線性圖標的構成簡潔抽象，輕松精致，但要做出精致耐看的圖標，也是很考驗設計師的功底。

陰刻圖標

在色彩底板上鏤空形狀，則是陰刻圖標。一些陰刻進階的做法，則是在鏤空的形狀上，通過漸變增加紋理。陰刻圖標因為有顏色底板，容易聚焦視覺，引人注目，通常出現在App的金剛區部位。

陽刻圖標

直接通過形狀來表達圖標意義。陽刻圖標識別性強，具有現代感，在App中尤為常見

線面結合

線性輪廓與面狀填充構成圖標。在App中，可利用產品品牌色做出趣味性強，具有拓展性的線面圖標

左圖的界面，簡單的裝飾，利用細字體及合適的細線性圖標，結合留白，使得整個界面呈現出優雅的氣質

右圖，采用了線面結合的圖標，并結合品牌色，打造出獨特的品牌風格，讓閑魚在同類平臺上(二手交易)別具一格

在個人信息列表頁，采用線性圖標，能夠給人輕松，精致的感覺，對氛圍的營造具有一定的引導作用。而陽刻圖標(面狀圖標)能夠分割層次，區分信息的重要程度。根據產品的品牌調性，采用合適的圖標，才可事半功倍

金融行業的App產品，首先要表達的第一個要素是安全， 只有這個平臺是安全的，用戶才會為這個產品買單。在生活中，可以發現像保險柜、保險箱這些物品，外表的簡潔及物體本身所帶來的厚重感，給用戶帶來了安全感，分析總結，我們可以發現，陽刻圖標(面狀圖標)會比線性圖標相對有安全感

陽刻圖標因為面狀帶來的厚實，會顯得穩重。但這也不是說線性圖標就不適合金融產品，這要根據產品的品牌調性去打造合適的圖標。3-4px的線性圖標，也可以顯得精致厚重。

圖標的邊角處理也要有講究。尖角的處理更具權威感，適當的圓角處理也顯穩重，而圓角越大越凸顯的是親和力，而不是權威

根據產品的品牌調性，在設計圖標的時候，有以下三個原則:

可識別性

一般來說，除了一些追求個性化設計的圖標，圖標的表達都要讓用戶能夠快速辨明其蘊意。

電商或者外賣類圖標，當該產品中的商品種類繁多時，圖標的識別性應優先考慮(可以發現大部分外賣類、商城類等App的金剛區都不采用線性圖標)。金剛區的圖標，大多數都是采用了陰刻圖標，色彩的視覺聚焦，在加上識別性強的圖標，使得用戶在購買行為中快速的從大腦中提取圖標信息，根據圖標去選購商品。

統一性

統一性不單單表現在圖標的風格，圖標的視覺也要保持統一 。同尺寸的正圓和正方形，正方形的視覺大小要比正圓的大。因此，在圖標設計過程中，視覺大小需時刻注意。

品牌差異性

通過品牌色，與用戶建立情感，為一個品牌蒙上了一層信譽和個性的新色彩。將品牌色融入圖標的設計中，建立一種獨特的信念，讓這種信念貫穿整個設計，深入人心。

五、漲跌幅標簽樣式

交易平臺中，列表的漲跌幅樣式，一般有3種：實心、淺底、純數字。

實心

為突出漲跌信息而采用實心底色聚焦視覺，突出信息。市面.上常見的漲跌幅標簽樣式。

淺底

淺底沒有實心聚焦視覺，界面會稍顯平衡。淺色的視覺點綴，會讓界面有活力。(做成這種樣式，也避免交易平臺類的列表頁趨于同質化。目前僅看到改版后的火幣的網頁設計用這種樣式)

純數字

直接用大字號的數字去表達漲跌幅，這種處理手法需要注意的是單行列表中的信息不宜過多，不然會顯得雜亂無章。

總結

作為設計師，雖然我們都喜歡最新的趨勢，比如大面積留白、無邊框設計，但對于金融數據類產品來說，數據只要有序的展示，就能很好的解決用戶基本的訴求目標，通過快速掃描來找到相關內容。

不單單金融行業，每個行業、每個UI設計的點都值得我們去分析，每次分析總結后，都是為了下一版本更好的呈現功能及內容，而不是盲目的追隨其他類產品的設計手法。

希望這篇文章的梳理能對你有收獲。設計道路，還有好長一段路要走，不僅僅只是技能!

文章如有錯誤，歡迎指教~

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。