App開發(fā)中的UI設(shè)計(jì)技巧

張欣悅

摘要：移動(dòng)4G時(shí)代的到來(lái)讓人們?cè)絹?lái)越離不開手機(jī)，離不開手機(jī)應(yīng)用。該文首先介紹了4G時(shí)代UI設(shè)計(jì)的重要性和UI設(shè)計(jì)的特點(diǎn)；分析了移動(dòng)設(shè)備的特點(diǎn)。并在此基礎(chǔ)上將App開發(fā)中的UI設(shè)計(jì)技巧進(jìn)行了簡(jiǎn)單的總結(jié)和分析。

關(guān)鍵詞：UI；App；界面設(shè)計(jì)

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

在3G商用近五年之后，工信部正式發(fā)放4G牌照，國(guó)內(nèi)的三大電信運(yùn)營(yíng)商中國(guó)移動(dòng)、中國(guó)電信、中國(guó)聯(lián)通，拿到了啟動(dòng)4G商用的資格。4G網(wǎng)絡(luò)正式在中國(guó)推出。中國(guó)的4G時(shí)代隨之到來(lái)，移動(dòng)4G的到來(lái)成為了眾多企業(yè)發(fā)展的新風(fēng)標(biāo)。以前人們?cè)陔娔X上的很多工作都轉(zhuǎn)移到了手機(jī)上來(lái)，手機(jī)上購(gòu)物、繳費(fèi)、手機(jī)導(dǎo)航、炒股、看新聞等等，人們對(duì)手機(jī)的依賴程度日益增大。政府機(jī)構(gòu)、事業(yè)單位、各大銀行紛紛開發(fā)了相應(yīng)業(yè)務(wù)的手機(jī)端應(yīng)用，而各大企業(yè)尤其是互聯(lián)網(wǎng)企業(yè)更是重視移動(dòng)端各種App應(yīng)用的開發(fā)。

1 UI設(shè)計(jì)的重要性

UI即User Interface（用戶界面）的簡(jiǎn)稱。UI設(shè)計(jì)則是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。如果App的開發(fā)僅限于編碼開發(fā)實(shí)現(xiàn)必要功能，圖形化的界面和簡(jiǎn)單易用的交互式方式?jīng)]有得到體現(xiàn)，那么這類App將沒有任何市場(chǎng)競(jìng)爭(zhēng)力。所以，界面設(shè)計(jì)不僅僅是簡(jiǎn)單的美術(shù)繪畫，他在藝術(shù)設(shè)計(jì)的基礎(chǔ)上需要考量使用者的喜好、使用的環(huán)境、使用的人群特點(diǎn)等眾多因素，最終使用者的用戶體驗(yàn)是評(píng)價(jià)UI設(shè)計(jì)好壞的關(guān)鍵因素。因此，界面設(shè)計(jì)與使用人群分析要緊密結(jié)合。

隨著App應(yīng)用的不斷普及，具有類似功能的App應(yīng)用數(shù)量繁多，企業(yè)怎樣才能讓自身的App應(yīng)用在讓人應(yīng)接不暇的App中脫穎而出？友好的界面設(shè)計(jì)是提升用戶體驗(yàn)的有效方法之一。一款成熟的App應(yīng)用不僅僅要具有實(shí)用的功能、安全的保障，還要具有令人愉悅、方便使用的用戶界面。好的UI設(shè)計(jì)具有以下特點(diǎn)：

1）具有友好的操作界面，能讓使用者操作便捷，易上手。用戶體驗(yàn)因人而異，然而好的用戶界面一定是簡(jiǎn)單、易用的，能引導(dǎo)用戶順利完成相應(yīng)的操作。

2）讓App應(yīng)用有自己的個(gè)性和特色，進(jìn)而提高品牌的識(shí)別度。如蘋果手機(jī)中的基本應(yīng)用一樣，具有自己鮮明的風(fēng)格。

3）能延長(zhǎng)App的使用壽命，讓應(yīng)用深入人心，提升在App市場(chǎng)上的競(jìng)爭(zhēng)力。

2 移動(dòng)設(shè)備的特點(diǎn)

