iphone界面尺寸規(guī)范

iphone 6 plus設計版:1242*2208

ppi:401ppi

狀態(tài)欄高度:60px

導航欄高度:132px

標簽欄高度:147px

iphone 6 plus放大版:1125*2001

ppi:401ppi

狀態(tài)欄高度:54px

導航欄高度:132px

標簽欄高度:147px

iphone 6 plus物理版:1080*1920

ppi:401ppi

狀態(tài)欄高度:54px

導航欄高度:132px

標簽欄高度:147px

物理版、放大版、設計版的區(qū)別:

物理版就是iphone 6plus實際實際的屏幕像素,而設計版就是我們截屏iphone 6plus的界面在ps中去量,發(fā)現的尺寸。很明顯,量出來的分辨率也就是設計版要比物理版的分辨率要大,這可能由于蘋果采用了縮放顯示的。至于放大版,其實就是iphone 6的尺寸等比放大1.5倍得出的分辨率。

iphone 6:750*1334

ppi:326ppi

狀態(tài)欄高度:40px

導航欄高度:88px

標簽欄高度:98px

iphone 5-5c-5s:640*1136

ppi:326ppi

狀態(tài)欄高度:40px

導航欄高度:88px

標簽欄高度:98px

iphone 4-4s:640*960

ppi:326ppi

狀態(tài)欄高度:40px

導航欄高度:88px

標簽欄高度:98px

iphone&ipod Touch第一代、第二代、第三代:320*480

ppi:163ppi

狀態(tài)欄高度:20px

導航欄高度:44px

標簽欄高度:49px

圖標尺寸:

iphone 6 plus(@3X)

App store:1024*1024px(180px)

非retina:512*512px(90*90px)

程序應用:180*180px0000

主屏幕:114*114px(20px)

spotlight搜索:87*87px

工具欄和導航欄:66*66px

iphone 4、5、6(@2X)

App store:1024*1024px

程序應用:120*120px

主屏幕:114*114px

spotlight搜索:58*58px(10px)

工具欄和導航欄:44*44px

iphone&ipod touch第一代、第二代、第三代:

App store:1024*1024px

程序應用:120*120px

主屏幕:57*57px(10px)

spotlight搜索:29*29px

測量標注工具為:

MarkMan馬克鰻,Dorado標注,PXcook像素大廚。

iphone6圖標尺寸

導航欄的圖標高度為44px左右,標簽欄的圖標尺寸為50x50px左右,最大為96x64px。

設置界面的圖標高度和開關滑動按鈕的圖標高度:58px。

ip 6 plus的圖標高度和開關滑動按鈕為:87*87px。

iPhone6文字尺寸

導航欄的文字大小最大值是34-36px,標簽欄的圖標下方的文字大小為20px。

內容區(qū)域的文字大小是:20px~24px,26px,28px,30px,32px,34px。

文字顏色:

黑白灰顏色常用的數值是:

① 文字黑色#282828

② 文字深灰色#656565

③ 文字淺灰色#98989

④ 邊框淺灰色#C3C3C3

⑤ 背景淡灰色#f2f2f2

⑥ 按鈕背景純白色#ffffff

常用的可點擊高度,在iPhone6的原型圖上,統(tǒng)一成88px。在iPhone6設計稿中,88px是一個常用的設計尺寸。

搜索欄的高度,在iPhone6的原型圖上,統(tǒng)一成58px。

在iPhone6設計稿中,58px 也是一個常用的設計尺寸。

在iPhone6設計稿中,界面元素之間的常用距離,親密距離:20px;疏遠距離:30px。

導航欄的圖標高度為44px(絕大部分功能按鈕)左右,標簽欄的圖標尺寸為50x50px左右,最大為96x64px。

關閉按鈕34px*34px,返回按鈕26px,簡單筆畫圖標40px。

常用的可點擊高度-登陸框、密碼框、功能列表等,統(tǒng)一設成88px。

搜索欄、輸入框、評論框、地址框的高度,在iPhone6的原型圖上,統(tǒng)一設成58px或60px。

在iPhone6設計稿中,界面元素之間的常用距離。

常用間距-親密距離:20px(與邊緣距離);疏遠距離:30px;

其它距離-10px,44px等;

區(qū)塊間隔:30-40px。

A、疏遠距離:比如,改圖標距離手機屏幕最左邊的距離;

B、親密距離:比如,左邊圖標與右邊文字之間的距離。

黑白灰顏色常用的數值是:

① 文字黑色#333

② 文字深灰色#666

③ 文字淺灰色#999

④ 邊框淺灰色#e5e5e5

⑤ 背景淡灰色#f2f2f2

⑥ 按鈕背景純白色#ffffff

移動端常規(guī)字體

IOS:常選擇華文黑體或者冬青黑體,尤其是冬青黑體效果最好,方正蘭亭黑和方正黑體簡、方正中等線也運用的比較多。

字體的大小

1、導航欄的文字大小是36-38px;

2、標題字號:32px ,34px;

3、內容區(qū)域的正文文字大小是:28px,30px;

4、輔助性文字:20px , 24px,26px;

5、標簽欄(或主菜單欄)的圖標下方的文字大小為20px;

6、終極原則:不大于所在要件高度的一半*;

7、行間距:字號的1.2-1.5倍。

IOS

長文本

可接受下線(80%用戶接受):26px

見小值(50%用戶認為偏小):30px

舒適值(用戶認為最舒適):32~34px

短文本

可接受下線(80%用戶接受):28px

見小值(50%用戶認為偏小):30px

舒適值(用戶認為最舒適):32px

注釋

可接受下線(80%用戶接受):24px

見小值(50%用戶認為偏小):24px

舒適值(用戶認為最舒適):28px

顏色值

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

內部設計

1、所有能點擊的圖片不得小于44px(Retina需要88px)

2、單獨存在的部件必須是雙數尺寸

3、兩倍圖以@2x作為命名后綴

4、充分考慮每個控制按鈕在4中狀態(tài)下的樣式,如默認、按下、選中、不可點擊。

短文本:

注釋:

邏輯分辨率

lPPI(像素密度)

表示沿著對角線,每英寸所擁有的像素(pixel)數目,PPI的數值越高,代表顯示屏能夠以越高的密度顯示圖像,即通常所說的分辨率越高,顆粒感越弱,圖像更清晰。

1 inch= 2.54cm = 25.4mm

早期的iPhone3GS的屏幕屏幕分辨率是320 * 480,iOS繪制圖形(CGPoint/CGSize/CGRect)均已point為單位。

l點(point)和像素(pixel)換算關系

iPhone3GS

1point = 1pixel

iPone4/4s、iPhone5/iPhone5s、iPhone6/iPhone6s

1point = 2pixel

iPhone6Plus/iPhone6s Plus

1point = 3pixel

iphone手機英寸如何制定?

pt以及倍率之間的換算關系

建立色彩標準卡

ps有沒有標注工具

圖標柵格系統(tǒng)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,488評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 98,034評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,327評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,554評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,337評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 54,883評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,975評論 3 439
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,114評論 0 286
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 48,625評論 1 332
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,555評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,737評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,244評論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 43,973評論 3 345
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,362評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,615評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,343評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,699評論 2 370

推薦閱讀更多精彩內容