交互設(shè)計(jì)規(guī)范——IOS篇

一揉稚、尺寸及分辨率

iPhone界面尺寸:320*480、640*960熬粗、640*1136?

iPhone6:4.7英寸(1334×750)搀玖,iPhone6 Plus:5.5英寸(1920×1080) ?

設(shè)計(jì)圖單位:像素72dpi。在設(shè)計(jì)的時(shí)候并不是每個(gè)尺寸都要做一套驻呐,尺寸按自己的手機(jī)來(lái)設(shè)計(jì)灌诅,比較方便預(yù)覽效果芳来,一般用640*960或者640*1136的尺寸來(lái)設(shè)計(jì),現(xiàn)在iphone6和plus出來(lái)后有很多人會(huì)使用6的設(shè)計(jì)效果猜拾。

如果是我來(lái)做的話即舌,我會(huì)使用640×1136,對(duì)plus做單獨(dú)的修改適配挎袜,因?yàn)閜lus的屏幕實(shí)在是大了顽聂,遵循屏大顯示更多內(nèi)容的原則這里本應(yīng)該是需要修的了。有更好辦法的話希望大家可以分享一下盯仪。 Ps:作圖的時(shí)候確保都是用形狀工具(快捷鍵:U)畫(huà)的紊搪,這樣更方便后期的切圖或者尺寸變更。


二磨总、界面基本組成元素

iPhone的app界面一般由四個(gè)元素組成嗦明,分別是:狀態(tài)欄(status bar)、導(dǎo)航欄(navigation)蚪燕、主菜單欄(submenu)娶牌、內(nèi)容區(qū)域(content)。??

這里取用640*960的尺寸設(shè)計(jì)馆纳,那我們就說(shuō)說(shuō)在這個(gè)尺寸下這些元素的尺寸诗良。? 狀態(tài)欄(status bar):就是我們經(jīng)常說(shuō)的信號(hào)、運(yùn)營(yíng)商鲁驶、電量等顯示手機(jī)狀態(tài)的區(qū)域鉴裹,其高度為:40px 導(dǎo)航欄(navigation):顯示當(dāng)前界面的名稱,包含相應(yīng)的功能或者頁(yè)面間的跳轉(zhuǎn)按鈕钥弯,其高度為:88px 主菜單欄(submenu径荔,tab):類(lèi)似于頁(yè)面的主菜單,提供整個(gè)應(yīng)用的分類(lèi)內(nèi)容的快速跳轉(zhuǎn)脆霎,其高度為:98px??

內(nèi)容區(qū)域(content):展示應(yīng)用提供的相應(yīng)內(nèi)容总处,整個(gè)應(yīng)用中布局變更最為頻繁,其高度為:734px?

至于我們經(jīng)常說(shuō)的iPhone5/5s的640*1136的尺寸睛蛛,其實(shí)就是中間的內(nèi)容區(qū)域高度增加到910px鹦马。

PS:在最新的iOS7的風(fēng)格中,蘋(píng)果已經(jīng)開(kāi)始慢慢弱化狀態(tài)欄的存在忆肾,將狀態(tài)欄和導(dǎo)航欄合在了一起荸频,但是再怎么變,尺寸高度也還是沒(méi)有變的客冈,只不過(guò)大家在設(shè)計(jì)iOS7風(fēng)格的界面的時(shí)候多多注意下.


三旭从、字體大小

iPhone上的字體英文為:HelveticaNeue 。至于中文Mac下用的是黑體,Win下則為華文黑體(最新字體稱為黑體-簡(jiǎn))遇绞。? 下圖是百度用戶體驗(yàn)做過(guò)的一個(gè)小調(diào)查键袱,可以看出用戶可接受的文字大小。


四摹闽、切圖??

切圖是APP設(shè)計(jì)中的一個(gè)重要過(guò)程蹄咖,關(guān)系到APP的界面實(shí)現(xiàn),及各種適配性還有各種性能 IOS在沒(méi)6plus前付鹿,我們只需要提供兩種圖澜汤,普通圖及視網(wǎng)膜屏幕圖。??

