手機(jī)APP界面的視覺(jué)設(shè)計(jì)

陳巖

摘要：隨著移動(dòng)無(wú)線互聯(lián)網(wǎng)的快速發(fā)展，手機(jī)網(wǎng)民也在不斷增加，隨著各類手機(jī) APP的使用率也在逐年增加。手機(jī)APP的市場(chǎng)競(jìng)爭(zhēng)也在日益激烈。手機(jī)布設(shè)的界面要帶有新穎性，顯示新式美感，增添 APP 架構(gòu)下的互動(dòng)性，側(cè)重人機(jī)交互感受，添加了平日之內(nèi)的多樣便捷，創(chuàng)設(shè)愉快體驗(yàn)。唯有如此，才會(huì)吸納用戶，從APP應(yīng)用市場(chǎng)中脫穎而出。

關(guān)鍵詞：手機(jī)APP；視覺(jué)傳達(dá)設(shè)計(jì)；用戶體驗(yàn)；創(chuàng)意設(shè)計(jì)

中圖分類號(hào)：TP391 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2018）25-0089-02

本文簡(jiǎn)單的論述了一款手機(jī)APP從戰(zhàn)略草圖到制作完成過(guò)程中，視覺(jué)傳達(dá)設(shè)計(jì)的原理在其中的重要運(yùn)用。 目前我國(guó)的手機(jī)APP自主研發(fā)的有很多，但是許多用戶反映同類手機(jī) APP 的界面很相似。如何從根本上做好一款手機(jī)APP，解決同類型手機(jī)APP界面的相似性，是本文討論的重點(diǎn)。

1 研究背景

隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的成熟，以及移動(dòng)端泛娛樂(lè)體驗(yàn)場(chǎng)景的多樣化，原先以其他形式呈現(xiàn)、在其他渠道觸達(dá)用戶的內(nèi)容，開(kāi)始跟移動(dòng)端有了更緊密的結(jié)合，并催生出全新的產(chǎn)品形態(tài)。比如，當(dāng)下用戶對(duì)移動(dòng)端游戲的需求提升就非常明顯。在手機(jī)性能不斷提升的當(dāng)下，手機(jī)的功能已越來(lái)越多，于是各種不同的手機(jī)APP也應(yīng)運(yùn)而生。進(jìn)入2018年以來(lái)，各類手機(jī)APP被開(kāi)發(fā)出來(lái)手機(jī)的功能不僅只局限在打電話上，還可以滿足人們娛樂(lè)、交友、交易、辦公、獲取信息等諸多功能。因此，在人們將來(lái)的生活中對(duì)智能手機(jī)的依賴將越來(lái)越高，而手機(jī)APP的設(shè)計(jì)也將成為手機(jī)設(shè)計(jì)中重要的一環(huán)。

所以，如今的我們已經(jīng)迎來(lái)一個(gè)屬于智能手機(jī)的時(shí)代。將來(lái)的智能手機(jī)市場(chǎng)競(jìng)爭(zhēng)也會(huì)越來(lái)越激烈，智能手機(jī)的APP界面設(shè)計(jì)也會(huì)變成智能手機(jī)生產(chǎn)制造中重要的一環(huán)。

2 智能手機(jī)的概念

2.1 智能手機(jī)的定義

智能手機(jī)是一種小型的具有獨(dú)立操作系統(tǒng)的便攜式工具，并且計(jì)算能力遠(yuǎn)遠(yuǎn)優(yōu)于傳統(tǒng)的按鍵式手機(jī)，更加強(qiáng)大的計(jì)算能力使得用戶可以通過(guò)安裝不同類型的手機(jī)APP來(lái)滿足用戶的各種需要。本文主要講述的是智能手機(jī)手機(jī)APP界面的視覺(jué)設(shè)計(jì)。

2.2 手機(jī)界面定義

手機(jī)界面是手機(jī)的顯示部分，在人機(jī)交互的過(guò)程中，進(jìn)行信息輸入和輸出的重要媒介。手機(jī)屏幕既可以用于人從手機(jī)中接收信息，也可以通過(guò)觸控等方式進(jìn)行信息輸入。任何手機(jī)信息交換的大部分過(guò)程都是通過(guò)手機(jī)界面進(jìn)行的，不同種類的手機(jī)界面也將帶給人不同的視覺(jué)感受，在本文中將不再對(duì)手機(jī)界面做出明確區(qū)分。而是將手機(jī)APP界面的設(shè)計(jì)給人的視覺(jué)體驗(yàn)作為研究的重點(diǎn)。

