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

　　金融類ui設(shè)計(jì)原則之Banner的樣式

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

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

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

　　3、面包條。通常運(yùn)用到電商類或者其他app的特殊活動(dòng)，其特點(diǎn)是異形，設(shè)計(jì)多樣化，可以同時(shí)具有動(dòng)效，更能吸引用戶點(diǎn)擊。

金融類ui設(shè)計(jì)

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

　　banner通欄，用戶更容易將注意力集中在每個(gè)banner內(nèi)容本身，其視覺(jué)流線在往下瀏覽時(shí)，因?yàn)闆](méi)有留白的引導(dǎo)，被banner直接割裂，造成在banner.上的停留時(shí)間更長(zhǎng)。當(dāng)banner不通欄的時(shí)候，左右的間距可以更好的引導(dǎo)用戶往下瀏覽，且卡片式banner,因?yàn)樯舷碌牧舭组g距，會(huì)使界面具有呼吸感，如果是金融交易平臺(tái)的產(chǎn)品，著重點(diǎn)是信息的展示及操作的便捷性，banner并不需要太重點(diǎn)運(yùn)營(yíng)，這時(shí)小卡片的banner是-個(gè)不錯(cuò)的樣式選擇。

　　金融類ui設(shè)計(jì)原則之?dāng)?shù)字

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

　　金融類ui設(shè)計(jì)原則之分割線

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

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

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

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

　　金融類ui設(shè)計(jì)原則之合適的圖標(biāo)

　　圖標(biāo)是具有明確指代含義的計(jì)算機(jī)圖形。圖標(biāo)的表達(dá)形式各式各樣，這里將圖標(biāo)大致分為以下類別:擬物、輕擬物、線性、陰刻、陽(yáng)刻、線面結(jié)合。

金融類ui設(shè)計(jì)

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

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

　　3、線性圖標(biāo)。通過(guò)線條構(gòu)成圖標(biāo)，線條的粗細(xì)決定圖標(biāo)表達(dá)的特性，或是優(yōu)雅精致，或是厚重嚴(yán)謹(jǐn)。線性圖標(biāo)的構(gòu)成簡(jiǎn)潔抽象，輕松精致，但要做出精致耐看的圖標(biāo)，也是很考驗(yàn)設(shè)計(jì)師的功底。

　　4、陰刻圖標(biāo)。在色彩底板上鏤空形狀，則是陰刻圖標(biāo)。一些陰刻進(jìn)階的做法，則是在鏤空的形狀上，通過(guò)漸變?cè)黾蛹y理。陰刻圖標(biāo)因?yàn)橛蓄伾装?，容易聚焦視覺(jué)，引人注目，通常出現(xiàn)在App的金剛區(qū)部位。

　　5、陽(yáng)刻圖標(biāo)。直接通過(guò)形狀來(lái)表達(dá)圖標(biāo)意義。陽(yáng)刻圖標(biāo)識(shí)別性強(qiáng)，具有現(xiàn)代感，在App中尤為常見(jiàn)。

　　6、線面結(jié)合。線性輪廓與面狀填充構(gòu)成圖標(biāo)。在App設(shè)計(jì)中，可利用產(chǎn)品品牌色做出趣味性強(qiáng)，具有拓展性的線面圖標(biāo)。

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

　　陽(yáng)刻圖標(biāo)因?yàn)槊鏍顜?lái)的厚實(shí)，會(huì)顯得穩(wěn)重。但這也不是說(shuō)線性圖標(biāo)就不適合金融產(chǎn)品，這要根據(jù)產(chǎn)品的品牌調(diào)性去打造合適的圖標(biāo)。3-4px的線性圖標(biāo)，也可以顯得精致厚重。圖標(biāo)的邊角處理也要有講究。尖角的處理更具權(quán)威感，適當(dāng)?shù)膱A角處理也顯穩(wěn)重，而圓角越大越凸顯的是親和力，而不是權(quán)威。

　　小編覺(jué)得金融類ui設(shè)計(jì)一定要遵循原則，因?yàn)榻鹑陬惖膗i界面設(shè)計(jì)是需要相對(duì)比較嚴(yán)謹(jǐn)?shù)?，所以大家在做金融類的ui設(shè)計(jì)時(shí)一定不能太過(guò)花哨哦!