點融理財4.0改版踩過的那些坑
點融理財4.0改版踩過的那些坑-移動閱讀二維碼

Doris:來點融將近兩年的時間里經歷了三次大改版,我們團隊也從開始的十人左右漸漸壯大到了三十多人,這次的改版和不同領域的小伙伴們合作,確實獲益良多。如果說第一個大版本只是實現基本投資功能流程,第二個大版本是優化界面設計,那這次的四點零就是加入了產品運營、最新設計趨勢和情感化,讓一個app從能用,好看,到讓用戶喜歡,也算是一種產品成長和成熟的歷程。此次撰文,就是想和大家說說我們在App進化過程中曾經踩過的那些坑,由此收獲的經驗教訓,以及一些不成熟的總結,與君共勉。

△ 產品迭代版本的目標

改版關鍵詞

這次4.0改版的核心目標主要為兩大部分。第一是在產品層面上,針對新用戶,設計了特定使用場景的優化體驗,并且從長遠運營維護的角度去思考和優化各頁面的信息架構。第二則是設計表現力上的優化,以情感化為主要手段,結合動效的渲染和烘托。

年前接到大改版需求的時候,我們先是分析了一下現有版本的不足之處。首先是在產品層面缺乏了一個新老用戶的銜接流程,運營活動略顯單薄,其次設計表現的主要問題為品牌色運用太重,而信息結構上的問題是由于之前設計的時候對于未來迭代功能沒有提前預估引起的,拓展性很差,后期添加新功能的時候只能強行塞進頁面,導致界面承載的信息過多,難分主次。

△ 先前版本存在的問題

針對這些問題,結合我們產品現有的階段目標,對于用戶人群的特征及接受程度進行了分析,最終總結出我們此次4.0改版目標——把“色彩、信息、情感化”作為針對改進的目標點和關鍵詞,同時加入運營的體系化設計,讓整個App活靈活現起來。

△ 新版本4TAB

一. 色彩的重新選擇

之前的版本Title Bar運用了品牌綠,強行強調一波品牌的同時也帶來了不少困擾,尤其是在一些頂部有運營banner的情況下,更容易產生視覺干擾。另外單一的品牌色也很容易帶來視覺疲勞。所以這次改版我們毅然決然的去掉了這頭頂的一抹綠;讓用戶把視線焦點更多的聚集在頁面主要內容上。

△ 顏色定義

整體的感覺是比較“輕”新的。在顏色的選取上,為了去除原先的單一感,除了原先的品牌綠色,又新增了兩個暖色作為輔色,同時為了避免產生白紙黑字的過強對比,也更新了原先使用的標題色黑色,使用了一個偏藍的顏色和綠色搭配更為和諧。

二. 信息為王,裝飾點睛

現在屏幕越來越大,屏幕上的信息也越來越多,所以在處理頁面的時候,一方面是信息重構,交互的童鞋重新梳理了所有主頁面和主流程,另外在視覺上,為了清晰明了的展現信息,文字由原先的Light改為了Regular量級。

Light字體相信許多設計師曾經使用過,確實可以讓界面顯得輕盈纖巧,但對于需要閱讀信息的用戶來說,就沒有加粗之后的字體那么友好易讀了,所以我們也可以看到在現在的中文設計趨勢中,大家更多的會去實用regular為初始的文字量級,Medium作為加粗的量級了,這也是信息為王在設計趨勢中的一種體現吧。其他的方法例如增加留白,把重要的信息凸顯出來。最后在icon的使用上,可以參考下圖我們對于icon的分類定義。

△ ICON的定義

三. 情感化體現

情感化是我們此次4.0改版的一個重頭戲,一個App如果實現了其所有功能的流暢易用,界面清晰明了,那只能說是一個“可以解決用戶問題”的App,但要做一個讓用戶喜歡、依賴、并且樂于去分享的App,情感化元素的加入是必不可少的。就像我們這次啟動頁所說,“全新4.0,為你而生”,這次改版我們主要是從新手引導、點小融形象的運用和加強動效設計這三方面入手來豐富App的情感化體驗。

