互動設計:界面設計尺寸詳解與常用尺寸

一口嘎嘣脆脆 發佈 2023-06-15T12:17:47.827635+00:00

基本概念Android 常見參數屏幕尺寸:分為四個廣義的大小:小,正常,大,特大。


基本概念


Android 常見參數

屏幕尺寸:分為四個廣義的大小:小,正常,大,特大。


屏幕密度:分為了四個廣義的大小:低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi)


像素= DP * ( DPI / 160 ) 例如,在一個240dpi 的屏幕里,1DP 等於1.5PX。

layout-small(屏幕尺寸小於3英寸左右的布局),
layout-normal(屏幕尺寸小於4.5英寸左右),
layout-large(4英寸-7英寸之間),
layout-xlarge(7-10英寸之間)


典型設計尺寸

• 320dp:一個普通的手機屏幕(240X320,320×480,480X800)

• 480dp:一個中間平板電腦像(480×800)

• 600dp:7 寸平板電腦(600×1024)

• 720dp:10 寸平板電腦(720×1280,800×1280)

元素尺寸:推薦設計稿的畫布尺寸選用 720X1280 ,解析度仍舊為72ppi(素/英寸)

在android 規範中對於導航欄、工具欄等的尺寸沒有明確的規定。但根據48dp 原則,以及一些主流的android 應用的截圖分析,

總結一下尺寸要求:狀態欄高度:50 px 導航欄、操作欄高度:96px=48dp x 2 主菜單欄高度:96 px


內容區域高度:1038 px(1280-50-96-96=1038)


IOS常見參數

屏幕尺寸:

iPhone 界面尺寸:320×480、640×960、640×1136

iPad 界面尺寸:1024×768、2048×1536

(以上單位都是像素,至於解析度一般網頁UI 和移動UI 基本上都只要 72 ppi)


元素的尺寸:

iPhone 的APP 界面一般由四個元素組成,分別是:狀態欄、導航欄、主菜單欄以及中間的內容區域。


640×960 的尺寸設計中元素尺寸:


狀態欄:就是我們經常說的信號、運營商、電量等顯示手機狀態的區域,其高度為:40 px

導航欄:顯示當前界面的名稱,包含相應的功能或者頁面間跳轉的按鈕,其高度為:88 px

主菜單欄:類似於頁面的主菜單,提供整個應用的分類內容的快速跳轉,其高度為:98 px


內容區域:展示應用提供的相應內容,整個應用中布局變更最為頻繁的,其高度為:734 px=960-40-88-98


以上尺寸適用於 iPhone4、4S,iPhone5/5s 的 640×11136 的尺寸,

其實就是中間的內容區域高度增加到:910 px,其他尺寸也同上。


web設計界面尺寸建議

對大於30W台客戶端用戶進行測試,得到的測試數據如下(數據來源於網絡):


Web端:安全解析度為1024 X 768 px 可建議大解析度為1280 X 800 px


在Window XP常見解析度1024×768下我們除掉任務欄,瀏覽器菜單欄以及狀態欄後剩下的網頁首屏高度平均值是584。


在Window 7常見解析度1440×900下我們除掉任務欄,瀏覽器菜單欄以及狀態欄後剩下的網頁首屏高度平均值是716。


於設計來說,選取一個合適的尺寸作為正常大小和中等屏幕密度(尺寸的選取依據打算適配的硬體,建議參考現主流硬體解析度),然後向下和向上做小、大、特大和低、高、超高的尺寸與密度。


關鍵字: