移动设备尺寸规范汇总
移动平台设计规范

05 IOS黄金栅格系统
苹果开发了一套黄金比例栅格系统,可以在你的图标上很好地确定元素的尺寸和对齐。
不过,即使在原生应用的图标上,苹果的设计师们也没有严格按照这个栅格系统来设
07 UI的手势交互概述
07 UI的手势交互概述
尺寸规范之Android篇
01 尺寸及分辨率
Android界面尺寸: 482 * 800 720 * 1280 1080 * 1920
Android的尺寸比IOS要多很多套,建议采用720*1280这个尺寸进行设计
Android的APP界面与IOS基本相同:状态栏、导航栏、主菜单栏以及中间的内容
UI平台设计规范
尺寸规范之IOS篇
01 尺寸及分辨率
iPhone界面尺寸: 320 * 480 640 * 960 640 * 1136 750 * 1334 1080 * 1920
iPad界面尺寸:
1024X * 768
2048 * 1536
单位都是PX(像素,网页UI与移动端UI分辨率一般都只要72)
C:表格标签:Regular 28px;
D:Tab页图标标签:Regular 20px
举例说明
我的音乐:34PX 我的、淘歌、发现:30PX MUXXX:34PX 本地音乐:30PX 泡沫、邓紫棋:24PX
05 图标尺寸大小
图标都按照最大1024*1024进行设计,之后按照比例进行缩小、调整
高光部分与圆角不需要做,ios系统自动生成
设计的时候不是每一个尺寸都做一套,一般采用750X1334的尺寸进行设计
移动互联网手机APP原型设计规范

移动互联网产品原型尺寸规范最近公司安排我带一下新来的交互设计师,我想给他制定一份交互设计规范。
这样一来,即使新来的交互设计师没什么基础,也可以根据这一份规范,做出大致标准的原型图。
因为Ui设计稿是先做iPhone6的,方便向上适配iPhone6Plus,也方便向下适配iPhone5和iPhone4的尺寸。
所以,交互设计稿的尺寸,就按照iPhone6的尺寸来做。
1、iPhone6的界面布局是:屏幕是4.7英寸的,设计稿的大小为750x1334px。
状态栏(status bar):就是电量条,其高度为:40px;导航栏(navigation):就是顶部条,其高度为:88px;主菜单栏(submenu,tab):就是标签栏,底部条,其高度为:98px;内容区域(content):就是屏幕中间的区域,其高度为:1334px-40px-88px-98px=1108px截图如下:推荐3款测量工具为:MarkMan马克鳗,Dorado标注,PXcook像素大厨。
2、关于iPhone6的图标的尺寸:导航栏的图标高度为44px左右,标签栏的图标尺寸为50x50px左右,最大为96x64px。
关于iPhone6的文字的尺寸:导航栏的文字大小最大值是34px,标签栏的图标下方的文字大小为20px。
内容区域的文字大小是:24px,26px,28px,30px,32px,34px。
3、(iPhone6设计稿尺寸是@2x),做原型图的时候,可以做成@2x的,即750x1334px;也可以做成@1x的,即375*667px。
4、设置界面的图标高度和开关滑动按钮的图标高度:58px。
参考下图:5、关于颜色,自从我做了3套高保真的交互原型图之后,发现后面还是改成画线框图来的快。
线框图的黑白灰之纯美,有利于专心布局界面,而不用在意界面的颜色搭配。
黑白灰颜色常用的数值是:文字黑色#282828文字深灰色#656565文字浅灰色#98989边框浅灰色#C3C3C3背景淡灰色#f2f2f2按钮背景纯白色#ffffff6、常用的可点击高度,在iPhone6的原型图上,统一成88px。
移动应用界面设计的尺寸规范

