如何對(duì)APP界面進(jìn)行改版設(shè)計(jì)呢？當(dāng)我們接到需求文檔或是原型設(shè)計(jì)稿后，結(jié)合之前對(duì)自身產(chǎn)品的分析與理解，同時(shí)完成與多款競(jìng)品視覺上的詳細(xì)比對(duì)，我們可以率先確立產(chǎn)品頁(yè)面的主要風(fēng)格。在做競(jìng)品分析時(shí)，我們可以很好的總結(jié)出當(dāng)前行業(yè)內(nèi)，同類型產(chǎn)品的設(shè)計(jì)趨勢(shì)，但并不是完全的套用或照搬。在設(shè)計(jì)時(shí)，我們要遵循著易用性第一的原則。

設(shè)計(jì)趨勢(shì)分析

1.漸變、活潑大膽的用色

在分析設(shè)計(jì)趨勢(shì)過程中，很多文章都有介紹漸變色、或者是活潑大膽用色的案例。不過，并不是所有產(chǎn)品都適合用漸變色或者是過于夸張的顏色來進(jìn)行設(shè)計(jì)。比如：金融類、新聞?lì)悺⒔逃惖?；?duì)于這些類型的產(chǎn)品，過于豐富或者是復(fù)雜的配色很容易分散用戶的注意力，無法讓使用者聚焦內(nèi)容本身。而對(duì)于電商或者是音樂類的產(chǎn)品，就可以用比較有活力的配色來突出渲染氣氛。

by George Frigo and Heartbeat Agency

在上面的案例中，左面為“機(jī)票訂票”的APP；右面是關(guān)于“派對(duì)、俱樂部”信息展示的APP，產(chǎn)品屬性上的不同，也直接導(dǎo)致了配色的巨大差別。

訂票產(chǎn)品——人們?cè)谟喥钡臅r(shí)候注意力都集中在時(shí)間，航班等票務(wù)信息上；所以，為了不分散用戶的注意力，以及避免對(duì)信息本身造成影響，產(chǎn)品選擇了藍(lán)、白、黑三種顏色進(jìn)行搭配。層級(jí)清晰，對(duì)內(nèi)容不產(chǎn)生打擾，簡(jiǎn)潔清楚，便于用戶查看信息。

資訊產(chǎn)品——右側(cè)的產(chǎn)品是關(guān)于“派對(duì)、俱樂部”的信息展示，所以選擇了較為夸張的漸變配色搭配來渲染氣氛。其中的信息量也并不大，所以添加了適量的元素進(jìn)行裝飾，整體搭配和諧。

2.實(shí)驗(yàn)性的界面排版結(jié)構(gòu)

UI8.net

豐富大膽的排版結(jié)構(gòu)可以在第一時(shí)間抓住使用者的眼球，大大增強(qiáng)了界面的整體設(shè)計(jì)感。不過，這種設(shè)計(jì)的局限性也很大。如果頁(yè)面中內(nèi)容信息過多、或是排版不當(dāng)、配圖不當(dāng)、語(yǔ)言不同等，都會(huì)很容易起到反效果，使得頁(yè)面過于雜亂無法聚焦。并且受限于手機(jī)屏幕的有限空間，應(yīng)用于網(wǎng)頁(yè)端要比應(yīng)用在APP端效果會(huì)好很多。

但這種類似于雜志類的排版風(fēng)格也并非完全不可取。應(yīng)用在H5頁(yè)面，或是詳情頁(yè)面等還是非常出彩的。其延伸的設(shè)計(jì)方式還包括：全屏背景圖片、海報(bào)樣式頁(yè)面、卡片切割式布局、懸浮效果等。

3.插畫元素的運(yùn)用

ofo、WALKUP、好好住 and KilaKila

現(xiàn)在越來越多的APP產(chǎn)品中都加入了插畫的設(shè)計(jì)元素。合適的插畫可以營(yíng)造氛圍、突出傳遞品牌價(jià)值、增加親和力、增加用戶粘性、使頁(yè)面更有趣；還能起到將抽象理念具象化的作用。可以更好更多樣的講述品牌故事與愿景，拉近產(chǎn)品與用戶之間的距離。

插畫元素可以用在產(chǎn)品中的很多地方，其中包括：開屏頁(yè)面、loading頁(yè)面、下拉刷新、banner、icon、詳情頁(yè)和一些指定頁(yè)面等等。我們?cè)谠O(shè)計(jì)繪制插畫過程中可以統(tǒng)一規(guī)范：顏色、造型、裝飾元素等等。這樣可以反復(fù)利用、快速修改、增加效率。

4.適量元素的運(yùn)用

