移動應(yīng)用界面設(shè)計的尺寸設(shè)置及規(guī)范
一、Android篇
1. Android分辨率
Android系統(tǒng)的多分辨率設(shè)計，對設(shè)計師和開發(fā)者而言，確實是一大挑戰(zhàn)。這一難題也有其解決之道。Android支持多種dpi模式，包括ldpi、mdpi、hdpi、xhdpi、hdpi、xhdpi等。
值得注意的是，ppi和dpi雖然都是密度單位，但并非度量單位。dpi主要用于輸出，特別是在打印設(shè)備上；而ppi對設(shè)計師而言更為熟悉，例如在Photoshop中，畫布分辨率常設(shè)置為72像素/英寸，即ppi。雖然概念上有差異，但在移動設(shè)備的顯示屏上，可以將ppi視為等于dpi。
以iPhone5為例，其ppi的計算方式是：PPI=√（長度像素數(shù)2+寬度像素數(shù)2）/屏幕對角線英寸數(shù)。對于Android手機(jī)，我們可以通過一些常見的分辨率來大致判斷其dpi模式。
2. 單位換算方法
在Android開發(fā)中，文字大小的單位是sp，非文字的尺寸單位用dp。但設(shè)計師在設(shè)計稿中常用的單位是px。這些單位之間的換算，是設(shè)計師和開發(fā)者必須了解的知識。
簡單來說，px是我們UI設(shè)計師在PS里使用的，同時也是手機(jī)屏幕上所顯示的；dp是開發(fā)寫layout的時候使用的尺寸單位。為了適配多分辨率的手機(jī)，我們需要了解這些單位之間的換算關(guān)系。
當(dāng)運行在mdpi模式下時，1dp=1px；當(dāng)運行在hdpi模式下時，1dp=1.5px；當(dāng)運行在xhdpi模式下時，1dp=2px。當(dāng)你的app需要適配多個dpi模式的時候，可以按照這個比例進(jìn)行換算。
3. 設(shè)計稿基本元素的尺寸設(shè)置
為了適應(yīng)多分辨率的手機(jī)，理想的方式是為每種分辨率做一套設(shè)計稿，包括icon、設(shè)計稿標(biāo)注等。但在實際開發(fā)中，這種方法并不現(xiàn)實，因此通常會選擇折中的方法。
方法一：以標(biāo)準(zhǔn)尺寸（如xhdpi）為基礎(chǔ)進(jìn)行設(shè)計，然后根據(jù)需要進(jìn)行放大或縮小。這種方法的不足是，對于高分辨率手機(jī)，圖標(biāo)放大后可能會出現(xiàn)質(zhì)量下降的問題。
方法二：以最高分辨率為基準(zhǔn)進(jìn)行設(shè)計，然后縮小以適應(yīng)小分辨率設(shè)備。但這種方法也有缺點，如果所有元素都以最大尺寸呈現(xiàn)，會導(dǎo)致加載速度慢、耗費流量多，對小分辨率用戶可能并不友好。在實際操作中，需要根據(jù)具體情況和需求選擇合適的尺寸設(shè)置方法。也需要考慮到用戶體驗和界面美觀的因素，以達(dá)到最佳的視覺效果和用戶體驗。
二、其他注意事項（新增章節(jié)）
4. 界面布局與用戶體驗
在設(shè)計移動應(yīng)用界面時，除了分辨率和尺寸設(shè)置外，還需要注意界面布局和用戶體驗。合理的布局可以使界面更加整潔、美觀，提高用戶的操作體驗。也要考慮到用戶的操作習(xí)慣和需求，以便設(shè)計出更符合用戶習(xí)慣的操作流程。
5. 色彩與字體設(shè)計
色彩和字體是移動應(yīng)用界面設(shè)計中不可忽視的元素。合理的色彩搭配可以營造出良好的視覺氛圍，而字體的選擇則直接影響到用戶的閱讀體驗。在設(shè)計過程中，需要根據(jù)品牌特點和用戶需求，選擇適合的色彩和字體，以提升用戶體驗和品牌形象。
一、設(shè)計稿畫布尺寸推薦
結(jié)合友盟的分辨率占比數(shù)據(jù)，為了方便換算到Android開發(fā)中的尺寸單位，推薦設(shè)計稿的畫布尺寸選用720X1280，分辨率仍舊為72ppi。這一選擇有助于開發(fā)者在設(shè)計和開發(fā)過程中保持一致性，確保應(yīng)用在不同分辨率的設(shè)備上都能良好地展示。
二、Android界面基本尺寸規(guī)范
在Android規(guī)范中，對于導(dǎo)航欄、工具欄等的尺寸沒有明確的規(guī)定。但根據(jù)48dp原則及主流應(yīng)用截圖分析，可確定以下尺寸要求：
1. 狀態(tài)欄高度：50px
2. 導(dǎo)航欄、操作欄高度：96px（48dp x 2）
3. 主菜單欄高度：96px
4. 內(nèi)容區(qū)域高度：1038px（1280-50-96-96=1038）
隨著Android設(shè)備的演變，實體鍵逐漸被功能鍵取代，功能鍵的高度也與菜單欄相同，為96px。
三、圖標(biāo)大小規(guī)范
根據(jù)官方規(guī)范文檔，圖標(biāo)的大小如下：
1. 啟動圖標(biāo)（home頁或app列表頁）：整體大小為48 x 48dp
2. 操作欄圖標(biāo)：代表用戶在app中可使用的最重要圖標(biāo)，整體大小為32 x 32dp，圖形實際區(qū)域為24 x 24dp。
3. 小圖標(biāo)/場景圖標(biāo)：用于表示操作或特定項目的狀態(tài)，整體大小為16 x 16dp，圖形實際區(qū)域為12 x 12dp。
4. 通知圖標(biāo)：當(dāng)app有新通知時，會顯示在狀態(tài)欄的通知圖標(biāo)，整體大小為24 x 24dp，圖形實際區(qū)域為22 x 22dp。
在設(shè)計稿尺寸為720 x 1280的情況下，圖標(biāo)大小需在規(guī)范要求的尺寸數(shù)字上乘以2。
四、字體大小規(guī)范
Android規(guī)范中的字體大小要求如下：
字體大小單位為sp，換算關(guān)系為spppi/160=px。在720 x 1280尺寸的設(shè)計稿上，推薦使用的字體大小有24px、28px、32px、36px，具體選擇取決于文字的重要程度。
五、其他尺寸要求與原理
1. 通常把48dp作為可觸摸的UI元件的標(biāo)準(zhǔn)。這一尺寸轉(zhuǎn)化為物理尺寸約9毫米，符合用戶手指觸摸的舒適度與準(zhǔn)確性。
2. 設(shè)計元素的高和寬至少48dp，以確保觸摸目標(biāo)足夠大，方便用戶觸摸。
3. UI元素之間的空白通常是8dp，以保持整體信息密度和視覺舒適度的平衡。這樣的設(shè)計不僅提升了用戶體驗，還確保了應(yīng)用在不同設(shè)備上的兼容性。
二、iOS篇
1. 分辨率
iOS設(shè)備的界面尺寸多樣化，其中iPhone和iPad的界面尺寸差異顯著。iPhone的界面尺寸通常以像素為單位，常見的尺寸包括320x480px和640x960px等。而iPad則擁有更高的分辨率，如1024x768和2048x1536等。值得注意的是，這些分辨率下的像素密度通常以PPI（Pixels Per Inch）來衡量，一般的網(wǎng)頁UI和移動UI通常是72PPI。2. 單位換算px、pt
3. 基本元素的尺寸設(shè)置
iOS設(shè)備的APP界面通常由四個基本元素組成：狀態(tài)欄、導(dǎo)航欄、主菜單欄和內(nèi)容區(qū)域。以常見的640x960尺寸設(shè)計為例，這些元素的尺寸如下：- 狀態(tài)欄：顯示手機(jī)狀態(tài)的區(qū)域，高度為40px。
- 導(dǎo)航欄：顯示當(dāng)前界面的名稱及功能按鈕，高度為88px。
- 主菜單欄：提供應(yīng)用分類內(nèi)容的快速跳轉(zhuǎn)，高度為98px。
- 內(nèi)容區(qū)域：展示應(yīng)用提供的相應(yīng)內(nèi)容，高度為734px（960-40-88-98）。
4. 常用圖像、圖標(biāo)大小
在iOS設(shè)計中，常用圖像和圖標(biāo)的大小有官方規(guī)范文檔作為參考。這些規(guī)范通常以像素為單位，為設(shè)計師提供明確的尺寸指導(dǎo)。5. 字體大小
iOS交互設(shè)計規(guī)范文檔雖然未對字體大小提供嚴(yán)格的數(shù)值規(guī)定，但給出了一些指導(dǎo)原則。字體大小應(yīng)以點（pt）為單位，并確保即使用戶選擇最小文字大小，文字也不應(yīng)小于22點。正文樣式通常使用34點字體大小作為默認(rèn)設(shè)置。
在界面設(shè)計中，字體大小和排版扮演著至關(guān)重要的角色。通常，字體大小設(shè)置的差異是每檔2點。但在某些特殊情況下，例如最小、小和中等設(shè)置，我們會使用相同的字體大小、行間距和字間距。在小字號中，字間距相對寬闊，確保閱讀的舒適度；而在大字號中，字間距相對緊密，以突出重要信息。標(biāo)題和正文使用同樣的字體大小，但標(biāo)題會通過加粗來突出。導(dǎo)航控制器中的文字通常采用較大的字號，確保用戶能輕易識別。在文本設(shè)計上，我們更傾向于使用常規(guī)體和中等大小，避免過于復(fù)雜或夸張的字體。
第二章：UI設(shè)計在APP中的常見尺寸
隨著移動設(shè)備的發(fā)展，UI設(shè)計在APP中的尺寸規(guī)范變得尤為重要。尤其是蘋果設(shè)備，從初代的iPhone到如今的iPhone X、XS Max、XR，每一代設(shè)備的尺寸、分辨率和特性都有所不同。設(shè)計師必須了解這些變化，以適應(yīng)不同的設(shè)備。例如，初代iPhone的3.5英寸屏幕和480x320px分辨率，到iPhone 4引入Retina屏后的960x640px。隨著設(shè)備的演變，設(shè)計稿的尺寸也不斷調(diào)整。設(shè)計師需熟悉這些規(guī)范，以便在設(shè)計中靈活應(yīng)用。
第三章：手機(jī)APP界面設(shè)計尺寸的核心原則
在手機(jī)APP界面設(shè)計中，設(shè)計尺寸的問題日益受到關(guān)注。一個優(yōu)秀的設(shè)計不僅需要符合用戶的使用習(xí)慣，還要能適應(yīng)各種設(shè)備型號和屏幕大小。設(shè)計時，我們應(yīng)遵循以下原則：簡潔明了，突出核心內(nèi)容，避免過多的元素和信息；易于操作，符合用戶的使用習(xí)慣；適配性強(qiáng)，適應(yīng)不同的設(shè)備型號和屏幕大小。
第四章：手機(jī)APP界面設(shè)計尺寸的詳細(xì)規(guī)范
手機(jī)APP界面設(shè)計的尺寸規(guī)范是設(shè)計師必須掌握的基本知識。設(shè)計尺寸應(yīng)考慮到不同的設(shè)備型號和屏幕大小。手機(jī)屏幕可分為小屏、普通屏和大屏。在設(shè)計時，我們需要根據(jù)這些不同的屏幕尺寸來確定設(shè)計尺寸，以確保用戶在不同設(shè)備上都能獲得良好的體驗。
第五章：總結(jié)與前瞻
在設(shè)計手機(jī)APP界面時，我們不僅要關(guān)注功能和內(nèi)容，還要關(guān)注用戶的視覺體驗和操作體驗。字體、排版、尺寸規(guī)范都是設(shè)計師必須考慮的因素。隨著技術(shù)的不斷發(fā)展，移動設(shè)備的功能和性能也在不斷提高，對設(shè)計師的要求也越來越高。未來，我們期待更多的設(shè)計師能關(guān)注用戶體驗，設(shè)計出更符合用戶需求的產(chǎn)品。我們也期待有更多的新技術(shù)和新方法出現(xiàn)，為設(shè)計師提供更多的創(chuàng)作空間。 手機(jī)應(yīng)用界面設(shè)計尺寸規(guī)范與適配策略
一、不同屏幕尺寸下的設(shè)計尺寸
隨著移動設(shè)備屏幕尺寸的多樣化，設(shè)計尺寸的規(guī)劃顯得尤為重要。
- 小屏手機(jī)：設(shè)計尺寸為320x480像素（@2x）。
- 普通屏手機(jī)：設(shè)計尺寸為375x667像素（@2x）。
- 大屏手機(jī)：設(shè)計尺寸為414x736像素（@3x）。
二、適配方案的重要性
為了確保手機(jī)應(yīng)用界面在各種設(shè)備型號和屏幕大小上的顯示效果一致，必須采取適配策略。以下是幾種常見的適配方案：
- 自適應(yīng)布局：通過相對布局和百分比布局，使界面元素根據(jù)屏幕大小自適應(yīng)。
- 響應(yīng)式布局：利用媒體查詢技術(shù)，根據(jù)屏幕大小應(yīng)用不同的CSS樣式表。
- 動態(tài)布局：通過JavaScript技術(shù)，根據(jù)屏幕大小動態(tài)調(diào)整元素布局。
三、實際開發(fā)中的選擇與應(yīng)用
在實際開發(fā)中，選擇何種適配方案需根據(jù)具體需求。簡單的界面可能自適應(yīng)布局更為合適，復(fù)雜界面則可以考慮響應(yīng)式或動態(tài)布局。
四、適配過程中的注意事項
在遵循設(shè)計尺寸和適配方案的還需注意以下幾點：
- 圖片資源的適配：針對不同屏幕大小和分辨率，使用不同的圖片資源。
- 屏幕寬高比和DPI的適配：針對不同的操作系統(tǒng)和設(shè)備品牌，調(diào)整屏幕參數(shù)。
- 特殊界面元素的處理：使用可縮放矢量圖或矢量圖形軟件，確保顯示效果清晰。
五、總結(jié)
手機(jī)應(yīng)用界面設(shè)計尺寸的規(guī)范和標(biāo)準(zhǔn)是開發(fā)過程中的關(guān)鍵。遵循設(shè)計原則和規(guī)范標(biāo)準(zhǔn)，不僅能減少修改工作量，提高開發(fā)效率，降低項目成本，更能為用戶提供更好的體驗，增加用戶量，提高收益。開發(fā)者應(yīng)始終注重界面的適配性和用戶體驗，確保應(yīng)用能在各種設(shè)備和屏幕尺寸上展現(xiàn)出最佳的效果。