2.3 有限的屏幕尺寸

與傳統(tǒng)PC桌面不同，手機(jī)屏幕的尺寸更加小巧操作，方式也已觸控為主，設(shè)計(jì)師再設(shè)計(jì)界面時(shí)要充分考慮兩種操作界面的不同。在APP界面設(shè)計(jì)時(shí)設(shè)計(jì)師不但要保證APP功能的完整性和合理性，又要保證APP的功能性和實(shí)用性，然后再處理APP界面給人帶來(lái)的視覺(jué)感受。在保證其擁有流暢的操作感受的同時(shí)，滿足人們的審美需求。

3 手機(jī)APP相關(guān)概念

APP是“Application”的簡(jiǎn)寫(xiě)，在維基百科上對(duì)有如下解釋：移動(dòng)應(yīng)用程序（英語(yǔ)：mobile application，簡(jiǎn)稱mobile app、app），或手機(jī)應(yīng)用程序、移動(dòng)應(yīng)用程序、手機(jī)APP等，是指計(jì)給智能手機(jī)、平板電腦和其他移動(dòng)設(shè)備上運(yùn)行的應(yīng)用程序。本文的主要研究對(duì)象為手機(jī)APP。

4 手機(jī)APP設(shè)計(jì)思路

4.1 注重人機(jī)交互概念

人在操作手機(jī)時(shí)，主要以人的意識(shí)為主體，手機(jī)起到輔助作用。設(shè)計(jì)師應(yīng)考慮到人與手機(jī)的各自特點(diǎn)，使得兩者之間相互協(xié)調(diào)，從而使工作條件達(dá)到最優(yōu)。在使用手機(jī)的過(guò)程中應(yīng)盡量減少人的計(jì)算和記憶負(fù)擔(dān)，從最大程度上發(fā)揮機(jī)器計(jì)算的優(yōu)勢(shì)，同時(shí)注重人的特性，是的人與手機(jī)的配合達(dá)到最佳，從而有效地提高對(duì)手機(jī)的使用效率。

4.2 界面設(shè)計(jì)原則

4.2.1 保證功能性和實(shí)用性

我們?cè)趯?duì)手機(jī)APP界面進(jìn)行設(shè)計(jì)時(shí)，需要考慮APP本身的使用特點(diǎn)，保證大多數(shù)用戶都能獲得使用體驗(yàn)，界面中應(yīng)盡量減少按鍵數(shù)量，保證APP功能的合理性，這樣的界面會(huì)使得用戶操作更加方便流暢，也能相應(yīng)的減少手機(jī)的運(yùn)算負(fù)擔(dān)，所以一個(gè)結(jié)構(gòu)完善的APP界面是設(shè)計(jì)一個(gè)優(yōu)秀的APP的良好開(kāi)端。

4.2.2 內(nèi)涵豐富，寓意明確

設(shè)計(jì)時(shí)，應(yīng)在有限的二維空間中調(diào)整圖形、文字、按鍵、符號(hào)等元素的位置關(guān)系和比例大小，增加對(duì)界面內(nèi)容表達(dá)的準(zhǔn)確性和界面操控的靈活性。

4.2.3 圖形簡(jiǎn)潔，易識(shí)別

設(shè)計(jì)師應(yīng)考慮界面中的點(diǎn)、線、面的構(gòu)成，界面既要做到簡(jiǎn)潔并具有概括性，使用戶能更容易理解和接受；又要做到內(nèi)容豐富，不讓人感覺(jué)單調(diào)乏味。設(shè)計(jì)圖形要遵循一種秩序美，讓視覺(jué)上的感受更加平衡。增加界面操控的舒適感，使得界面更方便用戶認(rèn)知，方便識(shí)別。

手機(jī)APP界面內(nèi)空間的布局的合理性，不但影響用戶的整體視覺(jué)體驗(yàn)之外，還能增加用戶操作是的準(zhǔn)確性、流暢性和實(shí)用性。

5 顏色搭配方案

色彩是APP界面設(shè)計(jì)中的重中之重，這關(guān)乎是否能夠正確表現(xiàn)出產(chǎn)品氣質(zhì)和定位。