移动应用的界面设计画布尺寸设计多大(特别是Android)、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现?本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索,来分享移动应用界面设计中的尺寸规范等问题,希望能给移动端的新手设计师些许指引。
若有不当之处,欢迎斧正。
一、android篇1、android分辨率屏幕尺寸指实际的物理尺寸,为屏幕对角线的测量。
为了简单起见,Android把实际屏幕尺寸分为四个广义的大小:小,正常,大,特大。
像素(PX)代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。
屏幕密度为解决Android设备碎片化,引入一个概念DP,也就是密度。
指在一定尺寸的物理屏幕上显示像素的数量,通常指分辨率。
为了简单起见,Android把屏幕密度分为了四个广义的大小:低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi)像素= DP * (DPI / 160 ) 例如,在一个240dpi的屏幕里,1DP等于1.5PX。
于设计来说,选取一个合适的尺寸作为正常大小和中等屏幕密度(尺寸的选取依据打算适配的硬件,建议参考现主流硬件分辨率),然后向下和向上做小、大、特大和低、高、超高的尺寸与密度。
典型的设计尺寸• 320dp:一个普通的手机屏幕(240X320,320×480,480X800)• 480dp:一个中间平板电脑像(480×800)• 600dp:7寸平板电脑(600×1024)• 720dp:10寸平板电脑(720×1280,800×1280)注意,ppi、dpi 是密度单位,不是度量单位:* ppi (pixels per inch):图像分辨率(在图像中,每英寸所包含的像素数目)* dpi (dots per inch):打印分辨率(每英寸所能打印的点数,即打印精度)dpi主要应用于输出,重点是打印设备上;ppi对于设计师应该比较熟悉,photoshop画布的分辨率常设置为72像素/英寸,这个单位其实就是ppi 。
移动端规范

移动端规范移动端规范是指在移动应用开发过程中,为了保证用户体验和开发效率,团队内部制定的一系列标准和规范。
下面是移动端规范的一些主要内容。
1. 设计规范移动端设计规范是指根据移动设备的特点,对界面元素、排版、颜色、图标、交互等进行规范。
例如,需要保证界面简洁明了,按钮和输入框大小适中,颜色搭配和谐,图标清晰易辨认,交互流程简单直观等。
2. 布局规范移动端布局规范是指在不同分辨率和屏幕尺寸的移动设备上,如何适配布局。
例如,需要使用相对单位(如百分比)来定义元素的宽高,避免使用固定像素值;需要考虑不同设备的屏幕密度,使用矢量图标等。
3. 图片规范移动端图片规范是指在设计和使用图片时需要注意的规范。
例如,需要优化图片文件大小,减少加载时间;选择合适的图片格式(如JPEG、PNG);根据不同设备分辨率提供不同尺寸的图片等。
4. 字体规范移动端字体规范是指在选择和使用字体时需要遵守的规范。
例如,需要选择适合移动设备显示的字体;保证字体大小在不同设备上显示一致;避免使用字体图标等。
5. 动画规范移动端动画规范是指在设计和使用动画效果时需要注意的规范。
例如,需要考虑动画的流畅性和性能消耗;保持动画效果简洁明了,不要过度炫酷;避免过多使用动画效果,以免分散用户注意力等。
6. 网络规范移动端网络规范是指在与服务器通信时需要遵守的规范。
例如,需要合理控制网络请求的频率和并发数,以避免过大的流量消耗;根据网络状态对数据进行缓存和预加载,提高用户体验;处理网络异常等。
7. 错误处理规范移动端错误处理规范是指在处理用户操作错误和程序异常时需要遵守的规范。
例如,需要给出明确的错误提示,帮助用户理解问题所在;记录和上报错误信息,以便及时修复程序漏洞;避免崩溃和闪退等。
8. 安全规范移动端安全规范是指在保护用户数据和应用安全时需要遵守的规范。
例如,需要加密用户敏感信息,避免泄露风险;对用户权限进行合理处理,避免滥用;定期更新应用程序,修复安全漏洞等。
移动端尺寸规范