扁平化概念最核心的地方就是：去掉冗余的裝飾效果，去掉多余的透視，紋理，漸變等等能做出3D效果的元素。讓“信息”本身重新作為核心被凸顯出來。更加簡(jiǎn)單直接且不被過分干擾的將信息展示出來，減少用戶在使用產(chǎn)品時(shí)所產(chǎn)生的認(rèn)知障礙。

之后出現(xiàn)了扁平化2.0的設(shè)計(jì)風(fēng)格，元素保留微投影、微漸變等輕質(zhì)感形式；使得元素細(xì)節(jié)更加豐富。2.0的出現(xiàn)是對(duì)過分扁平單一的界面風(fēng)格進(jìn)行的提升，使頁(yè)面風(fēng)格不至于過分單調(diào)，避免審美疲勞。

提到APP的設(shè)計(jì)或者是更新改版，那么就不得不說扁平化這個(gè)詞?，F(xiàn)在不光是谷歌的Material Design設(shè)計(jì)語(yǔ)言，從iOS11開始蘋果的設(shè)計(jì)語(yǔ)言中也加入了卡片、陰影等樣式。隨著設(shè)計(jì)語(yǔ)言的變化統(tǒng)一，扁平化風(fēng)格也在合理的范圍內(nèi)更加豐富和進(jìn)化，而我們可使用的形式也將越來越多。

5.扁平化設(shè)計(jì)風(fēng)格

Johny vino? and Eduard

扁平化概念最核心的地方就是：去掉冗余的裝飾效果，去掉多余的透視，紋理，漸變等等能做出3D效果的元素。讓“信息”本身重新作為核心被凸顯出來。更加簡(jiǎn)單直接且不被過分干擾的將信息展示出來，減少用戶在使用產(chǎn)品時(shí)所產(chǎn)生的認(rèn)知障礙。

之后出現(xiàn)了扁平化2.0的設(shè)計(jì)風(fēng)格，元素保留微投影、微漸變等輕質(zhì)感形式；使得元素細(xì)節(jié)更加豐富。2.0的出現(xiàn)是對(duì)過分扁平單一的界面風(fēng)格進(jìn)行的提升，使頁(yè)面風(fēng)格不至于過分單調(diào)，避免審美疲勞。

提到APP的設(shè)計(jì)或者是更新改版，那么就不得不說扁平化這個(gè)詞?，F(xiàn)在不光是谷歌的Material Design設(shè)計(jì)語(yǔ)言，從iOS11開始蘋果的設(shè)計(jì)語(yǔ)言中也加入了卡片、陰影等樣式。隨著設(shè)計(jì)語(yǔ)言的變化統(tǒng)一，扁平化風(fēng)格也在合理的范圍內(nèi)更加豐富和進(jìn)化，而我們可使用的形式也將越來越多。

6.動(dòng)效的合理使用

動(dòng)效的設(shè)計(jì)在如今已經(jīng)越來越被重視。優(yōu)秀的動(dòng)態(tài)效果可以和頁(yè)面銜接搭配的非常完美?？梢允贡馄降捻?yè)面富有活力，增加產(chǎn)品的體驗(yàn)舒適度；減少用戶的等待時(shí)間和一些負(fù)面情緒，讓使用者眼前一亮。相反，過于復(fù)雜或絢麗的動(dòng)效，往往并不能起到很好的效果。不僅會(huì)分散用戶的注意力，干擾產(chǎn)品本身的內(nèi)容；還會(huì)加大開發(fā)成本，加大產(chǎn)品體積。

我將目前比較主流的設(shè)計(jì)趨勢(shì)進(jìn)行了整理總結(jié)，篩選出了比較適合在APP上面進(jìn)行設(shè)計(jì)的幾種形式。之后，我們可以逐條的帶入到我們產(chǎn)品中進(jìn)行嘗試；將形式細(xì)化成樣式，結(jié)合產(chǎn)品屬性進(jìn)行demo的設(shè)計(jì)。同時(shí)比對(duì)競(jìng)品，分析它們界面搭配的優(yōu)缺點(diǎn)來進(jìn)行我們自身產(chǎn)品的優(yōu)化。

梳理改版要點(diǎn)

1.競(jìng)品分析，取長(zhǎng)補(bǔ)短

分析市場(chǎng)上與自身產(chǎn)品屬性相匹配的成功案例，也可以搜集間接競(jìng)品備選；分析其優(yōu)點(diǎn)并提取梳理，結(jié)合自身產(chǎn)品的內(nèi)容框架進(jìn)行比對(duì)優(yōu)化。這樣做的好處是避免閉門造車，學(xué)習(xí)其他平臺(tái)優(yōu)點(diǎn)可以提高效率。但這并不代表要一味的抄襲，這么做的目的是提高自我，尋求突破。

