最近看到很新伙伴在問(wèn)，如何進(jìn)行APP界面設(shè)計(jì)，也有人問(wèn)手機(jī)UI界面設(shè)計(jì)的思路到底是那樣的。為了認(rèn)真對(duì)待每一個(gè)小伙伴提出的問(wèn)題，25學(xué)堂盡可能的幫大家找到合適你們的答案。

當(dāng)然，之前25學(xué)堂分享了app設(shè)計(jì)小白自學(xué)系列教程。如果你沒(méi)看過(guò)，可以再來(lái)重溫一下。

當(dāng)然這幾課程也是針對(duì)APP設(shè)計(jì)小白來(lái)看的APP設(shè)計(jì)干貨。也是目前手機(jī)UI界面設(shè)計(jì)思路的完整解析與設(shè)計(jì)流程。

第一步：定制手機(jī)軟件APP界面版式和布局方式

1.1 、界面構(gòu)成的基本內(nèi)容

手機(jī)軟件界面的構(gòu)成在其界面所轄范圍往往會(huì)被分為幾個(gè)標(biāo)準(zhǔn)的信息區(qū)域：

標(biāo)題區(qū)、主信息操作區(qū)、公共導(dǎo)航區(qū)、

標(biāo)題區(qū)：主要是軟件LOGO、軟件版本、以及相關(guān)圖文信息。

功能操作區(qū)：它是軟件的核心部分，也是版面上面積最寬的部分。

公共導(dǎo)航區(qū)：它是對(duì)軟件操作進(jìn)行宏觀操控的區(qū)域，隨時(shí)可見(jiàn)，

在這里它可以保存當(dāng)前操作結(jié)果、切換當(dāng)前操作模塊、退出軟件系統(tǒng)，實(shí)現(xiàn)對(duì)軟件的靈活操控。

手機(jī)界面的設(shè)計(jì)，很大程度上都需要借鑒手機(jī)系統(tǒng)界面的設(shè)計(jì)進(jìn)行創(chuàng)作，只有在此基礎(chǔ)上，才能確保整個(gè)手機(jī)界面的統(tǒng)一性。

擴(kuò)展閱讀：

1、APP底部導(dǎo)航設(shè)計(jì)，是最好的手機(jī)APP導(dǎo)航設(shè)計(jì)方式

2、APP視覺(jué)界面設(shè)計(jì)學(xué)習(xí)和五項(xiàng)基本原則

3、APP界面設(shè)計(jì)之頁(yè)面布局的22條基本原則

4、移動(dòng)端UI界面設(shè)計(jì)：APP字體排版設(shè)計(jì)的七個(gè)原則

1.2、界面元素的分解與組合

界面的版式構(gòu)成依賴于界面的點(diǎn)線面的構(gòu)成，手機(jī)軟件由于自身運(yùn)行環(huán)境小，那就決定了必須控制自身的大小。因此我們的界面圖形必須根據(jù)需要進(jìn)行切分，能夠用程序?qū)崿F(xiàn)的效果盡量用程序?qū)崿F(xiàn)，如單色的線和面。復(fù)雜的圖標(biāo)就保留用圖片方式來(lái)呈現(xiàn)，因此我們?cè)诮缑姘媸降脑O(shè)計(jì)稿完成后，必須和程序員進(jìn)行密切的溝通，對(duì)需要分解的圖形元素進(jìn)行分解后優(yōu)化，然后交付程序員進(jìn)行版式的第二次組合。

第二步：視覺(jué)效果分析與產(chǎn)品規(guī)劃

彩屏手機(jī)界面的視覺(jué)效果，應(yīng)該遵循給用戶舒適、生機(jī)與活力的原則，通過(guò)視覺(jué)感官的刺激，增加用戶的親和力，適應(yīng)不同用戶的不同心理特征。

2.1、簡(jiǎn)約明快型（適合色彩支持?jǐn)?shù)量較少的彩屏手機(jī)）

現(xiàn)代設(shè)計(jì)的發(fā)展趨勢(shì)就是簡(jiǎn)約明快，大塊面的色彩線條組合的構(gòu)圖方法大氣時(shí)尚，精準(zhǔn)度到，點(diǎn)線面等版式設(shè)計(jì)基本元素的設(shè)計(jì)與排列，更能很好的凸顯時(shí)代感，給用戶的操作帶來(lái)輕松的感受。在設(shè)計(jì)的過(guò)程中基于上述風(fēng)格設(shè)計(jì)的思路，在視覺(jué)效果的設(shè)計(jì)上需要參考如下方法：

a.結(jié)合界面風(fēng)格，圖標(biāo)的設(shè)計(jì)盡量使用平面圖形，且具有很好的表現(xiàn)力，使用戶能夠清楚明白圖標(biāo)的寓意，避免操作上的麻煩。

