最近，25學(xué)堂的小編看到很多小伙伴開始對(duì)自己公司產(chǎn)品的移動(dòng)APP產(chǎn)品進(jìn)行了一些重構(gòu)或者是APP產(chǎn)品的重設(shè)計(jì)。

當(dāng)然也有一些，新進(jìn)入一家公司，對(duì)公司之前設(shè)計(jì)的移動(dòng)APP產(chǎn)品重新設(shè)計(jì)和迭代升級(jí)。

這節(jié)課主要跟大家分享2塊內(nèi)容：

上圖來自美女設(shè)計(jì)師的追波網(wǎng)主頁(yè)項(xiàng)目：https://dribbble.com/JunYao

第一塊：APP重設(shè)計(jì)的工作流程是什么？

讓大家了解正常的APP重設(shè)計(jì)的工作流程，到底是一個(gè)重設(shè)計(jì)流程。無論是APP產(chǎn)品經(jīng)理還是APP設(shè)計(jì)師，都有義務(wù)和責(zé)任深入了解整個(gè)項(xiàng)目的重設(shè)計(jì)過程。

下面還是以怡呼吸APP重設(shè)計(jì)項(xiàng)目當(dāng)中分享的流程給大家看看。

看完這個(gè)流程圖，可以得出APP重設(shè)計(jì)是一個(gè)非常復(fù)雜的過程，需要考慮的東西和知識(shí)面是比較多的。25學(xué)堂建議各位多多融入項(xiàng)目團(tuán)隊(duì)當(dāng)中，把自己負(fù)責(zé)的那塊好好深思。前提是圍繞重設(shè)計(jì)的目標(biāo)。

比如下面的APP設(shè)計(jì)師的重設(shè)計(jì)思路：

在著手設(shè)計(jì)前的數(shù)次討論中我們逐步清晰了本次優(yōu)化的基本原則：用戶的時(shí)間是寶貴的，我們應(yīng)該通過更好的設(shè)計(jì)幫助他們節(jié)約時(shí)間提高效率。

基于這樣的原則，我們將這次重新設(shè)計(jì)的核心策略定義為：快。

通過設(shè)計(jì)讓用戶每次想做的事情變得簡(jiǎn)單高效、重要且使用高頻的功能和內(nèi)容更容易找到。不僅如此，訪問知乎的速度也需要變得更快，不要把時(shí)間浪費(fèi)在等待上?；诖?，我們梳理出了如下幾個(gè)待修改的點(diǎn)：

1、梳理個(gè)人頁(yè)面的信息結(jié)構(gòu)，讓想找的內(nèi)容更好找

2、梳理內(nèi)容操作欄的優(yōu)先級(jí)，突出更重要的操作

3、內(nèi)容操作欄應(yīng)該隨時(shí)可訪問

4、詳細(xì)資料應(yīng)該可以就地查看而不用跳轉(zhuǎn)頁(yè)面

5、查看新私信應(yīng)該更加快速和流暢

6、優(yōu)化排版，采用了更易讀的字體和字號(hào)，提升閱讀效率

第二部分：具體如何去做好APP重設(shè)計(jì)呢？作為APP設(shè)計(jì)師，可以從哪幾個(gè)方面入手呢？

下面25學(xué)堂繼續(xù)以眾安保險(xiǎn)APP的重設(shè)計(jì)為例，跟大家解讀。

最重要的就是要確定APP重設(shè)計(jì)改版的視覺設(shè)計(jì)關(guān)鍵詞確定為：年輕、簡(jiǎn)潔、輕快

根據(jù)設(shè)計(jì)關(guān)鍵詞，我們重新定義了色彩、圖標(biāo)及界面元素和整體視覺風(fēng)格。

1、 強(qiáng)調(diào)品牌色，減少輔助色，明晰色彩層級(jí)

眾安品牌的綠色是生命、健康與活力的隱喻，同時(shí)也是年輕向上的體現(xiàn)，視覺方面決定沿用綠色的主色調(diào)。參考流行色趨勢(shì)，明亮的色彩更吸引用戶注意力，營(yíng)造輕快的感覺，因此我們進(jìn)行了適當(dāng)微調(diào)，提高色彩明度，讓產(chǎn)品看起來更加輕盈。

減少主要色彩數(shù)量，增加主色調(diào)的顯示比例，強(qiáng)化品牌感受;多層級(jí)的文字色階用于適配多樣的內(nèi)容與信息。

2、 圖標(biāo)輕量化、統(tǒng)一化

改版過程中，我們對(duì)App內(nèi)圖標(biāo)進(jìn)行了梳理和再設(shè)計(jì)。設(shè)計(jì)過程中，為了達(dá)到簡(jiǎn)潔易識(shí)別的目標(biāo)，對(duì)圖標(biāo)的造型、風(fēng)格、質(zhì)感進(jìn)行了很多探索。

為了打造產(chǎn)品的統(tǒng)一感，所有圖標(biāo)都沿用了相同的視覺元素，統(tǒng)一的圓角使圖標(biāo)有一定活潑感，不生硬，又保持了中性的感覺。

另外，根據(jù)應(yīng)用場(chǎng)景定制不同的設(shè)計(jì)策略，如一級(jí)導(dǎo)航、分類導(dǎo)航、輔助圖標(biāo)。

3、 化繁為簡(jiǎn)，減少頁(yè)面元素種類

迎合現(xiàn)在的設(shè)計(jì)趨勢(shì)，去除所有裝飾元素，減少不必要元素，適當(dāng)增加留白，保持頁(yè)面干凈、清晰。作為保險(xiǎn)產(chǎn)品，為了達(dá)到清晰易懂的目的，增加大量圖片和圖形化內(nèi)容，提高用戶的理解效率。

4、 統(tǒng)一視覺規(guī)范，提升工作效率

在完成主要頁(yè)面設(shè)計(jì)的同時(shí)，統(tǒng)一的視覺規(guī)范不僅能提高相關(guān)設(shè)計(jì)師的工作效率，也能更清晰的傳達(dá)給開發(fā)，提高整個(gè)團(tuán)隊(duì)的效率，同時(shí)，也為App中其他業(yè)務(wù)線的設(shè)計(jì)師提供規(guī)范，保持App內(nèi)不同產(chǎn)品風(fēng)格一致。

特別閱讀：

1、3位UI設(shè)計(jì)師對(duì)網(wǎng)易云音樂APP進(jìn)行改版重設(shè)計(jì)

2、淺談APP設(shè)計(jì)師如何去做好APP產(chǎn)品重設(shè)計(jì)

3、APP設(shè)計(jì)師原創(chuàng)之作：手機(jī)QQ視覺UI的重設(shè)計(jì)欣賞