以金融產(chǎn)品為例：產(chǎn)品中會(huì)涉及到實(shí)名認(rèn)證、資金流入流出、投資理財(cái)、利息收益等等內(nèi)容。那么對(duì)于用戶來說產(chǎn)品的安全性肯定是放在第一位的，我們的頁(yè)面要設(shè)計(jì)的簡(jiǎn)潔精致，要想方設(shè)法打消使用者的疑慮，增加用戶的信任感。

螞蟻財(cái)富、度小滿理財(cái)、招聯(lián)金融、京東金融

上面四款產(chǎn)品都是大型的金融理財(cái)平臺(tái)。這些產(chǎn)品結(jié)構(gòu)清晰、色彩鮮明、細(xì)節(jié)把控到位、以純色為主、都使用了扁平化設(shè)計(jì)等等；

在優(yōu)化升級(jí)自身產(chǎn)品時(shí)，不能完全照搬其他平臺(tái)的設(shè)計(jì)；這樣到最后就會(huì)變成一個(gè)東拼西湊的另類產(chǎn)品。我們需要分析這些案例中的設(shè)計(jì)要點(diǎn)是否符合自身產(chǎn)品的屬性。

比如：

①平臺(tái)展示類的金融產(chǎn)品是否需要把各種信息突出顯示？是否需要添加banner來進(jìn)行引流？

②首頁(yè)顯示內(nèi)容過多，為避免視覺主體混亂是否可以去除掉多余的裝飾性元素？

③普通的金融理財(cái)平臺(tái)還有沒有必要加banner？?jī)?nèi)容不足的情況下，是否有必要添加icon。

2.設(shè)立埋點(diǎn)，搜集數(shù)據(jù)

數(shù)據(jù)的支撐對(duì)于改版有非常重要的作用。通過在主要頁(yè)面的按鈕或是可點(diǎn)擊區(qū)域等位置進(jìn)行埋點(diǎn)處理，我們可以知道相關(guān)的重要數(shù)據(jù)。例如：首頁(yè)的banner點(diǎn)擊量很少，我們可以分析其原因，或者如果用處不大我們是否可以直接去掉banner部分；首頁(yè)按鈕點(diǎn)擊量很少，我們更換字段或者位置看看點(diǎn)擊量是否會(huì)有提升；頁(yè)面中的點(diǎn)擊區(qū)域點(diǎn)擊量很高的原因是什么，改版時(shí)是否需要保留。所以，埋點(diǎn)得到的數(shù)據(jù)對(duì)我們的改版有很大的幫助。另外，我們還可以通過官方的微信微博、下載平臺(tái)等途徑搜集到用戶的反饋，來強(qiáng)化數(shù)據(jù)。

3.視覺信息展示的合理性與一致性

絕大對(duì)數(shù)的APP界面的版式都是比較規(guī)整的排布，設(shè)計(jì)的時(shí)候要考慮到大多數(shù)用戶的使用習(xí)慣。像上文提到的雜志形式的排版在實(shí)際的項(xiàng)目中很少出現(xiàn)；復(fù)雜的設(shè)計(jì)和較高的開發(fā)成本讓這種形式存在很大的風(fēng)險(xiǎn)。

配色上，金融產(chǎn)品當(dāng)中很多都是以純色為主，這么做是為了避免一些花哨的設(shè)計(jì)手法打擾到內(nèi)容主體；尤其是金融這種比較敏感的產(chǎn)品。當(dāng)然純色并不是絕對(duì)的，合理的漸變形式搭配也可以有不錯(cuò)的效果。例如：京東金融頂部的漸變色卡片的處理形式。因此我們要結(jié)合實(shí)際情況來進(jìn)行設(shè)計(jì)。

我們?cè)谠O(shè)計(jì)頁(yè)面時(shí)，要保持一致性的原則，不可把各個(gè)頁(yè)面做成各不相同的風(fēng)格。間距、配色、插畫也是一樣的道理，設(shè)立規(guī)范與主要樣式之后就要貫穿始終，切不可隨意的大面積變換。

4.換位思考

無論是分析還是設(shè)計(jì)，我們往往都是站在制作者的身份去看待一款產(chǎn)品的。而產(chǎn)品上線后，用戶使用時(shí)可能會(huì)出現(xiàn)五花八門的意外情況。我們雖然無法百分百的理清所有可能出現(xiàn)的問題，但我們應(yīng)該在設(shè)計(jì)之前就“換位思考”，站在用戶的角度去看待審視自己的產(chǎn)品；盡可能的分析出所有不合理的地方，以便盡早處理。所以，在改版前充分搜集客戶的需求以及使用體驗(yàn)就變得格外重要。

