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

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

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

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

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

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

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

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

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

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

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

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

擴(kuò)展閱讀：

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

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

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

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

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)就保留用圖片方式來呈現(xiàn)，因此我們在界面版式的設(shè)計稿完成后，必須和程序員進(jìn)行密切的溝通，對需要分解的圖形元素進(jìn)行分解后優(yōu)化，然后交付程序員進(jìn)行版式的第二次組合。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

圖形元素設(shè)計流程：確定風(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)一，最好有一個主色調(diào)。

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

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

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

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

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

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

以上就是最簡單最通用的手機(jī)UI界面設(shè)計思路解析與流程?？赐赀@個你應(yīng)該明白如何下手去設(shè)計APP界面設(shè)計啦。