一、手機(jī)界面設(shè)計(jì)是什么意思

手機(jī)用戶界面是用戶與手機(jī)系統(tǒng)、應(yīng)用交互的窗口，手機(jī)界面的設(shè)計(jì)必須基于手機(jī)設(shè)備的物理特性和系統(tǒng)應(yīng)用的特性進(jìn)行合理的設(shè)計(jì)。手機(jī)界面設(shè)計(jì)是個(gè)復(fù)雜的有不同學(xué)科參與的工程，其中最重要的兩點(diǎn)的就是產(chǎn)品本身的UI設(shè)計(jì)和用戶體驗(yàn)設(shè)計(jì)，只有將這兩者完美融合才能打造出優(yōu)秀的作品。

二、手機(jī)界面設(shè)計(jì)分類

1、手機(jī)操作系統(tǒng)界面設(shè)計(jì)

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

2、手機(jī)應(yīng)用界面設(shè)計(jì)

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

三、手機(jī)界面設(shè)計(jì)原則

1、對(duì)齊原則

對(duì)齊是手機(jī)UI設(shè)計(jì)中最基本也是最重要的原則之一。對(duì)齊可以讓手機(jī)界面有一個(gè)整齊的外觀，同時(shí)給用戶帶來(lái)一致性且流暢的瀏覽體驗(yàn)。

2、對(duì)比原則

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

3、親密性原則

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

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

1、PS工具設(shè)計(jì)IOS界面

(1)、畫(huà)布尺寸

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

(2)、常見(jiàn)的字體大小

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

(3)、常用字體

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

(4)、界面里的小圖標(biāo)常見(jiàn)的尺寸

注：ios開(kāi)發(fā)里單位是pt

750×1334尺寸的換算關(guān)系 1pt=2px，也就是說(shuō)程序員拿到我們的px單位的標(biāo)注稿，自己除以2就是pt了。

24px、32px，48px等，記住4的倍數(shù)比較好。

注意圖標(biāo)的尺寸要統(tǒng)一尺寸，以眼睛觀察為主調(diào)整尺寸看上去一樣。方形的比圓形的看著要大，需要調(diào)整下。

界面上的間距和元素尺寸：

以偶數(shù)為單位，不清楚的可以截圖量大公司的APP界面作為參考。

750 x 1334 設(shè)計(jì)稿尺寸：

狀態(tài)欄高度：40 px

導(dǎo)航欄高度：88 px

標(biāo)簽欄高度：98 px

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

(1)、畫(huà)布尺寸

如果想一稿適配ios，那就新建720×1280  分辨率72，像素/英寸。

如果單獨(dú)設(shè)計(jì)安卓MD新規(guī)范的，那就新建1080×1920  分辨率72，像素/英寸。

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

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

(3)、常用字體

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

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

最新規(guī)范MD的做法：

8dp原則：柵格系統(tǒng)的最小單位是8dp，一切距離、尺寸都應(yīng)該是8dp的整數(shù)倍。

常見(jiàn)一般常用做法：

直接把ios的設(shè)計(jì)稿照搬過(guò)來(lái)，只不過(guò)狀態(tài)欄，導(dǎo)航欄，標(biāo)簽欄按照安卓的來(lái)。

720 x 1280 設(shè)計(jì)稿尺寸：

狀態(tài)欄高度：50px

導(dǎo)航欄高度：96px

標(biāo)簽欄高度：96px

五、手機(jī)界面設(shè)計(jì)流程

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

當(dāng)一個(gè)UI設(shè)計(jì)師拿到項(xiàng)目或者需求之后，正常情況是交互設(shè)計(jì)師細(xì)化過(guò)后的交互文檔，里面包含交互原型。而作為ui設(shè)計(jì)師所要做的就是理解并吃透文檔，包括里面交互邏輯，具體的操作方式，流程，反饋等，需要不斷核對(duì)和確認(rèn)。

2、深層次的用戶體驗(yàn)研究與分析

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

3、初稿設(shè)計(jì)

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

4、視覺(jué)規(guī)范設(shè)計(jì)及細(xì)節(jié)優(yōu)化設(shè)計(jì)

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

5、前端對(duì)接

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

6、測(cè)試與反饋

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

六、手機(jī)界面設(shè)計(jì)注意事項(xiàng)

1、按鈕狀態(tài)：一般按鈕會(huì)有四態(tài)，不可點(diǎn)擊效果、可點(diǎn)擊效果、聚焦?fàn)顟B(tài)、按下?tīng)顟B(tài)。如果你的按鈕此時(shí)處于不可用狀態(tài)，那么一定要灰掉，或者拿掉按鈕，否則會(huì)給用戶誤導(dǎo)。

