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

設(shè)計趨勢分析

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

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

by George Frigo and Heartbeat Agency

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

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

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

2. 實驗性的界面排版結(jié)構(gòu)

UI8.net

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

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

3. 插畫元素的運用

ofo、WALKUP、好好住 and KilaKila

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

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

4. 適量元素的運用

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

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

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

5. 扁平化設(shè)計風格

Johny vino? and Eduard

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

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

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

6. 動效的合理使用

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

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

梳理改版要點

1. 競品分析，取長補短

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

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

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

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

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

比如：

1. 平臺展示類的金融產(chǎn)品是否需要把各種信息突出顯示？是否需要添加banner來進行引流？
2. 首頁顯示內(nèi)容過多，為避免視覺主體混亂是否可以去除掉多余的裝飾性元素？
3. 普通的金融理財平臺還有沒有必要加banner？內(nèi)容不足的情況下，是否有必要添加icon。

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

數(shù)據(jù)的支撐對于改版有非常重要的作用。通過在主要頁面的按鈕或是可點擊區(qū)域等位置進行埋點處理，我們可以知道相關(guān)的重要數(shù)據(jù)。

例如：首頁的banner點擊量很少，我們可以分析其原因，或者如果用處不大我們是否可以直接去掉banner部分；首頁按鈕點擊量很少，我們更換字段或者位置看看點擊量是否會有提升；頁面中的點擊區(qū)域點擊量很高的原因是什么，改版時是否需要保留。

所以，埋點得到的數(shù)據(jù)對我們的改版有很大的幫助。另外，我們還可以通過官方的微信微博、下載平臺等途徑搜集到用戶的反饋，來強化數(shù)據(jù)。

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

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

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

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

4. 換位思考

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

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

5. 刻意的改變

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

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

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

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

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

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

All-White

6. 團隊測試

和我們在做設(shè)計之初集思廣益的時候一樣，當頁面設(shè)計完成后也可以讓大家共同參與進來，一起搜索頁面的邏輯和設(shè)計當中的問題。

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

后期整理

當我們完成全部的設(shè)計并測試完畢之后，就要開始準備與開發(fā)部門對接，這里面很重要的一項工作就是切圖和標注。

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

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

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

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

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

梳理了一下個人認為改版時需要注意的要點，不同公司的要求會有不同，僅供參考。后面沒有提到動效的內(nèi)容，我會在后面的一篇著重整理關(guān)于動效方面的內(nèi)容。

作者：FLYXMF，微信公眾號：Fly Lab

本文由 @FLYXMF 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。