網易資深視覺設計師：如何系統(tǒng)優(yōu)化APP？

為什么要視覺優(yōu)化？

大多數(shù)人看來從視覺層面的改版無足輕重，是因為它并不能給產品帶來實際利益。但作為產品的表現(xiàn)層來說，視覺語言能為用戶傳達出不同的心理感受。

戰(zhàn)略層面：通過視覺手段進行品牌升級，讓產品更加符合品牌定位，打造用戶信賴的品牌。

產品層面：目前市場上的產品同質化嚴重，需要根據產品自身特點設計出區(qū)別于其他的競品，來提升產品友好度。

個人層面：設計出優(yōu)秀的產品也是設計師自身的價值體現(xiàn)，并使設計師具有成就感。

如何優(yōu)化？
 

一. 尋找切入點

從視覺層面去優(yōu)化APP，我們可以從多方面下手。如何找到一個合理的切入點進行優(yōu)化這也是十分重要的。產品的版本迭代往往不會因為僅僅是優(yōu)化視覺而給到充足的開發(fā)資源，所以作為視覺設計師如何合理的提出視覺需求，并能推行落地是比較關鍵的。由此視覺設計師可以通過分模塊進行優(yōu)化，分批進行迭代，這樣在每個版本中都會給用戶帶來一些視覺層面上的驚喜。
 

二. 分模塊化優(yōu)化

從視覺層面上，我們可以歸納多個模塊，由于篇幅限制，下面我們以產品的四大模塊為例進行設計分析。

1. 加載模塊

加載貫穿用戶的整個行為路徑，合理的加載方式會大大提升用戶體驗。加載設計對產品的作用可以分為三個層面：

• 給到用戶及時有效的反饋。
• 消除用戶在等待中的焦慮感，使加載變成一個有趣的事兒，忘記時間概念。
• 通過加載方式進行品牌傳播，加深品牌在用戶心目中的印象。

從使用場景來講，視覺可以分別針對下拉加載、全局加載及上滑加載三種方式進行優(yōu)化。我們可以通過分析市場上加載方式做的比較優(yōu)秀的產品進行分析總結。下圖為百度外賣、途牛旅游以及熊貓看書的加載設計：

• 下拉加載：下拉加載是比較重要的設計點，優(yōu)秀形式的運用可以有效的增加品牌曝光幾率以及增加產品的友好度。

百度外賣通過運用吉祥物、頭盔、電動車、房屋等設計元素，給用戶營造出外賣小哥送外賣的場景，瞬間把用戶帶入外賣的場景，畫風可愛有趣，加上循環(huán)動效，使下拉加載在給用戶及時反饋的的同時，增加了趣味性，并通過吉祥物的運用來增加品牌曝光幾率。

途牛旅游通過途牛logo延伸出的吉祥物，并把旅游建筑風景作為背景，給用戶一種旅途中的景象，并把產品slogan恰當?shù)恼故?，品牌傳播性強?/span>

熊貓看書通過可愛的熊貓插畫和書籍的動效，讓讀書變成一件有趣的事兒。

• 全局加載：全局加載使用場景比較廣，當網絡不好的情況下，如何通過加載的方式消除用戶等待的焦慮感是十分重要的。

百度外賣采用和下拉加載統(tǒng)一的設計元素，整體風格保持一致，及時反饋、趣味性、品牌傳播并存。途牛旅游采用文案加吉祥物的線性輪廓作為加載方式，加載動效時呈現(xiàn)品牌色，整體比較直觀簡潔。熊貓看書通過書的元素和吉祥物的剪影動效切換，實現(xiàn)加載過程。

• 上滑加載：上滑加載是用戶比較頻繁的操作行為，三款產品都弱化了加載的效果。

百度外賣通過運用品牌色簡潔的加載圓環(huán)以及加載文案展示；途牛旅游通過吉祥物的輪廓以及品牌色渲染呈現(xiàn)；熊貓讀書直接采用文案樣式顯示。

小結

設計出優(yōu)秀的加載方式，同時滿足及時反饋、趣味性、品牌傳播功能，設計師們可以通過以下幾點進行優(yōu)化：

