APP界面設(shè)計(jì)尺寸(ui設(shè)計(jì)手機(jī)界面尺寸)
本篇文章給大家談?wù)凙PP界面設(shè)計(jì)尺寸,以及ui設(shè)計(jì)手機(jī)界面尺寸對(duì)應(yīng)的知識(shí)點(diǎn),希望對(duì)各位有所幫助,不要忘了收藏本站喔。
本文目錄一覽:
- 1、androidapp界面設(shè)計(jì)按什么尺寸
- 2、ios app界面設(shè)計(jì)用什么尺寸?
- 3、淺談iOS APP設(shè)計(jì)規(guī)范-按照iphone6尺寸
androidapp界面設(shè)計(jì)按什么尺寸
androidapp界面設(shè)計(jì)是按720*1280的,切圖上可以點(diǎn)9切圖做到所有手機(jī)的適配。
狀態(tài)欄、導(dǎo)航欄和主菜單欄,以720*1280的尺寸來(lái)設(shè)計(jì),那么狀態(tài)欄的高度應(yīng)為50px,導(dǎo)航欄的高度96px,主菜單欄的高度96px,因?yàn)槭情_(kāi)源的系統(tǒng),這里的數(shù)值也只能作為參考。
Android為了區(qū)別于IOS,從4.0開(kāi)始提出了一套HOLO的UI風(fēng)格設(shè)計(jì)風(fēng)格,鼓勵(lì)將底部的主菜單欄放到導(dǎo)航欄下面,從而避免點(diǎn)擊下方材料誤點(diǎn)虛擬按鍵,很多APP的新版中也采用了這一風(fēng)格。
擴(kuò)展資料:
注意事項(xiàng):
1、通常情況要定位一個(gè)Icon只需給出上/下邊距,左/右邊距,標(biāo)注圖標(biāo)距離只需標(biāo)到可點(diǎn)擊范圍外
通用型顏色、字體單獨(dú)標(biāo)明一份,通用型模塊只需單獨(dú)標(biāo)明一份,如導(dǎo)航欄。
2、手機(jī)可視區(qū)域通常為寬度固定,長(zhǎng)度超出邊界可滑動(dòng),所以標(biāo)注物體寬度時(shí)可按比例說(shuō)明,如果要標(biāo)注內(nèi)容上下居中,左右居中,或等比可不標(biāo)注。
3、當(dāng)交付的是一張完整圖片時(shí),不需做機(jī)型適配,只需給高清圖(1920*1080)即可,注意進(jìn)行壓縮。
4、若圖標(biāo)在不同頁(yè)面重復(fù)出現(xiàn),且尺寸相差不大,直接給出最大一份切圖,并在圓形圖標(biāo)明尺寸,程序會(huì)根據(jù)需求縮放。
5、當(dāng)背景是純色時(shí)只需給出色值,Android使用16進(jìn)制色值。
參考資料來(lái)源:百度百科-Android
參考資料來(lái)源:百度百科-界面設(shè)計(jì)
參考資料來(lái)源:百度百科-狀態(tài)欄
參考資料來(lái)源:百度百科-導(dǎo)航欄
參考資料來(lái)源:百度百科-開(kāi)源系統(tǒng)
參考資料來(lái)源:百度百科-切圖
參考資料來(lái)源:百度百科-UI設(shè)計(jì)
ios app界面設(shè)計(jì)用什么尺寸?
界面尺寸規(guī)范
1、界面尺寸大小是:750x1334px。
2、狀態(tài)欄(status bar):就是電量條,其高度為:40px;
3、導(dǎo)航欄(navigation):就是頂部條,其高度為:88px;
4、主菜單欄(submenu,tab):就是標(biāo)簽欄,底部條,其高度為:98px;
5、內(nèi)容區(qū)域(content):就是屏幕中間的區(qū)域,其高度為:1334px-40px-88px-98px=1108px
iOS是由蘋果公司開(kāi)發(fā)的移動(dòng)操作系統(tǒng) 。蘋果公司最早于2007年1月9日的Macworld大會(huì)上公布這個(gè)系統(tǒng),最初是設(shè)計(jì)給iPhone使用的,后來(lái)陸續(xù)套用到iPod touch、iPad以及Apple TV等產(chǎn)品上。
iOS與蘋果的Mac OS X操作系統(tǒng)一樣,屬于類Unix的商業(yè)操作系統(tǒng),原本這個(gè)系統(tǒng)名為iPhone OS,因?yàn)閕Pad,iPhone,iPod touch都使用iPhone OS,所以2010WWDC大會(huì)上宣布改名為iOS(iOS為美國(guó)Cisco公司網(wǎng)絡(luò)設(shè)備操作系統(tǒng)注冊(cè)商標(biāo),蘋果改名已獲得isco公司授權(quán)。
淺談iOS APP設(shè)計(jì)規(guī)范-按照iphone6尺寸
現(xiàn)在iOS app 的尺寸也變多了,要適配到各種尺寸需要選擇一個(gè)折中的尺寸來(lái)向上向下適配,以前一般用的是iphone5的尺寸,iPhone6 plus出現(xiàn)后,iPhone6尺寸成了大多數(shù)設(shè)計(jì)師的選擇。
一、iPhone6的界面布局是:
屏幕是4.7英寸的,設(shè)計(jì)稿的大小750x1334px
☆ 狀態(tài)欄(status bar):就是電量條,其高度為:40px;
☆ 導(dǎo)航欄(navigation):就是頂部條,其高度為:88px;
☆ 主菜單欄(submenu,tab):就是標(biāo)簽欄,底部條,其高度為:98px;
☆ 內(nèi)容區(qū)域(content):就是屏幕中間的區(qū)域,其高度為:1334px-40px-88px-98px=1108px
二、關(guān)于iPhone6的圖標(biāo)的尺寸是:
☆導(dǎo)航欄的圖標(biāo)高度為44px(絕大部分功能按鈕)左右,標(biāo)簽欄的圖標(biāo)尺寸為50x50px左右,最大為96x64px。
☆關(guān)閉按鈕34px*34px,返回按鈕26px,簡(jiǎn)單筆畫圖標(biāo)40px。
三、常用的可點(diǎn)擊高度-登陸框、密碼框、功能列表等,統(tǒng)一設(shè)成88px。
四、搜索欄、輸入框、評(píng)論框、地址框的高度,在iPhone6的原型圖上,統(tǒng)一設(shè)成58px或60px。
五、在iPhone6設(shè)計(jì)稿中,界面元素之間的常用距離。
常用間距-親密距離:20px(與邊緣距離);疏遠(yuǎn)距離:30px;
其它距離-10px,44px等;
區(qū)塊間隔:30-40px。
A、疏遠(yuǎn)距離:比如,改圖標(biāo)距離手機(jī)屏幕最左邊的距離;
B、親密距離:比如,左邊圖標(biāo)與右邊文字之間的距離。
六、黑白灰顏色常用的數(shù)值是:
① 文字黑色#333
② 文字深灰色#666
③ 文字淺灰色#999
④ 邊框淺灰色#e5e5e5
⑤ 背景淡灰色#f2f2f2
⑥ 按鈕背景純白色#ffffff
一、注意事項(xiàng)
1、在每個(gè)項(xiàng)目設(shè)計(jì)中只使用1-2個(gè)字體樣式,而在品牌字有明確的規(guī)范的情況下,只需要一種字體貫穿全文,通過(guò)對(duì)字體放大來(lái)強(qiáng)調(diào)重點(diǎn)文案。字體用的太多,越顯得不夠?qū)I(yè)。
2、不同的樣式的字體,形狀或系列最好相同,保證字體風(fēng)格的一致性。
3、字體與背景的層次要分明,確保字體樣式與色調(diào)氣氛相匹配
二、界面中文字選用的規(guī)則
在不同平臺(tái)的界面設(shè)計(jì)中規(guī)范的字體會(huì)有不同,像移動(dòng)界面的設(shè)計(jì)就會(huì)有固定的字體樣式,網(wǎng)頁(yè)中會(huì)有常用的幾個(gè)字體。
以下是在72像素/英寸下的規(guī)范
移動(dòng)端常規(guī)字體
IOS:常選擇華文黑體或者冬青黑體,尤其是冬青黑體效果最好, 方正蘭亭黑和方正黑體簡(jiǎn) 、方正中等線也運(yùn)用的比較多。
三、字體的大小
1、導(dǎo)航欄的文字大小是36-38px;
2、標(biāo)題字號(hào):32px ,34px;
3、內(nèi)容區(qū)域的正文文字大小是:28px,30px;
4、輔助性文字:20px , 24px,26px;
5、標(biāo)簽欄(或主菜單欄)的圖標(biāo)下方的文字大小為20px;
6、終極原則:不大于所在要件高度的一半;
7、行間距:字號(hào)的1.2-1.5倍。
下圖是百度用戶體驗(yàn)做過(guò)的一個(gè)小調(diào)查,可以看出用戶可接受的文字大?。?/p>
關(guān)于APP界面設(shè)計(jì)尺寸和ui設(shè)計(jì)手機(jī)界面尺寸的介紹到此就結(jié)束了,不知道你從中找到你需要的信息了嗎 ?如果你還想了解更多這方面的信息,記得收藏關(guān)注本站。
掃描二維碼推送至手機(jī)訪問(wèn)。
版權(quán)聲明:本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布,如需轉(zhuǎn)載請(qǐng)注明出處。