移动端尺寸规范移动端尺寸规范是针对移动设备上的用户界面设计的一组标准化尺寸规范。
移动设备的屏幕尺寸多种多样,不同的设备有不同的屏幕尺寸和分辨率,因此设计师需要遵循一定的规范来确保设计在不同设备上的一致性和可用性。
下面是关于移动端尺寸规范的一些要点。
1. 响应式布局:移动设备的屏幕尺寸和方向不断变化,因此设计师需要采用响应式布局来适应不同的屏幕尺寸。
响应式布局可以根据设备屏幕尺寸的变化自动调整元素的大小和位置。
2. 分辨率适配:不同的移动设备有不同的屏幕分辨率,设计师需要根据不同设备的分辨率来适配设计。
常见的屏幕分辨率包括320x480、640x960、750x1334、1080x1920等,设计师需要确保设计在不同分辨率下能够正常显示。
3. 导航栏高度:移动设备上的导航栏通常位于屏幕顶部,用于显示各种导航和操作按钮。
导航栏的高度可以根据具体设计需求来确定,一般建议在48px至56px之间。
4. 底部导航栏高度:移动设备上的底部导航栏通常位于屏幕底部,用于显示底部菜单和操作按钮。
底部导航栏的高度可以根据具体设计需求来确定,一般建议在48px至56px之间。
5. 图标大小:移动设备上的图标大小需要适应屏幕尺寸的变化,一般建议使用矢量图标来保证图标在不同尺寸下的清晰度。
图标的尺寸可以根据具体设计需求来确定,一般建议在16px至24px之间。
6. 文字大小:移动设备上的文字大小需要适应屏幕尺寸的变化,一般建议使用相对单位(如em或rem)来定义文字大小,以便根据屏幕尺寸的变化自动调整文字大小。
文字的大小可以根据具体设计需求来确定,一般建议在14px至18px之间。
7. 行高:移动设备上的行高需要根据文字大小来确定,以确保文字在不同设备上的可读性和排版效果。
行高一般建议设置为文字大小的1.5倍至2倍之间。
8. 边距和间距:移动设备上的边距和间距需要适应屏幕尺寸的变化,以保证界面的美观和可用性。
一般建议将边距和间距设置为8px至16px之间。
集成一体式移动智能设备1产品技术参数要求

电子签名笔
(或主动电容笔)
1.类型:电磁压感感应笔;
2.维护性:笔尖可更换;
3.连接方式:设备有凹槽或孔洞设计存放签名笔,签名笔通过线缆同设备连接,线缆可伸缩、可更换。
5
接触式IC卡
1.通过PBOC3.0 L1,EMV L1认证
2.读卡有屏幕、语音提示
3.支持T=0/T=1的CPU卡和各种存储加密卡
电源
采用高可靠性电源系统,防止电危险和过热危险。电源适应能力强:在供电交流电压为220V±15%,50Hz的情况下均能正常工作。
16
指示灯
充电指示灯
17
产品收纳包
1.材质:皮质或布艺等耐用材质;
2.容量: PAD以及充电器。
18
PAD支架
使用磁吸或包裹的方式对PAD进行支撑
二、集成式外设底座:
2.1
8. 读/写时间:≤1300ms;
9. 对存储在读卡器中的数据具有掉电保护功能;
10.读写器与卡之间按照ISO/IEC14443标准进行相互认证;
11.非接触式IC读卡器符合ISO/IEC14443标准,可实现IC卡银行支付;
10
磁条卡读写卡模块
1.支持类型:ISO7811,AAMVA,CADMV;支持读取磁条卡和读取存折。
2. 电磁兼容性(EMC):应符合GB9254、GB/T17618、GB/T17626等标准要求;
3. 支持EMV标准要求,应支持建设事业集成电路(IC)卡产品标准要求;
4. 机械环境:应符合GB6587等标准要求;
5. 可靠性:读写寿命大于100万次、MTBF 1万小时;
6. 通讯接口要求:标准RS-232或USB;
3.红外光摄像头像素不低于130万
app设计尺寸规范

