總結(jié)來(lái)了！聊聊點(diǎn)融投資4.0改版踩過(guò)的那些坑

Doris：來(lái)點(diǎn)融將近兩年的時(shí)間里經(jīng)歷了三次大改版，我們團(tuán)隊(duì)也從開(kāi)始的十人左右漸漸壯大到了三十多人，這次的改版和不同領(lǐng)域的小伙伴們合作，確實(shí)獲益良多。如果說(shuō)第一個(gè)大版本只是實(shí)現(xiàn)基本投資功能流程，第二個(gè)大版本是優(yōu)化界面設(shè)計(jì)，那這次的四點(diǎn)零就是加入了產(chǎn)品運(yùn)營(yíng)、最新設(shè)計(jì)趨勢(shì)和情感化，讓一個(gè)app從能用，好看，到讓用戶(hù)喜歡，也算是一種產(chǎn)品成長(zhǎng)和成熟的歷程。此次撰文，就是想和大家說(shuō)說(shuō)我們?cè)贏pp進(jìn)化過(guò)程中曾經(jīng)踩過(guò)的那些坑，由此收獲的經(jīng)驗(yàn)教訓(xùn)，以及一些不成熟的總結(jié)，與君共勉。

△ 產(chǎn)品迭代版本的目標(biāo)

改版關(guān)鍵詞

這次4.0改版的核心目標(biāo)主要為兩大部分。第一是在產(chǎn)品層面上，針對(duì)新用戶(hù)，設(shè)計(jì)了特定使用場(chǎng)景的優(yōu)化體驗(yàn)，并且從長(zhǎng)遠(yuǎn)運(yùn)營(yíng)維護(hù)的角度去思考和優(yōu)化各頁(yè)面的信息架構(gòu)。第二則是設(shè)計(jì)表現(xiàn)力上的優(yōu)化，以情感化為主要手段，結(jié)合動(dòng)效的渲染和烘托。

年前接到大改版需求的時(shí)候，我們先是分析了一下現(xiàn)有版本的不足之處。首先是在產(chǎn)品層面缺乏了一個(gè)新老用戶(hù)的銜接流程，運(yùn)營(yíng)活動(dòng)略顯單薄，其次設(shè)計(jì)表現(xiàn)的主要問(wèn)題為品牌色運(yùn)用太重，而信息結(jié)構(gòu)上的問(wèn)題是由于之前設(shè)計(jì)的時(shí)候?qū)τ谖磥?lái)迭代功能沒(méi)有提前預(yù)估引起的，拓展性很差，后期添加新功能的時(shí)候只能強(qiáng)行塞進(jìn)頁(yè)面，導(dǎo)致界面承載的信息過(guò)多，難分主次。

△ 先前版本存在的問(wèn)題

針對(duì)這些問(wèn)題，結(jié)合我們產(chǎn)品現(xiàn)有的階段目標(biāo)，對(duì)于用戶(hù)人群的特征及接受程度進(jìn)行了分析，最終總結(jié)出我們此次4.0改版目標(biāo)——把“色彩、信息、情感化”作為針對(duì)改進(jìn)的目標(biāo)點(diǎn)和關(guān)鍵詞，同時(shí)加入運(yùn)營(yíng)的體系化設(shè)計(jì)，讓整個(gè)App活靈活現(xiàn)起來(lái)。

△ 新版本4TAB

一. 色彩的重新選擇

之前的版本Title Bar運(yùn)用了品牌綠，強(qiáng)行強(qiáng)調(diào)一波品牌的同時(shí)也帶來(lái)了不少困擾，尤其是在一些頂部有運(yùn)營(yíng)banner的情況下，更容易產(chǎn)生視覺(jué)干擾。另外單一的品牌色也很容易帶來(lái)視覺(jué)疲勞。所以這次改版我們毅然決然的去掉了這頭頂?shù)囊荒ňG;讓用戶(hù)把視線(xiàn)焦點(diǎn)更多的聚集在頁(yè)面主要內(nèi)容上。

△ 顏色定義

整體的感覺(jué)是比較“輕”新的。在顏色的選取上，為了去除原先的單一感，除了原先的品牌綠色，又新增了兩個(gè)暖色作為輔色，同時(shí)為了避免產(chǎn)生白紙黑字的過(guò)強(qiáng)對(duì)比，也更新了原先使用的標(biāo)題色黑色，使用了一個(gè)偏藍(lán)的顏色和綠色搭配更為和諧。

二. 信息為王，裝飾點(diǎn)睛

現(xiàn)在屏幕越來(lái)越大，屏幕上的信息也越來(lái)越多，所以在處理頁(yè)面的時(shí)候，一方面是信息重構(gòu)，交互的童鞋重新梳理了所有主頁(yè)面和主流程，另外在視覺(jué)上，為了清晰明了的展現(xiàn)信息，文字由原先的Light改為了Regular量級(jí)。

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

△ ICON的定義

三. 情感化體現(xiàn)

情感化是我們此次4.0改版的一個(gè)重頭戲，一個(gè)App如果實(shí)現(xiàn)了其所有功能的流暢易用，界面清晰明了，那只能說(shuō)是一個(gè)“可以解決用戶(hù)問(wèn)題”的App，但要做一個(gè)讓用戶(hù)喜歡、依賴(lài)、并且樂(lè)于去分享的App，情感化元素的加入是必不可少的。就像我們這次啟動(dòng)頁(yè)所說(shuō)，“全新4.0，為你而生”，這次改版我們主要是從新手引導(dǎo)、點(diǎn)小融形象的運(yùn)用和加強(qiáng)動(dòng)效設(shè)計(jì)這三方面入手來(lái)豐富App的情感化體驗(yàn)。