與電腦相比，移動(dòng)設(shè)備的屏幕要小很多，因此顯示的內(nèi)容要盡量保持內(nèi)容簡(jiǎn)潔。簡(jiǎn)單直觀的交互能幫助用戶快速地完成任務(wù)。由于移動(dòng)設(shè)備的便攜性，用戶很有可能是在移動(dòng)的環(huán)境下進(jìn)行設(shè)備的操作，而無(wú)線網(wǎng)絡(luò)通常不太不穩(wěn)定，所以用戶在一次屏幕更新后，應(yīng)該盡量獲得較多的信息，因此，顯示的控件數(shù)量或有效信息也不能過少。

不同品牌不同型號(hào)的移動(dòng)設(shè)備有不同的屏幕尺寸和分辨率，在設(shè)計(jì)前需要針對(duì)不同的移動(dòng)設(shè)備進(jìn)行相應(yīng)的測(cè)試。分辨率和像素是我們需要測(cè)試的兩個(gè)必要指標(biāo)。屏幕分辨率通常是對(duì)經(jīng)典VGA分辨率的修改，經(jīng)典VGA分辨率是640*480。現(xiàn)在，移動(dòng)手機(jī)端最大的尺寸是800*480（WVGA）。小一點(diǎn)的尺寸是豎屏，大一點(diǎn)的尺寸是橫屏。目前很多移動(dòng)手機(jī)端可以改變方向。大多數(shù)移動(dòng)手機(jī)端的屏幕尺寸以240*320或者QVGA為主。也有許多公司涉及1920*1080的比例或者超高的清晰度。對(duì)于屏幕的像素，常見的幾個(gè)標(biāo)準(zhǔn)像素密度有：Idpi（像素密度：100dpi-140dpi）、mdpi（像素密度：140dpi-190dpi）、hdpi（像素密度：大于等于190dpi）和xhdpi（像素密度：320dpi）。

3 App開發(fā)中的UI設(shè)計(jì)

一個(gè)完整的App設(shè)計(jì)由編碼設(shè)計(jì)與UI設(shè)計(jì)構(gòu)成。長(zhǎng)期以來(lái)，開發(fā)者都重視功能的開發(fā)而忽略了UI的設(shè)計(jì)，導(dǎo)致很多實(shí)用性很強(qiáng)的App用戶下載安裝后不會(huì)用，或者覺得操作復(fù)雜不好用。由此，界面設(shè)計(jì)慢慢被互聯(lián)網(wǎng)企業(yè)所重視，認(rèn)為界面設(shè)計(jì)也是產(chǎn)品的重要賣點(diǎn)。

界面的設(shè)計(jì)大致需要經(jīng)過目標(biāo)人群確定、用戶需求調(diào)查、交互式流程設(shè)計(jì)、界面風(fēng)格定位功能icon的設(shè)計(jì)、整體視覺效果的優(yōu)化和應(yīng)用icon的設(shè)計(jì)幾個(gè)階段。其中目標(biāo)人群確定、用戶需求調(diào)查和交互式流程設(shè)計(jì)需要軟件開發(fā)人員和設(shè)計(jì)人員共同完成。同時(shí)，App產(chǎn)品的UI設(shè)計(jì)需要對(duì)相應(yīng)的功能需求有清晰的把握。由此，將界面設(shè)計(jì)的技巧總結(jié)如下：

1）頁(yè)面布局

在開發(fā)前期進(jìn)行App的原型設(shè)計(jì)，針對(duì)Android和ios制定不同的輸出規(guī)范，而在頁(yè)面布局時(shí)則可盡量兼顧Android系統(tǒng)和ios系統(tǒng)，在后期經(jīng)過微調(diào)后輸出適用安卓和ios不同的尺寸要求即可。同時(shí)，針對(duì)目標(biāo)人群要盡量使用用戶熟悉的界面風(fēng)格，方便用戶按照以往的使用習(xí)慣來(lái)操作軟件，這樣更容易讓用戶接受。如果設(shè)計(jì)得過于另類，則可能會(huì)很難符合大眾口味，而不被大眾接受。

2）顏色和字體

合理的色彩搭配和色彩選取將直接影響整個(gè)項(xiàng)目的成功與否，客戶的滿意度等等，所以在進(jìn)行美工前，要確定好App的用色標(biāo)準(zhǔn)。一般，重要的顏色不要多于3種，而在這其中又要分為：用于特別強(qiáng)調(diào)或者需要重點(diǎn)突出的文字、按鈕等小面積使用的色彩；用于普通級(jí)信息、文字等信息的通用色彩；和用于標(biāo)題、列表等比較重要信息的顏色。其中用于背景色和需要弱化顯示的信息要用較弱的顏色。

