ui設計已經(jīng)涉及到各行各業(yè)，所以很多企業(yè)為了跟上行業(yè)發(fā)展也開始做了ui設計，金融類也不例外，而且金融類的ui設計需要更嚴謹，下面我們跟隨小編一起來了解一下金融類ui設計的相關資料吧。

　　金融類ui設計原則之Banner的樣式

　　Banner的核心使命是吸引用戶關注，然后被點擊。所以它會是主題性明確，突出關鍵內(nèi)容并有效抓住用戶眼球的一種廣告。Banner的設計形式大致可以分為:通欄式、卡片式、面包條。

　　1、通欄式。常規(guī)產(chǎn)品做法，主要出現(xiàn)在電商類、商品類的App,通欄的banner特點: 更具沉浸感，更容易吸引用戶注意。

　　2、卡片式。卡片式的banner靈活度比較高，呈現(xiàn)在界面上的樣式多樣化，不一樣的切換方式?？ㄆ絙anner的采用可撐開界面，使其留白變大，讓界面更具呼吸感。

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

金融類ui設計

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

　　banner通欄，用戶更容易將注意力集中在每個banner內(nèi)容本身，其視覺流線在往下瀏覽時，因為沒有留白的引導，被banner直接割裂，造成在banner.上的停留時間更長。當banner不通欄的時候，左右的間距可以更好的引導用戶往下瀏覽，且卡片式banner,因為上下的留白間距，會使界面具有呼吸感，如果是金融交易平臺的產(chǎn)品，著重點是信息的展示及操作的便捷性，banner并不需要太重點運營，這時小卡片的banner是-個不錯的樣式選擇。

　　金融類ui設計原則之數(shù)字

　　金融類的產(chǎn)品，多數(shù)是數(shù)字的信息，對于數(shù)字的對齊方式、展現(xiàn)形式是有講究的。例如價格是左對齊，從左往右看，一下子很難看識別出數(shù)字的體量;而價格是右對齊，用戶判斷數(shù)字的體量，通常是從右往左通過后面的位數(shù)來判斷千位、萬位，右對齊的方式可以提升用戶的瀏覽效率;而對于左對齊的24小時成交額，可以通過增加逗號，將數(shù)字間隔開，提升數(shù)字體量的判斷效率當數(shù)字特別大的時候，除了加逗號，也可以用K、M去表達，提升瀏覽效率。

　　金融類ui設計原則之分割線

　　針對線條顏色的分析，對市面上主流的App進行了研究，截取界面吸取分割線顏色進行對比研究，對各個App進行分析總結，可以發(fā)現(xiàn)，部分產(chǎn)品運用顏色有著以下規(guī)律:

　　當產(chǎn)品種類繁多，有著大量的圖片、視頻等信息時則采用了淺色的線條顏色，這樣可以減少對信息的干擾，專注信息的閱讀;當元素較少，文字信息過多時，則采用深色線條分割層次;金融多數(shù)信息都是數(shù)字，可合理的利用深色分割線去分割層次，以避免滿屏的數(shù)字不知所措

　　分割線的通欄與不通欄。在App上，我們會看到界面的分割線有些是通欄的，有些是不通欄(即分割線距離屏幕左邊是有一定間距的)，這并不是開發(fā)的還原度不好，視覺上說，通欄與不通欄就是一個整體和割裂的關系，不通欄的分割線，使得每個小模塊中的每個列表都顯得相對具有聯(lián)系性，而右圖中的每個列表信息就顯得相對獨立。

　　也有一些列表采用無分割線的做法，利用格式塔原理，讓用戶把信息自行分組。無分割線處理方式可以拉開間距，讓界面輕量化，適合一些功能簡單的App,對于一些用戶群體廣，內(nèi)容繁雜且層級較深的產(chǎn)品，處理得不好，會顯得頁面雜亂無章信息過多的情況下，無分割線的做法會讓界面雜亂，相反，增加深色分割線去分割層次，讓界面有序。

　　金融類ui設計原則之合適的圖標

　　圖標是具有明確指代含義的計算機圖形。圖標的表達形式各式各樣，這里將圖標大致分為以下類別:擬物、輕擬物、線性、陰刻、陽刻、線面結合。

金融類ui設計

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

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

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

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

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

　　6、線面結合。線性輪廓與面狀填充構成圖標。在App設計中，可利用產(chǎn)品品牌色做出趣味性強，具有拓展性的線面圖標。

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

　　陽刻圖標因為面狀帶來的厚實，會顯得穩(wěn)重。但這也不是說線性圖標就不適合金融產(chǎn)品，這要根據(jù)產(chǎn)品的品牌調(diào)性去打造合適的圖標。3-4px的線性圖標，也可以顯得精致厚重。圖標的邊角處理也要有講究。尖角的處理更具權威感，適當?shù)膱A角處理也顯穩(wěn)重，而圓角越大越凸顯的是親和力，而不是權威。

　　小編覺得金融類ui設計一定要遵循原則，因為金融類的ui界面設計是需要相對比較嚴謹?shù)?，所以大家在做金融類的ui設計時一定不能太過花哨哦!