基于品牌提升的APP界面設(shè)計(jì)原則

肖文婷

摘 要：移動互聯(lián)網(wǎng)高速發(fā)展的環(huán)境下，基于品牌APP的界面設(shè)計(jì)通過視覺、聽覺和觸覺等能給用戶帶來更直觀的互動體驗(yàn)。文章結(jié)合優(yōu)秀的APP界面設(shè)計(jì)案例進(jìn)行分析，提出APP界面設(shè)計(jì)與品牌特色相結(jié)合，并提升品牌的設(shè)計(jì)原則。

關(guān)鍵詞：品牌提升；APP界面設(shè)計(jì)；設(shè)計(jì)原則

檢 索：www.artdesign.org.cn

中圖分類號：TB472 文獻(xiàn)標(biāo)志碼：A 文章編號：1008-2832（2016）09-0104-03

Principles of APP Interface Design Based on the Brand Promotion

XIAO Wen-ting（Sunde Polytechnic， Foshan 528333， China）

Abstract ：The rapid development of mobile Internet environment. Interface design brand APP can give users more intuitive interaction based on experience through visual， auditory and tactile etc. This paper basing on the analysis of the excellent APP interface design case， putting forward the combination of APP interface design and brand characteristics， enhancing the design principles of the brand.

Key words ：brand promotion； APP interface design； design principles

Internet ：www.artdesign.org.cn

隨著4G網(wǎng)絡(luò)的成熟以及移動終端硬件技術(shù)的快速更新，移動終端設(shè)備的界面設(shè)計(jì)隨之也高速發(fā)展，并形成自己一套獨(dú)立的設(shè)計(jì)語言。據(jù)調(diào)查數(shù)據(jù)顯示，80%的智能手機(jī)用戶均下載過品牌APP，其中23.2%的用戶下載過數(shù)十個(gè)以上的品牌APP。各大品牌逐漸意識到APP的開發(fā)與運(yùn)用能幫助企業(yè)品牌獲得較好的影響力，快速接觸目標(biāo)消費(fèi)者，甚至成為銷售產(chǎn)品不可缺失的營銷手段。在我國，基于品牌的APP設(shè)計(jì)還是相對新鮮的事物，其產(chǎn)生與發(fā)展只有幾年的時(shí)間，并未有全面針對品牌APP的VI系統(tǒng)設(shè)計(jì)規(guī)范，只是被歸屬到傳統(tǒng)企業(yè)VI系統(tǒng)應(yīng)用中的一部分。面對APP界面設(shè)計(jì)嚴(yán)重的同質(zhì)化和低競爭力等問題，基于品牌提升的APP開發(fā)與設(shè)計(jì)，將APP的界面設(shè)計(jì)與品牌的提升密切結(jié)合，即界面設(shè)計(jì)服務(wù)于品牌，并有效地強(qiáng)化品牌形象、增強(qiáng)品牌友好度、擴(kuò)大品牌影響力、深入洞察與了解目標(biāo)用戶等。因此，如何將APP界面的設(shè)計(jì)與品牌特色相結(jié)合，并提升品牌的設(shè)計(jì)原則包括以下四點(diǎn)：

一、一致性原則

APP界面設(shè)計(jì)的一致性即通過視覺結(jié)構(gòu)、視覺層次、視覺元素等達(dá)到設(shè)計(jì)的統(tǒng)一整體，減少用戶認(rèn)知成本，加深對品牌認(rèn)識。設(shè)計(jì)師要自如地把控好品牌APP在眾多移動終端中的視覺效果，需要對同一設(shè)計(jì)策略從線下到線上做宏觀的統(tǒng)籌，處理好各個(gè)系統(tǒng)之間的差異，利用和發(fā)揮各平臺的優(yōu)勢，讓品牌APP能在不同的終端呈現(xiàn)最佳效果，并形成品牌形象的完整與延續(xù)。

（一） 與系統(tǒng)設(shè)計(jì)指南一致

專家們在關(guān)于界面設(shè)計(jì)的書籍與著作中都強(qiáng)調(diào)了界面設(shè)計(jì)的一致性。因?yàn)橹挥薪y(tǒng)一一致的界面準(zhǔn)則才能降低用戶的學(xué)習(xí)成本，減少學(xué)習(xí)風(fēng)險(xiǎn)，同時(shí)還能避免多樣復(fù)雜的視覺元素干擾消費(fèi)者對品牌的理解。每個(gè)操作系統(tǒng)都會有自己官方的設(shè)計(jì)指南，設(shè)計(jì)師在進(jìn)行APP應(yīng)用設(shè)計(jì)與開發(fā)時(shí)，要確保設(shè)計(jì)符合操作系統(tǒng)的一致性。① 例如，在IOS系統(tǒng)人機(jī)交互指南中指出所有的IOS系統(tǒng)版本中默認(rèn)字體是Helvetica Neue。雖說從IOS 7系統(tǒng)開始可以使用很多可選的字體，但繼續(xù)沿用和遵循此設(shè)計(jì)原則才不會給用戶帶來不適感。遵循用戶的使用習(xí)慣，才有利于品牌信息的推送。

