潘婷婷++薛蘭蘭

摘要：隨著移動互聯(lián)網(wǎng)的發(fā)展，智能手機的應(yīng)用越來越廣泛，用戶對于手機主題的個性化需求也越來越高，手機UI界面設(shè)計進(jìn)入迅速發(fā)展期。主要從設(shè)計方法、工具以及制作流程等方面研究了Android手機主題設(shè)計。

關(guān)鍵詞：Android平臺；智能手機；手機主題；UI設(shè)計

DOIDOI：10.11907/rjdk.161640

中圖分類號：TP319

文獻(xiàn)標(biāo)識碼：A文章編號文章編號：16727800（2016）009007203

基金項目基金項目：江蘇省大學(xué)生實踐創(chuàng)新訓(xùn)練項目（201513748005Y）

作者簡介作者簡介：潘婷婷（1984-），女，江蘇東臺人，碩士，無錫城市職業(yè)技術(shù)學(xué)院物聯(lián)網(wǎng)工程學(xué)院講師，研究方向為人工智能與圖像處理。

0引言

目前，智能手機已深入到人們生活的各個領(lǐng)域，成為人們生活中不可或缺的通訊工具。除傳統(tǒng)意義上的通訊功能外，如今手機還增添了多種功能。對于手機軟件系統(tǒng)而言，如果僅考慮功能，而缺少主題靈感，會一定程度影響用戶體驗?，F(xiàn)在選用智能手機的用戶，除看重它們豐富多彩的功能外，個性十足的主題界面也是影響選擇的一個重要因素。

視覺效果良好的界面可以與用戶進(jìn)行更好的交互，在手機產(chǎn)品不斷更新?lián)Q代的過程中，手機界面設(shè)計需要更多的創(chuàng)意和創(chuàng)新。業(yè)內(nèi)的知名手機公司FaceUI曾坦言，“未來移動互聯(lián)網(wǎng)的勢頭不容小覷，而UI設(shè)計自然會成為樹立競爭優(yōu)勢的重要砝碼[1]?！眹鴥?nèi)手機廠商以各具特色的定制界面吸引了不少Android用戶的眼球，但手機在長時間使用后，界面一成不變?nèi)菀鬃屓藚捑?，需要定期更換才能獲得更好的體驗。華為、OPPO、魅族等手機廠商都有自主的手機主題平臺，并且不斷利用在線活動征集更多手機主題設(shè)計，例如設(shè)計師互動平臺站酷網(wǎng)舉辦的“一見傾心一觸傾情——OPPO第二屆手機主題大賽”、“你的創(chuàng)意改變世界——第三屆小米主題設(shè)計大賽”、“為夢想設(shè)計——魅族flyme手機主題設(shè)計征集”等。這些線上活動不僅征集到很多優(yōu)秀的手機主題設(shè)計，更起到了推動手機主題設(shè)計領(lǐng)域發(fā)展的良好效果。目前主流的手機系統(tǒng)是Android平臺、IOS平臺，其中Android平臺由于它的開放性，得到了更多用戶青睞[2]。因此，本文主要研究Android手機主題設(shè)計。

1常用設(shè)計風(fēng)格

手機主題的設(shè)計風(fēng)格多樣，目前呈現(xiàn)較多的有3種風(fēng)格：扁平化、擬物化、卡通化。

1.1扁平化

扁平化設(shè)計，英文名為“Flat Design”。扁平化設(shè)計屬于純平面設(shè)計手法，是一種極簡主義的美術(shù)設(shè)計風(fēng)格。該設(shè)計手法最主要的特征是放棄諸如陰影、透視、凹凸、紋理、漸變等能體現(xiàn)3D效果的裝飾，所有設(shè)計元素不添加任何視覺特效，而是通過簡單的圖形、字體和顏色組合，達(dá)到直接、簡潔的設(shè)計目的。扁平化設(shè)計更適用于需要同時支持多種屏幕尺寸的響應(yīng)式設(shè)計技術(shù)。如今從網(wǎng)頁到手機應(yīng)用都大量使用了扁平化設(shè)計風(fēng)格，尤其在移動端設(shè)備手機、平板電腦上，因為平面的限制，使這種風(fēng)格在用戶體驗上更具優(yōu)勢[3]。

