如何優(yōu)化我負(fù)責(zé)的產(chǎn)品更是每個(gè)UI設(shè)計(jì)師的目標(biāo)，但作為設(shè)計(jì)師，我們可以從視覺級(jí)別系統(tǒng)優(yōu)化APP，使產(chǎn)品更有趣。剛剛進(jìn)入市場的許多設(shè)計(jì)師總覺得他們不是。讓我們開始，然后我們可以一起討論它。

為什么要進(jìn)行視覺優(yōu)化？

大多數(shù)人似乎從視覺層面來說是微不足道的，因?yàn)樗粫?huì)給產(chǎn)品帶來實(shí)際好處。但作為產(chǎn)品的性能層，視覺語言可以為用戶傳達(dá)不同的心理感受。

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

產(chǎn)品等級(jí)：目前市場上的產(chǎn)品高度均勻化，有必要根據(jù)產(chǎn)品的特點(diǎn)設(shè)計(jì)不同的產(chǎn)品，以提高產(chǎn)品的友好性;

個(gè)人層面：設(shè)計(jì)一個(gè)好的產(chǎn)品也反映了設(shè)計(jì)師自身的價(jià)值，給設(shè)計(jì)師一種成就感。

如何優(yōu)化？

1.找到切入點(diǎn)

要從視覺級(jí)別優(yōu)化應(yīng)用程序，我們可以從許多方面入手。如何找到合理的優(yōu)化入口點(diǎn)也非常重要，因?yàn)楫a(chǎn)品版本迭代通常不會(huì)提供足夠的開發(fā)資源，因?yàn)樗粫?huì)優(yōu)化愿景。因此，如何合理地提高視覺設(shè)計(jì)師的視覺需求并實(shí)現(xiàn)著陸更為關(guān)鍵。這允許視覺設(shè)計(jì)師通過子模塊進(jìn)行優(yōu)化并批量迭代，這為用戶提供了每個(gè)版本的一些視覺驚喜。

2.子模塊優(yōu)化

從視覺角度來看，我們可以總結(jié)出多個(gè)模塊。由于空間限制，我們將使用產(chǎn)品的四個(gè)模塊作為設(shè)計(jì)分析的示例。

01.加載模塊

通過用戶加載整個(gè)行為路徑，合理的加載方法將極大地增強(qiáng)用戶體驗(yàn)。裝載設(shè)計(jì)對(duì)產(chǎn)品的影響可分為三個(gè)層次：

為用戶提供及時(shí)有效的反饋;

消除用戶等待的焦慮，使裝載變得有趣，忘記了時(shí)間的概念;

通過加載進(jìn)行品牌傳播，加深用戶眼中品牌的印象。

從使用場景中，可以分別針對(duì)下拉負(fù)載，全局負(fù)載和滑動(dòng)負(fù)載負(fù)載優(yōu)化視覺。我們可以通過分析市場上的負(fù)載來分析和總結(jié)優(yōu)秀的產(chǎn)品。如下圖為百度外賣，途牛旅游和熊貓閱讀裝載設(shè)計(jì)：

下拉裝載：

下拉裝載是一個(gè)重要的設(shè)計(jì)點(diǎn)，使用優(yōu)秀的形式可以有效地揭示品牌，增加產(chǎn)品的友好性。

百度外賣采用吉祥物，頭盔，電動(dòng)車，房屋等設(shè)計(jì)元素為外賣兄弟制作送出場景，并立即將用戶帶入外賣場景。風(fēng)格可愛有趣，加上循環(huán)效果。下拉裝載增加了用戶的及時(shí)興趣，同時(shí)增加了品牌的興趣，并通過使用吉祥物增加了品牌曝光的機(jī)會(huì);

通過?；諛?biāo)延伸的吉祥物，圖牛旅游以旅游建筑景觀為背景，給用戶一個(gè)旅程場景，正確展示產(chǎn)品口號(hào)，品牌傳播高度。

熊貓閱讀通過可愛的熊貓插圖和書籍的可愛效果讓閱讀變得有趣。

全球負(fù)荷：

全球加載和使用場景相對(duì)較寬。當(dāng)網(wǎng)絡(luò)不好時(shí)，如何消除用戶等待加載的焦慮是非常重要的。

百度外賣采用拉下來加載統(tǒng)一的設(shè)計(jì)元素，整體風(fēng)格一致，及時(shí)反饋，趣味，品牌傳播并存。

