論移動端應用程序的界面設計方法與發(fā)展方向

陳龍?張建平

前言

小至一年級學生，大至中老年人，幾乎人手一部智能手機。智能手機的市場雖然已經接近飽和，但是手機端的移動應用程序的種類卻是五花八門，各有特色。

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

移動端應用程序界面的概念及設計要點

1.移動端應用程序界面的基本概念

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

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

用戶與移動端應用程序之間是否能實現(xiàn)信息的良好轉達決定了一個移動端應用界面設計的成功與否。

2.移動端應用程序界面設計時需注意的要點

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

（1）移動端應用程序的界面要簡潔清晰

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

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

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

（3）移動端應用界面操作要方便

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

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

（4）移動端應用訪問速度要提高

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

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

移動端應用程序的界面的設計原則

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

1.準確劃分移動端應用程序的界面區(qū)域

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

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

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

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

3.注重移動端應用程序的界面整體視覺效果

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

（1）簡約明快型

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

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

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

如果在某一款應用界面中沒有多少精彩的內容，那么這款界面的的取勝點就要在制造趣味方面做文章。也就是在構思中調動可運用的藝術手法去給用戶帶來趣味性的體驗。例如使用個性化的圖標，在版面造型中運用一些可愛的造型。

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

移動端應用程序的界面設計的發(fā)展方向

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

1.唯一主色調

移動端應用程序的界面不再定義為多種顏色，而是只用一種顏色來表達界面的層次、重要的信息等等。在唯一主色調設計過程中只采用簡單的色階并用相對應的灰階來進行色彩對應，表達信息的層次感。

唯一主色調設計手法，做到了移動端應用程序的最小化設計，減少冗余信息的干擾，使用戶專注于主要信息的獲取。

2.多彩色

而與唯一主色調形成對照關系的，就多彩色風格，通過不同頁面、不同信息組塊采用撞色多彩色的方式來設計的風格，甚至同一個界面的局部都可以采用多彩撞色，從而產生了不少優(yōu)秀的設計。

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

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

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

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

4.卡片化

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

5.內容為王

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

6.圓形的運用

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

7.大視野背景圖

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

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

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

小結

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

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

一款移動設備的某一應用程序的圖標樣式決定了用戶是否會點擊進入，一款應用程序的界面責決定了用戶是否會繼續(xù)使用該程序。

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

（作者單位：齊齊哈爾大學美術與藝術設計學院）

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

張建平（1965-），齊齊哈爾大學美術與藝術設計學院，副院長，教授，碩士研究生導師，研究方向：產品設計。