圖形創(chuàng)意在電商APP界面設(shè)計(jì)中的應(yīng)用研究

溫郭英

【摘要】圖形創(chuàng)意是點(diǎn)、線、面等構(gòu)造元素的藝術(shù)形態(tài)表達(dá)，更是圖形圖意、功能的再現(xiàn)。圖形創(chuàng)意使APP界面設(shè)計(jì)更加具有行業(yè)特性，易懂易識(shí)別。電商APP界面設(shè)計(jì)中圖形創(chuàng)意技法應(yīng)用較多，本文主要圖標(biāo)、組件交互、界面導(dǎo)航等三個(gè)方面闡述圖形創(chuàng)意在電商APP界面設(shè)計(jì)中的應(yīng)用。

【關(guān)鍵詞】圖形創(chuàng)意；電商APP；界面設(shè)計(jì)

【中圖分類號(hào)】TB472 【文獻(xiàn)標(biāo)識(shí)碼】A

APP為應(yīng)用程序，指安裝在各種設(shè)備上的應(yīng)用軟件，通過(guò)屏幕完成功能操作，以滿足用戶各種需求。隨著2010年智能手機(jī)應(yīng)市而生，電商APP風(fēng)靡全球。電商APP的共性特點(diǎn)為：首先是清晰的視覺(jué)傳達(dá)是電商APP根本的設(shè)計(jì)原則，如圖標(biāo)是圖形圖意的濃縮，具有明確的指代性和識(shí)別性；其次是高效率的搜索和瀏覽體驗(yàn)，通過(guò)導(dǎo)航功能促成用戶好感；最后是幫助人機(jī)交互組件，組件設(shè)計(jì)優(yōu)劣能夠評(píng)估應(yīng)用軟件是否好用的性能。

一、圖形創(chuàng)意在電商APP界面設(shè)計(jì)中的作用

（一）購(gòu)買(mǎi)需求功能

電商APP的終極目標(biāo)是把產(chǎn)品推銷(xiāo)出去，促使用戶習(xí)慣性使用，則通過(guò)APP界面完成產(chǎn)品陳列功能。產(chǎn)品展示如超市中陳列的商品一樣，用戶須根據(jù)歸類邏輯思維迅速找到目標(biāo)，只要在條理清晰的導(dǎo)航下進(jìn)行產(chǎn)品區(qū)域分割，用戶會(huì)在短時(shí)間內(nèi)找到所需商品。設(shè)計(jì)要求文字圖形化，減少用戶視覺(jué)壓力，快速掃視產(chǎn)品示列。

（二）傳達(dá)審美的功能

圖形設(shè)計(jì)是視覺(jué)傳達(dá)設(shè)計(jì)的一部分，屬藝術(shù)美學(xué)的范疇，圖形符號(hào)能夠把簡(jiǎn)單的購(gòu)物變成一種美的時(shí)尚。以購(gòu)物功能為主的應(yīng)用程序只是完成系統(tǒng)有用標(biāo)準(zhǔn)，而不能達(dá)到美的情操陶冶。圖形創(chuàng)意很好地滿足了用戶的心理需求，使枯燥乏味的生活增添了色彩。不同電商APP根據(jù)目標(biāo)用戶的心理進(jìn)行風(fēng)格定位，比如導(dǎo)航欄的設(shè)計(jì)，一定要遵循外觀簡(jiǎn)潔、操作直接、定位精確的原則。產(chǎn)品定位明確，促銷(xiāo)信息傳達(dá)清晰。

（三）品牌效應(yīng)功能

品牌效應(yīng)驅(qū)動(dòng)之下能讓APP長(zhǎng)久運(yùn)營(yíng)，品牌效應(yīng)指通過(guò)產(chǎn)品使用之后所得用戶獲取到的效益和影響，包括滿足了生理性的需求和心理上愉悅感，促進(jìn)產(chǎn)品與用戶的黏度和信譽(yù)度。圖形創(chuàng)意通過(guò)界面?zhèn)鬟_(dá)信息的精準(zhǔn)和可信，提升APP界面的視覺(jué)傳感和服務(wù)效能，促使產(chǎn)品有自我營(yíng)銷(xiāo)的的功能。

