前言

小至一年級(jí)學(xué)生，大至中老年人，幾乎人手一部智能手機(jī)。智能手機(jī)的市場(chǎng)雖然已經(jīng)接近飽和，但是手機(jī)端的移動(dòng)應(yīng)用程序的種類卻是五花八門，各有特色。

最新數(shù)據(jù)統(tǒng)計(jì)，蘋果App Store 在2008 年，只有500 個(gè)左右的初始應(yīng)用程序，數(shù)日后下載量就已經(jīng)達(dá)到上千萬，2015年初，蘋果公司在線應(yīng)用商店App Store 下載量超過百億次。手機(jī)應(yīng)用程序的發(fā)展勢(shì)頭由此可以看出是非常迅猛的，并且依然持續(xù)保持上升勢(shì)頭。隨著手機(jī)功能越來越強(qiáng)大以及4G 網(wǎng)絡(luò)的普及，互聯(lián)網(wǎng)行業(yè)的矛頭也對(duì)準(zhǔn)了手機(jī)應(yīng)用程序開發(fā)的這一塊大的市場(chǎng)，新興的創(chuàng)業(yè)型企業(yè)也紛紛投入互聯(lián)網(wǎng)這一領(lǐng)域。如何在眾多手機(jī)應(yīng)用程序中脫穎而出，拔得頭彩，應(yīng)用程序的界面設(shè)計(jì)水準(zhǔn)就是決定性的關(guān)鍵鑰匙。

移動(dòng)端應(yīng)用程序界面的概念及設(shè)計(jì)要點(diǎn)

1.移動(dòng)端應(yīng)用程序界面的基本概念

所謂界面，也是媒介的一種，一般指兩個(gè)或者多個(gè)物體之間不同的分界面，我們這里所說的界面是從人機(jī)學(xué)角度分析的界面，指的是人和機(jī)器之間傳遞信息，交換信息的媒介。移動(dòng)端的應(yīng)用程序的界面就是指在手機(jī)端的應(yīng)用程序的系統(tǒng)和用戶之間進(jìn)行交流的媒介。

移動(dòng)端應(yīng)用程序界面的設(shè)計(jì)，是依據(jù)特定的需求，在所限定的移動(dòng)設(shè)備界面大小的平面空間內(nèi)，以數(shù)字、文字、圖形、色彩、控件等多種視覺元素進(jìn)行的合理安排和整合，將移動(dòng)端應(yīng)用程序的信息以及與它所需的多種視覺元素相關(guān)聯(lián)，使應(yīng)用的操作界面更加容易被用戶理解并使用。從而順利的達(dá)到移動(dòng)端應(yīng)用程序設(shè)計(jì)的最初目的，完成預(yù)期的業(yè)務(wù)目的。

用戶與移動(dòng)端應(yīng)用程序之間是否能實(shí)現(xiàn)信息的良好轉(zhuǎn)達(dá)決定了一個(gè)移動(dòng)端應(yīng)用界面設(shè)計(jì)的成功與否。

2.移動(dòng)端應(yīng)用程序界面設(shè)計(jì)時(shí)需注意的要點(diǎn)

說到移動(dòng)端的應(yīng)用程序，我們手機(jī)中已下載的種類就已經(jīng)五花八門了，但人人都熟悉的一款移動(dòng)端應(yīng)用當(dāng)屬騰訊的QQ。這種社交類應(yīng)用軟件都需要用戶登錄后才可以使用，所以一款移動(dòng)端應(yīng)用的登錄界面的設(shè)計(jì)決定了用戶使用這類軟件的第一印象，也是決定了用戶由訪客變成目標(biāo)用戶的決定性的關(guān)鍵界面。關(guān)于移動(dòng)端應(yīng)用界面就要具備以下幾個(gè)要點(diǎn)：

（1）移動(dòng)端應(yīng)用程序的界面要簡(jiǎn)潔清晰

