2022-7-27 資深UI設(shè)計者
● 京東金融 App 首頁三大改版
3.x 版本到馬上上線的 4.x 版本,公司的戰(zhàn)略方向以及產(chǎn)品運營方向都在不斷的變化(有接觸過京東金融 App 的人都知道視覺變化很大)。作為公司的移動端產(chǎn)品,既要滿足用戶體驗和需求,又要滿足內(nèi)部業(yè)務(wù)的擴(kuò)展。所以我們要不斷優(yōu)化各種布局和細(xì)節(jié),把用戶體驗和內(nèi)部需求做到最好。
3.X 版本是我接首頁優(yōu)化的第一個版本。改版期間我們經(jīng)歷了很多,除了本身業(yè)務(wù)以外,更重要的是我們發(fā)現(xiàn)之前首頁有很多問題。其實優(yōu)化產(chǎn)品最基本的方法就是發(fā)現(xiàn)了一些問題,然后去解決這些問題。問題可能是產(chǎn)品問題、業(yè)務(wù)需求擴(kuò)展、運營需求滿足,最后才是體驗和視覺。這些問題能得到解決產(chǎn)品就能得到優(yōu)化。
以賬戶為中心是當(dāng)時產(chǎn)品的主要方向,整體都在強調(diào)財富管理。所以之前的界面在賬戶為主和業(yè)務(wù)擴(kuò)展上都存在很大問題,一是業(yè)務(wù)拓展存在局限性,二是賬戶感不強。
經(jīng)過一大堆方案和設(shè)計圖的轟炸,最終確定了大的方向,突出理財金額和業(yè)務(wù)和信貸業(yè)務(wù)。把一些數(shù)字突出放大,讓用戶打開產(chǎn)品既能看到自己想看到的東西。賬戶感的體現(xiàn)我們把數(shù)字和一些文字說明當(dāng)成首屏最主要的東西,少一些運營,少一些 banner 。就像是在銀行打出的紙質(zhì)賬戶信息,上面很少會出現(xiàn)廣告。
▲ 還是之前的方法,經(jīng)過上線一段的時間去發(fā)現(xiàn)問題。隨著業(yè)務(wù)和功能的增多,原來的布局已支撐不了公司方向的支持這是之一。之前的視覺也有一些缺陷,進(jìn)入 App 整體看上去沒有重點的,純白色很干凈但是也沒有能跳出來吸引眼球的東西,也不能把重要業(yè)務(wù)區(qū)別與其他業(yè)務(wù)。
這次增加了一些產(chǎn)品本身頻次的功能,如掃一掃、簽到、每天領(lǐng)券等。還有怎么樣能突出重點業(yè)務(wù)的展示,讓用戶在視覺局部上有所重點。業(yè)務(wù)的擴(kuò)展性通過左右橫滑來實現(xiàn)。
▲ 怎么樣能把多量的業(yè)務(wù),重新布局到有限的界面里,而且不能降低用戶的使用體驗,是我們這一版要解決的問題。就是化繁為簡。
這次我們把業(yè)務(wù)場景劃分成「賺錢」「花錢」「借錢」,相對應(yīng)是「理財」「白條購物」「現(xiàn)金借貸」。使用三個Tab 簽和最簡單的布局方式來排版。用戶理解相對也會變的容易,界面整體看起來也簡單明了。
首頁的改版看似簡單,其實背后有很多的付出。不斷的優(yōu)化討論、不斷的視覺方案,我們不斷在尋找新的突破,希望能讓各個方面都達(dá)到最大效能。
● 理財日歷
「理財日歷」是整合用戶關(guān)于所有金融業(yè)務(wù)的,按照時間線索智能提醒和自動完成的一款產(chǎn)品。
· 產(chǎn)品目標(biāo):幫助用戶記錄金融事件和跟錢相關(guān)的事件,例如理財?shù)狡?、白條還款事件、生活繳費事件等等。一條 時間線可以把用戶所有的事件聯(lián)系起來的。讓用戶把時間用在更重要的事情上。
· 產(chǎn)品關(guān)鍵性詞語:時間、自動記錄、提醒、設(shè)置自動完成
當(dāng)我們進(jìn)入 App 時,需要進(jìn)行很多不同的操作,進(jìn)入到不同的業(yè)務(wù)線頁面才能完成我想要做的事情。這時整合業(yè)務(wù)聚合內(nèi)容就變的很重要。需要有一個平臺把跟用戶強相關(guān)的金融事項和其他事項整合,這樣就不用花費很多時間來處理各種事件。
日歷是一個強時間線的用戶固有思想形態(tài),我們需要把除了基礎(chǔ)的時間、記錄事件和日常提醒功能做好外,還要讓用戶習(xí)慣這里面有跟我理財相關(guān)的事項。針對使用產(chǎn)品用戶的特征,在視覺布局上不能難以接受,日歷主要的時間、每天事項、后續(xù)事項查詢和增加事項都要合理排布。
為了增加日歷的整體氛圍,除了時間的排布,我們?yōu)槊恳粋€月和每一個節(jié)氣增加了插畫。每一條信息的分類都用 icon 表示,突出強弱,增加氛圍。
日歷添加事項和設(shè)置頁面,以進(jìn)度的感覺讓用戶去更好的完成事項的設(shè)置。推薦事項也是用戶最常用的、最容易跟時間所對應(yīng)的事項。
日歷的分享模塊是很重要的一個細(xì)節(jié),我們希望它能更好的去傳達(dá)這是一款有溫度的產(chǎn)品。它也是對外發(fā)聲的一個利器。
怎么樣才能激發(fā)用戶分享的欲望呢,用戶打開界面的分享動機(jī)是什么?我們知道用戶分享有幾點:有用的、有趣的、相互比較、用戶認(rèn)同等等。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。
作者:程大專 來源:站酷
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍(lán)藍(lán)設(shè)計的小編 http://yvirxh.cn