饒衛(wèi)民，林道貴（福建信息職業(yè)技術(shù)學(xué)院，福建福州，350001）

?

略談智能手機(jī)App開(kāi)發(fā)中的UI設(shè)計(jì)技巧

饒衛(wèi)民，林道貴
（福建信息職業(yè)技術(shù)學(xué)院，福建福州，350001）

摘要：在移動(dòng)“互聯(lián)網(wǎng)+”時(shí)代，手機(jī)的終端用戶(hù)在眾多的應(yīng)用使用中，最終會(huì)選擇界面設(shè)計(jì)合理，視覺(jué)效果良好，且具有良好體驗(yàn)的應(yīng)用留在自己的手機(jī)上長(zhǎng)期使用。針對(duì)這種情況，該文在智能手機(jī)APP客戶(hù)端UI設(shè)計(jì)技巧方面展開(kāi)研究，從手機(jī)UI設(shè)計(jì)的重要性，手機(jī)UI設(shè)計(jì)的特征出發(fā)，對(duì)手機(jī)UI設(shè)計(jì)技巧分析和探討，實(shí)現(xiàn)自己設(shè)計(jì)手機(jī)UI滿(mǎn)足用戶(hù)要求，被用戶(hù)接受，達(dá)到良好效果。

關(guān)鍵詞：智能手機(jī)；APP；UI設(shè)計(jì)；技巧研究

隨著時(shí)代與技術(shù)的進(jìn)步，人們對(duì)于信息的需求也就越大，對(duì)于移動(dòng)性的要求也就越高。所以，手機(jī)app的快速發(fā)展是必然的發(fā)展趨勢(shì)，同時(shí)應(yīng)運(yùn)而生的還有很多app商店，手機(jī)的終端用戶(hù)在眾多的應(yīng)用使用中，最終會(huì)選擇界面（UI）設(shè)計(jì)合理，視覺(jué)效果良好，且具有良好體驗(yàn)的應(yīng)用留在自己的手機(jī)上長(zhǎng)期使用。

1 手機(jī)app簡(jiǎn)介

1.1由于iPhone、小米、華為等智能手機(jī)的廣泛普及，手機(jī)app這個(gè)詞語(yǔ)開(kāi)始頻繁的出現(xiàn)在廣大手機(jī)網(wǎng)民的視線(xiàn)中。APP是英文Application的簡(jiǎn)稱(chēng)，是指智能手機(jī)的第三方應(yīng)用程序，統(tǒng)稱(chēng)“移動(dòng)應(yīng)用”，也稱(chēng)“手機(jī)客戶(hù)端”。

1.2app的分類(lèi)：目前市場(chǎng)上的app種類(lèi)多種多樣，包括通訊類(lèi)、游戲類(lèi)、娛樂(lè)類(lèi)、社交類(lèi)、實(shí)用生活類(lèi)等等。其中游戲類(lèi)是目前市場(chǎng)上最后歡迎，其次是社交類(lèi)APP，大家所熟知的社交類(lèi)的app有微信、陌陌等。排在第三的娛樂(lè)類(lèi)的app，她又可分為幾類(lèi)：歌曲類(lèi)、播放器類(lèi)等。QVOD播放器和酷狗就是最類(lèi)型app的人氣之作。

1.3移動(dòng)App帶來(lái)的好處：第一、APP用戶(hù)增長(zhǎng)速度快、經(jīng)濟(jì)能力強(qiáng)，思維活躍。第二、App可整合LBS、QR、AR等新技術(shù)，帶給用戶(hù)前所未有的用戶(hù)體驗(yàn)。第三、App基于手機(jī)的隨時(shí)隨身性、互動(dòng)性特點(diǎn)，容易通過(guò)微博、SNS等方式分享和傳播，實(shí)現(xiàn)裂變式增長(zhǎng)。第四、APP的開(kāi)發(fā)成本，相比傳統(tǒng)營(yíng)銷(xiāo)手段成本更低。第五、通過(guò)新技術(shù)以及數(shù)據(jù)分析，APP可實(shí)現(xiàn)精準(zhǔn)定位企業(yè)目標(biāo)用戶(hù)，實(shí)現(xiàn)低成本快速增長(zhǎng)成為可能。第六、用戶(hù)手機(jī)安裝APP以后，企業(yè)即埋下一顆種子，可持續(xù)與用戶(hù)保持聯(lián)系。

2 手機(jī)UI設(shè)計(jì)的重要性

UI設(shè)計(jì)即為用戶(hù)界面設(shè)計(jì)，全稱(chēng)User Interface。手機(jī)UI設(shè)計(jì)一直被業(yè)界稱(chēng)為產(chǎn)品的“臉面”，好的UI設(shè)計(jì)不僅讓手機(jī)變得有個(gè)性、有品味，還要讓手機(jī)的操作變得舒適、簡(jiǎn)單、自由，充分體現(xiàn)手機(jī)的定位和特點(diǎn)。一款設(shè)計(jì)合理的界面能夠使用戶(hù)輕松完成各種操作，如果一款手機(jī)界面中的功能安排不合理，給用戶(hù)帶來(lái)畏懼感，那么它就是失敗的?？傮w來(lái)講，我們應(yīng)該遵循執(zhí)行效率、易學(xué)習(xí)性和易用性原則來(lái)設(shè)計(jì)手機(jī)界面。