同時(shí)，換位思考也可以實(shí)行在團(tuán)隊(duì)身上。我們可以把自己的想法與大家分享，集思廣益頭腦風(fēng)暴；讓團(tuán)隊(duì)中的成員都參與進(jìn)來，聽取他們的意見。從中梳理出更多的有益的點(diǎn)子。

5.刻意的改變

有些時(shí)候，為了追求快速與收益，不少產(chǎn)品的設(shè)計(jì)會(huì)選擇走捷徑。市場(chǎng)上趨于同質(zhì)化設(shè)計(jì)的產(chǎn)品也越來越多。

不僅僅是軟件上，硬件上也尤為突出。

各大手機(jī)廠商競(jìng)相模仿iPhone x （圖片來自網(wǎng)絡(luò)）

劉海屏指的是手機(jī)屏幕正上方由于追求極致邊框而采用的一種手機(jī)解決方案，里面集成了前置攝像頭以及各種的精密元件。可以說是為了全面屏而做的一種妥協(xié)。豎排的后置攝像頭也是同樣的道理。由于頂部空間被壓縮而由之前的橫排攝像頭改為了豎排。

而有些廠商并沒有那么多的精密元件放在前面，卻依然使用了劉海屏；并且把后面的攝像頭變?yōu)榱素Q排。之后，OPPO和vivo相繼推出了真·全面屏手機(jī)。雖然，在機(jī)身內(nèi)部做了一些妥協(xié)，但我們看到了全面屏設(shè)計(jì)的突破與更多可能。

所以，我們?cè)谠O(shè)計(jì)頁(yè)面的時(shí)候可以刻意的去尋求不同。雖然都是遵循扁平化的設(shè)計(jì)趨勢(shì)，但就像扁平化2.0，以及最近在網(wǎng)絡(luò)上瘋傳的“All-White”一樣，都是在扁平化的基礎(chǔ)上不斷地進(jìn)行新的嘗試與創(chuàng)新。

All-White

6.團(tuán)隊(duì)測(cè)試

和我們?cè)谧鲈O(shè)計(jì)之初集思廣益的時(shí)候一樣，當(dāng)頁(yè)面設(shè)計(jì)完成后也可以讓大家共同參與進(jìn)來，一起搜索頁(yè)面的邏輯和設(shè)計(jì)當(dāng)中的問題。

如果時(shí)間充裕，我們可以用Axure、Principle等工具做成可交互的demo讓大家進(jìn)行測(cè)試。這樣做可以更加直觀的發(fā)現(xiàn)整套頁(yè)面中的問題。

后期整理

當(dāng)我們完成全部的設(shè)計(jì)并測(cè)試完畢之后，就要開始準(zhǔn)備與開發(fā)部門對(duì)接；這里面很重要的一項(xiàng)工作就是切圖和標(biāo)注。

如今的技術(shù)越來越完善，我們可以借助其他的插件快速完成標(biāo)注的工作。我比較常用的是藍(lán)湖，可以把做好的頁(yè)面上傳至藍(lán)湖，它會(huì)幫助我們自動(dòng)完成標(biāo)注工作，不需要其他操作。比之前一步步的標(biāo)注數(shù)值，導(dǎo)出圖片效率提升了無數(shù)倍。

切圖也是同樣的道理，在軟件中標(biāo)出要切圖的部分，然后上傳讓開發(fā)人員自行下載。某些特殊的圖片可能需要我們單獨(dú)的標(biāo)注并切出來，其他絕大部分的元素都可以用軟件幫助切圖。

這些插件大大提高了我們后期輸出的速度，而且效果也非常的好，節(jié)省了我們很多時(shí)間。

當(dāng)然，完成全部工作之后，文件的整理命名也是非常重要的一項(xiàng)內(nèi)容。我們要在工作中養(yǎng)成好的習(xí)慣，每個(gè)文件都要命好名，分好文件夾，方便我們后續(xù)的修改與總結(jié)。

命名方式可以與切片名稱類似（組件_類別_功能_狀態(tài))。如果頁(yè)面過多，而我們并沒有及時(shí)整理的話，會(huì)對(duì)我們后續(xù)的工作或者是工作交接造成很大的困擾。

梳理了一下個(gè)人認(rèn)為改版時(shí)需要注意的要點(diǎn)。不同公司的要求會(huì)有不同，僅供參考。

作者：FLY

公眾號(hào)： 小阿田的設(shè)計(jì)筆記