b.展現(xiàn)圖形界面的精到之處， 手機(jī)軟件的界面設(shè)計(jì)完全是在巴掌大的一塊地方做文章，每個(gè)按鈕和色塊的設(shè)計(jì)都要精確到一個(gè)像素，這就是我們通常所說(shuō)的細(xì)節(jié)，只有做到這樣的精準(zhǔn)，所謂細(xì)節(jié)決定成敗也是如此。

c.黑白灰的設(shè)計(jì)理念已深入人心，大塊面的無(wú)彩色會(huì)讓用戶的體驗(yàn)之旅相當(dāng)乏味，活潑的色彩點(diǎn)綴才能起到畫龍點(diǎn)睛的作用。

?2.2 ? 趣味性與獨(dú)創(chuàng)型?

手機(jī)界面設(shè)計(jì)中的趣味性，主要是指形式的情趣。這是一種活潑性的版面視覺(jué)語(yǔ)言。如果版面本無(wú)多少精彩的內(nèi)容，就要靠制造趣味取勝，這也是在構(gòu)思中調(diào)動(dòng)了藝術(shù)手段所起的作用。在手機(jī)界面設(shè)計(jì)中，可以考慮使用個(gè)性的圖標(biāo)或者有趣味性的版面造型等手法去表現(xiàn)界面的趣味性。獨(dú)創(chuàng)性原則實(shí)質(zhì)上是突出個(gè)性化特征的原則。鮮明的個(gè)性，是排版設(shè)計(jì)的創(chuàng)意靈魂。

在設(shè)計(jì)的過(guò)程中基于上述風(fēng)格設(shè)計(jì)的思路，在視覺(jué)效果的設(shè)計(jì)上需要參考如下方法：

a、 界面中每一個(gè)按鈕的質(zhì)感都是設(shè)計(jì)師悉心調(diào)試的結(jié)果， IOS系統(tǒng)的界面設(shè)計(jì)似乎成為大家競(jìng)相模仿的對(duì)象，玻璃質(zhì)感和水晶效果更能體現(xiàn)現(xiàn)代設(shè)計(jì)的方向。

b、 圖標(biāo)的制作要盡量圓潤(rùn)、飽滿，避免棱角分明，給用戶生硬的感覺(jué)。

c、界面的整體色彩要再一個(gè)大的色系中調(diào)和，千萬(wàn)不能弄得像一個(gè)調(diào)色盤一樣，什么樣的色彩都往上面湊。

第三步、最終的視覺(jué)元素的設(shè)計(jì)

圖形元素設(shè)計(jì)原則：風(fēng)格統(tǒng)一、簡(jiǎn)潔、直觀、隱喻、

圖形元素設(shè)計(jì)流程：確定風(fēng)格——確定圖標(biāo)的功能——確定圖標(biāo)的造型——進(jìn)行制作

1. 確定風(fēng)格：

根據(jù)界面的總體風(fēng)格確定圖標(biāo)的風(fēng)格，風(fēng)格統(tǒng)一是最需要注意的。不光圖標(biāo)風(fēng)格統(tǒng)一，色彩的風(fēng)格也要統(tǒng)一，最好有一個(gè)主色調(diào)。

2. 確定圖標(biāo)功能：

確定圖標(biāo)功能這一項(xiàng)是很慎重的，要保證圖標(biāo)的隱喻性，不能有歧義的出現(xiàn)，要讓用戶看到圖標(biāo)以后有相同的聯(lián)想，圖標(biāo)代表的意思必須是用熟知的。圖標(biāo)的功能性是我們?cè)O(shè)計(jì)過(guò)程中需要反復(fù)斟酌的。

3. 確定圖標(biāo)的造型：

確定造型的方法多種多樣，只要不違背圖標(biāo)表達(dá)的主題。圖標(biāo)的造型設(shè)計(jì)我們提倡原創(chuàng)，先用illustrator進(jìn)行繪制，然后photoshop做圖標(biāo)設(shè)計(jì)的后期效果處理。所有界面上同級(jí)、同類的圖標(biāo)我們還要保證表現(xiàn)形式的統(tǒng)一，避免用戶視覺(jué)上的紊亂。

4. 進(jìn)行界面設(shè)計(jì)制作：

利用photoshop中最好多采用路徑工具進(jìn)行繪制界面圖形元素（以方便后期的版本定制），根據(jù)這個(gè)界面的風(fēng)格，制作界面。這個(gè)步驟是耗時(shí)比較長(zhǎng)的時(shí)間，在此階段可能發(fā)現(xiàn)之前設(shè)計(jì)中的不合理現(xiàn)象， 需要制作人員在實(shí)現(xiàn)過(guò)程中不斷調(diào)試，直至達(dá)到最合理的效果。

以上就是最簡(jiǎn)單最通用的手機(jī)UI界面設(shè)計(jì)思路解析與流程。看完這個(gè)你應(yīng)該明白如何下手去設(shè)計(jì)APP界面設(shè)計(jì)啦。