來點融將近兩年的時間里經(jīng)歷了三次大改版，我們團隊也從開始的十人左右漸漸壯大到了三十多人，這次的改版和不同領(lǐng)域的小伙伴們合作，確實獲益良多。如果說第一個大版本只是實現(xiàn)基本投資功能流程，第二個大版本是優(yōu)化界面設(shè)計，那這次的四點零就是加入了產(chǎn)品運營、最新設(shè)計趨勢和情感化，讓一個app從能用，好看，到讓用戶喜歡，也算是一種產(chǎn)品成長和成熟的歷程。此次撰文，就是想和大家說說我們在App進化過程中曾經(jīng)踩過的那些坑，由此收獲的經(jīng)驗教訓，以及一些不成熟的總結(jié)，與君共勉。
△ 產(chǎn)品迭代版本的目標
改版關(guān)鍵詞
這次4.0改版的核心目標主要為兩大部分。第一是在產(chǎn)品層面上，針對新用戶，設(shè)計了特定使用場景的優(yōu)化體驗，并且從長遠運營維護的角度去思考和優(yōu)化各頁面的信息架構(gòu)。第二則是設(shè)計表現(xiàn)力上的優(yōu)化，以情感化為主要手段，結(jié)合動效的渲染和烘托。
年前接到大改版需求的時候，我們先是分析了一下現(xiàn)有版本的不足之處。首先是在產(chǎn)品層面缺乏了一個新老用戶的銜接流程，運營活動略顯單薄，其次設(shè)計表現(xiàn)的主要問題為品牌色運用太重，而信息結(jié)構(gòu)上的問題是由于之前設(shè)計的時候?qū)τ谖磥淼δ軟]有提前預(yù)估引起的，拓展性很差，后期添加新功能的時候只能強行塞進頁面，導致界面承載的信息過多，難分主次。
△ 先前版本存在的問題
針對這些問題，結(jié)合我們產(chǎn)品現(xiàn)有的階段目標，對于用戶人群的特征及接受程度進行了分析，最終總結(jié)出我們此次4.0改版目標——把“色彩、信息、情感化”作為針對改進的目標點和關(guān)鍵詞，同時加入運營的體系化設(shè)計，讓整個App活靈活現(xiàn)起來。
△ 新版本4TAB
之前的版本Title Bar運用了品牌綠，強行強調(diào)一波品牌的同時也帶來了不少困擾，尤其是在一些頂部有運營banner的情況下，更容易產(chǎn)生視覺干擾。另外單一的品牌色也很容易帶來視覺疲勞。所以這次改版我們毅然決然的去掉了這頭頂?shù)囊荒ňG;讓用戶把視線焦點更多的聚集在頁面主要內(nèi)容上。
△ 顏色定義
整體的感覺是比較“輕”新的。在顏色的選取上，為了去除原先的單一感，除了原先的品牌綠色，又新增了兩個暖色作為輔色，同時為了避免產(chǎn)生白紙黑字的過強對比，也更新了原先使用的標題色黑色，使用了一個偏藍的顏色和綠色搭配更為和諧。
現(xiàn)在屏幕越來越大，屏幕上的信息也越來越多，所以在處理頁面的時候，一方面是信息重構(gòu)，交互的童鞋重新梳理了所有主頁面和主流程，另外在視覺上，為了清晰明了的展現(xiàn)信息，文字由原先的Light改為了Regular量級。
Light字體相信許多設(shè)計師曾經(jīng)使用過，確實可以讓界面顯得輕盈纖巧，但對于需要閱讀信息的用戶來說，就沒有加粗之后的字體那么友好易讀了，所以我們也可以看到在現(xiàn)在的中文設(shè)計趨勢中，大家更多的會去實用regular為初始的文字量級，Medium作為加粗的量級了，這也是信息為王在設(shè)計趨勢中的一種體現(xiàn)吧。其他的方法例如增加留白，把重要的信息凸顯出來。最后在icon的使用上，可以參考下圖我們對于icon的分類定義。
△ ICON的定義
情感化是我們此次4.0改版的一個重頭戲，一個App如果實現(xiàn)了其所有功能的流暢易用，界面清晰明了，那只能說是一個“可以解決用戶問題”的App，但要做一個讓用戶喜歡、依賴、并且樂于去分享的App，情感化元素的加入是必不可少的。就像我們這次啟動頁所說，“全新4.0，為你而生”，這次改版我們主要是從新手引導、點小融形象的運用和加強動效設(shè)計這三方面入手來豐富App的情感化體驗。
1、新手體驗是用戶對App的初體驗，這次我們特地在產(chǎn)品層面區(qū)分了新老用戶的引導路線，在首頁設(shè)置了新手專區(qū)，用戶可以清晰的看到自己的新手任務(wù)以及可獲得的獎勵，每個任務(wù)完成的時候也會有動畫提示，成就感滿滿。
△ 新手引導
2、點小融形象在點融用戶中廣受好評，所以我們的設(shè)計師Kooper在此基礎(chǔ)上精心設(shè)計了一系列的點小融形象，增加了點小融的使用場景，比如在首頁底部的上拉彩蛋，在團詳情頁會提醒用戶優(yōu)惠券即將到期等等，更多驚喜就請大家下載新版App嘗試啦。
△ 點小融
最后說一下本次改版的動效設(shè)計?，F(xiàn)在很多App都開始注意到動效的問題，并且越來越多的使用動效，這是一個喜聞樂見的現(xiàn)象，一方面說明機器性能日新月異(硬件支持)，另一方面也說明大家都開始花心思了。但是要注意的是，動效相對于靜態(tài)頁面是個強引導，非常的吸引人注意力，太多的動效反而會讓人眼花繚亂，分散了對重點信息的注意力。而動效的主要作用提現(xiàn)在不同視圖的焦點引導;當用戶完成了一個手勢后，提示用戶將會發(fā)生什么;明確元素之間的層級和控件關(guān)系;當程序加載較慢、運行出錯時分散用戶的注意力;潤色整個App;提供個性化、令人愉悅的使用體驗。這次4.0的動效由我們專業(yè)的動效設(shè)計師Snow負責，貫穿全局，從加載到彈框到特制的場景化動效，都經(jīng)過了嚴密的思考和調(diào)試，讓動效能夠最大化的為內(nèi)容來服務(wù)。比如：
△ 下拉刷新
△ 列表入場
由于這次大改版幾乎涉及了所有頁面的風格更新，在完成主要風格定義之后，需要一個規(guī)范去推進其他頁面的設(shè)計和頁面鋪開。在此我作為兩代視覺規(guī)范的作者，總結(jié)一下個人制定視覺規(guī)范的經(jīng)驗。首先是全局框架，主要是定義內(nèi)容邊距padding，接下來是顏色和字體這兩個最為基礎(chǔ)的“地基”部分。由于點融理財是一款投資App，其中有很多的數(shù)字展現(xiàn)是非常重要的，所以這次我們引入了特殊的數(shù)字字體Roboto和RobotoCondensed來提升數(shù)字的感染力。
△ 數(shù)字運用
然后就是頁面中的Tittle Bar/Navigation Bar(頭頂和底部)，控件如Tab/List/Button/Tag/Notification Bar/Badge/Input/Toast/Popup等，盡量的羅列出每一種可能出現(xiàn)的樣式，同時也要考慮到自適應(yīng)的使用，一方面方便開發(fā)集成模塊使用，另一方面也方便其他設(shè)計師的使用和標注。例如Button分為大小2種高度設(shè)置為B1和B2(代表了button所使用的高度、圓角和樣式)，寬度可以根據(jù)內(nèi)容或者頁面寬度來自定義，在標注時只需要標吧B1和寬度即可。這樣可以大大節(jié)約時間成本，提高與開發(fā)的合作效率。
另外在設(shè)計的過程中會不斷的出現(xiàn)新的控件使用情景或是對原先的控件進行修改，這時候就需要寫一下歷史修改記錄方便迭代track并告知相關(guān)的開發(fā)童鞋。
△ 文檔更新記錄
念念不忘，必有回響。愿此次點融理財App的4.0改版能給大家?guī)硪环萑碌耐顿Y體驗，也歡迎各界同行的批評指正。
以上就是上海網(wǎng)站建設(shè)公司——海淘科技為你整理的《點融理財4.0app設(shè)計改版總結(jié)》全部內(nèi)容。如果想要觀看網(wǎng)站建設(shè)案例：企業(yè)網(wǎng)站設(shè)計公司案例，以及其他精彩的營銷研究分析可直接點擊查看。