（二） 視覺結(jié)構(gòu)一致

Jeff Johnson在其著作《認(rèn)知與設(shè)計(jì)——理解UI設(shè)計(jì)準(zhǔn)則》中指出，信息呈現(xiàn)方式越是精煉和結(jié)構(gòu)化，人們就越能更快和更容易地掃描到并理解它。構(gòu)建清晰的視覺層次界面，能幫助和引導(dǎo)用戶專注于信息本身。②通常APP視覺結(jié)構(gòu)主要包括狀態(tài)欄、導(dǎo)航欄、主菜單、內(nèi)容區(qū)域等四個(gè)部分，每個(gè)部分再細(xì)分出更多的元素。在品牌APP界面設(shè)計(jì)時(shí)要注意如何合理有效地整合眾多的元素，為傳遞品牌信息服務(wù)。例如通常APP界面的主菜單習(xí)慣出現(xiàn)在界面頂部，因此就要遵循此原則，將其置于頂部，其他各頁面的布局不變，協(xié)調(diào)好各個(gè)控件的比例關(guān)系，避免造成視覺結(jié)構(gòu)的混淆，讓用戶能在較短時(shí)間內(nèi)適應(yīng)APP的界面布局，捕捉品牌信息。

（三）視覺元素一致

1.品牌圖標(biāo)

圖標(biāo)是指帶有含義的計(jì)算機(jī)圖形，是可視化界面系統(tǒng)中具有交互功能的符號化視覺表現(xiàn)方式。品牌圖標(biāo)作為提升品牌APP界面中重要的組成部分，主要包括兩種，一種是品牌APP的開啟圖標(biāo)，如同PC端的軟件快捷方式；另一種是品牌APP中的界面圖標(biāo)，如導(dǎo)航圖標(biāo)、工具欄圖標(biāo)、按鈕等。品牌圖標(biāo)的設(shè)計(jì)是APP界面中重要的輔助和指示圖形，其視覺語言務(wù)必善用或延用企業(yè)品牌VI系統(tǒng)的設(shè)計(jì)規(guī)范，滿足各平臺的一致使用規(guī)范，增強(qiáng)用戶對品牌認(rèn)知延續(xù)，提高品牌與用戶的互動效率。

首先，品牌開啟圖標(biāo)。外觀上始終保持與品牌的界面設(shè)計(jì)風(fēng)格一致，大多以品牌LOGO作為圖標(biāo)的基礎(chǔ)圖形元素，以減少用戶對品牌認(rèn)知的負(fù)擔(dān)，在有限的界面布局中強(qiáng)化品牌形象，引起用戶的注意力。其次，界面內(nèi)部的功能性圖標(biāo)。其視覺特征也要與品牌既有的識別系統(tǒng)保持一致，例如圖標(biāo)線條的長短粗細(xì)、圓角弧度、視覺風(fēng)格、留白空間等都應(yīng)思慮周全。品牌圖標(biāo)整體統(tǒng)一的視覺特征不僅形成APP界面設(shè)計(jì)的整體美觀效果，也反映出品牌的嚴(yán)謹(jǐn)性與專業(yè)性，在品牌推廣過程中可加強(qiáng)用戶對品牌的識別性。

2.品牌色

色彩是用戶最容易辨識的品牌元素，成功的品牌會很巧妙地運(yùn)用它獨(dú)特的品牌色。不少互聯(lián)網(wǎng)產(chǎn)品品牌都有著讓人印象深刻的品牌色，如騰訊藍(lán)、雅虎紫、淘寶橘、京東紅等。無論在官方網(wǎng)站、移動端APP設(shè)計(jì)、相關(guān)線下衍生品都應(yīng)和諧統(tǒng)一的運(yùn)用。

基于品牌提升的APP界面設(shè)計(jì)在品牌色的運(yùn)用時(shí)首先要使品牌的主色、輔助色與其他平臺的運(yùn)用一致，但允許適當(dāng)?shù)馗鶕?jù)移動端平臺的特點(diǎn)做細(xì)微調(diào)整。其次，各終端尺寸不同，品牌APP界面設(shè)計(jì)在品牌色的比例要達(dá)到視覺一致，顏色搭配以純的品牌色為主，三個(gè)之內(nèi)的配色為輔進(jìn)行搭配。簡潔干練的用色，才能在保證品牌統(tǒng)一性的同時(shí)，使用戶更容易地感受到品牌所營造的氛圍。

3.品牌圖與文字（案）

圖片的編排方式能無意識地讓用戶感知品牌產(chǎn)品，傳遞品牌意識，而文字卻是用戶獲取理性信息的重要媒介。移動端APP界面設(shè)計(jì)受限于屏幕的大小，為吸引用戶的眼球，提升品牌檔次，通常采用大尺寸配圖或整圖做背景，配合精簡的文字（案）輔助的方式。以圖片社交分享APP Pinterest的界面設(shè)計(jì)為例（圖1）。該應(yīng)用最大的特點(diǎn)就是采用瀑布流的形式展示圖片內(nèi)容，在有限的畫面中采取大尺寸的圖片為內(nèi)容展示。它獨(dú)特的圖文編排方式吸引用戶不斷地發(fā)現(xiàn)新的內(nèi)容，參與到產(chǎn)品的互動交流中，并且在各平臺上都能很好地體現(xiàn)出該品牌產(chǎn)品的特色。此外，APP界面設(shè)計(jì)欲為品牌提升加分，文字（案）應(yīng)遵循精簡原則，必須清晰可讀，大小合適，顏色與背景色有較為明顯的對比等設(shè)計(jì)原則。

二、溝通原則

美國認(rèn)知心理學(xué)家唐納德·諾曼在《情感化設(shè)計(jì)》一書中，將設(shè)計(jì)的層次劃分為三個(gè)等級，即“本能層、行為層和反思層”。本能層關(guān)注視覺外觀設(shè)計(jì)，行為層關(guān)注互動操作設(shè)計(jì)，反思層則更重視用戶體驗(yàn)。③溝通原則主要指基于品牌APP的界面互動操作設(shè)計(jì)。

（一）簡化操作的過程

移動端品牌APP的操作界面設(shè)計(jì)，要考慮效率與時(shí)間的因素。滿足用戶碎片化的溝通時(shí)間，用簡潔、便利的功能操作，提高互動效率。以任務(wù)管理類APP Clear的界面操作設(shè)計(jì)為例（圖2）。無按鈕的界面設(shè)計(jì)將“簡潔”的設(shè)計(jì)理念實(shí)現(xiàn)得淋漓盡致，通過不同手勢幾乎完成了所有的操作命令。從圖中可以看出該APP界面的圖形設(shè)計(jì)沒有復(fù)雜的按鍵，漸變醒目的色條排列任務(wù)，區(qū)分優(yōu)先級，用戶可以根據(jù)自己的喜好自由調(diào)節(jié)。簡潔的操作過程，讓用戶減少了記憶的負(fù)擔(dān)，對各界面部分自由控制，提高了APP的使用效率，實(shí)現(xiàn)了視覺、交互、程序與硬件的完美結(jié)合。獨(dú)特的界面設(shè)計(jì)與操作流程設(shè)計(jì)讓用戶記住了該產(chǎn)品，贏得了品牌的好感度。

（二）優(yōu)化操作狀態(tài)的反饋

當(dāng)下的APP界面操作置于觸摸屏之上，用戶沒有了按鍵的觸感，只能通過視覺和聽覺得到操作狀態(tài)的反饋。如果用戶沒有很好地被引導(dǎo)以及得到及時(shí)的信息反饋，將會導(dǎo)致用戶在與界面的交互過程中迷失方向，進(jìn)而產(chǎn)生挫敗感。④因此基于品牌提升的APP在界面中以品牌形象大圖或產(chǎn)品大圖為背景，操作按鈕設(shè)有點(diǎn)擊前后的不同狀態(tài)，用戶能清晰地從界面上看到必須要的信息，被引導(dǎo)進(jìn)行操作與交互。按鈕設(shè)計(jì)為當(dāng)下流行的幽靈按鈕，整體視覺風(fēng)格醒目簡潔。沒有復(fù)雜的色彩、樣式及紋理，線框示意輪廓，文字示意功能，具有強(qiáng)烈的視覺沖擊力，讓用戶能沉浸于品牌APP的交互與體驗(yàn)中，優(yōu)化品牌信息的傳播（圖3）。

三、用戶個(gè)性體驗(yàn)原則