2、菜單層次太深：菜單項(xiàng)以4~6個(gè)為宜，如果有二級(jí)菜單，就要注意合理的菜單分類，不能有太多層級(jí)的菜單，否則很難預(yù)期，也很難找到，尋找和返回都會(huì)變得很麻煩。

3、文字過(guò)于沉余：手機(jī)界面很小，寸土寸金，一頁(yè)只能顯示下6~10個(gè)列表，一行只能顯示下16~24個(gè)字，標(biāo)題欄的字?jǐn)?shù)以5個(gè)以內(nèi)為宜，標(biāo)簽欄也以2~4個(gè)為宜，那么這時(shí)候出現(xiàn)文字過(guò)長(zhǎng)的情況，一定要定義一下處理方式，如果是選擇型的，一般是截?cái)嗷蛘叽螯c(diǎn)縮略；如果是內(nèi)容閱讀型的，可以折行。但最合理的方式還是精簡(jiǎn)文字內(nèi)容，縮短文字長(zhǎng)度。

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

5、相關(guān)的選項(xiàng)離的很遠(yuǎn)：UI設(shè)計(jì)中相關(guān)選項(xiàng)一定要具有操作上的延續(xù)性，雖然手機(jī)屏幕看起來(lái)比電腦屏幕要小的多，但是手機(jī)在屏幕上移動(dòng)的代價(jià)，卻要比鼠標(biāo)在電腦上移動(dòng)的代價(jià)大的多，如果手機(jī)上相關(guān)選選離得很遠(yuǎn)的話，用戶一是容易迷失，找不到下一步操作，二是需要移動(dòng)手指，到屏幕另一端觸發(fā)操作。

6、點(diǎn)擊范圍過(guò)?。?/strong>我們都知道移動(dòng)端有個(gè)神奇的數(shù)字"44"，根據(jù)食指最小點(diǎn)觸距離7mm、拇指最小點(diǎn)觸距離9mm，可以推導(dǎo)出做設(shè)計(jì)的時(shí)候，最小的點(diǎn)觸距離是44*32 px。你可以設(shè)計(jì)一個(gè)精美的小圖標(biāo)，但是在定義它的點(diǎn)觸大小的時(shí)候，卻可以做放大處理，但你千萬(wàn)不要設(shè)計(jì)一個(gè)傻大的圖標(biāo)，點(diǎn)觸范圍卻比圖標(biāo)要小，這樣會(huì)給用戶帶來(lái)明顯的誤操作挫敗感。

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

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

七、手機(jī)界面設(shè)計(jì)常用工具

1、Adobe Photoshop

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

2、Sketch

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

3、Figma

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

4、Adobe Illustrator

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

Adobe Illustrator

5、Adobe XD

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

6、Canva

Canva是一款免費(fèi)的設(shè)計(jì)工具。它不能被認(rèn)為是一個(gè)成熟的網(wǎng)頁(yè)設(shè)計(jì)軟件，但你可以使用Canva創(chuàng)建有趣和有吸引力的設(shè)計(jì)來(lái)支持你的網(wǎng)頁(yè)模板。它非常適合構(gòu)建可以添加到Web設(shè)計(jì)中的圖像。

它配備了數(shù)百個(gè)模板，使您的工作更輕松。如果您沒(méi)有任何設(shè)計(jì)技能，可以使用Canva中的模板，輕松地為您的Web模板構(gòu)建具有專業(yè)外觀的圖像。

總結(jié)

優(yōu)化猩SEO：手機(jī)用戶已超過(guò)PC用戶，企業(yè)都很重視手機(jī)界面設(shè)計(jì)，對(duì)手機(jī)UI界面的視覺(jué)設(shè)計(jì)，需要滿足手機(jī)UI設(shè)計(jì)的交互性功能視覺(jué)需求，以達(dá)到較好的界面視覺(jué)設(shè)計(jì)效果，充分發(fā)揮手機(jī)界面設(shè)計(jì)及其交互性功能實(shí)現(xiàn)的重要作用。

參考鏈接：

手機(jī)界面設(shè)計(jì)_百度百科

https://baike.baidu.com/item/%E6%89%8B%E6%9C%BA%E7%95%8C%E9%9D%A2%E8%AE%BE%E8%AE%A1/6911540

手機(jī)UI設(shè)計(jì)_百度百科

https://baike.baidu.com/item/%E6%89%8B%E6%9C%BAUI%E8%AE%BE%E8%AE%A1/9156496

修改于2023-08-20