1.2擬物化

Wikipedia 對擬物化的定義是：“原有物件中某些必需的形式在新設(shè)計中已不再必要，但新設(shè)計仍模仿舊有形式，以使新外觀讓人感覺熟悉和親切[4]。”擬物化設(shè)計是對真實事物的模仿，其視覺美感無與倫比，給人一種帶入感。當(dāng)按照現(xiàn)實世界中的對象與操作仿造可視化對象和操作時，用戶能快速領(lǐng)會如何使用它。它將實物的一些特性加入設(shè)計中，即使這些特性并不具有任何功能性需求，但是由于其特殊的3D質(zhì)感，用戶有時仍會產(chǎn)生想“按”的沖動。然而，擬物化設(shè)計方式有時也會降低用戶體驗。

1.3卡通化

卡通化設(shè)計是混合卡通風(fēng)格、漫畫曲線、突發(fā)奇想并宣揚情趣生活的一種特殊設(shè)計手法。其表現(xiàn)的對象不使用寫實與傳統(tǒng)手法，而多在形態(tài)上加以表現(xiàn)，如融入簡潔、可愛的卡通植物、動物、人物造型等，大多尺度小巧，整體感覺可愛、圓潤、柔和、易親近。該設(shè)計通常運用了歸納、夸張、變形等方式處理一切實用類視覺作品。

2常用設(shè)計工具

2.1Photoshop

界面設(shè)計是一個新興領(lǐng)域，已受到越來越多軟件企業(yè)及開發(fā)者重視，在當(dāng)前還沒有用于界面設(shè)計的專業(yè)軟件，因此絕大多數(shù)設(shè)計者使用的都是Photoshop。Photoshop并非一個單純的圖像編輯軟件，其應(yīng)用領(lǐng)域非常廣泛，包括圖像、圖形、文字、視頻、出版等。常見應(yīng)用有：平面設(shè)計、照片修復(fù)、廣告攝影、影像創(chuàng)意、藝術(shù)文字、網(wǎng)頁制作、建筑效果圖后期修飾、視覺創(chuàng)意、圖標(biāo)制作、界面設(shè)計等。

2.2Illustrator

Illustrator是美國ADOBE（奧多比）公司推出的專業(yè)矢量繪圖工具。Adobe Illustrator是適用于出版、多媒體和在線圖像等領(lǐng)域的工業(yè)標(biāo)準(zhǔn)矢量插畫軟件。無論是生產(chǎn)出版線稿的設(shè)計者和專業(yè)插畫家、生產(chǎn)多媒體圖像的藝術(shù)家，還是互聯(lián)網(wǎng)頁或在線內(nèi)容制作者，都會發(fā)現(xiàn)Illustrator是實現(xiàn)創(chuàng)意的一個非常好的工具。該軟件具有很好的精度和控制能力，適合完成任何小型設(shè)計或大型的復(fù)雜項目。

2.3Fireworks

Adobe Fireworks CS3 軟件可以加速 Web 的設(shè)計與開發(fā)， 是一款創(chuàng)建與優(yōu)化 Web 圖像和快速構(gòu)建網(wǎng)站與 Web 界面原型的理想工具。它不僅可以輕松制作出各種動感的gif、動態(tài)按鈕、動態(tài)翻轉(zhuǎn)等網(wǎng)絡(luò)圖片，更重要的是可以輕松實現(xiàn)大圖切割，讓網(wǎng)頁加載圖片時，顯示速度更快。

2.4CorelDRAW

CorelDRAW是加拿大Corel公司出品的矢量圖形制作工具軟件，可提供頁面設(shè)計、網(wǎng)站制作、位圖編輯和網(wǎng)頁動畫等多種功能。它包含兩個繪圖應(yīng)用程序：一個用于矢量圖及頁面設(shè)計，一個用于圖像編輯。這套繪圖軟件組合是一個強大的交互式工具，使用戶可創(chuàng)作出多種富有動感的特殊效果及點陣圖像即時效果。

3手機主題構(gòu)成要素

3.1手機壁紙