主色決定了手機(jī)APP界面的整體設(shè)計(jì)風(fēng)格，這個(gè)主色代表了產(chǎn)品的文化方向，同時(shí)也向用戶傳達(dá)了產(chǎn)品的情感。在設(shè)計(jì)線框圖之前，研發(fā)團(tuán)隊(duì)的每個(gè)人就應(yīng)明確產(chǎn)品的定位，提煉出最貼切產(chǎn)品的主色。許多手機(jī)APP界面的主色都是選擇了此款A(yù)PP應(yīng)用圖標(biāo)的主色，在不同界面中主色的面積會(huì)發(fā)生大小變化，可能會(huì)有同色系漸變界面，也可能出現(xiàn)同色的系功能圖標(biāo)，但主色的視覺(jué)效果依然是占主導(dǎo)地位的。

在設(shè)計(jì)手機(jī)APP時(shí)設(shè)計(jì)師可以使用互補(bǔ)色，在手機(jī)APP界面設(shè)計(jì)中互補(bǔ)色菜的對(duì)比效是果最為強(qiáng)烈的。這種互補(bǔ)色給用戶帶來(lái)強(qiáng)烈的沖擊，情感豐富，給人留下深刻印象。這種手法非常易于傳播的，一般使用夸張的、張揚(yáng)的手機(jī)APP界面中。但這種顏色的過(guò)度使用過(guò)多也容易給用戶帶來(lái)視覺(jué)上的疲勞，導(dǎo)致用戶不知何處才是重點(diǎn)信息。所以這種視覺(jué)沖擊很強(qiáng)的互補(bǔ)色只能在小面積使用，同時(shí)注意使用位置，要放在手機(jī)APP界面信息提示出。設(shè)計(jì)師還可以使用冷暖色對(duì)比，這樣的配色會(huì)使手機(jī)APP界面變得非常出彩。使得分類內(nèi)容一目了然。

6 字體設(shè)計(jì)方案

設(shè)計(jì)文字時(shí)應(yīng)保證文字辨識(shí)度高，和信息傳達(dá)的準(zhǔn)確性。相對(duì)于圖片文字擁有更加清晰準(zhǔn)確的表達(dá)能力，使得用戶能更加清晰從APP中獲取信息信息，界面內(nèi)容也更加直觀。文字設(shè)計(jì)要遵循以下原則：

用語(yǔ)要簡(jiǎn)潔，信息內(nèi)容清楚。避免使用專業(yè)的語(yǔ)言，同時(shí)減少不必要的修飾詞語(yǔ)。使得用戶可以更加迅速的理解手機(jī)APP的功能。文字布局上也應(yīng)做到排版布局合理，結(jié)構(gòu)層次清晰。

在字體設(shè)計(jì)中不同風(fēng)格的字體會(huì)給人帶來(lái)不同的視覺(jué)體驗(yàn)，但無(wú)論使用哪種字體，都應(yīng)該將文字與圖片看成一個(gè)整體。文字應(yīng)該帶有“意向性”不同的文字給人帶來(lái)不同的視覺(jué)效果。傳統(tǒng)的文字都有一個(gè)共同點(diǎn)就是大多都有曲線，正是這些很小的曲線組成的文字，營(yíng)造出了優(yōu)美高雅的感覺(jué)。同時(shí)在搭配圖片的時(shí)候，應(yīng)當(dāng)給這些傳統(tǒng)文字足夠的空間舒展，也就是留白，而且字號(hào)也不應(yīng)過(guò)大，選取與背景亮度對(duì)比強(qiáng)烈的顏色，更給人帶來(lái)信任感。親近感與柔和感：尖銳的物體會(huì)給人帶來(lái)危險(xiǎn)的感覺(jué)，文字也有同樣的心理作用，想要文字給人帶來(lái)溫柔的感覺(jué)，首先應(yīng)使用線條粗一些、前端渾圓的字體，最好是手寫(xiě)體；其次避免使用黑色或藏藍(lán)色的文字，應(yīng)選取與背景顏色亮度差異較小的暖色。未來(lái)性與先進(jìn)性：應(yīng)選擇裝飾性弱的無(wú)襯線體和黑體，或者利用圖形組成具有“圖形化”的文字，需要注意的是，越是抽象的字識(shí)別性越低，這種字可以用在logo上，注意小范圍使用。顏色則可以考慮黑白灰這些簡(jiǎn)單的配色。纖細(xì)與美麗：女性化的文字通常給人優(yōu)美、纖細(xì)的印象，需要選用線條細(xì)且有曲線的字體，流暢的手寫(xiě)細(xì)線體可以運(yùn)用在女性產(chǎn)品上，更能給人帶來(lái)嬌媚的視覺(jué)效果。懷舊與復(fù)古：字體的設(shè)計(jì)具有流行性，所以字體的設(shè)計(jì)通?？梢苑从吵隽餍械内厔?shì)。

