Ⅰ APP設設計規范尺寸、切圖詳解——IOS和android
目前主流的是以iPhone 6為主,設計尺寸是750*1334px,4.7寸。
1、解析度以iPhone 6 設計為主:750*1334px
2、(字體 Helvetica/華文細黑,實際中運用黑體簡或者Hiti-sc 最接近系統中所帶字體)
3、工具欄height:88px 如搜索、選擇、刪除、回復等。
4、頂部標簽欄height:60px 位於狀態欄或者狀態欄下的文字/具有可切換功能的圖標
1、導航欄
所有的字型大小,在750*1334px的設計尺寸下都是偶數,便於程序員操作。
所有可觸發按鈕必須≥44*44
所有可觸發按鈕必須≥22*22
左右內容與邊距的間隔大概在20px
強調確定,填充有彩色。
例如:
搜索框右邊要有一個取消、或者輸入了之後有一個「x」
漸變和底紋效果和程序員商討
設計尺寸:720*1280px
狀態欄48px 導航欄96px 內容區1038px 標簽欄112px
Ⅱ android app界面設計規范(dpi,dp,px等)
PPI(Pixels per inch):每英寸所擁有的像素數,即像素密度。
DPI(dots per inch):即每英寸上,所能印刷的網點數,一般稱為像素密度。ppi計算公式:ppi = 屏幕對角線像素數/屏幕對角線英寸數,通過勾股定理計算屏幕對角線像素數。
Screen Size(屏幕尺寸):手機屏幕尺寸大小,如3英寸、4英寸、4.3英寸、5.7英寸,指的是對角線的長度。
DIP(device independent pixel):即dip/dp,設備獨立像素。 1px = 1dp density(由dpi決定)
Resolution(解析度):指手機屏幕垂直和水平方向上的像素個數。eg解析度480 800,指該設備垂直方向有800個像素點,水平方向有480個像素點。
px(Pixel像素):相同像素的ui,在不同解析度的設備上效果不同。在小解析度設備上會放大導致失真,大解析度上被縮小。
Android Design里把主流設備的 dpi 歸成了四個檔次: 120 dpi、160 dpi、240 dpi、320 dpi ,具體見如下表格。
實際開發當中,我們經常需要對這幾個尺寸進行相互轉換(比如先在某個解析度下完成設計,然後縮放到其他尺寸微調後輸出),一般按照 dpi 之間的比例即 2:1.5:1:0.75 來給界面中的元素來進行尺寸定義。
也就是說如果以 160 dpi 作為基準的話,只要尺寸的 DP 是 4 的公倍數,XHDPI 下乘以 2,HDPI 下乘以 1.5,LDPI 下乘以 0.75 即可滿足所有尺寸下都是整數 pixel 。但假設以 240 dpi 作為標准,那需要 DP 是 3 的公倍數,XHDPI 下乘以 1.333,MDPI 下乘以 0.666 ,LDPI 下除以 2。而以 LDPI 和 XHDPI 為基準就更復雜了。同時第一款Android設備(HTC的T-Mobile G1)是屬於160dpi的。鑒於以上各種原因, 標准dpi=160
谷歌官方對dp的解釋如下:
A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.
The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.
簡單來說,以160dpi的設備為准,該設備上1dp = 1px;如果屏幕密度大,1dip代表的px就多,比如在320dpi的屏幕上,1dip=2px(即1dp代表2個像素)。在app開發時,最好用dp來做界面的布局,以保證適配不同屏幕密度的手機。
dp和px的換算公式:
我的理解,該公式表示px的數值等於dp的數值*(設備dpi/160)
注意,px、dp是單位,但density沒單位。
applyDimension的源碼如下,可參考:
android的尺寸眾多,建議使用解析度為 720x1280 的尺寸設計。這個尺寸 720x1280中顯示完美,在 1080x1920 中看起來也比較清晰;切圖後的圖片文件大小也適中,應用的內存消耗也不會過高。
app啟動圖標為48*48dp,對應各dpi設備,圖像資源像素如下:
| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|48 48px|72 72px|94 96px|144px 144px|
操作欄圖標為32*32dp,對應各dpi設備,圖像資源像素如下:其中圖形區域尺寸是24*24dp,可參考平時ui切圖會有部分留白。
| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|32 32px|48 48px|64 64px|96px 96px|
通知欄圖標為24*24dp,對應各dpi設備,圖標像素如下:
| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|24 24px|36 36px|48 48px|72px 72px|
某些場景需要用到小圖標,大小應當是16*16dp,其中圖形區域尺寸12*12dp。
| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|16 16px|24 24px|32 32px|48px 48px|
Ⅲ 哪裡 ios android 官方設計規范
廢話不多說,希望大家耐心看完後,不要再糾結於尺寸相關的東西了! 一、尺寸及解析度iPhone界面尺寸:320*480、640*960、640*1136 iPad界面尺寸:1024*768、2048*1536 單位:像素72dpi,在設計的時候並不是每個尺寸都要做一套,尺寸按自己的手機來設計,比較方便預覽效果,一般用640*960或者640*1136的尺寸來設計。 Ps:作圖的時候確保都是用形狀工具(快捷鍵:U)畫的,這樣更方便後期的切圖或者尺寸變更。 二、界面基本組成元素iPhone的app界面一般由四個元素組成,分別是:狀態欄、導航欄、主菜單欄、內容區域。 這里取用640*960的尺寸設計,那我們就說說在這個尺寸下這些元素的尺寸。 狀態欄:就是我們經常說的信號、運營商、電量等顯示手機狀態的區域,其高度為:40px 導航欄:顯示當前界面的名稱,包含相應的功能或者頁面間的跳轉按鈕,其高度為:88px 主菜單欄:類似於頁面的主菜單,提供整個應用的分類內容的快速跳轉,其高度為:98px 內容區域:展示應用提供的相應內容,整個應用中布局變更最為頻繁,其高度為:734px [下圖為了說明我不是瞎掰的:960-40-88-98=734] 至於我們經常說的iPhone5/5s的640*1136的尺寸,其實就是中間的內容區域高度增加到910px。 PS:在最新的iOS7的風格中,蘋果已經開始慢慢弱化狀態欄的存在,將狀態欄和導航欄合在了一起,但是再怎麼變,尺寸高度也還是沒有變的,只不過大家在設計iOS7風格的界面的時候多多注意下~ 三、字體大小Phone上的字體英文為:HelveticaNeue 。至於中文Mac下用的是黑體,Win下則為華文黑體。 下圖是網路用戶體驗做過的一個小調查,可以看出用戶可接受的文字大小。 其實還有個更簡單的方法就是找你覺得好的app應用,手機截圖後放進PS自己比對調節字體大小咯。 我的音樂——34px 我的、淘歌、發現——30px Muxx——34px 本地音樂——30px 泡沫、鄧紫棋——24px 總之,方法是自己找到的,想辦法解決問題,自己實踐,比別人告訴你印象更深刻不是么? 一、尺寸及解析度Android界面尺寸:480*800、720*1280、1080*1920。[單位:像素] Android比iPhone的寸尺多了很多套,建議取用720*1280這個尺寸,這個尺寸720*1280中顯示完美,在1080*1920中看起來比較清晰,切圖後的圖片文件大小也適中,應用的內存消耗也不會過高。 二、界面基本組成元素Android的app界面和iPhone的基本相同:狀態欄、導航欄、主菜單、內容區域。 Android中我們取用的720*1280的尺寸設計,那我們就說說在這個尺寸下這些元素的尺寸。 狀態欄高度為:50px 導航欄高度為:96px 主菜單欄高度為:96px 內容區域高度為:1038px(1280-50-96-96=1038) Android最近出的手機都幾乎去掉了實體鍵,把功能鍵移到了屏幕中,當然高度也是和菜單欄一樣的:96px Ps:寫之前我翻了好多關於Android的界面尺寸教程,都沒找到像iOS一樣具體的規范,或許因為在安卓中這些控制項的高度都能用程序自定義,都沒有提到具體的尺寸數值,所以就自己找了Android的設計規范,尺寸都是自己在PS中量的。 Android為了在界面上區別於iOS,Android4/s/1gdqoSJh
Ⅳ iOS和安卓的設計規范有何不同
是一種基於Linux的自由及開放源代碼的操作系統。主要使用於移動設備,如智能手機和平板電腦,由Google公司和開放手機聯盟領導及開發。
iOS是蘋果公司的移動操作系統。
iOS是由蘋果公司開發的移動操作系統,蘋果公司最早於2007年1月9日的Macworld大會上公布這個系統,最初是設計給iPhone使用的,後來陸續套用到iPod touch、iPad以及Apple TV等產品上。
iOS和安卓的ui區別二:UI設計規范不一樣。
具體的UI設計規范詳解請點擊閱讀:iOS、Android、WindowsPhone官方設計規范匯總
比如現在通常設計的尺寸對比如下:
iOS: 750*1334 或者 1242*2208
android 720*1280 或者 1080*1920
iOS和安卓的ui區別三:導航方式不一樣
iOS的Tab放在頁面底部,不能通過滑動來切換,只能點擊。也有放在上面的,也不能滑動,但有些Tab本身可以滑動,比如天貓的。還有新聞類的應用。
Android一般放在頁面頂端,可以通過滑動頁面來切換Tab,當然Tab可以點擊切換,Tab多的話,Tab本身也可以滑動。比如豌豆莢,網路貼吧,QQ。總之,Android啥都可以有。
iOS和安卓的UI區別四:單條item的操作
iOS單條item的操作有兩種,點擊和滑動,點擊一般進入一個新的頁面,滑動會出現對這條item的一些常用操作,如微信里滑動一條對話,會出現標記未讀和刪除。
Android中,單條item的操作也有兩種,點擊和長按,點擊一般進入一個新的頁面。長按進入一個編輯模式,可以在裡面進行批量和其他一個操作,比如刪除,頂置等等。比如小米的簡訊頁面;長按也可以彈出情境操作欄dialog,進行操作,比如Android版的微信。
OS和安卓的UI區別五:實體鍵
iOS只有一個實體鍵(音量,電源不算哈),home鍵,這個鍵有這么幾個功能:
1、按一次,回到桌面。
2 、雙擊,出現多任務界面
3、iOS8裡面,輕觸兩下Home鍵,調出單手模式
4 、指紋解鎖
Android有四個實體鍵(現在很多被屏幕上的虛擬鍵代替,但功效是一樣的)4.4一下的分別是back鍵,home鍵,menu鍵,和搜索鍵。4.4及以上,是back鍵,home鍵,多任務鍵。安卓原生是這樣,經過優化的Android就不一定了,比如魅族的smart bar,根據當前頁面情景變化,不過蠻好用。
Android的back鍵,在大部分情況下,和頁面上的返回功效一樣。不過,Android的back鍵可以在應用件切換,還可以返回主屏幕。這個iOS裡面的鍵不能在應用間直接切換。
iOS和安卓的UI區別六:浮窗設計元素不一樣
安卓里可以看到各種浮窗,流量,清理內存等等。iOS暫時還不支持這樣的浮窗。越獄的貌似可以。
iOS和安卓的UI區別七:圖標尺寸和命名規范不一樣
1、iOS和安卓手機的APP圖標尺寸規范和圖標命名規范
2、對比PC、iOS、Android等終端APP的交互設計的差異化
Ⅳ 移動應用界面設計的尺寸設置及規范
一、android篇
1、android解析度
Android的多解析度,一向是設計師和開發者非常頭疼的事兒。盡管如此,對於多分辨造成的復雜問題,也是大家要優先解決的。Android支持多種不同的dpi模式:ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi
注意,ppi、dpi 是密度單位,不是度量單位 :
dpi主要應用於輸出,重點是列印設備上;ppi對於設計師應該比較熟悉,photoshop畫布的解析度常設置為72像素/英寸,這個單位其實就是ppi 。盡管概念不同,但是對於移動設備的顯示屏,可以看作ppi=dpi 。
ppi的運算方式是:PPI = √(長度像素數² + 寬度像素數²) / 屏幕對角線英寸數。即:長、寬各自平方之和的開方,再除以屏幕對角線的英寸數。
以iphone5為例,其ppi=√(1136px² + 640px²)/4 in=326ppi(視網膜Retina屏)
對於android手機,一個不確切的分法是,720 x 1280 的手機很可能接近 320 dpi (xhdpi模式),480 x 800 的手機很可能接近 240 dpi (hdpi模式),而320 x 480 的手機則很接近 160 dpi(mdpi模式)。
2、單位換算方法
android開發中,文字大小的單位是sp,非文字的尺寸單位用dp,但是我們在設計稿用的單位是px。這些單位如何換算,是設計師、開發者需要了解的關鍵。
簡單理解的話,px(像素)是我們UI設計師在PS里使用的,同時也是手機屏幕上所顯示的,dp是開發寫layout的時候使用的尺寸單位。
為什麼要把sp和dp代替px? 原因是他們不會因為ppi的變化而變化,在相同物理尺寸和不同ppi下,他們呈現的高度大小是相同。也就是說更接近物理呈現,而px則不行。
根據單位換算方法,可總結出:
當運行在mdpi下時,1dp=1px :也就是說設計師在PS里定義一個item高48px,開發就會定義該item高48dp ;
當運行在hdpi模式下時,1dp=1.5px :也就是說設計師在PS里定義一個item高72px,開發就會定義該item高48dp ;
當運行在xhdpi模式下時,1dp=2px :也就是說設計師在PS里定義一個item高96px,開發就會定義該item高48dp ;
當你的app需要適配多個dpi模式的時候,請參考圖1的比例進行換算 。
3、設計稿基本元素的尺寸設置
為了適應多解析度的手機,理想的方式是為每種解析度做一套設計稿,包括所用到的icon、設計稿標注等。但在實際開發中,這種方法耗時耗力。所以通常會選擇折中的方法。
方法一 :在標准基礎上(比如xhdpi)開始,然後放大或縮小,以適應到其他尺寸。不足之處是,對於更高解析度的手機,圖標被放大後會導致質量不高。
方法二: 以最高解析度為基準設計,然後縮小適應到所需的小解析度上。缺點是,圖標等若都最大尺寸,載入時速度慢且耗費流量較多,對於小解析度的用戶也不夠好。
結合友盟的解析度佔比數據、也為了方便換算到android開發中的尺寸單位, 推薦設計稿的畫布尺寸選用 720X1280 ,解析度仍舊為72ppi(像素/英寸)。
在android規范中對於導航欄、工具欄等的尺寸沒有明確的規定。但根據48dp原則,以及一些主流的android應用的截圖分析,總結一下尺寸要求:
狀態欄高度 :50 px
導航欄、操作欄高度 :96 px=48dp x 2
主菜單欄高度 :96 px
內容區域高度 :1038 px (1280-50-96-96=1038)
Android最近出的手機都幾乎去掉了實體鍵,把功能鍵移到了屏幕中,高度也和菜單欄一樣為:96 px
4、圖標和字體大小(來自官方規範文檔)
a、啟動圖標(home頁或app列表頁)
整體大小為48 x 48 dp
b、操作欄圖標,代表用戶在app中可以使用到的最重要的圖標
整體大小為32 x 32 dp ,圖形實際區域為 24 x 24 dp
c、小圖標/場景圖標,提供操作或特定項目的狀態。
比如gmail app的星型標記、一些內容展開收起用到的向下向上的圖標等。整體大小為16 x 16 dp ,圖形實際區域為 12 x 12 dp 。
d、通知圖標
如果app有通知,要提供一個有新通知時顯示在狀態欄的通知圖標。整體大小為24 x 24 dp ,圖形實際區域為 22 x 22 dp 。
註:android規范提供的尺寸單位是dp,若設計稿尺寸設為720 x 1280 ,圖標大小需在規范要求的尺寸數字上乘以2。比如操作欄圖標32 x 32 dp ,則設計稿上應該是64 x 64 px 。
e、字體大小
Android規范中的要求如下:
前面提到Android開發中的字型大小單位是sp,而換算關系是 sp*ppi/160 = px 。所以720 x 1280尺寸的設計稿上,字體大小可選擇為 24px 、28px 、32px 、36px ,主要根據文字的重要程度來選擇,特殊情況下也可能選擇更大或更小的字體。
f、其他尺寸要求
通常把48dp作為可觸摸的UI元件的標准。
為什麼要用48dp呢?一般來說,48dp轉化為一個物理尺寸約9毫米。通常建議目標大小為7-10毫米,以方便用戶手指能准確並且舒適觸摸目標區域 。
如果你設計的元素高和寬至少48dp,你就可以保證:
(1)觸摸目標絕不會比建議的最低目標(7mm)小,無論在什麼屏幕上顯示。
(2)在整體信息密度和觸摸目標大小之間取得了一個很好的平衡。
另外,每個UI元素之間的空白通常是8dp 。
二、iOS篇
1、解析度
iPhone 界面尺寸:
iPad 界面尺寸:1024×768、2048×1536
(以上單位都是像素,至於解析度一般網頁UI和移動UI基本上都只要 72 ppi)
2、單位換算px、pt
這里需要先區分pt、px,pt(磅值)是物理長度單位,指的是72分之一英寸。手機上看來同一大小的字磅值是一樣的,但是換算成不同解析度手機的字型大小px值不一樣。(px=pt*ppi/72)
iPhone在出retina屏(也就是4S)之前的屏幕像素是320x480px,屏幕密度是163ppi,4S的屏幕像素是640x960px,屏幕密度是326ppi,翻了一倍。iPhone5的ppi沒有變化,兼容性方面要增加類似首屏畫面等程序上的判斷。
在iPhone界面上元素的定位、尺寸是通過一個單位point,而非px,屏幕上固定有320x480pt,retina屏兩倍的解析度改變的只是pt和px之間的比例而已,這樣就能實現不改變程序,只上傳兩套圖片就兼容兩個解析度。
****在設計的時候並不是每個尺寸都要做一套,尺寸按自己的手機尺寸來設計,比較方便預覽效果,一般用 640×960 或者 640×1136 的尺寸設計。其中設計稿的畫布解析度設為默認的72ppi(此時1px=1pt ),所以設計師可以統一採用px為單位。
開發拿到設計稿時,將上面標注的以px為單位的字型大小大小、圖像尺寸除以2,就是非retina屏上的pt值,這樣在retina屏上也可以根據此pt值換算對應的px大小,以確保不同的解析度下有合適的效果。****
3、基本元素的尺寸設置
iPhone的APP界面一般由四個元素組成,分別是:狀態欄、導航欄、主菜單欄以及中間的內容區域。
這里取用 640×960 的尺寸設計,那我們就說說在這個尺寸下這些元素的尺寸:
狀態欄:就是我們經常說的信號、運營商、電量等顯示手機狀態的區域,其高度為:40 px
導航欄:顯示當前界面的名稱,包含相應的功能或者頁面間跳轉的按鈕,其高度為:88 px
主菜單欄:類似於頁面的主菜單,提供整個應用的分類內容的快速跳轉,其高度為:98 px
內容區域:展示應用提供的相應內容,整個應用中布局變更最為頻繁的,其高度為:734 px=960-40-88-98
以上尺寸適用於 iPhone 4、4S,iPhone5/5s 的 640×11136 的尺寸,其實就是中間的內容區域高度增加到:910 px,其他尺寸也同上。
4、常用圖像、圖標大小(來自官方規範文檔)
單位:像素
5、字體大小
iOS交互設計規範文檔上,對字體大小沒有做嚴格的數值規定,只提供了一些指導原則:
單位:點pt
– 即便用戶選擇了最小文字大小,文字也不應小於 22 點。作為對照,正文樣式在大字型大小下使用 34 點字體大小作為默認文字大小設置。
– 通常來說,每一檔文字大小設置的字體大小和行間距的差異是 2 點。例外情況是兩個標題樣式,在最小、小和中等設置時都使用相同字體大小、行間距和字間距。
– 在最小的三種文字大小中,字間距相對寬闊;在最大的三種文字大小中,字間距相對緊密。
– 標題和正文樣式使用一樣的字體大小。為了將其和正文樣式區分,標題樣式使用加粗效果。
– 導航控制器中的文字使用和大號的正文樣式文字大小(明確來說,是 34 點)。
– 文本通常使用常規體和中等大小,而不是用細體和粗體。
網路用戶體驗做過的一個小調查:
單位:像素px
還有個方法就是找你覺得好的APP應用,手機截圖後放進PS自己對比調節字體大小。
Ⅵ ios和android設計規范區別
Android 整體視覺設計規范
App 界面的整體視覺組成大致可以分為四個部分:
StatusBar(狀態欄)、TopBar(頭部欄)、Body Content(內容區域)、FootBar(底部欄)。
StatusBar 的樣式由系統 UI 決定,除背景配色外,不需要做其他的設計。
TopBar 兩個系統平台規范上的顯示高度與內容布局有明顯的差異,按各自的規范進行設計。
Body Content 除控制項外,採用相同的布局與視覺設計。
FootBar 除控制項外,採用相同的布局與視覺設計。
二、Android差異化設計案例解讀
1. StatusBar/TopBar 差異化設計
2. 常用的三個系統圖標/控制項差異化
3. 搜索/輸入控制項差異化
4. 彈窗樣式差異化
三、Android系統交互與iOS系統交互的差異化設計
1. 交互方式:
除了上面提到了彈窗樣式與交互差異化之外,對於一些系統交互行為,推薦盡量使用 iOS 與 Android 各自平台的系統控制項與交互方式,降低開發與用戶學習成本。系統交互行為主要包含以:返回上級/關閉當前頁面的方式、通知開啟或者關閉設置、發送/提交內容(鍵盤自帶或者新增按鈕點擊)、Item 列表排序/刪除、提示窗顯隱、時間選擇控制項、手勢操作等等。
2. 交互動效:
交互動效也推薦盡量使用 iOS 與 Android 各自平台的系統提供的動效。比如 iOS 的鏡頭切近與高斯模糊,Android 的紙墨磁吸等等。
單條 item 的交互差異示例
總體來說,就是以 iOS 版為參照,底部欄與中間內容區域盡量保持相同的設計,通過對狀態欄、頭部樣式、控制項(開關、選框、搜索、輸入)、系統圖標(返回、分享、更多)、彈窗樣式、系統交互進行 Android 規范化差異,以保證該 App 的設計在兩個不同的系統平台即能符合中國用戶的使用習慣,又能適當體現系統的不同風格與特性。