在產(chǎn)品同質(zhì)化嚴(yán)重的今天，保持品牌的與眾不同才能從眾多產(chǎn)品中脫穎而出，展示自身特色，提升市場競爭力，體現(xiàn)品牌價(jià)值。移動互聯(lián)網(wǎng)環(huán)境下，新的傳播媒介為品牌提供了重要的媒介手段供用戶參與到APP界面體驗(yàn)中。而產(chǎn)品交互系統(tǒng)中可參與性表示用戶體驗(yàn)品質(zhì)高低，可參與性好的系統(tǒng)，會使人難以忘懷，物有所值，并從中感受到使用的樂趣。⑤基于品牌提升的APP界面設(shè)計(jì)，以用戶為中心，需更深入尋求用戶的個(gè)性體驗(yàn)，滿足目標(biāo)用戶個(gè)性化的精神參與感、情感需求。例如，日本著名的生活品牌——MUJI（無印良品），它致力提倡和實(shí)踐著“No Brand”的品牌精神，并提倡簡約、自然的現(xiàn)代生活哲學(xué)理念，受到追求簡單、自然、樸實(shí)的年輕消費(fèi)者喜愛。該品牌在進(jìn)軍移動端APP的開發(fā)與設(shè)計(jì)時(shí)，精準(zhǔn)定位品牌特色與應(yīng)用市場類型，尋求獨(dú)特的品牌推廣方式。選擇應(yīng)用排行熱門的工具類進(jìn)行開發(fā)，并完美地與品牌產(chǎn)品特征、消費(fèi)目標(biāo)用戶直接關(guān)聯(lián)。例如MUJI to Relax 是無印良品的一款音樂睡眠APP（圖4）。它不同于一般的音樂APP，可以通過攝像頭檢測用戶的心跳定制專屬的白噪音功能，具有極強(qiáng)的互動性和趣味性。雖然是移動端的應(yīng)用工具，但其創(chuàng)意不僅具有定制音樂的功能，還能結(jié)合MUJI品牌本身經(jīng)營領(lǐng)域來進(jìn)行產(chǎn)品拓展與延伸，如配合MUJI品牌的香薰燈、靠枕等使用。MUJI to Relax APP的界面采用與品牌定位一致的扁平化、簡單的設(shè)計(jì)風(fēng)格，用數(shù)字化工具深入洞察了品牌受眾的消費(fèi)心理。心跳制定音樂的功能，營造了情感化的使用氛圍，提升了品牌的好感度。差異化的產(chǎn)品體驗(yàn)，切合了目標(biāo)用戶個(gè)性化的情感需求，擴(kuò)大了品牌領(lǐng)域的影響力。

四、 環(huán)境原則

品牌APP界面設(shè)計(jì)的環(huán)境原則包括兩種，一種是APP運(yùn)行的系統(tǒng)應(yīng)用環(huán)境，如ISO操作系統(tǒng)、Android操作系統(tǒng)、Windows操作系統(tǒng)等。另一種是用戶操作APP的場景、情景等。本文中的環(huán)境原則主要指第二種。品牌要維護(hù)與消費(fèi)者之間良好的關(guān)系，給用戶帶來更好的體驗(yàn)，就要注重APP與用戶對話的方式和使用的場景。用戶可能會在走路、開會、乘車、與人交談等多種情景中使用品牌APP，靈活運(yùn)用移動設(shè)備硬件功能，如重力感應(yīng)器、GPS、攝像頭等，提高用戶與APP參與度。良好的交互設(shè)計(jì)配合直觀達(dá)意的視覺設(shè)計(jì)，不僅較好地傳遞品牌信息，還能更好地讓用戶在體驗(yàn)中提升品牌好感度。

環(huán)境原則并非每款品牌APP必須嚴(yán)格遵循的原則，但如在開發(fā)與界面設(shè)計(jì)時(shí)充分考慮到，能塑造良好的品牌特色，提升品牌競爭力。

當(dāng)下的移動互聯(lián)網(wǎng)時(shí)代，品牌APP的開發(fā)與設(shè)計(jì)是現(xiàn)階段提升品牌最具競爭力和可塑性的方式?；谄放铺嵘腁PP界面設(shè)計(jì)通過本文提出的一致性、溝通、用戶個(gè)性體驗(yàn)、環(huán)境等設(shè)計(jì)原則能將APP界面設(shè)計(jì)與品牌特色相結(jié)合，并從品牌內(nèi)容展示、品牌信息傳遞、目標(biāo)用戶了解、品牌影響力擴(kuò)大等方面提升品牌。

注釋：

① 徐曼鷺，王峰，吳棟.“淺談Ipad應(yīng)用的視覺設(shè)計(jì)原則”[J].藝術(shù)與設(shè)計(jì)（理論），2015（3）：54-56.

②（美）Jeff Johnson.認(rèn)知與設(shè)計(jì)—理解UI設(shè)計(jì)準(zhǔn)則[M].張一寧 譯. 北京：人民郵電出版社，2011：36.

③ 李四達(dá).交互設(shè)計(jì)概論[M].北京：清華大學(xué)出版社，2009：21.

④ 劉春強(qiáng).視覺選擇性注意在網(wǎng)頁交互界面設(shè)計(jì)中的應(yīng)用研究[D].無錫：江南大學(xué)，2014（21）.

⑤李世國.交互系統(tǒng)設(shè)計(jì)—產(chǎn)品設(shè)計(jì)的新視角[J].裝飾，2007（2）：12-13.