app设计尺寸规范在设计一个应用程序时,尺寸规范是非常重要的。
尺寸规范可以保证应用程序在不同设备上的一致性和易用性。
下面是一些关于设计应用程序尺寸规范的建议。
1. 分辨率:应用程序的分辨率应该适应不同设备的屏幕分辨率。
对于移动设备,通常使用以下常见分辨率:320x480、640x960、1080x1920等。
对于平板电脑,通常使用1024x768、2048x1536等分辨率。
2. 页面布局:页面布局应该根据设备的屏幕尺寸和方向进行调整。
对于移动设备,通常使用垂直布局。
对于平板电脑,通常使用水平布局。
在设计布局时,应考虑到不同设备的可视区域大小。
3. 图标尺寸:图标是应用程序中重要的组成部分之一。
在设计图标时,应该选择合适的尺寸。
通常情况下,移动设备上的图标尺寸为48x48或72x72像素,平板电脑上的图标尺寸为96x96或144x144像素。
4. 文字大小:文字大小直接影响用户的阅读体验。
在选择文字大小时,应该考虑到不同设备上的字体渲染效果和可读性。
通常情况下,移动设备上的文字大小应该在9-12磅之间,平板电脑上的文字大小可以适当增大。
5. 图片尺寸:应用程序中的图片应该使用合适的尺寸。
过大的图片会增加应用程序的加载时间和内存占用,过小的图片会导致模糊和失真。
在选择图片尺寸时,应该考虑到图片显示的区域大小和分辨率。
6. 边距和间距:边距和间距可以使应用程序的界面更加清晰和易读。
在设计边距和间距时,应该考虑到不同设备的屏幕密度和大小。
通常情况下,边距和间距应该大于等于8个像素。
7. 按钮尺寸:按钮是用户与应用程序交互的重要方式之一。
按钮的尺寸应该足够大,方便用户点击。
通常情况下,按钮的最小尺寸为48x48像素。
总之,设计应用程序的尺寸规范是非常重要的。
合适的分辨率、布局、图标尺寸、文字大小、图片尺寸、边距和按钮尺寸可以提升应用程序的用户体验和可用性。
通过遵循这些尺寸规范,可以使应用程序适应不同设备的屏幕,并提供一致的用户体验。
移动端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常⽤字号/⾏距/颜⾊:。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
移动设备尺寸规汇总
iPhone界面尺寸
设备分辨率PPI状态栏高度导航栏高度iPhone6 plus设计版
1242×2208 px401PPI 60px 132px iPhone6 plus放大版1125×2001 px401PPI 54px 132px iPhone6 plus物理版1080×1920 px401PPI 54px 132px iPhone6
750×1334 px326PPI 40px 88px iPhone5 – 5C – 5S
640×1136 px326PPI 40px 88px iPhone4 – 4S
640×960 px326PPI 40px 88px
px
px px px iPhone5 – 5C –
5S (2×) 1024×1024
px
120×120 px 114×114 px 58×58 px 75×75 px iPhone4 – 4S (2×) 1024×1024
px 120×120 px
114×114 px 58×58 px 75×75 px iPhone & iPod Touch 第一代、第二代、第三代 1024×1024 px 120×120
px 57×57 px 29×29 px 38×38
px
iPad 的设计尺寸
设备 尺寸 分辨率 状态栏高度 导航栏高度
iPad 1 – 2 1024×768 px132PPI 20px 44px iPad Mini 1024×768 px163PPI 20px 44px
主流Android手机分辨率和尺寸
设备尺寸分辨率设备尺寸
魅族MX2 4.4英寸800×1280 px
魅族MX3
5.1英寸
魅族MX4 5.36英寸1152×1920 px
魅族MX4 Pro未上市
5.5英寸
三星GALAXY Note 4 5.7英寸1440×2560 px
三星GALAXY Note 3
5.7英寸
三星GALAXY S5 5.1英寸1080×1920 px
三星GALAXY Note II
5.5英寸
索尼Xperia Z3 5.2英寸1080×1920 px
索尼XL39h
6.44英寸
HTC Desire 820 5.5英寸720×1280 px
HTC One M8
4.7英寸
OPPO Find 7 5.5英寸1440×2560 px
OPPO N1
5.9英寸
OPPO R3 5英寸720×1280 px
OPPO N1 Mini
5英寸
小米M3 5英寸1080×1920 px
小米红米1S
4.7英寸
小米M3S未上市5英寸1080×1920 px
小米M2S
4.3英寸
华为荣耀6 5英寸1080×1920 px
锤子T1
4.95英寸
LG G3 5.5英寸1440×2560 px
OnePlus One
5.5英寸
主流浏览器的界面参数与份额
浏览器状态栏菜单栏滚动条市场Chrome 浏览器22 px(浮动出现)60 px 15 px 8% 火狐浏览器20 px 132 px 15 px 1% IE浏览器24 px 120 px 15 px 35% 360 浏览器24 px 140 px 15 px 28% 遨游浏览器24 px 147 px 15 px 1%
网页宽度与首屏高度。