3 手機(jī)UI設(shè)計(jì)的特征

與其他類(lèi)型的軟件界面設(shè)計(jì)相比，手機(jī)UI設(shè)計(jì)有著更多的局限性和其獨(dú)有特征，這種局限性主要來(lái)自手機(jī)屏幕尺寸的局限。它要求設(shè)計(jì)師在著手設(shè)計(jì)制作之前，必須先對(duì)相應(yīng)的設(shè)備進(jìn)充分的了解和分析。

3.1手機(jī)的顯示屏相對(duì)較小，能夠支持的色彩也較有限，可能無(wú)法正常顯示顏色過(guò)于豐富的圖像效果，這就要求界面中的元素要盡可能處理簡(jiǎn)潔。

3.2手機(jī)界面交互過(guò)程不宜設(shè)計(jì)得太復(fù)雜，交互步驟不宜太多。這可以提高操作的便利性，進(jìn)而提高操作效率。

3.3不同型號(hào)的手機(jī)支持的圖像格式、音頻格式和動(dòng)畫(huà)格式不一樣，所以在設(shè)計(jì)之前要充分收集資料，選擇盡可能通用的格式，或者對(duì)不同型號(hào)進(jìn)行配置選擇。通常來(lái)說(shuō)，制作手機(jī)UI界面時(shí)會(huì)按照最常用、最大尺寸的屏幕進(jìn)行制作，然后分別為不同尺寸的屏幕各切出一套圖，這樣就可以保證大部分的屏幕都可以正常顯示。

3.4 手機(jī)界面的色彩級(jí)別。手機(jī)屏幕色彩實(shí)質(zhì)上是指屏幕可以顯示的色彩數(shù)量。目前，市場(chǎng)上彩屏手機(jī)的色彩指數(shù)由低到高依次可分為：?jiǎn)紊?56色、4096色、65536色、26萬(wàn)色、1600萬(wàn)色。其中256是2的8次方，即8位彩色，依此類(lèi)推，65536是2的16次方，即通常所說(shuō)的16真彩色。手機(jī)的顯示內(nèi)容主要可以分為3類(lèi)：文字、簡(jiǎn)單圖像和照片。不同色彩級(jí)別屏幕的顯示效果截然不同。文字通常只需要很少的顏色就可以正常表現(xiàn)，而色彩細(xì)膩豐富的圖像則需要色彩級(jí)別較高的屏幕才能完美的表現(xiàn)。在測(cè)試手機(jī)屏幕的色彩時(shí)，可以依據(jù)以下3個(gè)指標(biāo)：紅綠藍(lán)三原色的顯示效果、色彩過(guò)渡的表現(xiàn)和灰度等級(jí)的表現(xiàn)。

3.5手機(jī)界面設(shè)計(jì)圖標(biāo)的尺寸。圖標(biāo)是具有特殊指代意義的圖形，在手機(jī)UI界面中的地位非常重要。一枚精美絕倫的圖標(biāo)總是可以輕易地吸引用戶(hù)點(diǎn)擊，對(duì)于一款A(yù)PP來(lái)說(shuō)，設(shè)計(jì)一枚漂亮的圖標(biāo)是絕對(duì)有必要的。

4 手機(jī)UI設(shè)計(jì)技巧

4.1界面效果講究整體性和一致性：手機(jī)軟件運(yùn)行基于操作系統(tǒng)的軟件環(huán)境，界面設(shè)計(jì)基于這個(gè)應(yīng)用平臺(tái)的整體風(fēng)格，這樣有利于產(chǎn)品外觀的整合。軟件界面的總體色彩應(yīng)該接近和類(lèi)似系統(tǒng)界面的總體色調(diào)。一款外觀與系統(tǒng)界面不統(tǒng)一的手機(jī)，會(huì)給用戶(hù)帶來(lái)不適感。手機(jī)用戶(hù)的操作習(xí)慣是基于系統(tǒng)的，所以在界面設(shè)計(jì)的操作流程上，也要遵循系統(tǒng)的規(guī)范性，讓用戶(hù)可以會(huì)用手機(jī)就會(huì)使用APP，簡(jiǎn)化用戶(hù)操作流程。

4.2界面效果的個(gè)性化：設(shè)計(jì)時(shí)除了要注意界面的整體性和一致性，也要著重突出APP UI的個(gè)性化。整體性和一致性是基于手機(jī)系統(tǒng)視覺(jué)效果的和諧統(tǒng)一考慮的，個(gè)性化是基于軟件本身的特征和用途考慮的。