• 場景化設計：通過場景化設計，能夠讓用戶瞬間沉浸產品中，并加深用戶對產品的印象。
• 吉祥物的運用：該元素的運用主要能夠讓產品更加貼近用戶，并能充分展現(xiàn)出產品的特色和趣味性。
• 動效的運用：巧妙的動效設計會使人眼前一亮，操作流程也更加流暢。
• 周邊元素的運用：周邊元素指的是產品屬性，比如說，如果是閱讀類產品，設計上我們可以找一些相關的元素，書 本、文字、紙張、筆等等進行提煉運用到設計中來。
• 文案的運用：文案是最直接的呈現(xiàn)方式，通過slogan的呈現(xiàn)能夠更直觀傳達出品牌理念。
• 品牌色：用戶對顏色的記憶是敏銳的，通過運用品牌色加深用戶對產品的印象。

2. 缺省模塊

目前市場很多產品把缺省模塊設計的特別有意思，即使沒有搜索到結果或者網絡有問題的時候也不會讓用戶感到不快，有意思的缺省狀態(tài)會給用戶帶來一絲慰藉。下圖是淘寶和百度外賣的缺省狀態(tài)：

其實好的缺省狀態(tài)是有它獨特的設計體系，而不是設計師隨便畫個插畫就實現(xiàn)的。上圖是淘寶和百度外賣的缺省狀態(tài)。

淘寶的缺省狀態(tài)是用一種主題化的方式來呈現(xiàn)，根據不同的缺省狀態(tài)配上相關周邊元素，如運用空空的購物車來表達購物車是空的，網絡連不上通過星球和Wi-Fi元素表達，再加上品牌色的運用，為用戶傳達出最準確的主題信息。

百度外賣缺省狀態(tài)運用一種場景化的方式來呈現(xiàn)，通過運用產品吉祥物以及相關狀態(tài)的元素進行設計，每個缺省狀態(tài)都有一個場景，都是一個故事，讓缺省狀態(tài)更生動具體，并具有自己品牌的獨特風格。

小結

場景化和主題化的方式進行設計缺省狀態(tài)可以使頁面更有趣，但每種方式都有自身的優(yōu)缺點。主題化的設計風格通用性較強，受頁面風格限制弱一些。場景化設計風格比較具有趣味性，但擴展性較弱，每個缺省狀態(tài)都有屬于自己的狀態(tài)，這樣對于設計師來說設計成本較高。

3. 默認圖模塊

在產品設計中默認圖運用十分普遍，比如說當畫面沒有加載出時的默認圖、未登錄或初次登陸沒有更換頭像的默認圖。默認圖看似簡單，怎么設計出與產品相匹配的圖也需要設計師精心推敲。

• 默認加載圖：下圖為加載默認圖的三個方案：A方案為純灰色默認圖，B方案為帶有圖片icon的默認圖，C方案為帶有產品logo的默認圖。其實三種方案我們在市場產品中都能經常見到，從視覺層面來講C方案更優(yōu)，它不僅實現(xiàn)了加載默認圖的功能，而且增加了品牌的曝光率，使設計更具有價值。

• 頭像默認圖：其實默認頭像模塊有較大的優(yōu)化空間，通常默認頭像都為灰色頭像，設計上略顯單調，如圖所示。

從視覺層面上，設計師如何通過設計打破單調，并平衡界面上統(tǒng)一和豐富之間的關系，筆者總結了幾種比較常用的設計方法。

方法一：插畫形式

設計師可以根據產品定位進行默認圖設計，根據不同的用戶人群，進行畫像設計。比如說產品面向的用戶是高中生，默認圖可以根據學生形象進行設計；如果產品面對的用戶是白領，可以根據白領的特征進行設計。針對性的形象設計不僅使頁面更精致，也會把用戶帶入自己熟悉的場景，增加頁面的親切感，用戶的認同感。如下圖（默認頭像取自網絡）：

方法二：文字抓取形式

如果用戶較多的使用默認圖，我們可以通過技術手段進行批量匹配，視覺針對頭像背景進行幾種顏色的預設，然后抓取用戶名前兩個字或者后兩個字來生成用戶頭像，這樣頭像既不會顯得那么單調，而且整體視覺風格又相對統(tǒng)一。如下圖：

方法三：相關照片使用

有些比較垂直的產品默認頭像可以根據自己的產品特色進行匹配，比如說關于養(yǎng)寵物的app，默認頭像就可以采用不同的萌寵照片，讓產品具有自己的獨特調性。如下圖：