Tuniu Tourism使用文案和吉祥物的線性輪廓作為加載方法，加載動(dòng)態(tài)效果時(shí)顯示品牌顏色。整體比較直觀而簡潔。

熊貓通過書中的元素和吉祥物的輪廓進(jìn)行閱讀，以實(shí)現(xiàn)裝載過程。

滑動(dòng)裝載：

上滑載荷是相對(duì)頻繁的用戶行為，并且所有三種產(chǎn)品都削弱了載荷效果。

通過使用品牌顏色的簡單裝載環(huán)并加載副本來顯示百度外賣;

Tuniu Tourism由吉祥物的輪廓和品牌的顏色呈現(xiàn);

熊貓閱讀直接以副本的風(fēng)格顯示。

總結(jié)：

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

場景設(shè)計(jì)：通過場景設(shè)計(jì)，用戶可以即時(shí)沉浸在產(chǎn)品中，加深用戶對(duì)產(chǎn)品的印象。

吉祥物的使用：使用這個(gè)元素主要是使產(chǎn)品更貼近用戶，并能充分展示產(chǎn)品的特點(diǎn)和樂趣

動(dòng)態(tài)效果的使用：巧妙的動(dòng)態(tài)設(shè)計(jì)將使人們大放異彩，操作過程更順暢

外圍元素的使用：外圍元素是指產(chǎn)品屬性，例如，如果它是一個(gè)閱讀產(chǎn)品，我們可以在設(shè)計(jì)中找到一些相關(guān)元素，如書籍，文字，紙張，筆等，以提煉和應(yīng)用于該設(shè)計(jì)。

文案的使用：文案是最直接的呈現(xiàn)方式，通過口號(hào)的呈現(xiàn)可以更直觀地傳達(dá)品牌理念。

品牌顏色：用戶對(duì)顏色的記憶清晰，品牌顏色用于加深用戶對(duì)產(chǎn)品的印象。

02.默認(rèn)模塊

目前，市場上很多產(chǎn)品都有特殊設(shè)計(jì)的默認(rèn)模塊。即使沒有搜索結(jié)果或網(wǎng)絡(luò)有問題，用戶也不會(huì)感到不舒服。有趣的默認(rèn)狀態(tài)會(huì)給用戶帶來一點(diǎn)安慰。下圖顯示了淘寶和百度外賣的默認(rèn)狀態(tài)：

事實(shí)上，良好的默認(rèn)狀態(tài)是它擁有自己獨(dú)特的設(shè)計(jì)系統(tǒng)，而不是設(shè)計(jì)師可以輕松繪制插圖。以上圖片是淘寶和百度外賣的默認(rèn)狀態(tài)：

淘寶的默認(rèn)狀態(tài)是以主題方式呈現(xiàn)，相關(guān)的外圍元素根據(jù)不同的默認(rèn)狀態(tài)，如使用空的購物車來表示購物車是空的，網(wǎng)絡(luò)無法通過行星和Wi連接 - Fi元素表達(dá)與品牌顏色的使用相結(jié)合，為用戶傳達(dá)最準(zhǔn)確的主題信息。

百度外賣默認(rèn)狀態(tài)以場景方式呈現(xiàn)。通過設(shè)計(jì)產(chǎn)品吉祥物和相關(guān)的狀態(tài)元素，每個(gè)默認(rèn)狀態(tài)都有一個(gè)場景，這是一個(gè)故事，使默認(rèn)狀態(tài)更加生動(dòng)和具體。并擁有自己品牌的獨(dú)特風(fēng)格。

總結(jié)：

場景化和設(shè)計(jì)默認(rèn)狀態(tài)的方式可以使頁面更有趣，但每個(gè)都有自己的優(yōu)點(diǎn)和缺點(diǎn)。主題設(shè)計(jì)風(fēng)格更加通用，頁面風(fēng)格更弱。場景設(shè)計(jì)風(fēng)格更有趣，但可擴(kuò)展性較弱。每個(gè)默認(rèn)狀態(tài)都有自己的狀態(tài)，這使設(shè)計(jì)人員的設(shè)計(jì)成本更高。

03.默認(rèn)圖表模塊

在產(chǎn)品設(shè)計(jì)中，默認(rèn)地圖非常常見，例如，未加載屏幕時(shí)的默認(rèn)地圖，沒有登錄的默認(rèn)地圖或沒有替換頭像的第一次登錄。默認(rèn)地圖似乎很簡單，如何設(shè)計(jì)與產(chǎn)品匹配的地圖也需要設(shè)計(jì)師仔細(xì)審查。

