iOS和Android的app界面設計規(guī)范

記錄一下iOS和Andoird的界面設計規(guī)范罚舱,方便進行標準的產品設計攻泼,并與設計師順暢溝通

iOS篇


界面尺寸

| 設備| 分辨率|狀態(tài)欄高度|導航欄高度|標簽欄高度|
|: ------ :|:-------: |:------: |:-------:|: -----:|
|iPhone6 plus| 1242×2208 px | 60px|132px|147px|
|iPhone6| 750×1334 px| 40px|88px|98px|
|iPhone5/5s/5c| 640×1136 px | 40px|88px|98px|
|iPhone4/4s| 640×960 px|40px|88px|98px|
|iPad3/4/Air/Air2/mini2|2048×1536 px| 40px|88px|98px|
|iPad1/2|1024×768 px|20px|44px|49px|
|iPad mini|1024×768 px|20px|44px|49px|

Paste_Image.png

圖標尺寸

|設備 |App Store|程序應用|主屏幕|spotlight搜索|標簽欄|工具欄和導航欄|
|: ------ :|:-------: |:------: |:-------:|: ----- :|: -----:|: ----- :|
|iPhone6 plus|10241024px|180180px|144×144px|87×87 px|7575px|6666px|
|iPhone6|10241024px|120120px|144×144px|5858px|7575px|4444px|
|iPhone5/5s/5c|1024
1024px|120120px|144×144px|5858px|7575px|4444px|
|iPhone4/4s|10241024px|120120px|144×144px|5858px|7575px|4444px|
|iPad3/4/Air/Air2/mini2|1024
1024px|180180px|144×144px|100100px|5050px|4444px|
|iPad1/2|10241024px|9090px|7272px|5050px|2525px|2222px|
|iPad mini|10241024px|9090px|7272px|5050px|2525px|2222px|

字體

iPhone 上的字體英文為: HelveticaNeue 至于中文,Mac下用的是黑體-簡诡延,Win下則為華文黑體滞欠,所有字體要用雙數(shù)字號。

百度用戶體驗部做過一個小調查肆良, 對于app字體大小的調查結論如下:

Paste_Image.png

顏色值

IOS顏色值取 RGB各顏色的值比如某個色值筛璧,給予IOS開發(fā)的色值為 R:12 G:34 B:56 給出的值就是 12,34,56(有時也要根據(jù)開發(fā)的習慣,有時也用十六進制)

內部設計

1惹恃、所有能點擊的圖片不得小于44px(Retina需要88px)
2夭谤、單獨存在的部件必須是雙數(shù)尺寸
3、兩倍圖以@2x作為命名后綴
4巫糙、充分考慮每個控制按鈕在4中狀態(tài)下的樣式朗儒,如圖

Paste_Image.png

Android篇


界面尺寸

android的尺寸眾多,建議使用分辨率為720x1280 的尺寸設計参淹。這個尺寸 720x1280中顯示完美醉锄,在 1080x1920 中看起來也比較清晰;切圖后的圖片文件大小也適中浙值,應用的內存消耗也不會過高恳不。

狀態(tài)欄高度:50 px
導航欄高度:96 px
標簽欄高度:96 px
Android最近出的手機都幾乎去掉了實體鍵,把功能鍵移到了屏幕中开呐,當然高度也是和標簽欄一樣的:96 px
內容區(qū)域高度為:1038 px (1280-50-96-96=1038)

圖表尺寸

|屏幕大小|啟動圖標|操作欄圖標|上下文圖標|系統(tǒng)通知圖標(白色)|最細筆畫|
|: ------ :|:-------: |:------: |:-------:|: ----- :|: -----:|
|320×480 px|48×48 px|32×32 px |16×16 px |24×24 px |不小于2 px|
|480×800px /480×854px /540×960px|72×72 px|48×48 px |24×24 px |36×36 px| 不小于3 px|
|720×1280 px|48×48 dp |32×32 dp| 16×16 dp| 24×24 dp |不小于2 dp|
|1080×1920 px|144×144 px| 96×96 px| 48×48 px |72×72 px |不小于6 px|

ps: Android設計規(guī)范中烟勋, 使用的單位是dp规求, dp在安卓機上不同的密度轉換后的px 是不一樣的

字體

Android 上的字體為: Droid sans fallback ,是谷歌自己的字體卵惦,與微軟雅黑很像阻肿。
Android的字體大小調查結論是:

Paste_Image.png

顏色值

Android顏色值取值為十六進制的值 比如一綠色的值, 給開發(fā)的值為 #5bc43e

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末沮尿,一起剝皮案震驚了整個濱河市丛塌,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蛹找,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件哨坪,死亡現(xiàn)場離奇詭異庸疾,居然都是意外死亡,警方通過查閱死者的電腦和手機当编,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進店門届慈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人忿偷,你說我怎么就攤上這事金顿。” “怎么了鲤桥?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵揍拆,是天一觀的道長。 經常有香客問我茶凳,道長嫂拴,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任贮喧,我火速辦了婚禮筒狠,結果婚禮上,老公的妹妹穿的比我還像新娘箱沦。我一直安慰自己辩恼,他們只是感情好,可當我...
    茶點故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布谓形。 她就那樣靜靜地躺著灶伊,像睡著了一般。 火紅的嫁衣襯著肌膚如雪寒跳。 梳的紋絲不亂的頭發(fā)上谁帕,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天,我揣著相機與錄音冯袍,去河邊找鬼匈挖。 笑死碾牌,一個胖子當著我的面吹牛,可吹牛的內容都是我干的儡循。 我是一名探鬼主播舶吗,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼择膝!你這毒婦竟也來了誓琼?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤肴捉,失蹤者是張志新(化名)和其女友劉穎腹侣,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體齿穗,經...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡傲隶,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了窃页。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片跺株。...
    茶點故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖脖卖,靈堂內的尸體忽然破棺而出乒省,到底是詐尸還是另有隱情,我是刑警寧澤畦木,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布袖扛,位于F島的核電站,受9級特大地震影響十籍,放射性物質發(fā)生泄漏攻锰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一妓雾、第九天 我趴在偏房一處隱蔽的房頂上張望娶吞。 院中可真熱鬧,春花似錦械姻、人聲如沸妒蛇。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽绣夺。三九已至,卻和暖如春欢揖,著一層夾襖步出監(jiān)牢的瞬間陶耍,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工她混, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留烈钞,地道東北人泊碑。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像毯欣,于是被迫代替她去往敵國和親馒过。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,037評論 2 355

推薦閱讀更多精彩內容