移動應用界面設計的尺寸設置及規(guī)范

一、概述

在移動應用開發(fā)中，界面設計是至關重要的一環(huán)。為了適配各種分辨率的Android設備，界面設計的尺寸設置及規(guī)范顯得尤為重要。本文將重點探討Android應用界面設計的尺寸設置及相關注意事項。

二、Android界面設計的尺寸

對于Android應用界面設計，常見的尺寸是按照7201280的標準進行設計。在這一尺寸下，通過切圖技術，可以確保應用適配大多數(shù)手機。其中，狀態(tài)欄、導航欄和主菜單欄的高度設計也有一定的規(guī)范。狀態(tài)欄的高度通常為50px，導航欄的高度為96px，主菜單欄的高度也是96px。這些數(shù)值僅供參考，因為Android是一個開源的系統(tǒng)，不同的設備和版本可能會有所差異。

三、Android界面設計的風格

從Android 4.0開始，為了與iOS區(qū)分，Android提出了一套HOLO的UI風格設計。鼓勵將底部的主菜單欄放到導航欄下方，以避免用戶點擊下方時誤觸虛擬按鍵。這一風格在許多新版APP中得到了廣泛應用。

四、界面設計的注意事項

1. 定位Icon時，只需給出上下邊距、左右邊距。標注圖標距離時，只需標到可點擊范圍外。

2. 對于通用型顏色和字體，需要單獨標明。例如，導航欄等通用型模塊只需單獨標注。

3. 手機可視區(qū)域通常為寬度固定，長度可滑動。標注物體寬度時應按比例說明。

4. 當交付的是一張完整圖片時，不需要進行機型適配。只需提供高清圖（如19201080分辨率）并注意適當壓縮。

5. 若圖標在不同頁面重復出現(xiàn)且尺寸相差不大，可以直接給出最大一份切圖，并標明尺寸。程序會根據(jù)需求進行縮放。

6. 當背景是純色時，只需給出色值。Android使用16進制色值。

五、Android分辨率與PPI/DPI概念

在移動應用界面設計中，分辨率是一個重要的概念。Android支持多種不同的dpi模式，包括ldpi、mdpi、hdpi、xhdpi、hdpi、xhdpi等。設計師和開發(fā)者需要注意，dpi主要用于輸出，特別是在打印設備上；而對于移動設備顯示屏，可以將ppi看作dpi。了解PPI和DPI的概念對于設計出適配不同設備的優(yōu)質界面至關重要。

一、iPhone 5的Retina屏與PPI

iPhone 5的Retina屏以其細膩的顯示效果著稱。其PPI（像素密度）如何計算？答案是：通過計算屏幕長寬的像素數(shù)，再求其平方和的平方根，最后除以屏幕對角線長度得到。iPhone 5的PPI高達326，帶來了幾乎令人難以察覺的像素點間距，使得屏幕顯示效果極為細膩。

二、Android手機的分辨率與DPI

對于Android手機，分辨率與DPI的關系也是開發(fā)者與設計者需要了解的關鍵。720 x 1280分辨率的手機可能接近320 dpi，480 x 800的可能接近240 dpi，而320 x 480的則接近160 dpi。這些數(shù)值可以幫助我們大致了解不同分辨率手機的顯示精度。

三、單位換算方法

在Android開發(fā)中，文字大小的單位是sp，非文字的尺寸單位用dp。但設計師常用的單位是px。如何進行單位換算？簡單說，px是設計師在PS里用的，也是手機屏幕所顯示的；dp是開發(fā)者在寫layout時用的。為了更好地適配不同分辨率的手機，我們需要了解sp和dp單位的特點，他們不會因為PPI的變化而變化，更接近物理呈現(xiàn)。根據(jù)單位換算方法，不同dpi模式下1dp對應的px值也有所不同，開發(fā)者需根據(jù)此進行適配。

四、設計稿基本元素的尺寸設置

為了適配多分辨率的手機，理想情況是為每種分辨率做一套設計稿。但在實際開發(fā)中，這不太現(xiàn)實。通常有兩種折中方法：一是在標準分辨率（如xhdpi）基礎上放大或縮小以適應其他尺寸，二是以最高分辨率為基準設計然后縮小。結合友盟的分辨率占比數(shù)據(jù)和方便換算到Android開發(fā)的尺寸單位，推薦設計稿的畫布尺寸為720X1280，分辨率為72ppi。