1、新手體驗是用戶對App的初體驗,這次我們特地在產品層面區分了新老用戶的引導路線,在首頁設置了新手專區,用戶可以清晰的看到自己的新手任務以及可獲得的獎勵,每個任務完成的時候也會有動畫提示,成就感滿滿。

△ 新手引導

2、點小融形象在點融用戶中廣受好評,所以我們的設計師Kooper在此基礎上精心設計了一系列的點小融形象,增加了點小融的使用場景,比如在首頁底部的上拉彩蛋,在團詳情頁會提醒用戶優惠券即將到期等等,更多驚喜就請大家下載新版App嘗試啦。

△ 點小融

最后說一下本次改版的動效設計?,F在很多App都開始注意到動效的問題,并且越來越多的使用動效,這是一個喜聞樂見的現象,一方面說明機器性能日新月異(硬件支持),另一方面也說明大家都開始花心思了。但是要注意的是,動效相對于靜態頁面是個強引導,非常的吸引人注意力,太多的動效反而會讓人眼花繚亂,分散了對重點信息的注意力。而動效的主要作用提現在不同視圖的焦點引導;當用戶完成了一個手勢后,提示用戶將會發生什么;明確元素之間的層級和控件關系;當程序加載較慢、運行出錯時分散用戶的注意力;潤色整個App;提供個性化、令人愉悅的使用體驗。這次4.0的動效由我們專業的動效設計師Snow負責,貫穿全局,從加載到彈框到特制的場景化動效,都經過了嚴密的思考和調試,讓動效能夠最大化的為內容來服務。比如:

△ ?下拉刷新

△ 列表入場

由于這次大改版幾乎涉及了所有頁面的風格更新,在完成主要風格定義之后,需要一個規范去推進其他頁面的設計和頁面鋪開。在此我作為兩代視覺規范的作者,總結一下個人制定視覺規范的經驗。首先是全局框架,主要是定義內容邊距padding,接下來是顏色和字體這兩個最為基礎的“地基”部分。由于點融理財是一款投資App,其中有很多的數字展現是非常重要的,所以這次我們引入了特殊的數字字體Roboto和RobotoCondensed來提升數字的感染力。

△ 數字運用

然后就是頁面中的Tittle Bar/Navigation Bar(頭頂和底部),控件如Tab/List/Button/Tag/Notification Bar/Badge/Input/Toast/Popup等,盡量的羅列出每一種可能出現的樣式,同時也要考慮到自適應的使用,一方面方便開發集成模塊使用,另一方面也方便其他設計師的使用和標注。例如Button分為大小2種高度設置為B1和B2(代表了button所使用的高度、圓角和樣式),寬度可以根據內容或者頁面寬度來自定義,在標注時只需要標吧B1和寬度即可。這樣可以大大節約時間成本,提高與開發的合作效率。

另外在設計的過程中會不斷的出現新的控件使用情景或是對原先的控件進行修改,這時候就需要寫一下歷史修改記錄方便迭代track并告知相關的開發童鞋。

△ 文檔更新記錄

致謝詞

從年后2月開始構思改版直到六月的上線,點融理財投資端App四點零版本歷經四個月的磨劍,終出其鞘,期間飽含著每一位參與項目的小伙伴們的辛勤與汗水。感謝大王對改版的大力推動,壯士不辭辛勞的為我們安排進度,圓梓、天敏和小包推翻之前的信息架構,設計詳盡完整的交互邏輯和流程,靜靜、文美和小酷作為視覺支持這次的任務也是異常辛苦和繁重,還有我們最棒棒的動效設計師小雪,精心調整了每個動效。另外想代表我們設計團隊感謝在成都的前端開發團隊無限支持我們每一次有理無理的需求和改動,雖然身處異地,但彼此間的合作讓我們可以達成每一個像素和流程的完美實現。

念念不忘,必有回響。愿此次點融理財App的4.0改版能給大家帶來一份全新的投資體驗,也歡迎各界同行的批評指正。

歡迎關注點融設計中心DDC微信公眾號:「ID:DR_DDC」

本文鏈接:http://www.casaleticia.com/dianrong-app-redesign-4.html
本文標簽: , , ,