4.3特有的界面構(gòu)架：軟件的實(shí)用性是軟件應(yīng)用的根本。在設(shè)計(jì)界面時(shí)，應(yīng)該結(jié)合軟件的應(yīng)用范疇，合理地安排版式，以求達(dá)到美觀適用的目的。這一點(diǎn)不一定能與系統(tǒng)達(dá)成一致的標(biāo)準(zhǔn)，但它應(yīng)該有它的行業(yè)標(biāo)準(zhǔn)。界面構(gòu)架的功能操作區(qū)、內(nèi)容顯示區(qū)、導(dǎo)航控制區(qū)都應(yīng)該統(tǒng)一范疇，不同功能模塊的相同操作區(qū)域的元素風(fēng)格應(yīng)該一致，使用戶(hù)能迅速掌握對(duì)不同模塊的操作，從而使整個(gè)界面統(tǒng)一在一個(gè)特有的整體之中。

4.4專(zhuān)有的界面設(shè)計(jì)：軟件的圖標(biāo)按鍵是基于自身應(yīng)用的命令集，它的每一個(gè)圖形內(nèi)容映射的是一個(gè)目標(biāo)動(dòng)作，因此作為體現(xiàn)目標(biāo)動(dòng)作的圖標(biāo)，它應(yīng)該有強(qiáng)烈的表意性。制作過(guò)程中選擇具有典型行業(yè)特征的圖符，有助于用戶(hù)識(shí)別，方便操作。圖標(biāo)的圖形制作不能太繁瑣，要適應(yīng)手機(jī)顯示面積，在制作上應(yīng)盡量使用素圖，確保圖形清晰。如果針對(duì)立體化的界面，可考慮部分像素羽化，以增強(qiáng)圖標(biāo)的層次感。

4.5圖形圖像元素的質(zhì)量：盡量使用較少顏色表現(xiàn)色彩豐富的圖形圖像，即確保數(shù)據(jù)量小的同時(shí)確保圖形圖像的效果完好，提高程序的工作效率。界面上的線(xiàn)條與色塊后期都會(huì)用程序來(lái)實(shí)現(xiàn)，這就需要考慮程序部分和圖像部分的結(jié)合。自然結(jié)合才能協(xié)調(diào)界面效果的整體感，因此需要程序開(kāi)發(fā)人員與界面設(shè)計(jì)人員密切溝通，達(dá)成一致。

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

APP創(chuàng)新性開(kāi)發(fā)，始終是用戶(hù)的關(guān)注焦點(diǎn)，而商用APP客戶(hù)端的開(kāi)發(fā)，更得到諸多網(wǎng)絡(luò)大亨們的一致關(guān)注與贊許，與趨于成熟的美國(guó)市場(chǎng)相對(duì)比，我國(guó)開(kāi)發(fā)市場(chǎng)正處于高速生長(zhǎng)階段。在智能手機(jī)APP設(shè)計(jì)者們完成其UI設(shè)計(jì)時(shí)，需要綜合考慮其潛在用戶(hù)的各種特征，只有這樣才能恰如其分地將內(nèi)容呈現(xiàn)在UI中。

參考文獻(xiàn)

［1］張枝，基于用戶(hù)體驗(yàn)的高校手機(jī)教務(wù)平臺(tái)UI設(shè)計(jì)［J］，機(jī)電技術(shù)，2013（12）.

［2］貍雅人， photoshop智能手機(jī)APP界面設(shè)計(jì)［M］.北京：人民郵電出版社，2013.

［3］梁日升， 楊杰.網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)［M］.北京：機(jī)械工業(yè)出版社，2013.

［4］百度百科，APP.http：// baike.baidu.com/ link？url=gBXk2gj1rucd.htm，2016.3.16

［5］張晨起， photoshop UI交互設(shè)計(jì)［M］.北京：人民郵電出版社，2016.

作者簡(jiǎn)介

饒衛(wèi)民（1969-），女，副教授，主要研究方向?yàn)閳D形設(shè)計(jì)、英文翻譯；

林道貴（1975-），男，碩士，副教授，主要研究方向?yàn)閿?shù)字媒體設(shè)計(jì)、圖像研究、虛擬現(xiàn)實(shí)。

基金項(xiàng)目：福建省中青年教師教育科研項(xiàng)目資助（項(xiàng)目編號(hào)：JAS14401）

On intelligent mobile phone App UI in the development of design skills

Lin Daogui，Rao Weimin
（Fujian Polytechnic of Information Technology，F(xiàn)uzhou Fujian，350001）

Abstract：In the mobile "Internet plus" era， the use of mobile phone terminal users in many applications，the interface will eventually choose reasonable design，good visual effect，long-term use in application and good experience on your mobile phone.In view of this situation， the paper in the smartphone app client UI design skills launches the research，from the importance of UI design of mobile phone，mobile phone UI design characteristics of， the analysis and discussion of the of mobile phone UI design skills，to realize his own design mobile phone UI to meet user requirements，accepted to a user，achieve good results.

Keywords：intelligent mobile phone；APP；UI design；technique research