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

界面的設(shè)計(jì)大致需要經(jīng)過(guò)目標(biāo)人群確定、用戶需求調(diào)查交互式流程設(shè)計(jì)、界面風(fēng)格定位功能icon的設(shè)計(jì)、整體視覺(jué)效果的優(yōu)化和應(yīng)用icon的設(shè)計(jì)幾個(gè)階段。

其中目標(biāo)人群確定、用戶需求調(diào)查和交互式流程設(shè)計(jì)需要軟件開(kāi)發(fā)人員和設(shè)計(jì)人員共同完成。同時(shí)，App產(chǎn)品的UI設(shè)計(jì)需要對(duì)相應(yīng)的功能需求有清晰的把握。由此，將界面設(shè)計(jì)的技巧總結(jié)如下：

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

合理的色彩搭配和色彩選取將直接影響整個(gè)項(xiàng)目的成功與否，客戶的滿意度等等，所以在進(jìn)行設(shè)計(jì)前，要確定好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)的文字。

功能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文件，且需要與應(yīng)用捆綁。設(shè)計(jì)中要善于利用圖標(biāo)語(yǔ)義引導(dǎo)用戶行為，設(shè)計(jì)師可以用象形圖形來(lái)制作圖標(biāo)，如日歷、短信、通訊簿等；也可以用字符來(lái)制作圖標(biāo)；此外還可以用一些抽象的符號(hào)來(lái)隱喻代表應(yīng)用。

在界面設(shè)計(jì)前，要對(duì)界面進(jìn)行風(fēng)格定位，讓界面的整體風(fēng)格符合視覺(jué)流程，符合目標(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í)，要注意保持光照角度的一致性，這樣才能保證元素的陰影在屏幕上的朝向是一致的。

（此處已添加圈子卡片，請(qǐng)到今日頭條客戶端查看）

① 官方頭條號(hào)：設(shè)計(jì)智造 頂級(jí)創(chuàng)意設(shè)計(jì)師必備

② 本篇為 設(shè)計(jì)智造www.cocoo.top 編輯整理，版權(quán)歸原作者所有，轉(zhuǎn)載請(qǐng)注明出處！