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

使用者介面設計 · 發表 2018-11-07 16:44:23

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

最近看到很多關於設計趨勢的文章，然而作為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曾有一-版本，將訊息列表的分割線全部去除，之後下一版本又加上了分割線，訊息列表的資訊會比較多，頭像、人名，訊息，訊息數量、時間，資訊過多的情況下，無分割線的做法會讓介面雜亂，相反，增加深色分割線去分割層次，讓介面有序。