移動(dòng)應(yīng)用界面設(shè)計(jì)的尺寸設(shè)置及規(guī)范
一、概述
在移動(dòng)應(yīng)用開發(fā)中，界面設(shè)計(jì)是至關(guān)重要的一環(huán)。對于Android應(yīng)用而言，合理的界面設(shè)計(jì)尺寸及規(guī)范不僅能提升用戶體驗(yàn)，還能確保應(yīng)用在各種分辨率的手機(jī)上流暢運(yùn)行。
二、Android界面設(shè)計(jì)尺寸
Android設(shè)備眾多，分辨率各異，這給界面設(shè)計(jì)帶來了挑戰(zhàn)。目前，常見的界面設(shè)計(jì)尺寸是按照720×1280的標(biāo)準(zhǔn)來設(shè)計(jì)的。在此基礎(chǔ)上，采用9切圖的方式，以適應(yīng)不同分辨率的手機(jī)。狀態(tài)欄、導(dǎo)航欄和主菜單欄的高度也有相應(yīng)的參考標(biāo)準(zhǔn)，其中狀態(tài)欄高度為50px，導(dǎo)航欄高度為96px，主菜單欄的高度也是96px。
三、Android界面設(shè)計(jì)注意事項(xiàng)
1. 定位Icon時(shí)，只需給出上下邊距、左右邊距。標(biāo)注圖標(biāo)距離時(shí)，只需標(biāo)到可點(diǎn)擊范圍外。
2. 對于通用型顏色和字體，需要單獨(dú)標(biāo)明。如導(dǎo)航欄等通用型模塊，只需做一次標(biāo)注即可。
3. 手機(jī)可視區(qū)域通常為寬度固定，長度可滑動(dòng)，因此標(biāo)注物體寬度時(shí)應(yīng)按比例說明。
4. 交付完整圖片時(shí)，不需做機(jī)型適配，但需給高清圖（如1920×1080），并注意圖片壓縮。
5. 若圖標(biāo)在不同頁面重復(fù)出現(xiàn)且尺寸相差不大，可直接給出最大一份切圖，并標(biāo)明尺寸，程序會(huì)根據(jù)需求進(jìn)行縮放。
6. 背景為純色時(shí)，只需給出色值，Android使用16進(jìn)制色值。
四、Android分辨率與PPI/DPI
Android支持多種不同的dpi模式，包括ldpi、mdpi、hdpi、xhdpi、hdpi、xhdpi等。設(shè)計(jì)師和開發(fā)者需要注意，dpi主要用于輸出（如打印設(shè)備），而ppi對于移動(dòng)設(shè)備顯示屏可以視為等于dpi。了解PPI有助于更好地理解屏幕顯示密度，PPI的計(jì)算方式是長、寬各自像素?cái)?shù)的平方和的開方，再除以屏幕對角線的英寸數(shù)。
五、UI設(shè)計(jì)的重要性與規(guī)范
UI設(shè)計(jì)是移動(dòng)應(yīng)用的重要組成部分。合理的界面設(shè)計(jì)不僅能提升用戶體驗(yàn)，還能增加應(yīng)用的吸引力。在UI設(shè)計(jì)時(shí)，應(yīng)遵循行業(yè)規(guī)范，注重細(xì)節(jié)，確保界面簡潔、直觀、易用。也要考慮不同用戶的使用習(xí)慣和需求，使界面設(shè)計(jì)更具人性化。
一、iPhone 5的PPI與視網(wǎng)膜Retina屏
iPhone 5的顯示屏擁有出色的視覺體驗(yàn)，其PPI（每英寸像素?cái)?shù)）是如何計(jì)算的呢？答案是：PPI = √（長邊像素?cái)?shù)^2 + 短邊像素?cái)?shù)^2）/ 4英寸。以iPhone 5為例，其PPI計(jì)算為326，這是Retina屏的魅力所在。
二、Android手機(jī)的分辨率與單位換算
不同于iPhone的Retina屏，Android手機(jī)的分辨率多種多樣。大致上，720 x 1280分辨率的手機(jī)可能接近320dpi，而480 x 800的手機(jī)則可能接近240dpi。了解這些分辨率有助于我們更好地進(jìn)行單位換算。在Android開發(fā)中，文字大小的單位是sp，非文字的尺寸單位則用dp。但設(shè)計(jì)師常用的單位是px，如何轉(zhuǎn)換這些單位呢？設(shè)計(jì)師在PS里使用的px是UI設(shè)計(jì)的基礎(chǔ)單位，而dp則是開發(fā)人員在寫layout時(shí)使用的尺寸單位。之所以用sp和dp代替px，是因?yàn)樗鼈儾粫?huì)因PPI的變化而變化，能確保在不同PPI的屏幕上呈現(xiàn)相同的大小。根據(jù)單位換算方法，我們可以得出：在mdpi模式下，1dp=1px；在hdpi模式下，1dp=1.5px；在xhdpi模式下，1dp=2px。當(dāng)app需要適配多種dpi模式時(shí)，需要按照這些比例進(jìn)行換算。
三、設(shè)計(jì)稿基本元素的尺寸設(shè)置策略
為了適配多分辨率的手機(jī)，理想的方式是為每種分辨率制作一套設(shè)計(jì)稿。然而在實(shí)際操作中，這種方法既耗時(shí)又耗力。通常會(huì)選擇折中的方法。一種方法是在標(biāo)準(zhǔn)分辨率（如xhdpi）基礎(chǔ)上進(jìn)行設(shè)計(jì)，然后放大或縮小以適應(yīng)其他尺寸。但這種方法在高分辨率手機(jī)上可能導(dǎo)致圖標(biāo)質(zhì)量不佳。另一種方法是以最高分辨率為基準(zhǔn)進(jìn)行設(shè)計(jì)，然后縮小以適應(yīng)小分辨率。但這種方法可能導(dǎo)致圖標(biāo)等過大，加載速度慢且耗費(fèi)流量多。結(jié)合友盟的分辨率占比數(shù)據(jù)和換算到Android開發(fā)的尺寸單位方便性，推薦設(shè)計(jì)稿畫布尺寸為720X1280，分辨率為72ppi。至于導(dǎo)航欄、工具欄等的尺寸，在Android規(guī)范中沒有明確規(guī)定，需要根據(jù)實(shí)際情況和設(shè)計(jì)需求進(jìn)行靈活設(shè)置。
以上內(nèi)容詳細(xì)探討了iPhone 5的PPI和Android手機(jī)屏幕的單位換算與設(shè)計(jì)稿尺寸設(shè)置策略，希望能對開發(fā)者與設(shè)計(jì)師的工作提供有益的參考。
一、Android應(yīng)用界面尺寸要求
在Android應(yīng)用開發(fā)過程中，根據(jù)48dp原則及主流應(yīng)用截圖分析，我們可以總結(jié)出以下尺寸要求：
1. 狀態(tài)欄高度
狀態(tài)欄的高度定為50px，這是應(yīng)用界面最頂部的區(qū)域，通常用于顯示標(biāo)題、時(shí)間等信息。
2. 導(dǎo)航欄、操作欄高度
導(dǎo)航欄或操作欄的高度為96px，這是由兩個(gè)48dp（約9.6mm）的導(dǎo)航欄組成，通常用于放置功能按鈕、菜單等。
3. 主菜單欄高度
主菜單欄的高度也是96px，通常用于展示應(yīng)用的主要功能。
4. 內(nèi)容區(qū)域高度
內(nèi)容區(qū)域的高度為1038px（1280-50-96-96=1038），這是應(yīng)用的主要展示區(qū)域，用于展示應(yīng)用的核心內(nèi)容。
二、功能鍵與界面設(shè)計(jì)
隨著Android手機(jī)的發(fā)展，實(shí)體鍵逐漸被舍棄，功能鍵被移至屏幕中，其高度與菜單欄相同，為96px。這樣的設(shè)計(jì)使得界面更加簡潔，操作更為方便。
三、圖標(biāo)與字體大小規(guī)范
根據(jù)官方規(guī)范文檔，圖標(biāo)的尺寸要求如下：
a. 啟動(dòng)圖標(biāo)
用于home頁或app列表頁，整體大小為48 x 48 dp。
b. 操作欄圖標(biāo)
代表應(yīng)用的重要功能，整體大小為32 x 32 dp，圖形實(shí)際區(qū)域?yàn)?4 x 24 dp。
c. 小圖標(biāo)/場景圖標(biāo)
用于表示操作或特定項(xiàng)目的狀態(tài)，整體大小為16 x 16 dp，圖形實(shí)際區(qū)域?yàn)?2 x 12 dp。
d. 通知圖標(biāo)
用于顯示新通知，整體大小為24 x 24 dp，圖形實(shí)際區(qū)域?yàn)?2 x 22 dp。
在設(shè)計(jì)時(shí)，若設(shè)計(jì)稿尺寸為720 x 1280，需按照規(guī)范要求的尺寸數(shù)字乘以2來確定圖標(biāo)大小。
e. 字體大小
Android規(guī)范中的字體大小要求是根據(jù)sp單位來設(shè)定的。換算關(guān)系為：spppi/160= px。在720 x 1280的設(shè)計(jì)稿上，字體大小可選擇24px、28px、32px、36px，具體大小需根據(jù)文字的重要程度來選擇。
四、UI元件的標(biāo)準(zhǔn)尺寸與觸摸體驗(yàn)
通常將48dp作為可觸摸的UI元件的標(biāo)準(zhǔn)尺寸。這是因?yàn)?8dp轉(zhuǎn)化為物理尺寸約9毫米，符合用戶手指觸摸的舒適度。元素高和寬至少48dp，可以確保觸摸目標(biāo)的便捷性和準(zhǔn)確性，同時(shí)在整體信息密度和觸摸目標(biāo)大小之間取得平衡。UI元素之間的空白通常是8dp，以提供良好的視覺體驗(yàn)和操作空間。
五、總結(jié)
以上是關(guān)于Android應(yīng)用的界面尺寸、圖標(biāo)和字體大小的要求和規(guī)定。合理遵循這些規(guī)范，可以確保應(yīng)用界面的美觀、易用性，提升用戶體驗(yàn)。iOS設(shè)計(jì)交互規(guī)范解析
================
一、概述
隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，iOS系統(tǒng)界面設(shè)計(jì)越來越受到關(guān)注。為了確保應(yīng)用在不同設(shè)備上的用戶體驗(yàn)，深入了解iOS設(shè)計(jì)交互規(guī)范至關(guān)重要。本文將詳細(xì)介紹iOS設(shè)計(jì)中的分辨率、單位換算、基本元素尺寸設(shè)置、常用圖像和圖標(biāo)大小以及字體大小等關(guān)鍵內(nèi)容。
二、分辨率
在iOS設(shè)計(jì)中，分辨率是影響界面顯示效果的關(guān)鍵因素。
1. iPhone界面尺寸：隨著iPhone版本的更新，其界面尺寸也發(fā)生了變化。了解不同版本的尺寸，對于設(shè)計(jì)師來說非常重要。
2. iPad界面尺寸：iPad的界面尺寸通常為1024×768和2048×1536像素。在設(shè)計(jì)時(shí)，需要考慮不同尺寸下的顯示效果。
（注：以上單位都是像素。網(wǎng)頁UI和移動(dòng)UI的分辨率通常為72ppi。）
三、單位換算px、pt
在iOS設(shè)計(jì)中，單位換算非常重要。設(shè)計(jì)師需要了解不同單位之間的換算關(guān)系。
1. pt（磅值）是物理長度單位，指的是72分之一英寸。在設(shè)計(jì)中，同一大小的字磅值在不同設(shè)備上是一樣的，但換算成像素值（px）會(huì)有所不同。（換算公式：px=pt×ppi/72）。
2. iPhone在Retina屏之前的屏幕像素和密度有所不同。在設(shè)計(jì)時(shí)，元素定位、尺寸通常使用點(diǎn)（point）為單位，而非像素（px）。這樣可以在不改變程序的情況下，只上傳兩套圖片就兼容兩個(gè)分辨率。設(shè)計(jì)師在設(shè)計(jì)時(shí)可以采用統(tǒng)一的像素單位（px），但在開發(fā)時(shí)需要做一些單位轉(zhuǎn)換。
四、基本元素的尺寸設(shè)置
iPhone的APP界面一般由四個(gè)基本元素組成：狀態(tài)欄、導(dǎo)航欄、主菜單欄和內(nèi)容區(qū)域。了解這些元素的尺寸對于設(shè)計(jì)至關(guān)重要。以640×960的尺寸設(shè)計(jì)為例：
1. 狀態(tài)欄高度為40px。
2. 導(dǎo)航欄高度為88px。
3. 主菜單欄高度為98px。內(nèi)容區(qū)域高度為中間剩余的部分，通常為顯示應(yīng)用提供的相應(yīng)內(nèi)容，是布局變更最為頻繁的區(qū)域。iPhone 5/5s的尺寸略有不同，主要是內(nèi)容區(qū)域的高度有所增加。在設(shè)計(jì)時(shí)，不必為每個(gè)尺寸都設(shè)計(jì)一套方案，可以根據(jù)手機(jī)實(shí)際尺寸進(jìn)行設(shè)計(jì)預(yù)覽。設(shè)計(jì)師在設(shè)計(jì)稿中標(biāo)注的字號大小、圖像尺寸等應(yīng)以像素為單位，方便開發(fā)人員進(jìn)行換算和調(diào)整。開發(fā)人員拿到設(shè)計(jì)稿后，需要將標(biāo)注的像素單位轉(zhuǎn)換為磅值單位（pt），以便在非Retina屏上實(shí)現(xiàn)合適的效果。這樣在不同分辨率的設(shè)備上都能保證良好的用戶體驗(yàn)。開發(fā)人員可以根據(jù)此pt值換算對應(yīng)的px大小以確保在不同分辨率下的合適效果。開發(fā)人員拿到設(shè)計(jì)稿后需要將標(biāo)注的以px為單位的字號大小圖像尺寸除以2得到非Retina屏上的pt值。在Retina屏上也可根據(jù)此pt值換算對應(yīng)的px大小以確保適配效果。
五、常用圖像、圖標(biāo)大小
設(shè)計(jì)師在設(shè)計(jì)過程中需要參考官方規(guī)范文檔中的常用圖像和圖標(biāo)大小以確保設(shè)計(jì)的協(xié)調(diào)性和一致性。
一、字體大小和行間距的設(shè)定
通常的字體大小和行間距規(guī)則
一般而言，不同的文字大小設(shè)置對應(yīng)不同的字體大小和行間距差異，通常為 2點(diǎn)。但在某些特定情況下，如最小、小和中等設(shè)置時(shí)，兩個(gè)標(biāo)題樣式卻采用相同的字體大小、行間距和字間距，展現(xiàn)出獨(dú)特的審美取向。
二、字間距隨文字大小變化的規(guī)律
字間距的調(diào)整策略
在設(shè)計(jì)中，字間距的設(shè)定隨文字大小而變化。在最小的文字大小設(shè)置中，字間距相對寬闊，以確保閱讀的舒適度；而在最大的文字大小設(shè)置中，字間距相對緊密，強(qiáng)化視覺沖擊力。
三、標(biāo)題與正文樣式的區(qū)分
標(biāo)題與正文的差異化設(shè)計(jì)
標(biāo)題與正文在字體大小上采用相同的設(shè)定，但通過加粗效果來突出標(biāo)題的重要性，使其在視覺上與正文形成鮮明對比。
四、導(dǎo)航控制器中的文字設(shè)定
導(dǎo)航控制器文字的特殊設(shè)定
導(dǎo)航控制器中的文字采用大號正文樣式，特別是設(shè)定為 34點(diǎn)，以確保在界面中的引導(dǎo)作用突出且易于閱讀。
五、文本字體風(fēng)格的選擇與應(yīng)用
文本字體選擇及應(yīng)用原則
在文本設(shè)計(jì)中，常規(guī)體和中等大小是最常用的選擇，它們具有普遍的閱讀適應(yīng)性。相對而言，細(xì)體和粗體則較少使用，除非在特定場合下為了突出視覺重點(diǎn)而適當(dāng)采用。百度用戶體驗(yàn)的相關(guān)調(diào)查也為我們提供了寶貴的參考數(shù)據(jù)。在實(shí)際操作中，我們還可以借鑒其他優(yōu)秀APP的設(shè)計(jì)經(jīng)驗(yàn)，通過截圖對比調(diào)節(jié)，尋找最佳的字體大小與風(fēng)格。關(guān)于iPhone和Android設(shè)備的APP界面尺寸設(shè)計(jì)，需要考慮到不同的設(shè)備類型和屏幕尺寸，以滿足多樣化的用戶需求。在設(shè)計(jì)過程中，可以參考iPhone界面的尺寸設(shè)計(jì)標(biāo)準(zhǔn)以及Android設(shè)備的適配規(guī)則，確保設(shè)計(jì)既美觀又實(shí)用。一個(gè)好的設(shè)計(jì)需要綜合考慮各種因素，包括用戶體驗(yàn)、設(shè)備兼容性以及視覺美感等。只有這樣，才能創(chuàng)造出既吸引人又具有實(shí)用價(jià)值的APP界面設(shè)計(jì)。因此設(shè)計(jì)師在進(jìn)行設(shè)計(jì)時(shí)需要注意尺寸的大小是否符合規(guī)范，以便在各種設(shè)備上都能展現(xiàn)出最好的效果。