默認(rèn)加載地圖：

下圖顯示了加載默認(rèn)圖形的三種方案：A方案是純灰色默認(rèn)地圖，B方案是帶有圖片圖標(biāo)的默認(rèn)地圖，C方案是帶有產(chǎn)品徽標(biāo)的默認(rèn)地圖。事實(shí)上，我們經(jīng)常在市場上看到的三個(gè)程序產(chǎn)品，從視覺方面來看，C程序更好，它不僅實(shí)現(xiàn)了加載默認(rèn)地圖的功能，還增加了品牌的曝光度，使設(shè)計(jì)更有價(jià)值。

頭像默認(rèn)地圖：

實(shí)際上，默認(rèn)的頭像模塊有一個(gè)很大的優(yōu)化空間，通常默認(rèn)的頭像是灰色的頭像，設(shè)計(jì)略顯單調(diào)。如下圖所示：

從視覺角度來看，設(shè)計(jì)師如何通過設(shè)計(jì)打破單調(diào)，并在界面上平衡統(tǒng)一與豐富之間的關(guān)系。作者總結(jié)了幾種常用的設(shè)計(jì)方法：

方法1：Illustrator表單

設(shè)計(jì)人員可以根據(jù)產(chǎn)品定位設(shè)計(jì)默認(rèn)圖像，并根據(jù)不同的用戶組設(shè)計(jì)圖像。例如，面向產(chǎn)品的用戶是高中生。可以根據(jù)學(xué)生圖像設(shè)計(jì)默認(rèn)圖像。如果面向產(chǎn)品的用戶是白領(lǐng)，可以根據(jù)白領(lǐng)的特點(diǎn)進(jìn)行設(shè)計(jì)。有針對(duì)性的圖像設(shè)計(jì)不僅使頁面更精致，而且使用戶進(jìn)入熟悉的場景，增加了頁面的親密度和用戶的身份。如下所示（默認(rèn)頭像取自網(wǎng)絡(luò)）：

方法2：文本爬網(wǎng)表單

如果用戶使用更多默認(rèn)圖像，我們可以使用技術(shù)手段執(zhí)行批量匹配，在視覺上預(yù)設(shè)頭像背景的顏色，然后抓取用戶名的前兩個(gè)單詞或最后兩個(gè)單詞以生成用戶頭像。也就是說，它不會(huì)那么單調(diào)，整體視覺風(fēng)格相對(duì)統(tǒng)一。如下圖所示：

方法3：使用相關(guān)照片

一些更垂直的產(chǎn)品默認(rèn)頭像可以根據(jù)自己的產(chǎn)品功能進(jìn)行匹配。例如，對(duì)于寵物友好型應(yīng)用程序，默認(rèn)頭像可以使用不同的可愛寵物照片，使產(chǎn)品具有自己獨(dú)特的色調(diào)。如下圖所示：

方法4：產(chǎn)品吉祥物或主題圖像填充

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

總結(jié)：

默認(rèn)的圖形模塊設(shè)計(jì)方法多種多樣，但設(shè)計(jì)師需要掌握品牌和形式的兩個(gè)核心要素。細(xì)節(jié)由設(shè)計(jì)師精心設(shè)計(jì)，不僅可以增強(qiáng)用戶體驗(yàn)，還可以加深用戶對(duì)品牌的認(rèn)知度，同時(shí)也可以從側(cè)面展示設(shè)計(jì)師的專業(yè)能力。我們可以找到更多的設(shè)計(jì)和探索方法，以便設(shè)計(jì)師可以獲得更多的靈感和想法。

04.新手啟動(dòng)模塊

新手指南是一種表示形式，允許用戶快速學(xué)習(xí)產(chǎn)品的新功能。它主要分為兩種類型：產(chǎn)品的主推功能通?；陂_機(jī)畫面引導(dǎo);因?yàn)檫壿嫼軓?qiáng)，步驟稍微多一點(diǎn)。通用功能更改的功能或位置通常以氣泡的形式顯示。

啟動(dòng)屏幕啟動(dòng)表單：

下圖為百度地圖新手指導(dǎo)設(shè)計(jì)：界面設(shè)計(jì)簡潔，主題清晰，圖片有趣，使用戶可以清楚地了解被推送產(chǎn)品的功能。

