一、手機界面設計是什么意思

手機用戶界面是用戶與手機系統、應用交互的窗口，手機界面的設計必須基于手機設備的物理特性和系統應用的特性進行合理的設計。手機界面設計指的是專門為智能手機的屏幕設計和構建應用程序（App）或網頁的視覺外觀、交互方式和用戶體驗的過程，包含兩個核心層面：UI 和 UX。這是個復雜的有不同學科參與的工程，其中最重要的兩點的就是產品本身的UI 設計和用戶體驗設計，只有將這兩者完美融合才能打造出優秀的作品。

二、手機界面設計分類

1、手機操作系統界面設計

一般的手機操作系統都是指智能手機的操作系統，主要完成網絡、流媒體等功能，一定程度上取代電腦成為網絡終端。手機操作系統界面設計需要從整體風格到細節圖標、元素的全面把握，另外還需要掌握一定嵌入式方面的技術知識。

2、手機應用界面設計

手機應用作為手機第三方程序，已逐漸把用戶帶入使用本地客戶端上網的時期。手機應用種類多樣，其中一些應用軟件功能類似，但都在設計與使用上有所差異，“良好的用戶體驗”已成為 APP 競爭的標配。

三、手機界面設計原則

1、對齊原則

對齊是手機 UI 設計中最基本也是最重要的原則之一。對齊可以讓手機界面有一個整齊的外觀，同時給用戶帶來一致性且流暢的瀏覽體驗。

2、對比原則

對比原則主要通過尺寸、色彩、造型等的改造突出界面中的重點元素，從而引起用戶的關注。對比可以使手機應用開發的層級更加清晰，同時還能聚焦用戶視線，讓用戶的焦點放在我們想讓他們看到的元素。

3、親密性原則

親密性原則主要是將相關的同類元素靠近，同時遠離不相關的元素。親密可以提高手機 UI 設計的可讀性，以及清晰地區分好界面中的各個層級。

四、手機界面設計尺寸規范

1、PS 工具設計 IOS 界面

(1)、畫布尺寸

新建 750×1334 分辨率 72，像素/英寸。

(2)、常見的字體大小

24px、26px、28px、30px、32px、34px，36px 等等。記住是偶數的。最小字號 20px。

(3)、常用字體

中文用蘋方黑，英文用 San Francisco，如果安不上也可以用 Helvetica 代替。

(4)、界面里的小圖標常見的尺寸

注：ios 開發里單位是 pt。750×1334 尺寸的換算關系 1pt = 2px，也就是說程序員拿到我們的 px 單位的標注稿，自己除以 2 就是 pt 了。24px、32px，48px 等，記住 4 的倍數比較好。注意圖標的尺寸要統一尺寸，以眼睛觀察為主調整尺寸看上去一樣。方形的比圓形的看著要大，需要調整下。

界面上的間距和元素尺寸

以偶數為單位，不清楚的可以截圖量大公司的 APP 界面作為參考。750 x 1334 設計稿尺寸：狀態欄高度：40 px；導航欄高度：88 px；標簽欄高度：98 px。

2、PS 工具設計安卓界面規范

(1)、畫布尺寸

如果想一稿適配 ios，那就新建 720×1280 分辨率 72，像素/英寸。如果單獨設計安卓 MD 新規范的，那就新建 1080×1920 分辨率 72，像素/英寸。

(2)、720×1280 常見的字體大小

24px、26px、28px、30px、32px、34px，36px 等等。記住是偶數的。最小字號 20px。

(3)、常用字體

中文用 Noto/思源黑體（是一個字體，叫法不同而已），英文用 Roboto。

(4)、界面上的間距和元素尺寸

最新規范 MD 的做法：8dp 原則：柵格系統的最小單位是 8dp，一切距離、尺寸都應該是 8dp 的整數倍。常見一般常用做法：直接把 ios 的設計稿照搬過來，只不過狀態欄，導航欄，標簽欄按照安卓的來。720 x 1280 設計稿尺寸：狀態欄高度：50px；導航欄高度：96px；標簽欄高度：96px。

五、手機界面設計流程

1、產品需求分析

當一個 UI 設計師拿到項目或者需求之后，正常情況是交互設計師細化過后的交互文檔，里面包含交互原型。而作為 ui 設計師所要做的就是理解并吃透文檔，包括里面交互邏輯，具體的操作方式，流程，反饋等，需要不斷核對和確認。

2、深層次的用戶體驗研究與分析

對已定義的目標用戶群體及特征進行深層次的剖析，包括目標用戶群體的年齡，性別及目標戶群體的一些情感習慣，心理特征等，這樣就可以有針對的對這個產品構想設計出一個大概的色系搭配及元素控件設計。

3、初稿設計

結合產品設計原型和自己對產品的體驗研究分析結合起來設計初稿。（大概的色系搭配，框架布局，元素控件，圖標 ICON 等設計都可以在這一步呈現出來）

4、視覺規范設計及細節優化設計

初稿設計完成后，就是要做好視覺規范設計及細節優化設計。視覺規范設計就是要對整個產品的顏色，字體，字號，元素控件，圖標 ICON，間距及交互效果做個統一的規范，這樣才可以做出一個成熟的產品，對前端制作也是有很大的好處的。

5、前端對接

確認完設計稿后，進入 ui 設計師與前端工程師對接的階段，ui 設計師需要提供切圖，標注，設計說明文檔以及設計圖給到前端工程師。這個階段需要保持跟開發頻繁地溝通，確保可以很好地還原設計稿（實際工作中很難苛求百分百還原），特別是需要設計師自身要懂得一點前端代碼知識，可以更好地進行溝通。

