旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國(guó)統(tǒng)一咨詢熱線:010-5367 2995
首頁(yè) > 今日必讀 > 網(wǎng)易資深視覺設(shè)計(jì)師:如何系統(tǒng)優(yōu)化APP?

網(wǎng)易資深視覺設(shè)計(jì)師:如何系統(tǒng)優(yōu)化APP?

時(shí)間:2018-01-25來源:m.5wd995.cn點(diǎn)擊量:作者:fubowen
時(shí)間:2018-01-25點(diǎn)擊量:作者:fubowen

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

大多數(shù)人看來從視覺層面的改版無足輕重,是因?yàn)樗⒉荒芙o產(chǎn)品帶來實(shí)際利益。但作為產(chǎn)品的表現(xiàn)層來說,視覺語言能為用戶傳達(dá)出不同的心理感受。

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

產(chǎn)品層面:目前市場(chǎng)上的產(chǎn)品同質(zhì)化嚴(yán)重,需要根據(jù)產(chǎn)品自身特點(diǎn)設(shè)計(jì)出區(qū)別于其他的競(jìng)品,來提升產(chǎn)品友好度。

個(gè)人層面:設(shè)計(jì)出優(yōu)秀的產(chǎn)品也是設(shè)計(jì)師自身的價(jià)值體現(xiàn),并使設(shè)計(jì)師具有成就感。

如何優(yōu)化?
 

一. 尋找切入點(diǎn)

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

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

從視覺層面上,我們可以歸納多個(gè)模塊,由于篇幅限制,下面我們以產(chǎn)品的四大模塊為例進(jìn)行設(shè)計(jì)分析。

1. 加載模塊

加載貫穿用戶的整個(gè)行為路徑,合理的加載方式會(huì)大大提升用戶體驗(yàn)。加載設(shè)計(jì)對(duì)產(chǎn)品的作用可以分為三個(gè)層面:

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

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

  • 下拉加載:下拉加載是比較重要的設(shè)計(jì)點(diǎn),優(yōu)秀形式的運(yùn)用可以有效的增加品牌曝光幾率以及增加產(chǎn)品的友好度。

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

途牛旅游通過途牛logo延伸出的吉祥物,并把旅游建筑風(fēng)景作為背景,給用戶一種旅途中的景象,并把產(chǎn)品slogan恰當(dāng)?shù)恼故?,品牌傳播性?qiáng)。

熊貓看書通過可愛的熊貓插畫和書籍的動(dòng)效,讓讀書變成一件有趣的事兒。

  • 全局加載:全局加載使用場(chǎng)景比較廣,當(dāng)網(wǎng)絡(luò)不好的情況下,如何通過加載的方式消除用戶等待的焦慮感是十分重要的。

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

  • 上滑加載:上滑加載是用戶比較頻繁的操作行為,三款產(chǎn)品都弱化了加載的效果。

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

小結(jié)

設(shè)計(jì)出優(yōu)秀的加載方式,同時(shí)滿足及時(shí)反饋、趣味性、品牌傳播功能,設(shè)計(jì)師們可以通過以下幾點(diǎn)進(jìn)行優(yōu)化:

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

2. 缺省模塊

目前市場(chǎng)很多產(chǎn)品把缺省模塊設(shè)計(jì)的特別有意思,即使沒有搜索到結(jié)果或者網(wǎng)絡(luò)有問題的時(shí)候也不會(huì)讓用戶感到不快,有意思的缺省狀態(tài)會(huì)給用戶帶來一絲慰藉。下圖是淘寶和百度外賣的缺省狀態(tài):

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

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

百度外賣缺省狀態(tài)運(yùn)用一種場(chǎng)景化的方式來呈現(xiàn),通過運(yùn)用產(chǎn)品吉祥物以及相關(guān)狀態(tài)的元素進(jìn)行設(shè)計(jì),每個(gè)缺省狀態(tài)都有一個(gè)場(chǎng)景,都是一個(gè)故事,讓缺省狀態(tài)更生動(dòng)具體,并具有自己品牌的獨(dú)特風(fēng)格。

小結(jié)

場(chǎng)景化和主題化的方式進(jìn)行設(shè)計(jì)缺省狀態(tài)可以使頁(yè)面更有趣,但每種方式都有自身的優(yōu)缺點(diǎn)。主題化的設(shè)計(jì)風(fēng)格通用性較強(qiáng),受頁(yè)面風(fēng)格限制弱一些。場(chǎng)景化設(shè)計(jì)風(fēng)格比較具有趣味性,但擴(kuò)展性較弱,每個(gè)缺省狀態(tài)都有屬于自己的狀態(tài),這樣對(duì)于設(shè)計(jì)師來說設(shè)計(jì)成本較高。

3. 默認(rèn)圖模塊