設(shè)計(jì)使用產(chǎn)品吉祥物元素，加上需要展示的主題，使畫面有趣，故事豐富;

布局排列在文本的頂部和底部，視覺語言統(tǒng)一;

副本簡潔，主要和次要都很清楚;

在交互方面，用戶可以在任何頁面上關(guān)閉頁面，體驗(yàn)更人性化，操作更方便。

泡泡指導(dǎo)表

氣泡形式是一種相對(duì)簡單有效的方式來告訴用戶發(fā)生了什么，但這種提示也會(huì)在一定程度上干擾用戶的操作路徑。因此，當(dāng)產(chǎn)品需要引導(dǎo)用戶時(shí)，如何減少用戶對(duì)產(chǎn)品的負(fù)面影響是設(shè)計(jì)師需要考慮的問題。下圖顯示了兩種氣泡引導(dǎo)產(chǎn)品的不同選項(xiàng)：

自由魚APP采用新手指南形式的半覆蓋方法，以盡量減少對(duì)用戶的干擾;交互式關(guān)閉功能允許用戶隨時(shí)離開;該設(shè)計(jì)采用圖形和文字的組合，通過吉祥物的形象引導(dǎo)用戶閱讀短信并最大限度地減少各方面的干擾。

百度地圖采用另一種呈現(xiàn)模式，采用全覆蓋方式，給用戶最清晰的顯示;交互式“查找”按鈕取代了直接關(guān)閉按鈕，使交互更加情緒化; design吉祥物超級(jí)可愛的表情引導(dǎo)用戶瀏覽圖形信息，使頁面更像故事。

總結(jié)：

無論使用哪種設(shè)計(jì)形式，頁面指南都可以實(shí)現(xiàn)產(chǎn)品的功能。在引導(dǎo)用戶注意新功能的同時(shí)，有必要提高產(chǎn)品的良好性并避免對(duì)用戶的干擾。

因此，新手指南頁面不宜過多，最好是3+頁面，用戶可以耐心地閱讀信息，不會(huì)引起用戶的厭惡;

設(shè)計(jì)形式盡可能新穎有趣，以吸引用戶的注意力;

需要完成交互，以便用戶可以隨時(shí)退出，并盡量不強(qiáng)制用戶的設(shè)計(jì)。

3.結(jié)合模塊之間的關(guān)系

在從視覺角度優(yōu)化每個(gè)模塊的同時(shí)，我們必須注意它們之間的相關(guān)性。雖然每個(gè)模塊都相對(duì)獨(dú)立，但品牌特征需要統(tǒng)一。品牌特征的傳達(dá)反映在產(chǎn)品的每個(gè)細(xì)節(jié)中。一致的視覺語言將使用戶對(duì)產(chǎn)品有更深刻的印象。因此，選擇產(chǎn)品的每個(gè)模塊的顏色，使用設(shè)計(jì)元素和大型設(shè)計(jì)風(fēng)格需要設(shè)計(jì)師精確控制。

總結(jié)

通過上面的例子，我希望小伙伴們可以打開設(shè)計(jì)思路，讓他們有更多的設(shè)計(jì)解決方案來解決設(shè)計(jì)問題。

作為視覺設(shè)計(jì)師，我們首先要做的是滿足設(shè)計(jì)的業(yè)務(wù)需求，但在此基礎(chǔ)上，如何使界面更加精致和美觀。設(shè)計(jì)感是設(shè)計(jì)師努力工作的方向，因此設(shè)計(jì)師應(yīng)該更全面地了解每一個(gè)。模塊，更深入的設(shè)計(jì)探索，使設(shè)計(jì)更有價(jià)值。同時(shí)，對(duì)交互邏輯和業(yè)務(wù)需求的全面深入理解是設(shè)計(jì)人員更高水平的進(jìn)步，跟上UXD趨勢，使他們能夠不斷探索新事物，保持創(chuàng)新理念，提升設(shè)計(jì)價(jià)值和他們自己的社會(huì)。競爭力。

作者：網(wǎng)易UEDC高級(jí)視覺設(shè)計(jì)師季光如

本文來自大家都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC，作者@姬廣如

該地圖來自u(píng)nsplash，基于CC0協(xié)議

« 雷軍終于為小米找到了一個(gè)“西安內(nèi)” | 你在做SEO原創(chuàng)嗎？文章編輯更注重質(zhì)量 »