五、導航欄、工具欄的尺寸規(guī)范

在Android規(guī)范中，對于導航欄、工具欄等的尺寸并沒有明確的規(guī)定。這給了設計師很大的自由度來創(chuàng)造個性化的界面。這也意味著開發(fā)者在適配不同分辨率的手機時，需要特別注意這些元素的尺寸和布局，以確保在不同設備上都能提供良好的用戶體驗。

一、狀態(tài)欄與導航欄尺寸要求

在Android應用中，狀態(tài)欄的高度通常為50px。導航欄和操作欄的高度是96px，這是由兩個48dp（即96px在多數(shù)設備上的實際顯示尺寸）疊加而成的。這些尺寸保證了用戶在操作應用時的便捷性。

二、主菜單欄與內容區(qū)域尺寸解析

主菜單欄的高度也是96px，與導航欄和操作欄高度一致，以便于設計上的統(tǒng)一和用戶的使用體驗。內容區(qū)域的高度是1038px，這是根據(jù)常見的屏幕分辨率（1280px總尺寸減去狀態(tài)欄、導航欄、主菜單欄的高度計算得出的）。

三、功能鍵與實體鍵的轉變

近年來，Android手機逐漸去除了實體鍵，將功能鍵移至屏幕中。這些功能鍵的高度也與菜單欄一致，為96px。這種變化使得操作更為便捷，符合現(xiàn)代設計趨勢。

四、圖標尺寸與類型規(guī)范

在Android應用中，圖標的尺寸根據(jù)其在界面中的位置和用途而有所不同。啟動圖標位于home頁或app列表頁，整體大小為48x48dp。操作欄圖標代表用戶在app中可使用的最重要功能，整體大小為32x32dp，實際圖形區(qū)域為24x24dp。小圖標或場景圖標用于表示操作或特定項目的狀態(tài)，大小為16x16dp，實際圖形區(qū)域為12x12dp。通知圖標的尺寸為24x24dp。在設計時，需根據(jù)規(guī)范要求的尺寸單位dp進行設計，若設計稿尺寸為720x1280，需將圖標尺寸規(guī)范要求的數(shù)字乘以2。

五、字體大小與其他尺寸要求

在Android應用中，字體大小的選擇也是根據(jù)規(guī)范來的。字體大小的主要選擇為24px、28px、32px、36px，具體取決于文字的重要程度。對于其他尺寸要求，48dp通常作為可觸摸的UI元件的標準。這是因為48dp轉化為物理尺寸約9毫米，符合用戶手指準確且舒適觸摸目標區(qū)域的建議尺寸。UI元素之間的空白通常是8dp，以保證整體信息密度和觸摸目標大小之間的平衡。

以上內容詳細解讀了Android應用的界面尺寸要求，包括狀態(tài)欄、導航欄、主菜單欄、內容區(qū)域、功能鍵、圖標和字體等方面的規(guī)范，幫助開發(fā)者更好地理解并遵循這些要求，以提供優(yōu)秀的用戶體驗。iOS篇

=====================

一、分辨率概覽

iPhone與iPad的界面尺寸差異明顯，而iOS設備的分辨率也是設計者們必須考慮的重要因素。尤其對于網頁UI和移動UI來說，72 ppi的分辨率是一個常見的標準。

二、單位換算：px與pt

在iOS開發(fā)中，了解px和pt之間的換算關系至關重要。pt是物理長度單位，代表72分之一英寸。在不同分辨率的手機上，同一大小的字的磅值（pt）可能相同，但對應的像素（px）值會有所不同。例如，iPhone在推出retina屏之前的屏幕像素是320x480px，而4S的屏幕像素翻倍，達到640x960px。但iPhone界面上的元素定位與尺寸，通常通過一個單位point來確定，而非px。這樣設計可以確保程序不變，只需上傳兩套圖片即可兼容兩個分辨率。

三、基本元素尺寸設置