以640×1136(640×960是一樣的)做的設(shè)計(jì)圖的話就會(huì)好辦一點(diǎn)舵匾。直接出設(shè)計(jì)圖上的原大小圖標(biāo)俊抵,比如我們命名一個(gè)圖片叫 img-line.png,我們給開(kāi)發(fā)的圖就要改變這個(gè)名字叫 img-line@2x.png 就是在后綴名前加上@2x表示視網(wǎng)膜屏的圖坐梯,iPhone4的還需要把這個(gè)圖尺寸按比例縮小50%徽诲,得到正真的img-line.png。然后把這兩個(gè)圖移交給開(kāi)發(fā)吵血,iPhone6的圖在規(guī)范里是與5s使用的是一樣的谎替,也是@2x圖。有些UI則需要做適當(dāng)?shù)倪m配蹋辅,比如拉長(zhǎng)钱贯,拉高,這個(gè)開(kāi)發(fā)會(huì)去做侦另。??

對(duì)于IPhone6 plus的話范里給出的是@3x相信大家也知道是怎么回事秩命,但如果要使用PS放大的話,大家做圖的時(shí)候就需要使用形狀工具來(lái)做褒傅,放大后還需要仔細(xì)微調(diào)弃锐,這里就不多做講解。

溫馨提示: 在出可按的圖片切圖時(shí)需要注意圖片的可按區(qū)域大小殿托,有時(shí)圖標(biāo)很小拿愧,實(shí)際切出來(lái)的放在上面,用手指是按不到的碌尔,我們就需要對(duì)圖片單獨(dú)處理,拓寬圖片的有效區(qū)域券敌,這里是拓寬非放大唾戚,就是改變畫(huà)布大小使圖片尺寸面積擴(kuò)大,使圖片四周拓寬多余的透明區(qū)域 待诅,從而改變可按大小叹坦。

五、顏色值問(wèn)題

IOS顏色值取 RGB各顏色的值比如某個(gè)色值卑雁,給予IOS開(kāi)發(fā)的色值為 R:12 G:34 B:56 給出的值就是 12,34,56(有時(shí)也要根據(jù)開(kāi)發(fā)的習(xí)慣募书,有時(shí)也用十六進(jìn)制)绪囱;Android開(kāi)發(fā)的色值則使用十六進(jìn)制 #0c2238

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市莹捡,隨后出現(xiàn)的幾起案子鬼吵,更是在濱河造成了極大的恐慌,老刑警劉巖篮赢,帶你破解...
    沈念sama閱讀 218,546評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件齿椅,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡启泣,警方通過(guò)查閱死者的電腦和手機(jī)涣脚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)寥茫,“玉大人遣蚀,你說(shuō)我怎么就攤上這事∩闯埽” “怎么了芭梯?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,911評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)膝迎。 經(jīng)常有香客問(wèn)我粥帚,道長(zhǎng),這世上最難降的妖魔是什么限次? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,737評(píng)論 1 294
  • 正文 為了忘掉前任芒涡,我火速辦了婚禮,結(jié)果婚禮上卖漫,老公的妹妹穿的比我還像新娘费尽。我一直安慰自己,他們只是感情好羊始,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,753評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布旱幼。 她就那樣靜靜地躺著,像睡著了一般突委。 火紅的嫁衣襯著肌膚如雪柏卤。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,598評(píng)論 1 305
  • 那天匀油,我揣著相機(jī)與錄音缘缚,去河邊找鬼。 笑死敌蚜,一個(gè)胖子當(dāng)著我的面吹牛桥滨,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 40,338評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼齐媒,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼蒲每!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起喻括,我...
    開(kāi)封第一講書(shū)人閱讀 39,249評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤邀杏,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后双妨,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體淮阐,經(jīng)...
    沈念sama閱讀 45,696評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,888評(píng)論 3 336
  • 正文 我和宋清朗相戀三年刁品,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了泣特。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,013評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡挑随,死狀恐怖状您,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情兜挨,我是刑警寧澤膏孟,帶...
    沈念sama閱讀 35,731評(píng)論 5 346
  • 正文 年R本政府宣布无畔,位于F島的核電站贸铜,受9級(jí)特大地震影響蚂会,放射性物質(zhì)發(fā)生泄漏具则。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,348評(píng)論 3 330
  • 文/蒙蒙 一颅拦、第九天 我趴在偏房一處隱蔽的房頂上張望盆驹。 院中可真熱鬧冈钦,春花似錦与倡、人聲如沸界逛。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,929評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)息拜。三九已至,卻和暖如春净响,著一層夾襖步出監(jiān)牢的瞬間少欺,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,048評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工馋贤, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留狈茉,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,203評(píng)論 3 370
  • 正文 我出身青樓掸掸,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子扰付,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,960評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容