隨著生活節(jié)奏的加快，雖然人們更傾向于通過手機(jī)、電腦等電子設(shè)備與外界進(jìn)行交流，但是面對(duì)五花八門的各種應(yīng)用，人們?cè)跒g覽一款應(yīng)用程序時(shí)所用的時(shí)間也不會(huì)很長(zhǎng)。所以簡(jiǎn)潔清晰的界面會(huì)抓住用戶的眼球，贏取用戶的好感。相反，繁瑣的界面設(shè)計(jì)會(huì)讓用戶不知所云，一旦操作麻煩，用戶的第一反應(yīng)就是撤退，去選擇同類型中易于操作的其他應(yīng)用。

（2） 移動(dòng)端的應(yīng)用程序界面中不要出現(xiàn)廣告

一款移動(dòng)設(shè)備的尺寸已經(jīng)被設(shè)定好，如果在用戶使用的時(shí)候，在界面內(nèi)還有廣告彈出，廣告在占據(jù)屏幕的同時(shí)，用戶也會(huì)覺得自己被干擾，同時(shí)會(huì)默認(rèn)這款應(yīng)用本身就是不專業(yè)的。

（3）移動(dòng)端應(yīng)用界面操作要方便

一款易于操作的應(yīng)用會(huì)把操作的主動(dòng)權(quán)交付到用戶的手中，讓用戶在幾個(gè)界面的切換之中輕松理解這款軟件的操作原理，并在兩三個(gè)操作步驟之間就進(jìn)入這款應(yīng)用的核心信息區(qū)域，找到用戶所需關(guān)鍵信息。

讓用戶盡快的進(jìn)入到應(yīng)用程序里，就需要踢開繁瑣的注冊(cè)、登錄還有浪費(fèi)腦細(xì)胞的驗(yàn)證碼。12306的火車票驗(yàn)證碼就是現(xiàn)下最好的反面教材。

（4）移動(dòng)端應(yīng)用訪問速度要提高

用戶在使用移動(dòng)設(shè)備時(shí)多是無線網(wǎng)絡(luò)，一旦脫離了無線的狀態(tài)，處于4G網(wǎng)絡(luò)時(shí)，相對(duì)比而言，費(fèi)用會(huì)變高，應(yīng)用被訪問的可能性也會(huì)變小。所以就要求設(shè)計(jì)師要在界面設(shè)計(jì)時(shí)優(yōu)化頁面元素，體高訪問速度，讓用戶在最短的時(shí)間內(nèi)找到自己最想要的內(nèi)容。

一切的設(shè)計(jì)要點(diǎn)都是為用戶體驗(yàn)服務(wù)的，一款體驗(yàn)度高的移動(dòng)端應(yīng)用軟件，它一定是脫了枯燥數(shù)據(jù)，列表和大篇幅的文字的。將可視化的數(shù)據(jù)用可視化的動(dòng)態(tài)方式展現(xiàn)，通過即時(shí)的互動(dòng)使得用戶獲取所需，提高用戶的內(nèi)心的滿足率和心靈上的感官享受。

移動(dòng)端應(yīng)用程序的界面的設(shè)計(jì)原則

移動(dòng)端應(yīng)用程序的界面就像是一個(gè)置身在手機(jī)操作系統(tǒng)中的窗口，通過這扇窗，使得用戶與應(yīng)用程序進(jìn)行交互溝通。這就要求移動(dòng)端應(yīng)用的界面在設(shè)計(jì)上必須是結(jié)合了手機(jī)的物理特性和移動(dòng)端應(yīng)用的使用心理特性進(jìn)行設(shè)計(jì)的。做好一款移動(dòng)端應(yīng)用的最初界面規(guī)劃，需將現(xiàn)有的數(shù)據(jù)資源進(jìn)行全面的用戶需求分析，用以制定界面版式，詳盡細(xì)節(jié)。在設(shè)計(jì)過程就應(yīng)遵守一下幾個(gè)設(shè)計(jì)原則：

1.準(zhǔn)確劃分移動(dòng)端應(yīng)用程序的界面區(qū)域

移動(dòng)端應(yīng)用程序界面常由標(biāo)題區(qū)、主信息區(qū)、公共導(dǎo)航區(qū)等幾個(gè)區(qū)域構(gòu)成。標(biāo)題區(qū)指的是軟件的圖標(biāo)，軟件的版本以及一些其他的應(yīng)用圖文信息。主信息區(qū)也是主要的功能操作區(qū)，它是款應(yīng)用的核心部分，也是在其應(yīng)用中所占用界面面積最寬的版面部分。公共導(dǎo)航區(qū)則是一款應(yīng)用的宏觀操作區(qū)域，在公共導(dǎo)航區(qū)域可以保存用戶當(dāng)前的操作結(jié)果，切換到用戶設(shè)置的操作界面，還能實(shí)現(xiàn)退出應(yīng)用系統(tǒng)等操作，實(shí)現(xiàn)了對(duì)應(yīng)用系統(tǒng)的靈活操作。