二、圖形創(chuàng)意在APP界面中的應(yīng)用

（一）圖形創(chuàng)意使圖標(biāo)更具識(shí)別性

APP圖標(biāo)分為系統(tǒng)圖標(biāo)和功能圖標(biāo)，系統(tǒng)圖標(biāo)為移動(dòng)端在應(yīng)用商店中下載后所點(diǎn)擊的應(yīng)用程序圖標(biāo)，如天貓APP圖形由“天貓”字樣和貓頭形組成，形象體現(xiàn)了天貓商城的品牌。功能圖標(biāo)也稱工具欄圖標(biāo)，為完成某一目標(biāo)任務(wù)而進(jìn)入APP應(yīng)用程序所點(diǎn)擊的功能性圖形，用來(lái)達(dá)成人機(jī)交互任務(wù)。電商APP相較于其他類別的應(yīng)用程序更能體現(xiàn)其商業(yè)途徑，其目標(biāo)在于誘導(dǎo)瀏覽、慣性購(gòu)物，如下圖為天貓APP應(yīng)用程序的功能圖標(biāo)，整體構(gòu)圖都在給消費(fèi)者提供便捷的交易服務(wù)。

藝術(shù)化圖形創(chuàng)意的APP圖標(biāo)有以下幾種圖標(biāo)樣式：

首先是圖形圖標(biāo)。這類APP 圖標(biāo)富有易讀性、親和性、趣味性等特性，比如網(wǎng)易考拉APP系統(tǒng)圖標(biāo)為圖形圖標(biāo)，以簡(jiǎn)筆的考拉頭型輪廓作為圖標(biāo)，很好地傳達(dá)了“考拉”這一品牌，簡(jiǎn)潔易識(shí)別。懵懂的卡通形象增強(qiáng)了人與應(yīng)用系統(tǒng)的親密性和傳達(dá)了圖形構(gòu)造所帶來(lái)的人性趣味感。

其次是文字圖標(biāo)。圖標(biāo)主要用文字符號(hào)來(lái)構(gòu)圖，以文字為圖標(biāo)的設(shè)計(jì)元素，規(guī)則文字圖標(biāo)體現(xiàn)嚴(yán)肅性和統(tǒng)一性，蘊(yùn)含產(chǎn)品正品品質(zhì)的企業(yè)文化。文字變體圖標(biāo)，通過(guò)文字藝術(shù)化構(gòu)圖，使文字圖形化，相較于圖形圖標(biāo)更加直觀、易懂的特性，比如1號(hào)店、每日優(yōu)購(gòu)、海淘等。

最后是圖文并茂圖標(biāo)。根據(jù)APP的功能特征進(jìn)行圖文穿插，其設(shè)計(jì)思路為插圖匹配文字，圖形通過(guò)視覺(jué)上的烘托來(lái)增強(qiáng)圖形美感，文字符號(hào)可以進(jìn)行意圖說(shuō)明，兩者相得益彰。如美圖美妝、檸檬盒、樂(lè)視商城、微拍堂等電商APP都是這類既有圖形創(chuàng)意感又有文字說(shuō)明的圖標(biāo)，簡(jiǎn)單易識(shí)別，讓用戶了解品牌的同時(shí)又易于接受系統(tǒng)提供的服務(wù)范疇。

（二）圖形創(chuàng)意促使組件交互便捷

APP視覺(jué)界面是吸引用戶收效最快的渠道，但精美的組件是促使應(yīng)用程序達(dá)到完美的根本。電商APP的功能比較復(fù)雜，用戶通過(guò)視覺(jué)界面和觸屏操作來(lái)完成購(gòu)買(mǎi)目標(biāo)，交互組件須根據(jù)目標(biāo)用戶的心理需求、視感認(rèn)知、人體工程學(xué)等相關(guān)知識(shí)進(jìn)行圖形創(chuàng)意。以下介紹電商APP基本組件的創(chuàng)意技法。

1.按鈕

按鈕又稱為Button，是一種基礎(chǔ)組件，根據(jù)功能不同而派生出命令按扭、復(fù)選框、單選按鈕、組框、自繪式按鈕。好的按鈕是通過(guò)圖形構(gòu)造、色彩引導(dǎo)、人的環(huán)境等來(lái)設(shè)計(jì)，其始終離不開(kāi)圖形創(chuàng)意的形式美。

設(shè)計(jì)要點(diǎn)一：構(gòu)圖簡(jiǎn)潔、文案明確。命令式按鈕在電商APP中常有使用，電商促銷(xiāo)是必要的營(yíng)銷(xiāo)手段，吸引用戶做出決策并成為有效的用戶。要求文案明確，能給予用戶暗示和感知，緊迫的促進(jìn)用戶迅速做出購(gòu)買(mǎi)意向。另外，按鈕色彩要求特別搶眼，如下圖所示命令按鈕，以高明度、高純度顏色做色感鋪墊，大大提升了界面的轉(zhuǎn)化率。

設(shè)計(jì)要點(diǎn)二：增強(qiáng)對(duì)比。按鈕的強(qiáng)對(duì)比可以讓需要突出的部分脫穎而出，使用戶明確占擊、快捷交互，提高產(chǎn)品的轉(zhuǎn)化率。設(shè)計(jì)方法是增強(qiáng)按鈕與底色的色差關(guān)系，增強(qiáng)按鈕文字與按鈕背景顏色的對(duì)比，或者按鈕之間顏色對(duì)比關(guān)系，如下圖所示組框按鈕的設(shè)計(jì)，灰與淺藍(lán)之間的對(duì)比，淺藍(lán)相較而言更加醒目，易于用戶獲取。

設(shè)計(jì)要點(diǎn)三：創(chuàng)造引導(dǎo)。創(chuàng)造引導(dǎo)的設(shè)計(jì)方法常出現(xiàn)在成組按鈕或是自繪式按鈕中，達(dá)到強(qiáng)引導(dǎo)效果按鈕底色調(diào)以藍(lán)色、綠色或紫色等色為主，雖然都是冷色調(diào)，但較為舒緩，在紛繁的界面中用戶能夠體會(huì)靜謐感體驗(yàn)。如下圖為是否放棄操作，從系統(tǒng)開(kāi)發(fā)本意來(lái)講是不希望的，此時(shí)要引導(dǎo)用戶三思而行。

2.滑動(dòng)條

由手指按住時(shí)進(jìn)行操作的滑塊和可滑動(dòng)長(zhǎng)度組成，設(shè)計(jì)時(shí)注重質(zhì)感的設(shè)計(jì)，讓用戶覺(jué)得滑塊是可操作的組件，滑塊可以在滑區(qū)伸縮移動(dòng)，通過(guò)陰影和明暗關(guān)系的處理得到虛擬的質(zhì)感，幻化出實(shí)物感。

3.選項(xiàng)框

以復(fù)選框和單選按鈕使用居多，其圖形創(chuàng)意的技法在于增強(qiáng)選項(xiàng)框之間的底色對(duì)比、增強(qiáng)所選項(xiàng)與非選項(xiàng)之間的凹凸質(zhì)感對(duì)比、明示文案色差對(duì)比等區(qū)別對(duì)待目標(biāo)操作，以此增強(qiáng)用戶對(duì)選項(xiàng)的識(shí)別。

三、圖形設(shè)計(jì)在界面導(dǎo)航中的應(yīng)用

在APP界面設(shè)計(jì)中采用多種圖形劃分樣式來(lái)表達(dá)信息，如下圖所示為常見(jiàn)的電商APP使用的界面信息導(dǎo)航樣式，大多數(shù)電商APP都會(huì)混合使用，通過(guò)層級(jí)導(dǎo)航的布局方式達(dá)到承載多樣產(chǎn)品銷(xiāo)售信息。