手機壁紙通常也被稱為手機圖片、待機圖片。與Windows的桌面壁紙功能相似，手機壁紙是手機屏幕使用的背景圖片，并可以根據(jù)屏幕大小和分辨率作相應(yīng)調(diào)整。壁紙尺寸一般由不同操作系統(tǒng)的分辨率決定，如iPhone平臺，以iPhone6為例就有2種屏幕尺寸：4.7英寸的壁紙尺寸為1 334*750像素，5.5英寸的壁紙尺寸為1 920*1 080像素。主要分為單屏壁紙和雙屏壁紙，單屏壁紙指壁紙的全部圖像都在屏幕中顯示，多屏壁紙則是在屏幕中顯示壁紙的幾分之一。而由于Android平臺碎片化非常嚴(yán)重，規(guī)格尺寸大部分不同，主要分為單屏壁紙與劃屏壁紙（滾屏壁紙），其中比較常見的是480*800、720*1 280、1 080*1 920像素。在做設(shè)計圖時，一般建議以 720*1 280像素尺寸為標(biāo)準(zhǔn)。

3.2手機鎖屏

在手機待機狀態(tài)下，通常使用鎖屏壁紙對手機進(jìn)行保護(hù)，一方面防止手機被非正常操作，另一方面可節(jié)約電池電量。因此，用戶進(jìn)入手機屏幕的第一步即是打開鎖屏壁紙。從本質(zhì)上而言，鎖屏壁紙也是手機壁紙的一種，用戶可以選用喜愛的圖片進(jìn)行設(shè)置。目前的解鎖方式也有多種，如Android手機主要可通過水紋滑動解鎖、圖案解鎖、指紋識別、輸入密碼等方式進(jìn)行解鎖。

3.3應(yīng)用圖標(biāo)

在手機屏幕中分布著許多應(yīng)用圖標(biāo)，每個圖標(biāo)代表一個手機應(yīng)用程序，用戶可以通過點擊應(yīng)用圖標(biāo)進(jìn)入應(yīng)用程序。不同品牌與型號手機的屏幕分辨率與主題設(shè)計不同，所以手機應(yīng)用圖標(biāo)的大小與形狀也不固定。以Android手機為例，由于設(shè)備眾多，一般一個應(yīng)用程序的圖標(biāo)需要設(shè)計幾種不同尺寸，如：LDPI （Low Density Screen，120 DPI），其圖標(biāo)大小為36*36px；MDPI （Medium Density Screen， 160 DPI），其圖標(biāo)大小為48*48px；HDPI （High Density Screen， 240DPI），其圖標(biāo)大小為72*72px；XHDPI （Extrahigh Density Screen， 320DPI），其圖標(biāo)大小為96*96px。

3.4Widget小部件

App Widget是一種可以被嵌入到其它應(yīng)用程序中（如主屏幕）的小型應(yīng)用程序視圖，并定期進(jìn)行更新[5]。Widget小部件是與手機本身軟硬件相結(jié)合的移動互聯(lián)網(wǎng)小應(yīng)用，主要有天氣Widget、時鐘Widget、音樂Widget等常用小部件。Android平臺手機的Widget小部件基本上都是與手機桌面結(jié)合使用。這些小部件交互設(shè)計的模式通常來源于生活，如時鐘Widget的指針運動方式、天氣Widget中風(fēng)雨雷電的視覺效果等。Widget小部件的成功設(shè)計可在手機主題設(shè)計中起到畫龍點睛的作用[6]。

4手機主題制作流程

4.1前期調(diào)研構(gòu)思

在設(shè)計主題之前，應(yīng)該明確用戶的年齡、性別、愛好、教育程度等，在此基礎(chǔ)上作大量調(diào)研，尋找市面上的相關(guān)產(chǎn)品進(jìn)行分析，了解當(dāng)下的設(shè)計趨勢。然后根據(jù)產(chǎn)品特性構(gòu)思出整套手機的主題風(fēng)格，確保設(shè)計作品能夠很好地顯示在手機上，并且能夠成功吸引用戶注意。

4.2主題風(fēng)格確定