在字體設(shè)計(jì)時(shí)要選用與背景顏色差異大的色彩，比如黑色的粗字體配上明亮的背景色，視覺(jué)的沖擊力在哪里運(yùn)用都不會(huì)減弱。特別需要注意的是，在標(biāo)題中這種字體不適用于整個(gè)篇幅，容易造成視覺(jué)的疲憊，字與字之間的間距也不宜過(guò)大，容易顯得松散。說(shuō)到字間距，設(shè)計(jì)師就要考慮到文字的容易閱讀性了，可以利用作圖軟件調(diào)節(jié)字體的間距以及橫豎排版。在一個(gè)版面內(nèi)，字體的間距要一致，才能達(dá)到容易閱讀的效果。字間距設(shè)定比較窄時(shí)，呈現(xiàn)出凌然的張力；字間距比較大時(shí)，能呈現(xiàn)出悠然的感覺(jué)。文字在排版時(shí)，也具有視覺(jué)導(dǎo)向的作用。設(shè)計(jì)師需要根據(jù)人的瀏覽習(xí)慣來(lái)安排文字，比如從上到下，從左到右。同時(shí)注意主標(biāo)題、副標(biāo)題、正文之間的間隔。內(nèi)容關(guān)聯(lián)性大的文字安排在一起，其余的用適當(dāng)?shù)拈g隔分隔開(kāi)，才不容易造成視覺(jué)上的混亂。具有節(jié)奏感和層次感的字體設(shè)計(jì)，不僅可以吸引人的目光，同時(shí)能達(dá)到讓人眼前一亮的效果。字體設(shè)計(jì)的節(jié)奏感體現(xiàn)在字號(hào)對(duì)比、重量對(duì)比、色彩對(duì)比上。當(dāng)字號(hào)越大時(shí)，文字就會(huì)顯得越重要，字號(hào)的大小變化能讓版面展現(xiàn)出強(qiáng)弱變化；最引人注意的標(biāo)題，在版面中會(huì)比其他字體更粗，但需要設(shè)計(jì)師考慮什么情況下使用何種重量感的字體是關(guān)鍵；重要的文字可以換作其他顏色加以區(qū)分，紅、黃、橙等暖色被稱為“前進(jìn)色”，它們比藍(lán)、綠這些冷色更能起到吸引人眼球的作用。

7 結(jié)束語(yǔ)

手機(jī) APP 的界面設(shè)計(jì)師，在如今市場(chǎng)對(duì)的手機(jī)APP界面設(shè)計(jì)需求量之大的趨勢(shì)下，地位也得到了前所未有的提升，但是許多公司對(duì)APP的視覺(jué)設(shè)計(jì)的認(rèn)知還停留在普通的制圖和美工上，APP設(shè)計(jì)也不僅僅局限在APP功能的本身。隨著APP應(yīng)用的發(fā)展，陳舊的“美工”意識(shí)已經(jīng)跟不上手機(jī) APP界面對(duì)視覺(jué)層面的需求了。作為一名優(yōu)秀的手機(jī)APP設(shè)計(jì)師，不僅僅需要滿足用戶對(duì)功能的需求，還需要滿足用戶對(duì)視覺(jué)層面的需求。積極學(xué)習(xí)平面設(shè)計(jì)構(gòu)成原理，以及界面的交互原理?？梢詮母旧咸岣逜PP設(shè)計(jì)師對(duì)視覺(jué)層面的表達(dá)能力。才能抓住用戶的心里，從根本上提高我國(guó)自主研發(fā)的手機(jī)APP在的質(zhì)量，提升我國(guó)自主研發(fā)的手機(jī)APP在國(guó)際上的競(jìng)爭(zhēng)力，為我國(guó)的手機(jī)APP設(shè)計(jì)貢獻(xiàn)出一份力量。

參考文獻(xiàn)：

[1] 董華君.手機(jī)App界面的視覺(jué)設(shè)計(jì)研究[J].藝術(shù)科技，2017，30（8）：291.

[2] 丁磊，李欣霏.APP界面視覺(jué)設(shè)計(jì)藝術(shù)研究[J].中國(guó)包裝工業(yè)，2013（16）：58.

【通聯(lián)編輯：唐一東】