1、新手體驗(yàn)是用戶(hù)對(duì)App的初體驗(yàn)，這次我們特地在產(chǎn)品層面區(qū)分了新老用戶(hù)的引導(dǎo)路線(xiàn)，在首頁(yè)設(shè)置了新手專(zhuān)區(qū)，用戶(hù)可以清晰的看到自己的新手任務(wù)以及可獲得的獎(jiǎng)勵(lì)，每個(gè)任務(wù)完成的時(shí)候也會(huì)有動(dòng)畫(huà)提示，成就感滿(mǎn)滿(mǎn)。

△ 新手引導(dǎo)

2、點(diǎn)小融形象在點(diǎn)融用戶(hù)中廣受好評(píng)，所以我們的設(shè)計(jì)師Kooper在此基礎(chǔ)上精心設(shè)計(jì)了一系列的點(diǎn)小融形象，增加了點(diǎn)小融的使用場(chǎng)景，比如在首頁(yè)底部的上拉彩蛋，在團(tuán)詳情頁(yè)會(huì)提醒用戶(hù)優(yōu)惠券即將到期等等，更多驚喜就請(qǐng)大家下載新版App嘗試?yán)病?/p>

△ 點(diǎn)小融

最后說(shuō)一下本次改版的動(dòng)效設(shè)計(jì)。現(xiàn)在很多App都開(kāi)始注意到動(dòng)效的問(wèn)題，并且越來(lái)越多的使用動(dòng)效，這是一個(gè)喜聞樂(lè)見(jiàn)的現(xiàn)象，一方面說(shuō)明機(jī)器性能日新月異（硬件支持），另一方面也說(shuō)明大家都開(kāi)始花心思了。但是要注意的是，動(dòng)效相對(duì)于靜態(tài)頁(yè)面是個(gè)強(qiáng)引導(dǎo)，非常的吸引人注意力，太多的動(dòng)效反而會(huì)讓人眼花繚亂，分散了對(duì)重點(diǎn)信息的注意力。而動(dòng)效的主要作用提現(xiàn)在不同視圖的焦點(diǎn)引導(dǎo)；當(dāng)用戶(hù)完成了一個(gè)手勢(shì)后，提示用戶(hù)將會(huì)發(fā)生什么；明確元素之間的層級(jí)和控件關(guān)系；當(dāng)程序加載較慢、運(yùn)行出錯(cuò)時(shí)分散用戶(hù)的注意力；潤(rùn)色整個(gè)App；提供個(gè)性化、令人愉悅的使用體驗(yàn)。這次4.0的動(dòng)效由我們專(zhuān)業(yè)的動(dòng)效設(shè)計(jì)師Snow負(fù)責(zé)，貫穿全局，從加載到彈框到特制的場(chǎng)景化動(dòng)效，都經(jīng)過(guò)了嚴(yán)密的思考和調(diào)試，讓動(dòng)效能夠最大化的為內(nèi)容來(lái)服務(wù)。比如：

△ ?下拉刷新

△ 列表入場(chǎng)

由于這次大改版幾乎涉及了所有頁(yè)面的風(fēng)格更新，在完成主要風(fēng)格定義之后，需要一個(gè)規(guī)范去推進(jìn)其他頁(yè)面的設(shè)計(jì)和頁(yè)面鋪開(kāi)。在此我作為兩代視覺(jué)規(guī)范的作者，總結(jié)一下個(gè)人制定視覺(jué)規(guī)范的經(jīng)驗(yàn)。首先是全局框架，主要是定義內(nèi)容邊距padding，接下來(lái)是顏色和字體這兩個(gè)最為基礎(chǔ)的“地基”部分。由于點(diǎn)融投資是一款投資App，其中有很多的數(shù)字展現(xiàn)是非常重要的，所以這次我們引入了特殊的數(shù)字字體Roboto和RobotoCondensed來(lái)提升數(shù)字的感染力。

△ 數(shù)字運(yùn)用

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

另外在設(shè)計(jì)的過(guò)程中會(huì)不斷的出現(xiàn)新的控件使用情景或是對(duì)原先的控件進(jìn)行修改，這時(shí)候就需要寫(xiě)一下歷史修改記錄方便迭代track并告知相關(guān)的開(kāi)發(fā)童鞋。

△ 文檔更新記錄

致謝詞

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

念念不忘，必有回響。愿此次點(diǎn)融投資App的4.0改版能給大家?guī)?lái)一份全新的投資體驗(yàn)，也歡迎各界同行的批評(píng)指正。

歡迎關(guān)注點(diǎn)融設(shè)計(jì)中心DDC微信公眾號(hào)：「ID：DR_DDC」

「干貨超足的5個(gè)改版實(shí)戰(zhàn)經(jīng)驗(yàn)總結(jié)」

1. LOGO 改版：《揭秘LOGO設(shè)計(jì)流程！超詳細(xì)的騰訊云LOGO 改版記錄全過(guò)程》
2. 官網(wǎng)改版：《QQ官網(wǎng)全新蛻變！IM QQ 改版（第一期）設(shè)計(jì)總結(jié)》
3. Pinterest 改版：《改版實(shí)戰(zhàn)！聊聊PINTEREST官網(wǎng)再設(shè)計(jì)過(guò)程的經(jīng)驗(yàn)思考》
4. QQ 新版表情：《騰訊ISUX丨揭秘QQ 新版表情背后的設(shè)計(jì)故事》
5. 提升數(shù)據(jù)：《騰訊ISUX丨通過(guò)優(yōu)化，我們將QQ會(huì)員付費(fèi)用戶(hù)數(shù)提高了5倍！》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專(zhuān)欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專(zhuān)欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com