一、手機(jī)界面設(shè)計是什么意思
手機(jī)用戶界面是用戶與手機(jī)系統(tǒng)、應(yīng)用交互的窗口，手機(jī)界面的設(shè)計必須基于手機(jī)設(shè)備的物理特性和系統(tǒng)應(yīng)用的特性進(jìn)行合理的設(shè)計。手機(jī)界面設(shè)計指的是專門為智能手機(jī)的屏幕設(shè)計和構(gòu)建應(yīng)用程序（App）或網(wǎng)頁的視覺外觀、交互方式和用戶體驗的過程，包含兩個核心層面：UI 和 UX。這是個復(fù)雜的有不同學(xué)科參與的工程，其中最重要的兩點的就是產(chǎn)品本身的UI 設(shè)計和用戶體驗設(shè)計，只有將這兩者完美融合才能打造出優(yōu)秀的作品。
二、手機(jī)界面設(shè)計分類
1、手機(jī)操作系統(tǒng)界面設(shè)計
一般的手機(jī)操作系統(tǒng)都是指智能手機(jī)的操作系統(tǒng)，主要完成網(wǎng)絡(luò)、流媒體等功能，一定程度上取代電腦成為網(wǎng)絡(luò)終端。手機(jī)操作系統(tǒng)界面設(shè)計需要從整體風(fēng)格到細(xì)節(jié)圖標(biāo)、元素的全面把握，另外還需要掌握一定嵌入式方面的技術(shù)知識。
2、手機(jī)應(yīng)用界面設(shè)計
手機(jī)應(yīng)用作為手機(jī)第三方程序，已逐漸把用戶帶入使用本地客戶端上網(wǎng)的時期。手機(jī)應(yīng)用種類多樣，其中一些應(yīng)用軟件功能類似，但都在設(shè)計與使用上有所差異，“良好的用戶體驗”已成為 APP 競爭的標(biāo)配。
三、手機(jī)界面設(shè)計原則
1、對齊原則
對齊是手機(jī) UI 設(shè)計中最基本也是最重要的原則之一。對齊可以讓手機(jī)界面有一個整齊的外觀，同時給用戶帶來一致性且流暢的瀏覽體驗。
2、對比原則
對比原則主要通過尺寸、色彩、造型等的改造突出界面中的重點元素，從而引起用戶的關(guān)注。對比可以使手機(jī)應(yīng)用開發(fā)的層級更加清晰，同時還能聚焦用戶視線，讓用戶的焦點放在我們想讓他們看到的元素。
3、親密性原則
親密性原則主要是將相關(guān)的同類元素靠近，同時遠(yuǎn)離不相關(guān)的元素。親密可以提高手機(jī) UI 設(shè)計的可讀性，以及清晰地區(qū)分好界面中的各個層級。
四、手機(jī)界面設(shè)計尺寸規(guī)范
1、PS 工具設(shè)計 IOS 界面
(1)、畫布尺寸
新建 750×1334 分辨率 72，像素/英寸。
(2)、常見的字體大小
24px、26px、28px、30px、32px、34px，36px 等等。記住是偶數(shù)的。最小字號 20px。
(3)、常用字體
中文用蘋方黑，英文用 San Francisco，如果安不上也可以用 Helvetica 代替。
(4)、界面里的小圖標(biāo)常見的尺寸
注：ios 開發(fā)里單位是 pt。750×1334 尺寸的換算關(guān)系 1pt = 2px，也就是說程序員拿到我們的 px 單位的標(biāo)注稿，自己除以 2 就是 pt 了。24px、32px，48px 等，記住 4 的倍數(shù)比較好。注意圖標(biāo)的尺寸要統(tǒng)一尺寸，以眼睛觀察為主調(diào)整尺寸看上去一樣。方形的比圓形的看著要大，需要調(diào)整下。
界面上的間距和元素尺寸
以偶數(shù)為單位，不清楚的可以截圖量大公司的 APP 界面作為參考。750 x 1334 設(shè)計稿尺寸：狀態(tài)欄高度：40 px；導(dǎo)航欄高度：88 px；標(biāo)簽欄高度：98 px。
2、PS 工具設(shè)計安卓界面規(guī)范
(1)、畫布尺寸
如果想一稿適配 ios，那就新建 720×1280 分辨率 72，像素/英寸。如果單獨(dú)設(shè)計安卓 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，一切距離、尺寸都應(yīng)該是 8dp 的整數(shù)倍。常見一般常用做法：直接把 ios 的設(shè)計稿照搬過來，只不過狀態(tài)欄，導(dǎo)航欄，標(biāo)簽欄按照安卓的來。720 x 1280 設(shè)計稿尺寸：狀態(tài)欄高度：50px；導(dǎo)航欄高度：96px；標(biāo)簽欄高度：96px。
五、手機(jī)界面設(shè)計流程
1、產(chǎn)品需求分析
當(dāng)一個 UI 設(shè)計師拿到項目或者需求之后，正常情況是交互設(shè)計師細(xì)化過后的交互文檔，里面包含交互原型。而作為 ui 設(shè)計師所要做的就是理解并吃透文檔，包括里面交互邏輯，具體的操作方式，流程，反饋等，需要不斷核對和確認(rèn)。
2、深層次的用戶體驗研究與分析
對已定義的目標(biāo)用戶群體及特征進(jìn)行深層次的剖析，包括目標(biāo)用戶群體的年齡，性別及目標(biāo)戶群體的一些情感習(xí)慣，心理特征等，這樣就可以有針對的對這個產(chǎn)品構(gòu)想設(shè)計出一個大概的色系搭配及元素控件設(shè)計。
3、初稿設(shè)計
結(jié)合產(chǎn)品設(shè)計原型和自己對產(chǎn)品的體驗研究分析結(jié)合起來設(shè)計初稿。（大概的色系搭配，框架布局，元素控件，圖標(biāo) ICON 等設(shè)計都可以在這一步呈現(xiàn)出來）
4、視覺規(guī)范設(shè)計及細(xì)節(jié)優(yōu)化設(shè)計
初稿設(shè)計完成后，就是要做好視覺規(guī)范設(shè)計及細(xì)節(jié)優(yōu)化設(shè)計。視覺規(guī)范設(shè)計就是要對整個產(chǎn)品的顏色，字體，字號，元素控件，圖標(biāo) ICON，間距及交互效果做個統(tǒng)一的規(guī)范，這樣才可以做出一個成熟的產(chǎn)品，對前端制作也是有很大的好處的。
5、前端對接
確認(rèn)完設(shè)計稿后，進(jìn)入 ui 設(shè)計師與前端工程師對接的階段，ui 設(shè)計師需要提供切圖，標(biāo)注，設(shè)計說明文檔以及設(shè)計圖給到前端工程師。這個階段需要保持跟開發(fā)頻繁地溝通，確?？梢院芎玫剡€原設(shè)計稿（實際工作中很難苛求百分百還原），特別是需要設(shè)計師自身要懂得一點前端代碼知識，可以更好地進(jìn)行溝通。
6、測試與反饋
產(chǎn)品進(jìn)入到測試階段，需要測試人員介入，一般這個時候是先部門內(nèi)部進(jìn)行可用性測試，然后擴(kuò)大到整個公司，反復(fù)測試幾輪之后確保沒有很大的問題之后才可以發(fā)包給客戶測試或者上線，而 ui 設(shè)計師這個時候就要收集反饋，收集意見，與產(chǎn)品一起討論改進(jìn)方案。
六、手機(jī)界面設(shè)計注意事項
1、按鈕狀態(tài)
一般按鈕會有四態(tài)，不可點擊效果、可點擊效果、聚焦?fàn)顟B(tài)、按下狀態(tài)。如果你的按鈕此時處于不可用狀態(tài)，那么一定要灰掉，或者拿掉按鈕，否則會給用戶誤導(dǎo)。
2、菜單層次太深
菜單項以 4~6 個為宜，如果有二級菜單，就要注意合理的菜單分類，不能有太多層級的菜單，否則很難預(yù)期，也很難找到，尋找和返回都會變得很麻煩。
3、文字過于沉余
手機(jī)界面很小，寸土寸金，一頁只能顯示下 6~10 個列表，一行只能顯示下 16~24 個字，標(biāo)題欄的字?jǐn)?shù)以 5 個以內(nèi)為宜，標(biāo)簽欄也以 2~4 個為宜，那么這時候出現(xiàn)文字過長的情況，一定要定義一下處理方式，如果是選擇型的，一般是截斷或者打點縮略；如果是內(nèi)容閱讀型的，可以折行。但最合理的方式還是精簡文字內(nèi)容，縮短文字長度。
4、交互流程分支太多
做交互的時候一定要有一個任務(wù)流程的概念貫穿始終，用戶是為了完成某個任務(wù)而使用軟件的，交互設(shè)計師除了關(guān)注界面元素、跳轉(zhuǎn)邏輯和交互反饋之外，還要關(guān)注用戶任務(wù)，分得清主要任務(wù)和次要人物，給主要任務(wù)一個暢通無阻的清晰流程，不要給予太多可能的分支，干擾主要流程。
5、相關(guān)的選項離的很遠(yuǎn)
UI 設(shè)計中相關(guān)選項一定要具有操作上的延續(xù)性，雖然手機(jī)屏幕看起來比電腦屏幕要小的多，但是手機(jī)在屏幕上移動的代價，卻要比鼠標(biāo)在電腦上移動的代價大的多，如果手機(jī)上相關(guān)選選離得很遠(yuǎn)的話，用戶一是容易迷失，找不到下一步操作，二是需要移動手指，到屏幕另一端觸發(fā)操作。
6、點擊范圍過小
我們都知道移動端有個神奇的數(shù)字"44"，根據(jù)食指最小點觸距離 7mm、拇指最小點觸距離 9mm，可以推導(dǎo)出做設(shè)計的時候，最小的點觸距離是 44*32 px。你可以設(shè)計一個精美的小圖標(biāo)，但是在定義它的點觸大小的時候，卻可以做放大處理，但你千萬不要設(shè)計一個傻大的圖標(biāo)，點觸范圍卻比圖標(biāo)要小，這樣會給用戶帶來明顯的誤操作挫敗感。
7、盡量減少用戶的文字輸入操作
這一點非常得要，因為受手機(jī)硬件設(shè)備的限制，在手機(jī)上輸入文字依然不是很方便，企業(yè)手機(jī)網(wǎng)站制作時為了能夠給用戶帶來方便，一定要盡可能的文字輸入操作給用戶帶來的麻煩。如用戶名、密碼等操作應(yīng)盡量簡化。
七、手機(jī)界面設(shè)計常用工具
1、Adobe Photoshop
Adobe Photoshop 是一種優(yōu)質(zhì)的網(wǎng)頁設(shè)計工具。它有很多選項來創(chuàng)建和編輯您的 Web 模板。它適用于圖像，您可以為您的網(wǎng)頁設(shè)計創(chuàng)建圖形。通過無限的顏色和漸變選項，可以制作出最佳的模板設(shè)計。它為您提供了一個空白的畫布，讓您的想象力生動。您可以按照自己的方式附加圖像，移動元素，繪制框，裁剪邊緣以及編輯模板。它適用于圖層，這使您的工作非常簡單。您可以顯示/隱藏圖層以有效管理 Web 設(shè)計元素。
2、Sketch
Sketch 是適用于 Mac 設(shè)備的網(wǎng)頁設(shè)計軟件。它是專注于創(chuàng)建 Web 模板和設(shè)計的專業(yè)工具。它適用于矢量圖像，因此您將獲得最佳，最高分辨率的結(jié)果。工具欄和選項非常簡單。Sketch 提供了創(chuàng)建和管理 Web 設(shè)計項目的完全靈活性。它具有鏡像功能，允許在多種設(shè)備（如手機(jī)或平板電腦）上測試您的網(wǎng)頁設(shè)計模板，可以 100％確定您的網(wǎng)頁設(shè)計將如何在不同的屏幕尺寸上顯示。
3、Figma
Figma 是一個多用戶網(wǎng)頁設(shè)計軟件。它允許您與設(shè)計團(tuán)隊聯(lián)系以使用相同的 Web 模板。它是與客戶共享項目并在模板設(shè)計上進(jìn)行實時更改的智能工具。Figma 將網(wǎng)頁設(shè)計提升到一個全新的水平，它的編輯面板中包含字體，顏色和其他設(shè)置。用于創(chuàng)建圖標(biāo)或完整的 Web 模板時，工具和選項非常棒。
4、Adobe Illustrator
Adobe Illustrator 提供了一個完美的像素級設(shè)計環(huán)境，您可以在其中創(chuàng)建靈活且流暢的 Web 元素。它為您提供了創(chuàng)建清爽利落的 Web 布局所需的一切，包括矢量圖形、響應(yīng)式媒體圖標(biāo)、可伸縮組件、CSS 生成、SVG 導(dǎo)出、線框以及可重復(fù)使用的符號。
5、Adobe XD
adobe 家打造的一款集頁面設(shè)計和交互原型為一體的設(shè)計工具，支持多人在線實時協(xié)作功能。另外在兼容性上優(yōu)勢最大，能跟全家桶產(chǎn)品進(jìn)行聯(lián)動；但是在資源和功能這兩方面相對于前面兩款就比較弱勢了。
6、Canva
Canva 是一款免費(fèi)的設(shè)計工具。它不能被認(rèn)為是一個成熟的網(wǎng)頁設(shè)計軟件，但你可以使用 Canva 創(chuàng)建有趣和有吸引力的設(shè)計來支持你的網(wǎng)頁模板。它非常適合構(gòu)建可以添加到 Web 設(shè)計中的圖像。它配備了數(shù)百個模板，使您的工作更輕松。如果您沒有任何設(shè)計技能，可以使用 Canva 中的模板，輕松地為您的 Web 模板構(gòu)建具有專業(yè)外觀的圖像。
用戶1
2024/8/13 15:31:11seo轉(zhuǎn)化率是什么