移动端界面设计UI尺寸规范汇总
时间:2019-08-12 12:51:34 | 来源:
随着移动互联网的不断发展,「以移动为中心」的理念和战略也不断渗透,互联网的「短、平、快」往往使设计师们无法长时间停下来思考可用性设计,快速找到最佳的设计方式是对我们一大挑战,以下是移动端界面设计UI尺寸规范汇总
一、UI尺寸基础知识
1、像素密度-PPI
像素密度是指显示屏幕每英寸的长度上排列的像素点数量,PPI(Pixels per inch)越高代表屏幕显示效果越精细,Retina屏比普通屏清晰很多,就是因为它的像素密度翻了一倍。
2、计量单位
iOS和Android平台都定义了各自的像素计量单位。iOS的尺寸单位为pt,Android的尺寸单位为dp。说实话,两者其实是一回事。
单位之间的换算关系随倍率变化:
1倍:1pt=1dp=1px(mdpi、iPhone 3gs)
1.5倍:1pt=1dp=1.5px(hdpi)
2倍:1pt=1dp=2px(xhdpi、iPhone 4s/5/6)
3倍:1pt=1dp=3px(xxhdpi、iPhone 6)
4倍:1pt=1dp=4px(xxxhdpi)
单位决定了我们的思考方式。在设计和开发过程中,应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时,有的设计师喜欢把画布设为1080×1920,有的喜欢设成720×1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp,这就意味着在xhdpi的设备上,按钮尺寸至少是96x96px。而在xxhdpi设备上,则是144x144px。
无论画布设成多大,我们设计的是基准倍率的界面样式,而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通,双方都需要以逻辑像素尺寸来描述和理解界面,无论是在标注图还是在日常沟通中。不要再说“底部标签栏的高度是96像素,我是按照xhdpi做的”这样的话了。
上海蓝畅信息技术有限公司成功为多家世界财富500强企业以及其他著名品牌提供优质服务,是您靠谱的互联网开发供应商。
服务客户遍及北京、上海、杭州、深圳、广州、天津、青岛、南京、宁波、苏州、无锡、厦门、重庆、西安等大中型城市及地区 主要业务:H5开发,H5设计,H5外包,微信开发外包,网站开发外包,H5游戏开发,小程序开发外包,小程序设计、APP开发外包,UI设计,视频后期制作等