6、測試與反饋

產品進入到測試階段，需要測試人員介入，一般這個時候是先部門內部進行可用性測試，然后擴大到整個公司，反復測試幾輪之后確保沒有很大的問題之后才可以發包給客戶測試或者上線，而 ui 設計師這個時候就要收集反饋，收集意見，與產品一起討論改進方案。

六、手機界面設計注意事項

1、按鈕狀態

一般按鈕會有四態，不可點擊效果、可點擊效果、聚焦狀態、按下狀態。如果你的按鈕此時處于不可用狀態，那么一定要灰掉，或者拿掉按鈕，否則會給用戶誤導。

2、菜單層次太深

菜單項以 4~6 個為宜，如果有二級菜單，就要注意合理的菜單分類，不能有太多層級的菜單，否則很難預期，也很難找到，尋找和返回都會變得很麻煩。

3、文字過于沉余

手機界面很小，寸土寸金，一頁只能顯示下 6~10 個列表，一行只能顯示下 16~24 個字，標題欄的字數以 5 個以內為宜，標簽欄也以 2~4 個為宜，那么這時候出現文字過長的情況，一定要定義一下處理方式，如果是選擇型的，一般是截斷或者打點縮略；如果是內容閱讀型的，可以折行。但最合理的方式還是精簡文字內容，縮短文字長度。

4、交互流程分支太多

做交互的時候一定要有一個任務流程的概念貫穿始終，用戶是為了完成某個任務而使用軟件的，交互設計師除了關注界面元素、跳轉邏輯和交互反饋之外，還要關注用戶任務，分得清主要任務和次要人物，給主要任務一個暢通無阻的清晰流程，不要給予太多可能的分支，干擾主要流程。

5、相關的選項離的很遠

UI 設計中相關選項一定要具有操作上的延續性，雖然手機屏幕看起來比電腦屏幕要小的多，但是手機在屏幕上移動的代價，卻要比鼠標在電腦上移動的代價大的多，如果手機上相關選選離得很遠的話，用戶一是容易迷失，找不到下一步操作，二是需要移動手指，到屏幕另一端觸發操作。

6、點擊范圍過小

我們都知道移動端有個神奇的數字"44"，根據食指最小點觸距離 7mm、拇指最小點觸距離 9mm，可以推導出做設計的時候，最小的點觸距離是 44*32 px。你可以設計一個精美的小圖標，但是在定義它的點觸大小的時候，卻可以做放大處理，但你千萬不要設計一個傻大的圖標，點觸范圍卻比圖標要小，這樣會給用戶帶來明顯的誤操作挫敗感。

7、盡量減少用戶的文字輸入操作

這一點非常得要，因為受手機硬件設備的限制，在手機上輸入文字依然不是很方便，企業手機網站制作時為了能夠給用戶帶來方便，一定要盡可能的文字輸入操作給用戶帶來的麻煩。如用戶名、密碼等操作應盡量簡化。

七、手機界面設計常用工具

1、Adobe Photoshop

Adobe Photoshop 是一種優質的網頁設計工具。它有很多選項來創建和編輯您的 Web 模板。它適用于圖像，您可以為您的網頁設計創建圖形。通過無限的顏色和漸變選項，可以制作出最佳的模板設計。它為您提供了一個空白的畫布，讓您的想象力生動。您可以按照自己的方式附加圖像，移動元素，繪制框，裁剪邊緣以及編輯模板。它適用于圖層，這使您的工作非常簡單。您可以顯示/隱藏圖層以有效管理 Web 設計元素。

2、Sketch

Sketch 是適用于 Mac 設備的網頁設計軟件。它是專注于創建 Web 模板和設計的專業工具。它適用于矢量圖像，因此您將獲得最佳，最高分辨率的結果。工具欄和選項非常簡單。Sketch 提供了創建和管理 Web 設計項目的完全靈活性。它具有鏡像功能，允許在多種設備（如手機或平板電腦）上測試您的網頁設計模板，可以 100％確定您的網頁設計將如何在不同的屏幕尺寸上顯示。

3、Figma

Figma 是一個多用戶網頁設計軟件。它允許您與設計團隊聯系以使用相同的 Web 模板。它是與客戶共享項目并在模板設計上進行實時更改的智能工具。Figma 將網頁設計提升到一個全新的水平，它的編輯面板中包含字體，顏色和其他設置。用于創建圖標或完整的 Web 模板時，工具和選項非常棒。

4、Adobe Illustrator

Adobe Illustrator 提供了一個完美的像素級設計環境，您可以在其中創建靈活且流暢的 Web 元素。它為您提供了創建清爽利落的 Web 布局所需的一切，包括矢量圖形、響應式媒體圖標、可伸縮組件、CSS 生成、SVG 導出、線框以及可重復使用的符號。

5、Adobe XD

adobe 家打造的一款集頁面設計和交互原型為一體的設計工具，支持多人在線實時協作功能。另外在兼容性上優勢最大，能跟全家桶產品進行聯動；但是在資源和功能這兩方面相對于前面兩款就比較弱勢了。

6、Canva

Canva 是一款免費的設計工具。它不能被認為是一個成熟的網頁設計軟件，但你可以使用 Canva 創建有趣和有吸引力的設計來支持你的網頁模板。它非常適合構建可以添加到 Web 設計中的圖像。它配備了數百個模板，使您的工作更輕松。如果您沒有任何設計技能，可以使用 Canva 中的模板，輕松地為您的 Web 模板構建具有專業外觀的圖像。