在產(chǎn)品設(shè)計(jì)中默認(rèn)圖運(yùn)用十分普遍,比如說當(dāng)畫面沒有加載出時(shí)的默認(rèn)圖、未登錄或初次登陸沒有更換頭像的默認(rèn)圖。默認(rèn)圖看似簡(jiǎn)單,怎么設(shè)計(jì)出與產(chǎn)品相匹配的圖也需要設(shè)計(jì)師精心推敲。

  • 默認(rèn)加載圖:下圖為加載默認(rèn)圖的三個(gè)方案:A方案為純灰色默認(rèn)圖,B方案為帶有圖片icon的默認(rèn)圖,C方案為帶有產(chǎn)品logo的默認(rèn)圖。其實(shí)三種方案我們?cè)谑袌?chǎng)產(chǎn)品中都能經(jīng)常見到,從視覺層面來講C方案更優(yōu),它不僅實(shí)現(xiàn)了加載默認(rèn)圖的功能,而且增加了品牌的曝光率,使設(shè)計(jì)更具有價(jià)值。

  • 頭像默認(rèn)圖:其實(shí)默認(rèn)頭像模塊有較大的優(yōu)化空間,通常默認(rèn)頭像都為灰色頭像,設(shè)計(jì)上略顯單調(diào),如圖所示。

從視覺層面上,設(shè)計(jì)師如何通過設(shè)計(jì)打破單調(diào),并平衡界面上統(tǒng)一和豐富之間的關(guān)系,筆者總結(jié)了幾種比較常用的設(shè)計(jì)方法。

方法一:插畫形式

設(shè)計(jì)師可以根據(jù)產(chǎn)品定位進(jìn)行默認(rèn)圖設(shè)計(jì),根據(jù)不同的用戶人群,進(jìn)行畫像設(shè)計(jì)。比如說產(chǎn)品面向的用戶是高中生,默認(rèn)圖可以根據(jù)學(xué)生形象進(jìn)行設(shè)計(jì);如果產(chǎn)品面對(duì)的用戶是白領(lǐng),可以根據(jù)白領(lǐng)的特征進(jìn)行設(shè)計(jì)。針對(duì)性的形象設(shè)計(jì)不僅使頁(yè)面更精致,也會(huì)把用戶帶入自己熟悉的場(chǎng)景,增加頁(yè)面的親切感,用戶的認(rèn)同感。如下圖(默認(rèn)頭像取自網(wǎng)絡(luò)):

方法二:文字抓取形式

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

 

方法三:相關(guān)照片使用

有些比較垂直的產(chǎn)品默認(rèn)頭像可以根據(jù)自己的產(chǎn)品特色進(jìn)行匹配,比如說關(guān)于養(yǎng)寵物的app,默認(rèn)頭像就可以采用不同的萌寵照片,讓產(chǎn)品具有自己的獨(dú)特調(diào)性。如下圖:

 

方法四:產(chǎn)品吉祥物或主題形象填充

如果產(chǎn)品擁有自己的吉祥物或產(chǎn)品形象,設(shè)計(jì)師也可以通過該設(shè)計(jì)元素進(jìn)行設(shè)計(jì),通過相關(guān)配飾或豐富的表情裝飾形成不同的默認(rèn)頭像,不僅避免了頭像的單調(diào)而且加深了用戶對(duì)品牌的印象。

小結(jié)

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

4. 新手引導(dǎo)模塊

新手引導(dǎo)是為了讓用戶快速學(xué)習(xí)產(chǎn)品新的功能而出現(xiàn)的一種展現(xiàn)形式,它主要分為兩種類型:針對(duì)產(chǎn)品主推功能通常采用開機(jī)畫面引導(dǎo)為主;針對(duì)邏輯較強(qiáng),步驟稍多的操作功能或是更改了常用功能的位置通常會(huì)采用氣泡形式進(jìn)行展示。

1)開機(jī)畫面引導(dǎo)形式

下圖為百度地圖新手引導(dǎo)的設(shè)計(jì)圖:界面設(shè)計(jì)簡(jiǎn)潔,主題明確,畫面有趣,讓用戶清晰的明白產(chǎn)品要主推的功能。

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

2)氣泡引導(dǎo)形式

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

 

閑魚APP在做新手引導(dǎo)時(shí)形式上采用半遮蓋的方式,盡量減少對(duì)用戶的干擾;交互上有添加關(guān)閉功能,讓用戶隨時(shí)可以離開;設(shè)計(jì)上采用圖文結(jié)合的方式,通過吉祥物形象來引導(dǎo)用戶閱讀文字信息,從各方面把干擾降到最低。

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

小結(jié)

頁(yè)面引導(dǎo)不管運(yùn)用哪種形式設(shè)計(jì),都是為產(chǎn)品功能服務(wù)的,在引導(dǎo)用戶關(guān)注新功能的同時(shí),需要提升產(chǎn)品的好感度,避免對(duì)用戶產(chǎn)生干擾。

  • 新手引導(dǎo)頁(yè)面不宜過多,最好是3±頁(yè),用戶既能耐心的看完信息,又不至于引起用戶的反感。
  • 設(shè)計(jì)形式盡量新穎有趣,來吸引用戶的視線。
  • 交互上需要做到讓用戶隨時(shí)可以退出,盡量不要做強(qiáng)制用戶的設(shè)計(jì)。


三. 梳理模塊之間的關(guān)系

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



總結(jié)

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

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

預(yù)約申請(qǐng)免費(fèi)試聽課

填寫下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

?2007-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號(hào)

網(wǎng)站地圖