圖形創(chuàng)意在電商APP界面設計中的應用研究

溫郭英

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

【關鍵詞】圖形創(chuàng)意；電商APP；界面設計

【中圖分類號】TB472 【文獻標識碼】A

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

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

（一）購買需求功能

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

（二）傳達審美的功能

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

（三）品牌效應功能

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

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

（一）圖形創(chuàng)意使圖標更具識別性

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

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

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

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

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

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

APP視覺界面是吸引用戶收效最快的渠道，但精美的組件是促使應用程序達到完美的根本。電商APP的功能比較復雜，用戶通過視覺界面和觸屏操作來完成購買目標，交互組件須根據(jù)目標用戶的心理需求、視感認知、人體工程學等相關知識進行圖形創(chuàng)意。以下介紹電商APP基本組件的創(chuàng)意技法。

1.按鈕

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

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

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

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

2.滑動條

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

3.選項框

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

三、圖形設計在界面導航中的應用

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

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

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

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

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

四、結(jié)語

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

參考文獻：

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

[2]鐘淑平.PS智能手機App圖標和界面設計[M].北京：人民郵電出版社，2017.

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