經(jīng)過調(diào)查研究后，確定最終用戶類型，設(shè)計主題要傾向于這類用戶的喜好。目前大致可分為商務(wù)類、卡通類。若手機產(chǎn)品定位為女性，可以采用色彩明快的清新風(fēng)格或造型別致的復(fù)古風(fēng)格；若手機產(chǎn)品定位為男性，可以采用簡潔干練的商務(wù)風(fēng)格或圖形前衛(wèi)的金屬風(fēng)格；若手機產(chǎn)品定位為大眾，則盡量采用簡潔明了的中性設(shè)計風(fēng)格。

4.3草圖規(guī)劃

在確定了主題風(fēng)格后，接下來需要搜集設(shè)計元素。這些元素盡量不要帶有行業(yè)特征，最好是通用的、廣為人知的，可以不受地域、文化、種族、語言等因素影響。然后進(jìn)行分類整理，將在設(shè)計中需要的元素轉(zhuǎn)換成符合應(yīng)用要求的素材。一般而言，設(shè)計產(chǎn)品界面中主要包含的壁紙、圖標(biāo)等內(nèi)容要先在草稿紙上用鉛筆勾勒草圖，不局限于一種風(fēng)格，可以多設(shè)計幾套，經(jīng)過對比后選擇效果最好的。

4.4詳細(xì)設(shè)計

草圖完成后可以通過掃描儀或相機生成電子圖片，導(dǎo)入Photoshop、Illustrator等繪圖軟件中進(jìn)行繪制。在制作過程中要規(guī)范界面的整體尺寸，包括分辨率、文本、間距邊距、按鈕、圖片等。Android系統(tǒng)因為尺寸較多，所以需要制作成不同尺寸，如圖標(biāo)可以制作成48*48、72*72、96*96px等不同的圖片規(guī)格大小[7]。

4.5測試完善

設(shè)計作品完成后需要測試視覺效果，以便找到最合適的設(shè)計方案。為了更好地觀察設(shè)計效果，可以采用矢量設(shè)計軟件來設(shè)計圖標(biāo)，以方便對圖標(biāo)進(jìn)行放大與縮小。最后根據(jù)調(diào)整好的參數(shù)，執(zhí)行主題并觀察效果，然后對比例不協(xié)調(diào)、結(jié)構(gòu)不統(tǒng)一的元素作適當(dāng)調(diào)整和優(yōu)化。

4.6應(yīng)用推廣維護(hù)

作品完善后即可推出市場，但設(shè)計并沒有結(jié)束，還需要用戶反饋，調(diào)研用戶使用時的感受。然后對調(diào)研結(jié)果進(jìn)行全面分析，根據(jù)結(jié)果進(jìn)行最終的修改完善。

5結(jié)語

本文基于Android平臺，論述了手機主題設(shè)計的全過程。手機主題設(shè)計需要根據(jù)手機應(yīng)用程序的內(nèi)容與用戶需求來考慮主題設(shè)計的風(fēng)格與手法，并針對不同類型的用戶特征進(jìn)行個性化設(shè)計，以更好地滿足手機用戶的體驗。

參考文獻(xiàn)參考文獻(xiàn)：

[1]陳燕.基于Android平臺的UX手機交互主題的設(shè)計與實現(xiàn)[J].電腦開發(fā)與應(yīng)用，2014（5）： 6063.

[2]奶油鍋.為Android手機添加主題功能[J].電腦迷，2011（5）：71.

[3]譚琢麒.扁平化手法在手機主題設(shè)計中的應(yīng)用——以應(yīng)用圖標(biāo)為例[D]. 石家莊：河北師范大學(xué)，2014.

[4]張小玲 張莉.UI界面設(shè)計[M].北京：電子工業(yè)出版社，2014.

[5]李姝博.手機游戲按鈕交互實現(xiàn)[J].軟件導(dǎo)刊，2015（6）： 5960.

[6]趙亮，張維.基于Android技術(shù)的界面設(shè)計與研究[J].電腦知識與技術(shù)，2009，5（29）： 81838185.

[7]張磊.基于Android平臺的應(yīng)用開發(fā)研究[J].計算機光盤軟件與應(yīng)用，2011（17）： 211.

責(zé)任編輯（責(zé)任編輯：黃?。?