方法四：產品吉祥物或主題形象填充

如果產品擁有自己的吉祥物或產品形象，設計師也可以通過該設計元素進行設計，通過相關配飾或豐富的表情裝飾形成不同的默認頭像，不僅避免了頭像的單調而且加深了用戶對品牌的印象。

小結

默認圖模塊設計的方式是多樣的，但設計師需要把握住品牌性和形式感兩大核心要素。細節(jié)上經過設計師精心設計不僅提升用戶體驗，加深用戶對品牌的認同感，還能從側面展示出設計師的專業(yè)能力。我們可以找到更多的方法進行設計探索，使設計師獲取更多的靈感和思路。

4. 新手引導模塊

新手引導是為了讓用戶快速學習產品新的功能而出現(xiàn)的一種展現(xiàn)形式，它主要分為兩種類型：針對產品主推功能通常采用開機畫面引導為主；針對邏輯較強，步驟稍多的操作功能或是更改了常用功能的位置通常會采用氣泡形式進行展示。

1）開機畫面引導形式

下圖為百度地圖新手引導的設計圖：界面設計簡潔，主題明確，畫面有趣，讓用戶清晰的明白產品要主推的功能。

• 設計上采用產品吉祥物元素，加上需要展示的主題，讓畫面有趣并富有故事性。
• 布局上采用圖文上下排布，視覺語言統(tǒng)一。
• 文案上簡潔，主次明確。
• 交互上，用戶可以在任意一頁把頁面關閉，體驗更加人性化，操作更加方便。

2）氣泡引導形式

氣泡形式是一種比較直觀有效的方法告訴用戶目前發(fā)生的狀況，但是這種提示從一定程度上也干擾了用戶的操作路徑。所以當產品需要引導用戶時，怎樣減少用戶對產品的負面影響是設計師需要考慮的。下圖是兩個產品針對氣泡引導使用的不同方案：

閑魚APP在做新手引導時形式上采用半遮蓋的方式，盡量減少對用戶的干擾；交互上有添加關閉功能，讓用戶隨時可以離開；設計上采用圖文結合的方式，通過吉祥物形象來引導用戶閱讀文字信息，從各方面把干擾降到最低。

百度地圖采用另外的一種呈現(xiàn)方式，形式上采用全遮蓋的方式，給用戶最明確的展示；交互上「知道啦」按鈕代替了生硬的關閉按鈕，使交互更具情感化；設計上通過吉祥物超萌的表情來引導用戶瀏覽圖文信息，讓頁面更有故事性。

小結

頁面引導不管運用哪種形式設計，都是為產品功能服務的，在引導用戶關注新功能的同時，需要提升產品的好感度，避免對用戶產生干擾。

• 新手引導頁面不宜過多，最好是3±頁，用戶既能耐心的看完信息，又不至于引起用戶的反感。
• 設計形式盡量新穎有趣，來吸引用戶的視線。
• 交互上需要做到讓用戶隨時可以退出，盡量不要做強制用戶的設計。

三. 梳理模塊之間的關系

從視覺的角度去優(yōu)化每個模塊的同時，我們必須注意它們之間的關聯(lián)性，雖然每個模塊都相對獨立，但是需要在品牌特色上具有統(tǒng)一性。品牌特性的傳達是通過產品的每一個細節(jié)來體現(xiàn)的，一致性的視覺語言會使用戶對產品有更深的印象。所以產品每個模塊顏色的選取，設計元素的運用以及大的設計風格都需要設計師進行精準的把控。

總結

通過以上例子，希望能夠讓小伙伴們打開設計思路，讓自己有更多的設計方案來解決設計問題。

作為視覺設計師，我們首先要做到的就是設計上滿足業(yè)務需求，但在此基礎上怎么讓界面更加精細美觀具有設計感是設計師需要努力的方向，所以設計師應該更全面的了解每一個模塊，進行深層次的設計探索，讓設計更具有價值。與此同時，再對交互邏輯和業(yè)務需求全面深入的了解是設計師更高的進階方向，緊跟UXD趨勢，使自己不斷涉獵新的東西，保持創(chuàng)新的理念，提升設計價值和自身的社會競爭力。