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

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

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

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

1.1 、界面構成的基本內容

手機軟件界面的構成在其界面所轄范圍往往會被分為幾個標準的信息區(qū)域：

標題區(qū)、主信息操作區(qū)、公共導航區(qū)、

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

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

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

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

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

擴展閱讀：

1、APP底部導航設計，是最好的手機APP導航設計方式

2、APP視覺界面設計學習和五項基本原則

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

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

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

界面的版式構成依賴于界面的點線面的構成，手機軟件由于自身運行環(huán)境小，那就決定了必須控制自身的大小。因此我們的界面圖形必須根據需要進行切分，能夠用程序實現的效果盡量用程序實現，如單色的線和面。復雜的圖標就保留用圖片方式來呈現，因此我們在界面版式的設計稿完成后，必須和程序員進行密切的溝通，對需要分解的圖形元素進行分解后優(yōu)化，然后交付程序員進行版式的第二次組合。

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

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

2.1、簡約明快型（適合色彩支持數量較少的彩屏手機）

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

a.結合界面風格，圖標的設計盡量使用平面圖形，且具有很好的表現力，使用戶能夠清楚明白圖標的寓意，避免操作上的麻煩。

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

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

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

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

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

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

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

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

第三步、最終的視覺元素的設計

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

圖形元素設計流程：確定風格——確定圖標的功能——確定圖標的造型——進行制作

1. 確定風格：

根據界面的總體風格確定圖標的風格，風格統(tǒng)一是最需要注意的。不光圖標風格統(tǒng)一，色彩的風格也要統(tǒng)一，最好有一個主色調。

2. 確定圖標功能：

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

3. 確定圖標的造型：

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

4. 進行界面設計制作：

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

以上就是最簡單最通用的手機UI界面設計思路解析與流程。看完這個你應該明白如何下手去設計APP界面設計啦。