UI设计尺寸规范UI设计规范
32×32 dp
96×96 px
16×16 dp
48×48 px
24×24 dp
72×72 px
不小于 2 dp
不小于 6 px
Android 安卓系统 dp/sp/px 换算表
名称 idpi mdpi hdpi xhdpi xxhdpi
分辨率 240×320 320×480 480×800 720×1280 1080×1920
1440×2560 px
OPPO N1
英寸
720×1280 px
5英 寸 OPPO N1 Mini
1080×1920 px
小米红米 Note
英寸
1080×1920 px
小米红米 1S
英寸
1080×1920 px
小米 M2S
英寸
1080×1920 px
锤子 T1
英寸
1440×2560 px
OnePlus One
三代
1024×1024 px
120×120 px
57×57 px
29×29 px
38×38 px
30×30 px
iPad 的设计尺寸 设备
尺寸
分辨率 状态栏高度 导航栏高度 标签栏高度
iPad 3 - 4 - 5 -6–
Air - Air2 mini2
2048×15 36 px
iPad 1 - 2
24 px
360 浏览器
24 px
遨游浏览器
24 px
搜狗浏览器
25 px
菜单栏 60 px 132 px 120 px 140 px 147 px 163 px
滚动条
市场份额 (国内浮动)
15 px
%
15 px
1%
15 px
34%
15 px
28%
15 px
1%
15 px
%
系统分辨率统计 分辨率
占有率
英寸
1080×1920 px
1080×1920 px
720×1280 px
720×1280 px
720×1280 px
720×1280 px
1080×1920 px
1080×1920 px
主流浏览器的界面参数与份额
浏览器
状态栏
Chrome 浏览器
22 px(浮动 出现)
火狐浏览器
20 px
IE 浏览器
1024×1024 px
180×180 px
114×114 px
87×87 px
75×75 px
66×66 px
iPhone6 6S -
7?(@2×)
1024×1024 px
1024×1024
iPhone5 -
px
120×120 px
120×120 px
114×114 px
114×114 px
58×58 px
1242×2208 px
iPhone6 6S - 7
750×1334 px
iPhone5 - 5C - 5S
640×1136 px
iPhone4 - 4S
640×960 px
401PPI 326PPI 326PPI 326PPI
60px 40px 40px 40px
132px 88px 88px 88px
UI 设计尺寸规范 UI 设 计规范
Document serial number【UU89WT-UU98YT-UU8CB-UUUT-UUT108】
iPhone 界面尺寸
设备
UI 设计规范:IOS、Android 系统主流尺寸整 理
分辨率
PPI
状态栏高度 导航栏高度 标签栏高度
iPhone6P、6SP、 7P
HVGA (320×480)
高密度(240) 超高密度(320)
480×640
WVGA800 (480×800)
WVGA854 (480×854)
640×960
大屏幕
WVGA800 * (480×800)
WVGA854 * (480×854)
超大屏 幕
1024×600
WVGA800 * (480×800)
72×72 px
50×50 px
25×25 px
22×22 px
50×50 px
25×25 px
22×22 px
Android SDK 模拟机的尺寸
屏幕大 小 低密度(120)
中等密度(160)
小屏幕
QVGA
(240×320)
普通屏 幕
WQVGA400 (240×400)
WQVGA432 (240×432)
分辨率
占有率
1920×1080 360×640 720×1280 320×568
1080×1920
%
1366×768
%
%
1440×900
%
%
1024×768
%
%
1600×900
%
%
375×667
%
比率 rate (针对 320px)
比率 rate (针对 640px)
比率 rate (针对 750px)
1
主流 Android 手机分辨率和尺寸
设备
分辨率
尺寸
设备
分辨率
尺寸
英 寸 魅族 MX2
800×1280 px
魅族 MX3
英寸
1080×1280 px
英 寸 魅族 MX4
1152×1920 px
WVGA854 * (480×854)
600x1024
1024×768 1280×768WXGA (1280×800)
600×1024
1536×1152 1920×1152 1920×1200
2048×1536 2560×1600
Android 的图标尺寸
屏幕大小
启动图标
系统通知图标
操作栏图标 上下文图标 (白色)
Z3
1080×1920 px
索尼 XL39h
英寸
1080×1920 px
英 HTC Desire 寸
820
英 寸 OPPO Find 7
5英 寸 OPPO R3
5英 寸 小米 M4
5英 寸 小米 M3
5英
小米 M3S
寸
5英 寸 华为荣耀 6
英
LG G3
寸
720×1280 px
HTC One M8
英寸
最细笔画
320×480 px
480×800px 480×854px 540×960px
48×48 px
72×72 px
32×32 px
16×16 px
48×48 px
24×24 px
24×24 px
36×36 px
不小于 2 px
不小于 3 px
720×1280 பைடு நூலகம்x
48×48 dp
1080×1920 px 144×144 px
58×58 px
75×75 px
75×75 px
44×44 px
44×44 px
5C 5S?(@2×)
iPhone4 - 1024×1024
4S?(@2×)
px
120×120 px
114×114 px
58×58 px
75×75 px
44×44 px
iPhone & iPod
Touch 第 一代、第 二代、第
1024×76 8 px
iPad Mini
1024×76 8 px
264PPI 132PPI 163PPI
40px 20px 20px
88px 44px 44px
98px 49px 49px
iPad 图标尺寸: 设备 App Store
程序应用
主屏幕 Spotlight 搜索 标签栏
工具栏\ 导航栏
146px 98px 98px 98px
iPhone & iPod Touch
第一代、第二 代、第三代
320×480 px
163PPI
20px
44px
49px
iPhone 图标尺寸:
设备
App Store
程序应用
主屏幕
Spotlight 搜
索
标签栏
工具栏和 航栏
iPhone6P - 6SP 7(@3×)
iPad 3-4 -5-
6Air Air2
1024×1024 px
180×180 px
144×144 px
100×100 px
50×50 px
44×44 px
mini2
iPad 1-2
1024×1024 px
iPad Mini
1024×1024 px
90×90 px
90×90 px
72×72 px
魅族 MX4 Pro 英寸 未上市
1536×2560 px
英 三星 GALAXY 寸
Note 4
1440×2560 px
三星 GALAXY Note 3
英寸
1080×1920 px
英 三星 GALAXY 寸
S5
1080×1920 px
三星 GALAXY Note II
英寸
720×1280 px
英 索尼 Xperia 寸
UI设计规范
索引列表字体搭配1
字体大小32px
用于索引列表标题(32px)
详情简介(26px)
字体大小26px
索引列表字体搭配2
字体大小30px
用于索引列表标题(30px)
详情简介(24px)
字体大小24px
索引列表字体搭配3
字体大小30px
用于带头像列表标题(30px)
详情简介(22px)
字体大小22px
标准字-简体
36px
56
仅用于导航栏标题文字和详情页标题文字,例如:贴吧标题、新闻标题、活动说明标题
32px
50
常用重要列表文字标题,例如:列表标题,各种设置列表,评论内容
30px
46
头像列表文字标题,例如:二级导航文字,带头像列表标题,贴吧详情文字,输入提示来自字等28px44
用于较重要小标题,例如:副标题,评论标题,点赞标题,按钮文字等
UI设计规范——IOS篇
1.屏幕尺寸:以1334*750作为设计标准尺寸
iPhone6 plus
iPhone6
iPhone5/5s/5c
1242*2208px
750*1334px
640*1136px
2.布局标准
1)界面的所有间距和标准尺寸应为8px 的倍数(特殊情况要调整)
2)Ios平台所有可操作元素最小点击区域尺寸为88*88px
26px
40
用于详情描述文字,例如:列表详情,作品详情,卡片标题等
24px
38
用于较重要的,例如:提示信息,数据描述,警示文字,错误提示等
22px
34
用于菜单栏文字,例如:底部菜单栏文字,极少部分的备注信息
ui,icon的基本规范
竭诚为您提供优质文档/双击可除ui,icon的基本规范篇一:ui设计规范命名规则模块_类别_功能_状态.pngnav_button_search_default.png导航_按钮_搜索_默认.pngsearch搜索bg背景selected按钮状态(选中)button按钮nav导航栏disabled按钮状态(不可点击)tab菜单栏icon图标default按钮状态(默认)bg背景personaltada个人资料presses按钮状态(按下)user用户pop弹出back返回refresh刷新delete删除eidt编辑image图片download下载content内容banner广告login登陆leftrightcenter左右中registered注册title标题msg提示信息link链接note注释logo标志icon制作:ios120px:icon_120@2x.png80px:icon_small_40@2x.png58px:icon_small@2x.png114px:icon@2x.pngandroid:36*36px:drawable-ldpi48*48px:drawable-mdpi72*72px:drawable-hdpi96*96px:drawable-xhdpiandroid安卓系统dp/sp/px换算名称分辨率比率rate(320px)比率rate(640px)idpi240*3200.750.375mdpi320*48010.5hdpi480*8001.50.75xhdpi720*8002.251.125xxhdpi1080*19203.3751.6875android的图标尺寸屏幕尺寸启动图标操作栏上下文320*480px48*48px32*32px16*16px480*800px480*854px72*72px48*48px24*24px640*960px720*1280px48*48dp32*32dp16*16dp1080*1920xx4*144px96*96px48*48px比率rate(750px)0.320.42670.641.0241.5系统通知最细笔画24*24px2px36*36px3px24*24dp2dp72*72px6px iphone图标尺寸设备appstore程序应用状态栏spotlight搜索标签栏(工具栏)导航栏6p1024*1024px180*18054px87*87146(66)132(160px)(物理60px)61024*1024px120*12054px58*5898(44)9851024*1024px114*11440px58*5898(44)9841024*1024px114*11440px58*5898(44)983515*512px57*5720px29*2949(44)44(80px)点击区域点击区域大于44pxretain屏幕大于88px字体大小1.iphone上的英文字体:heiveticaneue中文:mac下是黑体-简win下华文黑体ios长文本(可接受)26px(见小值)30px(舒适值)32px~34px双数短文本(可接受)28px(见小值)30px(舒适值)32px 注释(可接受)24px(见小值)24px(舒适值)28px2.android手机上的字体:droidsansfallbackandroid高分辨率长文本(可接受)21px(见小值)24px (舒适值)27px(480*800)短文本(可接受)21px(见小值)24px(舒适值)27px 注释(可接受)18px(见小值)18px(舒适值)21pxandroid低分辨率长文本(可接受)14px(见小值)16px (舒适值)18~20px(320*480)短文本(可接受)14px(见小值)14px(舒适值)18px 注释(可接受)12px(见小值)12px(舒适值)14~16px 篇二:app界面ui设计规范ui设计规范一、app界面设计规范(一)界面尺寸1、ios界面尺寸:常见为(宽度640px、高度1136px)2、android界面尺寸:常见为(宽度720px、高度1280px)其他尺寸:ldpi(240*320)、mdpi(320*480)、hdpi (480*800)3、webmobile尺寸:常见为(宽度640px、高度960px)(二)导航尺寸1、ios导航尺寸:高度60px,留白7px2、android导航尺寸:高度64px或48px,留白8px(三)标签尺寸。
UI设计规范
一.APP设计规范(ios)————设计稿一般不使用Android的尺寸(因为Android的五花八门)1. iphone界面的设计尺寸(设计稿默认iphone6)(1)iphone6 plus设计版[iPhone7 plus](@3x)分辨率1242x2208px ppi:401 状态栏:60px 导航栏:132px 标签栏:146px(2)iphone6 plus放大版(@3x)分辨率1125x2001px ppi:401 状态栏:54px 导航栏:132px 标签栏:146px(3)iphone6 plus物理版(@3x)分辨率1080x1920px ppi:401 状态栏:54px 导航栏:132px 标签栏:146px(4)iphone6 [iPhone7](设计稿默认)(@2x)分辨率750x1334px ppi:326 状态栏:40px 导航栏:88px 标签栏:98px(5)iphone5 - 5c -5s(@2x)分辨率640x1136px ppi326 状态栏:40px 导航栏:88px 标签栏:98px(6)iphone4 – 4s(@2x)分辨率640x960px ppi:326 状态栏:40px 导航栏:88px 标签栏:98px(1)iphone & ipod Touch第一、二、三代(@1x)分辨率320x480px ppi:163 状态栏:20px 导航栏:44px 标签栏:49px2. iphone图标设计尺寸(1)iphone6 plus (@3x)App store:1024x1024px 程序应用:180x180 主屏幕:152x152 Spotlight搜索:87x87px 标签栏:75x75px 工具栏和导航栏:66x66px(2)iphone6(@2x)App store:1024x1024px 程序应用:120x120 主屏幕:152x152 Spotlight搜索:58x58px 标签栏:75x75px 工具栏和导航栏:44x44px(3)iphone5-5c-5s(@2x)App store:1024x1024px 程序应用:120x120 主屏幕:152x152 Spotlight搜索:58x58px 标签栏:75x75px 工具栏和导航栏:44x44px(4)iphone4-4s(@2x)App store:1024x1024px 程序应用:120x120 主屏幕:114x114 Spotlight搜索:58x58px 标签栏:75x75px 工具栏和导航栏:44x44px(5)iphone & ipod Touch第一、二、三代(@1x)App store:1024x1024px 程序应用:120x120 主屏幕:57x57 Spotlight搜索:29x29px 标签栏:38x38px 工具栏和导航栏:30x30px3. ipad界面设计尺寸(1)ipad3 – 4 - 5 – 6 – Air – Air2 – mini2分辨率2048x1536px ppi:264 状态栏:40px 导航栏:88px 标签栏:98px(2)ipad1 – 2分辨率1024x768px ppi:132 状态栏:20px 导航栏:44px 标签栏:49px(2)ipad Mini分辨率1024x768px ppi:163 状态栏:20px 导航栏:44px 标签栏:49px4. ipad图标设计尺寸(1)ipad3 – 4 - 5 – 6 – Air – Air2 – mini2App store:1024x1024px 程序应用:180x180 主屏幕:144x144 Spotlight搜索:100x100px 标签栏:50x50px 工具栏和导航栏:44x44px(2)ipad1 – 2App store:1024x1024px 程序应用:90x90 主屏幕:72x72 Spotlight搜索:50x50px 标签栏:25x25px 工具栏和导航栏:22x22px(3)ipad MiniApp store:1024x1024px 程序应用:90x90 主屏幕:72x72 Spotlight搜索:50x50px 标签栏:25x25px 工具栏和导航栏:22x22px5. ios字体大小规范iPhone 上的字体英文为:HelveticaNeue 至于中文,Mac下用的是黑体-简,Win下则为华文黑体,所有字体要用双数字号。
ui尺寸规范
ui尺寸规范UI(User Interface,用户界面)尺寸规范是制定UI设计时所遵循的一系列规定,以保证设计的一致性和可用性。
下面是一些常见的UI尺寸规范,共计1000字:1. 分辨率:在设计UI时,应该考虑不同设备和屏幕的分辨率。
常见的分辨率包括:320x568(iPhone 5/SE),375x667(iPhone 6/7/8),414x736(iPhone 6/7/8 Plus),375x812(iPhone X/XS/11 Pro),414x896(iPhone XR/XS Max/11/11 Pro Max),1024x768(iPad),1366x768(台式电脑屏幕)等。
2. 设备尺寸:UI设计的尺寸应该适配不同的设备尺寸。
在移动设备中,常见的屏幕尺寸包括:4英寸,4.7英寸,5.5英寸,5.8英寸,6.1英寸,6.5英寸等。
而在桌面设备中,常见的尺寸是13英寸,15.6英寸等。
3. 图标尺寸:在设计图标时,应该考虑不同尺寸的需求。
一般来说,图标应该提供三个尺寸:16x16像素,32x32像素和48x48像素。
这样可以确保图标在不同大小的显示区域中都能清晰显示。
4. 字体尺寸:设计中,字体的尺寸应该根据不同的显示区域和内容需求做出调整。
一般来说,主标题的尺寸应该在18-24像素之间,副标题在14-18像素之间,正文内容在12-16像素之间,小标签和按钮文字在10-14像素之间。
5. 边距和间距:设计中,边距和间距的尺寸应该能够提供足够的空间来区分不同的元素和模块,并且保证用户的点击和浏览体验。
一般来说,边距的尺寸应该在8-16像素之间,间距的尺寸应该在16-32像素之间。
6. 图片尺寸:在设计UI时,考虑到图片在不同尺寸的设备上的显示效果,应该提供多个不同尺寸的图片。
根据不同的需求,图片的尺寸应该在相应的范围内调整,如头像图片一般为50x50像素,轮播图图片一般为750x400像素等。
UI设计尺寸规范UI设计规范
U I设计尺寸规范U I设计规范GE GROUP system office room 【GEIHUA16H-GEIHUA GEIHUA8Q8-iPhone界面尺寸设备分辨率PPI 状态栏高度导航栏高度标签栏高度 iPhone6P、6SP、7P1242×2208 px 401PPI 60px 132px 146px iPhone6 - 6S - 7750×1334 px 326PPI 40px 88px 98px iPhone5 - 5C - 5S640×1136 px 326PPI 40px 88px 98px iPhone4 - 4S640×960 px 326PPI 40px 88px 98pxiPhone & iPod Touch 第一代、第二代、第三代320×480 px 163PPI 20px 44px 49px UI设计规范:IOS、Android系统主流尺寸整理iPhone图标尺寸:设备App Store 程序应用主屏幕Spotlight搜索标签栏工具栏和导航栏iPhone6P - 6SP - 7(@3×)1024×1024px180×180px114×114px 87×87 px75×75px 66×66 pxiPhone6 - 6S - 7 (@2×)1024×1024px120×120px114×114px 58×58 px75×75px 44×44 pxiPhone5 - 5C - 5S (@2×)1024×1024px120×120px114×114px 58×58 px75×75px 44×44 pxiPhone4 - 4S (@2×)1024×1024px120×120px114×114px 58×58 px75×75px 44×44 pxiPhone & iPod Touch第一代、第二代、第三代1024×1024px120×120px 57×57 px 29×29 px38×38px 30×30 pxiPad的设计尺寸设备尺寸分辨率状态栏高度导航栏高度标签栏高度iPad 3 - 4 - 5 - 6 –Air - Air2 - mini22048×1536 px 264PPI 40px 88px 98px iPad 1 - 21024×768 px 132PPI 20px 44px 49px iPad Mini1024×768 px 163PPI 20px 44px 49px iPad图标尺寸:设备App Store 程序应用主屏幕Spotlight搜索标签栏工具栏\ 导航栏iPad 3 - 4 - 5 - 6 - Air - Air2 -mini2 1024×1024 px180×180px144×144px100×100px50×50px44×44pxiPad 1 - 2 1024×1024 px90×90px72×72px50×50 px25×25px22×22pxiPad Mini 1024×1024 px90×90px72×72px50×50 px25×25px22×22pxAndroid SDK模拟机的尺寸屏幕大小低密度(120)中等密度(160)高密度(240)超高密度(320)小屏幕QVGA(240×320)480×640普通屏幕WQVGA400(240×400)WQVGA432(240×432)HVGA(320×480)WVGA800(480×800)WVGA854(480×854)600×1024640×960大屏幕WVGA800 *(480×800)WVGA854 *(480×854)WVGA800 *(480×800)WVGA854 *(480×854)600x1024超大屏幕1024×600 1024×7681280×768WXGA(1280×800)1536×1152 1920×11521920×12002048×15362560×1600Android的图标尺寸屏幕大小启动图标操作栏图标上下文图标系统通知图标(白色) 最细笔画320×480 px 48×48 px 32×32 px 16×16 px 24×24 px 不小于2 px480×800px480×854px540×960px72×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 Android安卓系统dp/sp/px换算表名称分辨率比率 rate(针对320px)比率 rate(针对640px)比率 rate(针对750px)idpi240×320 0.75 0.375 0.32mdpi320×480 1 0.5 0.4267hdpi480×800 1.5 0.75 0.64xhdpi720×1280 2.25 1.125 1.042xxhdpi1080×1920 3.375 1.6875 1.5主流Android手机分辨率和尺寸设备分辨率尺寸设备分辨率尺寸魅族MX2 4.4英寸800×1280 px魅族MX35.1英寸1080×1280px魅族MX4 5.36英寸1152×1920 px魅族MX4 Pro未上市5.5英寸1536×2560px 5.7英寸1440×2560 px 5.7英寸1080×1920px三星GALAXY Note 4 三星GALAXY Note 3三星GALAXY S5 5.1英寸1080×1920 px三星GALAXY Note II5.5英寸720×1280 px索尼Xperia Z3 5.2英寸1080×1920 px索尼XL39h6.44英寸1080×1920pxHTC Desire 820 5.5英寸720×1280 pxHTC One M84.7英寸1080×1920pxOPPO Find 7 5.5英寸1440×2560 pxOPPO N15.9英寸1080×1920pxOPPO R3 5英寸720×1280 pxOPPO N1 Mini5英寸720×1280 px小米M4 5英寸1080×1920 px小米红米Note5.5英寸720×1280 px小米M3 5英寸1080×1920 px小米红米1S4.7英寸720×1280 px小米M3S 5英寸1080×1920 px小米M2S4.3英寸720×1280 px华为荣耀6 5英寸1080×1920 px锤子T14.95英寸1080×1920pxLG G3 5.5英寸1440×2560 pxOnePlus One5.5英寸1080×1920px主流浏览器的界面参数与份额浏览器状态栏菜单栏滚动条市场份额(国内浮动)Chrome 浏览器22 px(浮动出现)60 px 15 px 42.1%火狐浏览器20 px 132 px 15 px 1%IE浏览器24 px 120 px 15 px 34%360 浏览器24 px 140 px 15 px 28%遨游浏览器24 px 147 px 15 px 1%搜狗浏览器25 px 163 px 15 px 3.8%系统分辨率统计分辨率占有率分辨率占有率1920×108013.8% 1366×76810.2%360×6407.9% 1440×9007.7%。
移动端UI设计尺寸规范
移动端UI设计尺⼨规范⼀、概念:1.屏幕⼤⼩:指屏幕对⾓线长度,单位是英⼨2.像素:组成图像的最⼩点,⼀个相对⼤⼩单位,同屏幕⾥越⼩越清晰3.屏幕像素密度(ppi)=像素总数/屏幕⼤⼩(英⼨)4.视⽹膜屏幕原理:当⼿机距离你约25-30厘⽶,如果⼿机ppi达到300以上,你的眼睛将⽆法分辨出像素点5.dpi:平⾯设计/印刷技术单位,值越⼤,表明打印机精度越⾼dpi=ppi⼆、Android屏幕尺⼨规范化1.程序开发统⼀使⽤虚拟尺⼨单位:dp/dip(除⽂字外其他)、sp(⽂字)2.px~dp转换:Ldpi:px-->dp 除以0.75dp-->px 乘以0.75Mdpi:px-->dp 除以1dp-->px 乘以1Hdpi:px-->dp 除以1.5dp-->px 乘以1.5XHdpi:px-->dp 除以2dp-->px 乘以2XXHdpi:px-->dp 除以3dp-->px 乘以3XXXHdpi:px-->dp 除以4dp-->px 乘以43.基准间距原则:(1)组件最⼩间距为8dp或10dp,排版/⽂字最⼩间隔建议4dp(2)组件尺⼨建议能被4整除(3)组件尺⼨建议为偶数(单数容易出现锯齿)4.48触摸定律:48dp是物理尺⼨⼤约为9mm左右,是⼀个⽤户⼿指能够准确舒服触摸的最⼩尺⼨5.常见组件尺⼨:状态栏:24dp操作栏:44/48dp侧边导航:286/304dp悬浮操作按钮:56dp操作栏+TAB:36+33dp/44+40dp底栏:44/48dp6.Android常⽤字号/⾏距/颜⾊:。
ui设计icon的标准尺寸
ui设计icon的标准尺寸全文共四篇示例,供读者参考第一篇示例:UI设计中的icon是界面设计中重要的元素之一,它可以为用户带来直观的信息传达和操作指引。
在UI设计中,对icon的尺寸要求是非常严格的,因为不同尺寸的icon会影响整个界面的美观性和使用性。
制定一套标准尺寸对于UI设计的统一性和规范性至关重要。
在UI设计中,icon的标准尺寸一般是根据设计风格和界面布局来确定的。
一般来说,icon的尺寸有16*16px、24*24px、32*32px、48*48px、64*64px等多种规格。
16*16px的icon主要用于工具栏、标签栏等窄小的区域,24*24px的icon适用于一般按钮、菜单等中等大小的区域,32*32px的icon适用于主要功能按钮、导航栏等大尺寸区域,48*48px和64*64px的icon一般用于主要功能区域和弹出框等大面积显示的区域。
在制作icon时,设计师应该根据实际需求选择合适的尺寸,同时保持icon的层次分明和清晰度。
对于小尺寸的icon,设计师需要考虑它在不同设备和不同分辨率下的显示效果,尽量避免因尺寸太小而导致细节模糊不清的问题。
对于大尺寸的icon,设计师则需要保持icon 的简洁明了,避免因尺寸太大而显得臃肿和不雅观。
除了尺寸外,icon的设计风格也是非常重要的。
在UI设计中,常见的icon设计风格有扁平化风格、卡通风格、逼真风格等。
设计师应该根据界面风格和用户喜好选择合适的设计风格,使icon与整体界面风格相匹配,达到统一和谐的视觉效果。
icon的标准尺寸不仅仅是一个数字,更是一个设计的思考和实践过程。
设计师需要考虑icon的实际应用场景、显示效果和设计风格,才能制作出符合UI设计要求和用户体验的高质量icon。
只有在不断实践和总结中,设计师才能更好地把握icon的尺寸标准,为用户带来更好的界面体验。
第二篇示例:UI设计icon作为用户界面设计中不可或缺的元素,起着非常重要的作用。
ui设计尺寸规范-最全ui设计规范
PPI
401PPI 326PPI 326PPI 326PPI 163PPI
状态栏高度 导航栏高度 标签栏高度
60px
132px
40px
88px
40px
88px
40px
88px
146px 98px 98px 98px
20px
44px
49px
iPhone 图标尺寸:
设备
App Store
程序应用
主屏幕 Spotlight 搜索 标签栏 工具栏和导航栏
索尼 Xperia Z3 HTC Desire 820
OPPO Find 7 OPPO R3 小米 M4 小米 M3 小米 M3S
华为荣耀 6
英寸 英寸 英寸 5 英寸 5 英寸 5 英寸 5 英寸 5 英寸
1080×1920 px 720×1280 px 1440×2560 px 720×1280 px 1080×1920 px 1080×1920 px 1080×1920 px 1080×1920 px
1024×1024 px
iPad Mini
1024×1024 px
程序应用
180×180 px
90×90 px
90×90 px
主屏幕 Spotlight 搜索 标签栏
工具栏\ 导航栏
144×144 px
100×100 px
50×50 px
44×44 px
72×72 px
72×72 px
50×50 px
滚动条
15 px
市场份额 (国内浮动)
%
15 px
1%
15 px
34%
15 px
28%
15 px
Ui设计常见尺寸规范大全
Ui设计常见尺寸规范一、手机尺寸倍率:主流Android尺寸:(如果想做适配ios,那就选720×1280 分辨率72,像素/英寸。
如果单独设计安卓MD新规范的,那就新建1080×1920 分辨率72,像素/英寸)1.mdpi[320x480px]市场份额少,新手机不会有这种倍率,屏幕通常都特别小。
2.hdpi [480x800px、480x854px、540x960px]早年的低端机屏幕在3.5英寸档位-目前很少。
3.xhdpi[720x1280px]即平常我们看视频讲的720P,设计图也有人按照此分辨率进行设计。
4.xxhdpi[1080x1920px],[1440x2560px]这里强调:目前1080x1920和2560×1440然后都是xxhdpi,适配难免会有误差,下边换算我会再讲到即平常我们看视频讲的2K高清,或1080P,高清视频就需支持此类像素。
如今比较常用,设计图也大多以1080这个尺寸做。
注意:720×1280尺寸的换算关系1dp=2px,文字1sp=2px。
也就是说程序员拿到我们的px单位的标注稿,自己除以2就是dp和sp了。
1080×1920尺寸就是1dp=3px,文字1sp=3px二、手机字体自从Ice Cream Sandwich发布以来,Roboto都是Android系统的默认字体集。
在这个版本中,将Roboto做了进一全面优化,以适配更多平台。
宽度和圆度都轻微提高,从而提升了清晰度,并且看起来更加愉悦。
字体Typography中文字体:思源黑体Source Han Sans / Noto(是一个字体,叫法不同而已)英文字体:Roboto注意:安卓的字号单位是SP三、android界面设计尺寸有哪些?Android界面尺寸:480*800、720*1280、1080*1920。
[单位:像素]\rAndroid比iPhone的寸尺多了很多套,建议取用720*1280这个尺寸,这个尺寸720*1280中显示完美,在1080*1920中看起来比较清晰,切图后的图片文件大小也适中,应用的内存消耗也不会过高。
UI设计尺寸规范-最全UI设计规范
iPhone 界面尺寸设备分辨率PPI状态栏高度导航栏高度 标签栏高度iPhone6P 、6SP 、7P1242×2208 px 401PPI 60px 132px 146pxiPhone6 - 6S - 7750×1334 px 326PPI 40px 88px 98pxiPhone5 - 5C - 5S640×1136 px 326PPI 40px 88px 98pxiPhone4 - 4S640×960 px 326PPI 40px 88px 98pxiPhone & iPod Touch第一代、第二代、第三代320×480 px 163PPI 20px 44px 49pxiPhone 图标尺寸:UI 设计规范:IOS 、Android 系统主流尺寸整理设备App Store 程序应用主屏幕Spotlight搜索标签栏工具栏和导航栏iPhone6P - 6SP - 7(3×)1024×1024 px 180×180 px 114×114px 87×87 px75×75px 66×66 pxiPhone6 - 6S - 7(2×)1024×1024 px 120×120 px 114×114px 58×58 px75×75px 44×44 pxiPhone5 - 5C - 5S(2×)1024×1024 px 120×120 px 114×114px 58×58 px75×75px 44×44 pxiPhone4 - 4S(2×)1024×1024 px 120×120 px 114×114px 58×58 px75×75px 44×44 pxiPhone & iPod Touch第一代、第二代、第三代1024×1024 px 120×120 px 57×57 px 29×29 px 38×38px 30×30 pxiPad的设计尺寸设备尺寸分辨率状态栏高度导航栏高度标签栏高度iPad 3 - 4 - 5 - 6 –Air - Air2 - mini22048×1536 px 264PPI 40px 88px 98px iPad 1 - 21024×768 px 132PPI 20px 44px 49px iPad Mini1024×768 px 163PPI 20px 44px 49pxiPad图标尺寸:设备App Store 程序应用主屏幕Spotlight搜索标签栏工具栏\导航栏iPad 3 - 4 - 5 - 6 - Air - Air2- mini21024×1024 px 180×180 px144×144px100×100px50×50px44×44px iPad 1 - 21024×1024 px 90×90 px72×72px50×50 px25×25px22×22px iPad Mini1024×1024 px 90×90 px72×72px50×50 px25×25px22×22pxAndroid SDK模拟机的尺寸屏幕大小低密度(120)中等密度(160)高密度(240)超高密度(320)小屏幕QVGA(240×320)480×640普通屏幕WQVGA400(240×400)WQVGA432(240×432)HVGA(320×480)WVGA800(480×800)WVGA854(480×854)600×1024640×960大屏幕WVGA800 *(480×800)WVGA854 *(480×854)WVGA800 *(480×800)WVGA854 *(480×854)600x1024超大屏幕1024×600 1024×768 1280×768WXGA(1280×800)1536×1152 1920×11521920×12002048×15362560×1600Android的图标尺寸屏幕大小启动图标操作栏图标上下文图标系统通知图标(白色) 最细笔画320×480 px 48×48 px 32×32 px 16×16 px 24×24 px 不小于2 px480×800px480×854px540×960px72×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 Android安卓系统dp/sp/px换算表名称分辨率比率 rate(针对320px)比率 rate(针对640px)比率 rate(针对750px)idpi240×320 0.75 0.375 0.32mdpi320×480 1 0.5 0.4267hdpi480×800 1.5 0.75 0.64xhdpi720×1280 2.25 1.125 1.042xxhdpi1080×1920 3.375 1.6875 1.5主流Android手机分辨率和尺寸设备分辨率尺寸设备分辨率尺寸魅族MX2 4.4英寸800×1280 px魅族MX35.1英寸1080×1280 px魅族MX4 5.36英寸1152×1920 px魅族MX4 Pro未上市5.5英寸1536×2560 px三星GALAXY Note 4 5.7英寸1440×2560 px三星GALAXY Note35.7英寸1080×1920 px三星GALAXY S5 5.1英寸1080×1920 px三星GALAXY NoteII5.5英寸720×1280 px索尼Xperia Z3 5.2英寸1080×1920 px索尼XL39h6.44英寸1080×1920 pxHTC Desire 820 5.5英寸720×1280 pxHTC One M84.7英寸1080×1920 pxOPPO Find 7 5.5英寸1440×2560 pxOPPO N15.9英寸1080×1920 pxOPPO R3 5英寸720×1280 pxOPPO N1 Mini5英寸720×1280 px小米M4 5英寸1080×1920 px小米红米Note5.5英寸720×1280 px小米M3 5英寸1080×1920 px小米红米1S4.7英寸720×1280 px小米M3S 5英寸1080×1920 px小米M2S4.3英寸720×1280 px华为荣耀6 5英寸1080×1920 px锤子T14.95英寸1080×1920 pxLG G3 5.5英寸1440×2560 pxOnePlus One5.5英寸1080×1920 px主流浏览器的界面参数与份额浏览器状态栏菜单栏滚动条市场份额(国浮动)Chrome 浏览器22 px(浮动出现)60 px 15 px 42.1%火狐浏览器20 px 132 px 15 px 1%IE浏览器24 px 120 px 15 px 34%360 浏览器24 px 140 px 15 px 28%遨游浏览器24 px 147 px 15 px 1%搜狗浏览器25 px 163 px 15 px 3.8% 系统分辨率统计。
