起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識APP改版筆記：界面篇
當我們接到需求文檔或是原型設計稿后，結合之前對自身產品的分析與理解，同時完成與多款競品視覺上的詳細比對，我們可以率先確立產品頁面的主要風格。在做競品分析時，我們可以很好的總結出當前行業內，同類型產品的設計趨勢，但并不是完全的套用或照搬。在設計時，我們要遵循著易用性第一的原則。
設計趨勢分析
1. 漸變、活潑大膽的用色
在分析設計趨勢過程中，很多文章都有介紹漸變色、或者是活潑大膽用色的案例。不過，并不是所有產品都適合用漸變色或者是過于夸張的顏色來進行設計。比如：金融類、新聞類、教育類等；對于這些類型的產品，過于豐富或者是復雜的配色很容易分散用戶的注意力，無法讓使用者聚焦內容本身。而對于電商或者是音樂類的產品，就可以用比較有活力的配色來突出渲染氣氛。
by George Frigo and Heartbeat Agency
在上面的案例中，左面為“機票訂票”的APP；右面是關于“派對、俱樂部”信息展示的APP，產品屬性上的不同，也直接導致了配色的巨大差別。
訂票產品——人們在訂票的時候注意力都集中在時間，航班等票務信息上。所以，為了不分散用戶的注意力，以及避免對信息本身造成影響，產品選擇了藍、白、黑三種顏色進行搭配。層級清晰，對內容不產生打擾，簡潔清楚，便于用戶查看信息。
資訊產品——右側的產品是關于“派對、俱樂部”的信息展示，所以選擇了較為夸張的漸變配色搭配來渲染氣氛。其中的信息量也并不大，所以添加了適量的元素進行裝飾，整體搭配和諧。
2. 實驗性的界面排版結構
UI8.net
豐富大膽的排版結構可以在第一時間抓住使用者的眼球，大大增強了界面的整體設計感。不過，這種設計的局限性也很大。如果頁面中內容信息過多、或是排版不當、配圖不當、語言不同等，都會很容易起到反效果，使得頁面過于雜亂無法聚焦。并且受限于手機屏幕的有限空間，應用于網頁端要比應用在APP端效果會好很多。
但這種類似于雜志類的排版風格也并非完全不可取。應用在H5頁面，或是詳情頁面等還是非常出彩的。其延伸的設計方式還包括：全屏背景圖片、海報樣式頁面、卡片切割式布局、懸浮效果等。
3. 插畫元素的運用
ofo、WALKUP、好好住 and KilaKila
現在越來越多的APP產品中都加入了插畫的設計元素。合適的插畫可以營造氛圍、突出傳遞品牌價值、增加親和力、增加用戶粘性、使頁面更有趣；還能起到將抽象理念具象化的作用?？梢愿酶鄻拥闹v述品牌故事與愿景，拉近產品與用戶之間的距離。
插畫元素可以用在產品中的很多地方，其中包括：開屏頁面、loading頁面、下拉刷新、banner、icon、詳情頁和一些指定頁面等等。我們在設計繪制插畫過程中可以統一規范：顏色、造型、裝飾元素等等。這樣可以反復利用、快速修改、增加效率。
4. 適量元素的運用
扁平化概念最核心的地方就是：去掉冗余的裝飾效果，去掉多余的透視，紋理，漸變等等能做出3D效果的元素。讓“信息”本身重新作為核心被凸顯出來，更加簡單直接且不被過分干擾的將信息展示出來，減少用戶在使用產品時所產生的認知障礙。
之后出現了扁平化2.0的設計風格，元素保留微投影、微漸變等輕質感形式；使得元素細節更加豐富。2.0的出現是對過分扁平單一的界面風格進行的提升，使頁面風格不至于過分單調，避免審美疲勞。
提到APP的設計或者是更新改版，那么就不得不說扁平化這個詞?，F在不光是谷歌的Material Design設計語言，從iOS11開始蘋果的設計語言中也加入了卡片、陰影等樣式。隨著設計語言的變化統一，扁平化風格也在合理的范圍內更加豐富和進化，而我們可使用的形式也將越來越多。
5. 扁平化設計風格
Johny vino? and Eduard
扁平化概念最核心的地方就是：去掉冗余的裝飾效果，去掉多余的透視，紋理，漸變等等能做出3D效果的元素，讓“信息”本身重新作為核心被凸顯出來，更加簡單直接且不被過分干擾的將信息展示出來，減少用戶在使用產品時所產生的認知障礙。
之后出現了扁平化2.0的設計風格，元素保留微投影、微漸變等輕質感形式；使得元素細節更加豐富。2.0的出現是對過分扁平單一的界面風格進行的提升，使頁面風格不至于過分單調，避免審美疲勞。
提到APP的設計或者是更新改版，那么就不得不說扁平化這個詞?，F在不光是谷歌的Material Design設計語言，從iOS11開始蘋果的設計語言中也加入了卡片、陰影等樣式。隨著設計語言的變化統一，扁平化風格也在合理的范圍內更加豐富和進化，而我們可使用的形式也將越來越多。
6. 動效的合理使用
動效的設計在如今已經越來越被重視。優秀的動態效果可以和頁面銜接搭配的非常完美?？梢允贡馄降捻撁娓挥谢盍?，增加產品的體驗舒適度。減少用戶的等待時間和一些負面情緒，讓使用者眼前一亮。相反，過于復雜或絢麗的動效，往往并不能起到很好的效果。不僅會分散用戶的注意力，干擾產品本身的內容，還會加大開發成本，加大產品體積。
我將目前比較主流的設計趨勢進行了整理總結，篩選出了比較適合在APP上面進行設計的幾種形式。之后，我們可以逐條的帶入到我們產品中進行嘗試，將形式細化成樣式，結合產品屬性進行demo的設計。同時比對競品，分析它們界面搭配的優缺點來進行我們自身產品的優化。
梳理改版要點
1. 競品分析，取長補短
分析市場上與自身產品屬性相匹配的成功案例，也可以搜集間接競品備選；分析其優點并提取梳理，結合自身產品的內容框架進行比對優化。這樣做的好處是避免閉門造車，學習其他平臺優點可以提高效率。但這并不代表要一味的抄襲，這么做的目的是提高自我，尋求突破。
以金融產品為例：產品中會涉及到實名認證、資金流入流出、投資理財、利息收益等等內容。那么對于用戶來說產品的安全性肯定是放在第一位的，我們的頁面要設計的簡潔精致，要想方設法打消使用者的疑慮，增加用戶的信任感。
螞蟻財富、度小滿理財、招聯金融、京東金融
上面四款產品都是大型的金融理財平臺。這些產品結構清晰、色彩鮮明、細節把控到位、以純色為主、都使用了扁平化設計等等；
在優化升級自身產品時，不能完全照搬其他平臺的設計；這樣到最后就會變成一個東拼西湊的另類產品。我們需要分析這些案例中的設計要點是否符合自身產品的屬性。
比如：
- 平臺展示類的金融產品是否需要把各種信息突出顯示？是否需要添加banner來進行引流？
- 首頁顯示內容過多，為避免視覺主體混亂是否可以去除掉多余的裝飾性元素？
- 普通的金融理財平臺還有沒有必要加banner？內容不足的情況下，是否有必要添加icon。
2. 設立埋點，搜集數據
數據的支撐對于改版有非常重要的作用。通過在主要頁面的按鈕或是可點擊區域等位置進行埋點處理，我們可以知道相關的重要數據。
例如：首頁的banner點擊量很少，我們可以分析其原因，或者如果用處不大我們是否可以直接去掉banner部分；首頁按鈕點擊量很少，我們更換字段或者位置看看點擊量是否會有提升；頁面中的點擊區域點擊量很高的原因是什么，改版時是否需要保留。
所以，埋點得到的數據對我們的改版有很大的幫助。另外，我們還可以通過官方的微信微博、下載平臺等途徑搜集到用戶的反饋，來強化數據。
3. 視覺信息展示的合理性與一致性
絕大對數的APP界面的版式都是比較規整的排布，設計的時候要考慮到大多數用戶的使用習慣。像上文提到的雜志形式的排版在實際的項目中很少出現；復雜的設計和較高的開發成本讓這種形式存在很大的風險。
配色上，金融產品當中很多都是以純色為主，這么做是為了避免一些花哨的設計手法打擾到內容主體；尤其是金融這種比較敏感的產品。當然純色并不是絕對的，合理的漸變形式搭配也可以有不錯的效果。例如：京東金融頂部的漸變色卡片的處理形式，因此我們要結合實際情況來進行設計。
我們在設計頁面時，要保持一致性的原則，不可把各個頁面做成各不相同的風格。間距、配色、插畫也是一樣的道理，設立規范與主要樣式之后就要貫穿始終，切不可隨意的大面積變換。
4. 換位思考
無論是分析還是設計，我們往往都是站在制作者的身份去看待一款產品的。而產品上線后，用戶使用時可能會出現五花八門的意外情況。我們雖然無法百分百的理清所有可能出現的問題，但我們應該在設計之前就“換位思考”，站在用戶的角度去看待審視自己的產品，盡可能的分析出所有不合理的地方，以便盡早處理。所以，在改版前充分搜集客戶的需求以及使用體驗就變得格外重要。
同時，換位思考也可以實行在團隊身上。我們可以把自己的想法與大家分享，集思廣益頭腦風暴；讓團隊中的成員都參與進來，聽取他們的意見。從中梳理出更多的有益的點子。
5. 刻意的改變
有些時候，為了追求快速與收益，不少產品的設計會選擇走捷徑。市場上趨于同質化設計的產品也越來越多。
不僅僅是軟件上，硬件上也尤為突出。
各大手機廠商競相模仿iPhone x （圖片來自網絡）
劉海屏指的是手機屏幕正上方由于追求極致邊框而采用的一種手機解決方案，里面集成了前置攝像頭以及各種的精密元件，可以說是為了全面屏而做的一種妥協。豎排的后置攝像頭也是同樣的道理，由于頂部空間被壓縮而由之前的橫排攝像頭改為了豎排。
而有些廠商并沒有那么多的精密元件放在前面，卻依然使用了劉海屏；并且把后面的攝像頭變為了豎排。之后，OPPO和vivo相繼推出了真全面屏手機，雖然，在機身內部做了一些妥協，但我們看到了全面屏設計的突破與更多可能。
所以，我們在設計頁面的時候可以刻意的去尋求不同。雖然都是遵循扁平化的設計趨勢，但就像扁平化2.0，以及最近在網絡上瘋傳的“All-White”一樣，都是在扁平化的基礎上不斷地進行新的嘗試與創新。
All-White
6. 團隊測試
和我們在做設計之初集思廣益的時候一樣，當頁面設計完成后也可以讓大家共同參與進來，一起搜索頁面的邏輯和設計當中的問題。
如果時間充裕，我們可以用Axure、Principle等工具做成可交互的demo讓大家進行測試，這樣做可以更加直觀的發現整套頁面中的問題。
后期整理
當我們完成全部的設計并測試完畢之后，就要開始準備與開發部門對接，這里面很重要的一項工作就是切圖和標注。
如今的技術越來越完善，我們可以借助其他的插件快速完成標注的工作。我比較常用的是藍湖，可以把做好的頁面上傳至藍湖，它會幫助我們自動完成標注工作，不需要其他操作。比之前一步步的標注數值，導出圖片效率提升了無數倍。
切圖也是同樣的道理，在軟件中標出要切圖的部分，然后上傳讓開發人員自行下載。某些特殊的圖片可能需要我們單獨的標注并切出來，其他絕大部分的元素都可以用軟件幫助切圖。
這些插件大大提高了我們后期輸出的速度，而且效果也非常的好，節省了我們很多時間。
當然，完成全部工作之后，文件的整理命名也是非常重要的一項內容。我們要在工作中養成好的習慣，每個文件都要命好名，分好文件夾，方便我們后續的修改與總結。
命名方式可以與切片名稱類似（組件_類別_功能_狀態），如果頁面過多，而我們并沒有及時整理的話，會對我們后續的工作或者是工作交接造成很大的困擾。
梳理了一下個人認為改版時需要注意的要點，不同公司的要求會有不同，僅供參考。后面沒有提到動效的內容，我會在后面的一篇著重整理關于動效方面的內容。
作者：FLYXMF，微信公眾號：Fly Lab
本文由 @FLYXMF 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
??