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

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

二、手機界面設計分類

1、手機操作系統(tǒng)界面設計

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

2、手機應用界面設計

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

三、手機界面設計原則

1、對齊原則

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

2、對比原則

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

3、親密性原則

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

四、手機界面設計尺寸規(guī)范

1、PS 工具設計 IOS 界面

(1)、畫布尺寸

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

(2)、常見的字體大小

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

(3)、常用字體

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

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

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

界面上的間距和元素尺寸

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

2、PS 工具設計安卓界面規(guī)范

(1)、畫布尺寸

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

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

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

(3)、常用字體

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

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

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

五、手機界面設計流程

1、產(chǎn)品需求分析

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

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

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

3、初稿設計

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

4、視覺規(guī)范設計及細節(jié)優(yōu)化設計

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

5、前端對接

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

6、測試與反饋

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

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

1、按鈕狀態(tài)

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

2、菜單層次太深

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

3、文字過于沉余

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

4、交互流程分支太多

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

5、相關的選項離的很遠

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

6、點擊范圍過小

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

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

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

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

1、Adobe Photoshop

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

2、Sketch

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

3、Figma

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

4、Adobe Illustrator

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

5、Adobe XD

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

6、Canva

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