移動(dòng)端應(yīng)用程序的界面的設(shè)計(jì)，在很大程度上都需要借鑒移動(dòng)設(shè)備系統(tǒng)界面的設(shè)計(jì)進(jìn)行創(chuàng)作，只有在此基礎(chǔ)上，才能確保整個(gè)移動(dòng)設(shè)備界面的統(tǒng)一性。

2.注重界面組成元素的分解與組合

一款移動(dòng)端應(yīng)用程序的界面的整體構(gòu)圖得益于界面中點(diǎn)線面等元素的組合，由于移動(dòng)設(shè)備本身的運(yùn)行環(huán)境較小，所以在設(shè)計(jì)一款移動(dòng)端應(yīng)用的時(shí)候就必須控制其自身軟件包的大小，因此我們?cè)趯?duì)界面進(jìn)行切圖這一過程的時(shí)候就要根據(jù)各項(xiàng)因素綜合需求進(jìn)行切圖，即保證程序完美的實(shí)現(xiàn)，也保證用戶的可操縱的點(diǎn)擊區(qū)域。在移動(dòng)端應(yīng)用界面的整體版式設(shè)計(jì)出來后，將做好版式分解成一個(gè)個(gè)切圖，并將切圖交由程序人員，尤其在后臺(tái)進(jìn)行二次組合，從而實(shí)現(xiàn)應(yīng)用的運(yùn)行。

3.注重移動(dòng)端應(yīng)用程序的界面整體視覺效果

一款優(yōu)秀的移動(dòng)端應(yīng)用程序的界面視覺效果，應(yīng)給予用戶舒適、生動(dòng)的心理體驗(yàn)，刺激用戶視覺感官，抓住用戶的注意力，配合用戶的心理活動(dòng)規(guī)律，提高用戶的應(yīng)用體驗(yàn)，從而增強(qiáng)移動(dòng)端應(yīng)用的親和力。故而將移動(dòng)端應(yīng)用界面的整體視覺效果分為簡(jiǎn)約明快型，和趣味獨(dú)創(chuàng)型兩個(gè)類型。

（1）簡(jiǎn)約明快型

簡(jiǎn)約明快是現(xiàn)代設(shè)計(jì)發(fā)展的總體趨勢(shì)，點(diǎn)線面的版式構(gòu)成是不變的設(shè)計(jì)模式，將這些基本元素進(jìn)行突破性或者是規(guī)律性的重新排列與設(shè)計(jì)更能很好的突出現(xiàn)今的信息時(shí)代感。更有將大面塊的彩色塊進(jìn)行拼撞，精準(zhǔn)到位又凸顯時(shí)尚大氣。用簡(jiǎn)約明快的方式表達(dá)設(shè)計(jì)目的，同時(shí)帶給用戶以愉悅感。

（2）趣味與獨(dú)創(chuàng)型

移動(dòng)端應(yīng)用程序的界面在趣味性的體現(xiàn)方面主要是指形式上的趣味表達(dá)，用一種活潑的視覺語言，來抓住用戶的注意力。

如果在某一款應(yīng)用界面中沒有多少精彩的內(nèi)容，那么這款界面的的取勝點(diǎn)就要在制造趣味方面做文章。也就是在構(gòu)思中調(diào)動(dòng)可運(yùn)用的藝術(shù)手法去給用戶帶來趣味性的體驗(yàn)。例如使用個(gè)性化的圖標(biāo)，在版面造型中運(yùn)用一些可愛的造型。

獨(dú)創(chuàng)性原則是將鮮明的個(gè)性提出并重塑，個(gè)性是排版設(shè)計(jì)中的創(chuàng)意靈魂。實(shí)質(zhì)上就是是突出個(gè)性化特征的原則。

移動(dòng)端應(yīng)用程序的界面設(shè)計(jì)的發(fā)展方向

2014年，移動(dòng)端的應(yīng)用程序的界面都明顯使用了扁平化的設(shè)計(jì)方式，但是在新的設(shè)計(jì)語言不斷推出的同時(shí)，更有一些明顯的設(shè)計(jì)標(biāo)識(shí)來預(yù)示這未來移動(dòng)端應(yīng)用界面的發(fā)展方向。

1.唯一主色調(diào)

移動(dòng)端應(yīng)用程序的界面不再定義為多種顏色，而是只用一種顏色來表達(dá)界面的層次、重要的信息等等。在唯一主色調(diào)設(shè)計(jì)過程中只采用簡(jiǎn)單的色階并用相對(duì)應(yīng)的灰階來進(jìn)行色彩對(duì)應(yīng)，表達(dá)信息的層次感。

唯一主色調(diào)設(shè)計(jì)手法，做到了移動(dòng)端應(yīng)用程序的最小化設(shè)計(jì)，減少冗余信息的干擾，使用戶專注于主要信息的獲取。

2.多彩色

而與唯一主色調(diào)形成對(duì)照關(guān)系的，就多彩色風(fēng)格，通過不同頁面、不同信息組塊采用撞色多彩色的方式來設(shè)計(jì)的風(fēng)格，甚至同一個(gè)界面的局部都可以采用多彩撞色，從而產(chǎn)生了不少優(yōu)秀的設(shè)計(jì)。

用鮮亮的多彩色來區(qū)分信息，確實(shí)能起到突出的效果，視覺上極其醒目。

可是對(duì)于一些內(nèi)容型的應(yīng)用程序，也許并不適用，比如百度云記事本第一版設(shè)計(jì)也是多彩色的，但考慮到文字記事比較多，為提供良好的文字閱讀體驗(yàn)，還是把多彩色改成灰白色微質(zhì)感的設(shè)計(jì)。

3.數(shù)據(jù)可視化

對(duì)信息的呈現(xiàn)，越來越多的移動(dòng)端應(yīng)用在界面上開始嘗試數(shù)據(jù)可視化、信息圖表化，讓界面上不僅僅是列表，還有更多直觀的餅圖、扇形圖、折線型、柱狀圖等等豐富的表達(dá)方式移動(dòng)端應(yīng)用界面利用數(shù)據(jù)可視化，可以在更小的屏幕空間內(nèi)，展示出更為立體的內(nèi)容。

4.卡片化

卡片化的界面設(shè)計(jì)方式也是一種采用較多的設(shè)計(jì)語言形式，其設(shè)計(jì)方式更容易突出信息本身，用大圖和標(biāo)題文字吸引用戶，強(qiáng)化了無盡瀏覽的體驗(yàn)，吸引用戶一直滾動(dòng)下去?？ㄆ男问竭€具有定制化、個(gè)性化等特征。不同的卡片形式遵循同一個(gè)在統(tǒng)一寬度和樣式的卡片內(nèi)，進(jìn)行發(fā)揮和設(shè)計(jì)。既保證了卡片和卡片之間的獨(dú)立性，又保證了服務(wù)和服務(wù)的統(tǒng)一化設(shè)計(jì)。

5.內(nèi)容為王

移動(dòng)端應(yīng)用程序設(shè)計(jì)的發(fā)展，最終的路徑勢(shì)必會(huì)跟web產(chǎn)品一樣，突出內(nèi)容，內(nèi)容為王，當(dāng)繁華褪盡，纖塵不染，再重新定義移動(dòng)端應(yīng)用程序存在的意義，不外乎是給用戶提供更好的服務(wù)。與內(nèi)容相比，所有的設(shè)計(jì)和包裝，都不外乎是一種表現(xiàn)手法，而真正具有價(jià)值的移動(dòng)端應(yīng)用，一定是內(nèi)容取勝的。以內(nèi)容本身做排版，引導(dǎo)用戶將注意力集中在圖片內(nèi)容上。

6.圓形的運(yùn)用

在充滿各種方框的手機(jī)屏幕內(nèi)，圓形是容易讓人覺得舒服的形狀，增加一些圓潤(rùn)的形狀點(diǎn)綴，可以給界面增加活潑的氣息，徒增好感。把選擇喜歡的標(biāo)簽設(shè)計(jì)成了圓形，這就比普通的列表、矩形等標(biāo)簽的感覺要好很多，更加趣味更具探索性。

7.大視野背景圖

用圖片作為背景，也成為當(dāng)下移動(dòng)端應(yīng)用程序的界面所涉及的的一個(gè)流行趨勢(shì)，既提升了視覺表現(xiàn)力度，又豐富了移動(dòng)端應(yīng)用的情感化元素。

大視野背景圖風(fēng)格也分為兩種，一種是內(nèi)容區(qū)塊中采用大視野背景圖，以圖片做區(qū)塊分割，同時(shí)配合描邊、留白等設(shè)計(jì)手段優(yōu)化拼接。另外一種就是全屏背景圖，在圖片內(nèi)做內(nèi)容排版、導(dǎo)航、操作。使設(shè)計(jì)非常具有生命力。

縱觀設(shè)計(jì)的歷史和發(fā)展，設(shè)計(jì)風(fēng)格很難有全新的，設(shè)計(jì)也是不斷輪回的，誰又敢保證在未來的哪一天重?cái)M物界面設(shè)計(jì)不會(huì)給我們一記漂亮的回馬槍呢？

小結(jié)

隨著動(dòng)畫等各個(gè)學(xué)科的發(fā)展和學(xué)科間的相互交叉應(yīng)用，界面不再是單一死板的執(zhí)行功能，它被賦予了更多的含義，一種界面一種形態(tài)，一步操作一種互動(dòng)，一種視覺一種體驗(yàn)，界面的設(shè)計(jì)上有了更曠闊的空間，結(jié)合動(dòng)畫、音效等各種元素，讓界面變的更加生動(dòng)，更能引起用戶的共鳴。是未來移動(dòng)端應(yīng)用軟件的界面設(shè)計(jì)的主要發(fā)展方向。

移動(dòng)端應(yīng)用程序的界面設(shè)計(jì)看似平白無奇，信手可成，但是每一個(gè)圖標(biāo)，每一個(gè)點(diǎn)擊按鈕，每一步的引導(dǎo)都是背后設(shè)計(jì)師與程序工程師共同的結(jié)晶。其中點(diǎn)滴的細(xì)節(jié)都是通過大量的用戶需求分析得出的結(jié)果。每一款元素在設(shè)計(jì)的時(shí)候，設(shè)計(jì)師更是將其精致到每一個(gè)像素。由大到小，由宏觀到微觀，由整體到細(xì)節(jié)的每一關(guān)都需要設(shè)計(jì)師的精心把控。

一款移動(dòng)設(shè)備的某一應(yīng)用程序的圖標(biāo)樣式?jīng)Q定了用戶是否會(huì)點(diǎn)擊進(jìn)入，一款應(yīng)用程序的界面責(zé)決定了用戶是否會(huì)繼續(xù)使用該程序。

而今的社會(huì)中人與人之間的交流中面對(duì)面的已經(jīng)越來越少，更多的是通過某一種移動(dòng)設(shè)備，或者是某一款移動(dòng)設(shè)備的應(yīng)用程序，溝通完美與否，就是某一款手機(jī)應(yīng)用程序的界面設(shè)計(jì)的成功與否。掌握用戶活動(dòng)心理，抓住用戶的眼球，體高用戶體驗(yàn)。也將是每一款移動(dòng)端應(yīng)用界面設(shè)計(jì)的最終追求。

（作者單位：齊齊哈爾大學(xué)美術(shù)與藝術(shù)設(shè)計(jì)學(xué)院）

作者簡(jiǎn)介：陳 龍（1988-），齊齊哈爾大學(xué)美術(shù)與藝術(shù)設(shè)計(jì)學(xué)院，碩士研究生在讀，工業(yè)設(shè)計(jì)工程專業(yè)，研究方向：產(chǎn)品設(shè)計(jì)；

張建平（1965-），齊齊哈爾大學(xué)美術(shù)與藝術(shù)設(shè)計(jì)學(xué)院，副院長(zhǎng)，教授，碩士研究生導(dǎo)師，研究方向：產(chǎn)品設(shè)計(jì)。