針對(duì)字體也要分為重要字體、較重要字體和一般字體；根據(jù)文字信息的重要性來(lái)確定文字的字體和字號(hào)。其中重要的文字一般為大標(biāo)題、導(dǎo)航欄；較重要的文字為二級(jí)頁(yè)面小標(biāo)題、欄目標(biāo)題等；一般字體為普通正文文字和說(shuō)明性文字。在字體字號(hào)選擇時(shí)，還可以結(jié)合其相應(yīng)的背景色來(lái)選擇，運(yùn)用色彩的搭配太突出顯示或者弱化顯示相應(yīng)的文字。

3）圖標(biāo)、按鈕設(shè)計(jì)

功能icon是在App中用來(lái)表達(dá)某一操作或者功能示意的圖形，如“主頁(yè)”、“設(shè)置”等功能能圖標(biāo)。功能圖標(biāo)的設(shè)計(jì)應(yīng)當(dāng)盡可能的形象、簡(jiǎn)潔，力求能準(zhǔn)確的表達(dá)其代表的功能。而針對(duì)應(yīng)用icon的設(shè)計(jì)要在界面設(shè)計(jì)的最后再進(jìn)行，便于讓icon與整體界面的風(fēng)格相匹配。同時(shí)，還需要輸出不同尺寸的應(yīng)用到界面上。icon設(shè)計(jì)需要?jiǎng)?chuàng)建的是一套不同尺寸的PNG文件（大小：29*29px～1024*1024px），且需要與應(yīng)用捆綁。

設(shè)計(jì)中要善于利用圖標(biāo)語(yǔ)義引導(dǎo)用戶行為，設(shè)計(jì)者可以用象形圖形來(lái)制作圖標(biāo)，如日歷、短信、通訊簿等；也可以用字符來(lái)制作圖標(biāo)，如IE瀏覽器、支付寶的圖標(biāo)；此外還可以用一些抽象的符號(hào)來(lái)隱喻要代表的應(yīng)用，當(dāng)目標(biāo)人群反復(fù)使用和查看這些圖標(biāo)，會(huì)普遍認(rèn)可這些符號(hào)的含義。

4）風(fēng)格的統(tǒng)一

在界面設(shè)計(jì)前，要對(duì)界面進(jìn)行風(fēng)格定位，讓界面的整體風(fēng)格符合視覺流程，符合目標(biāo)人群的偏好。

第一，統(tǒng)一界面各個(gè)元素間的間距。正文的行間距、按鈕與按鈕之間的距離、欄目標(biāo)題與正文之間的距離、導(dǎo)航與欄目之間的距離，都需要進(jìn)行統(tǒng)一，這樣能使界面整潔清晰，條理清楚。

第二，善于使用用圓角效果。在App應(yīng)用中，通常會(huì)有按鈕、彈出的信息提示框等必要元素，而這些必要元素通常會(huì)設(shè)計(jì)成各種大小不一的矩形。我們可以為矩形設(shè)計(jì)圓角效果，統(tǒng)一矩形的圓角像素來(lái)軟化用戶界面，并形成統(tǒng)一風(fēng)格。

第三，適當(dāng)使用光照效果。在成套的圖標(biāo)設(shè)計(jì)中，在彈出框的使用時(shí)，可以為這些元素添加一定的光照效果，讓他們更加立體化。但在使用光照效果時(shí)，要注意保持光照角度的一致性，這樣才能保證元素的陰影在屏幕上的朝向是一致的。

4 小結(jié)

隨著App應(yīng)用的普及，軟件開發(fā)師越來(lái)越重視用戶體驗(yàn)的效果。因此，在開發(fā)中必須要與前端開發(fā)、產(chǎn)品經(jīng)理達(dá)成共識(shí)，以用戶對(duì)界面的需求變化為出發(fā)點(diǎn)， 使用戶界面的外在形式和App實(shí)際應(yīng)用的內(nèi)部功能都能符合不用用戶的需求。

參考文獻(xiàn)：

[1] 梅哲.圖形圖像界面中的圖標(biāo)設(shè)計(jì)[D].武漢： 武漢理工大學(xué)，2009.

[2]馬克波斯特. 信息方式[M]. 周憲，譯.北京：商務(wù)印書館，2000.