iPhone的APP界面主要由四個元素構成：狀態(tài)欄、導航欄、主菜單欄和內容區(qū)域。在640×960的設計尺寸下，這些元素的具體尺寸如下：

狀態(tài)欄：顯示手機狀態(tài)的區(qū)域，高度為40px。

導航欄：顯示當前界面名稱及功能按鈕，高度為88px。

主菜單欄：提供應用分類內容的快速跳轉，高度為98px。

內容區(qū)域：展示應用相應內容，其高度為734px（在640×960尺寸下）。對于iPhone 5/5s的640×1136尺寸，內容區(qū)域的高度會相應增加。

四、常用圖像與圖標大小

在iOS設計中，圖像和圖標的大小也是根據(jù)官方規(guī)范文檔來設定的。這些規(guī)范確保了界面元素的和諧與統(tǒng)一。具體的圖像和圖標大小，單位均為像素。

五、字體大小規(guī)范

章節(jié)一：字體大小和行間距的一般設置

字體大小和行間距的標準差異

通常情況下，不同的文字大小設置對應著不同的字體大小和行間距差異，這一差異通常為2點。也存在例外情況，即在最小、小和中等設置時，某些標題樣式采用了相同的字體大小、行間距和字間距。

章節(jié)二：字間距隨著文字大小的變化

字間距的靈活調整

在設計中，字間距的調整與文字大小息息相關。在最小的三種文字大小設置中，字間距相對寬闊，以確保閱讀的舒適度；而在最大的三種文字大小設置中，字間距則相對緊密，以突出顯示內容的重點。

章節(jié)三：標題與正文樣式的字體設置

標題與正文的字體大小與樣式

標題與正文雖然在內容上有所區(qū)分，但在字體大小上往往采用相同的設置。為了突出標題的重要性，通常會對標題進行加粗處理，使其在視覺上更為醒目。

章節(jié)四：導航控制器中的文字設置

導航控制器文字的特殊設置

在導航控制器中，文字的字體大小通常設置為較大的尺寸，以確保用戶在瀏覽過程中能夠迅速識別。具體來說，導航控制器中的文字大小往往與大號正文樣式相當，一般為34點。

章節(jié)五：文本樣式的常規(guī)與特殊選擇

文本樣式的選擇與運用

在文本設置過程中，常規(guī)體和中等大小的字體是最常用的選擇。這不僅是因為它們易于閱讀，而且有助于保持設計的整體一致性。相比之下，細體和粗體則更多地被用于特定場合，以突出顯示內容的重點或增強視覺沖擊力。百度用戶體驗團隊曾進行過一項關于字體大小設置的小調查，為我們提供了寶貴的參考數(shù)據(jù)。那么對于iPhone和Android的APP界面設計而言，了解它們的界面尺寸與設備特性至關重要。只有這樣，我們才能確保文本在不同設備上呈現(xiàn)出最佳的顯示效果。現(xiàn)在讓我們詳細探討iPhone和Android設備的APP界面尺寸及其相關設計要素。通過深入了解這些要點，我們可以為移動設備用戶提供更加優(yōu)質的用戶體驗。

關于iPhone和Android的APP界面尺寸

隨著智能手機的普及，iPhone和Android設備已成為人們日常生活中不可或缺的一部分。在設計APP界面時，了解這兩種設備的界面尺寸至關重要。對于iPhone設備而言，其界面尺寸多樣，包括320x480、640x960以及640x1136等。iPad的界面尺寸則通常為1024x768至2048x1536不等。了解這些尺寸信息對于設計師而言至關重要，它能幫助我們更好地適應不同設備的屏幕大小，確保APP在不同設備上都能呈現(xiàn)出最佳的顯示效果。隨著iPhone系列的不斷更新?lián)Q代，目前主流的設計尺寸是以iPhone6為主，設計尺寸為7501334px。在設計時，我們應充分考慮這一主流尺寸趨勢，以確保我們的設計能夠適應大多數(shù)用戶的需求。同時我們也要注意適配Android設備的不同屏幕尺寸的需求 ?？偟膩碚f了解這些尺寸和設計趨勢對于我們設計出符合用戶需求和市場需求的APP至關重要 。