標(biāo)簽導(dǎo)航、舵式導(dǎo)航：圖形設(shè)計(jì)思路以扁平化圖標(biāo)形式統(tǒng)管導(dǎo)航結(jié)構(gòu)，界面主類別視圖可以在頂層視圖進(jìn)行切換，用戶可隨意進(jìn)行類別跳轉(zhuǎn)，不需返回主頁(yè)面搜索其他頻道。標(biāo)簽一般設(shè)置4～5個(gè)，不會(huì)多于5個(gè)以上，設(shè)置太多顯雜亂，影響視覺(jué)。標(biāo)簽一般放置于界面的底部，利于移動(dòng)端手動(dòng)操作。舵式布局與標(biāo)簽式布局與圖形設(shè)計(jì)方式相差無(wú)幾，只是中間標(biāo)簽設(shè)置比較顯著，以色感、面積大小、圖形構(gòu)圖等設(shè)計(jì)區(qū)于別個(gè)標(biāo)簽，如此顯著標(biāo)簽為頻繁和重要的信息跳轉(zhuǎn)，且很大程度上影響交易額。

抽屜導(dǎo)航、列表導(dǎo)航：為了節(jié)省空間而容納更多的信息，將抽屜導(dǎo)航設(shè)計(jì)成左多右少兩列豎排式，圖形設(shè)計(jì)上注意行間距及畫(huà)面的留白即可，遵循條理分明的原理。列表導(dǎo)航設(shè)計(jì)方式如抽屜導(dǎo)航的左側(cè)部分一樣，即注意層次列示清晰，標(biāo)題與次級(jí)內(nèi)容都容括其中。

宮格導(dǎo)航、組合導(dǎo)航：宮格導(dǎo)航將產(chǎn)品陳列如九宮格一般，直接展示產(chǎn)品信息，利于用戶查尋，物品列示不能過(guò)長(zhǎng)，過(guò)長(zhǎng)導(dǎo)致視覺(jué)疲勞。組合導(dǎo)航由上面頻道圖標(biāo)和下面為產(chǎn)品陳列組成，設(shè)計(jì)上注意分類之間的縱橫間距，產(chǎn)品與說(shuō)明文之間的間距遵照和諧和均衡的形式美法則，做到緊松有度。

Tab導(dǎo)航、輪播導(dǎo)航：Tab導(dǎo)航與標(biāo)簽類似，為承載更多的信息而設(shè)置，特別是在二級(jí)導(dǎo)航信息太多情況下使用，適用于大型電商APP界面，如淘寶。輪播導(dǎo)航為項(xiàng)目橫向輪播形式展示，瀏覽由左到右的方向搜索，使得界面整潔，在有限空間承接無(wú)限內(nèi)容。Tab導(dǎo)航和輪播導(dǎo)航設(shè)計(jì)上都為箱式構(gòu)圖，簡(jiǎn)潔而整齊。

四、結(jié)語(yǔ)

圖形創(chuàng)意通過(guò)色彩、構(gòu)圖、布局等方面統(tǒng)籌藝術(shù)設(shè)計(jì)學(xué)、人體工程學(xué)、人機(jī)交互知識(shí)，在圖標(biāo)、交互組件和界面布局中運(yùn)用，體現(xiàn)了藝術(shù)與技術(shù)的統(tǒng)一。電商APP是用戶購(gòu)買(mǎi)商品、服務(wù)的端口，在滿足用戶生活和精神需求的同時(shí)，也滿足了用戶的審美情操。

參考文獻(xiàn)：

[1]百度百科.圖形創(chuàng)意（.2018.9）.https：//baike.baidu.com/item/圖形創(chuàng)意/2189397.

[2]鐘淑平.PS智能手機(jī)App圖標(biāo)和界面設(shè)計(jì)[M].北京：人民郵電出版社，2017.

[3]索理，韋月月.界面設(shè)計(jì)中圖形創(chuàng)意方法[J].現(xiàn)代裝飾，2016（10）.