亚洲杯足球盘口

视觉检测系统

手机UI设亚洲杯足球盘口计基础-尺寸

2019-09-04 23:19浏览次数:

  初入移动端开发和UI设计的童鞋可能对UI尺寸和单位特头痛,孟春觉得分享一下手机APP/Web UI尺寸和单位的经验是有价值的。亚洲杯足球盘口

  千万不要被这么多的分辨率吓晕了,其实手机APP和移动端web UI尺寸是有兼容的方案的。

  像素密度(Pixels Per Inch),所表示的是每英寸所拥有的像素数量。因此PPI数值越高,即代表显示屏能够以越高的密度显示图像。

  物理像素(px)是硬件所支持的最高像素,亚洲杯足球盘口,逻辑像素(pt)是软件所达到的像素。

  加上Android生态中纷繁复杂的各种奇葩尺寸,现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题?设计和开发之间采用什么协作模式?

  第一步,视觉设计阶段,设计师按宽度750px(iPhone 6)做设计稿,除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注,输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿,在1125px的稿子里切图。

  第二步,输出两个交付物给开发工程师:一个是程序用到的@3x切图资源,另一个是宽度750px的设计标注图。

  第三步,开发工程师拿到750px标注图和@3x切图资源,完成iPhone 6(375pt)的界面开发。此阶段不能用固定宽度的方式开发界面,得用自动布局(auto layout),方便后续适配到其它尺寸。第四步,适配调试阶段,基于iPhone 6的界面效果,分别向上向下调试iPhone 6 plus(414pt)和iPhone 5S及以下(320pt)的界面效果。由此完成大中小三屏适配。

  dpi:测量空间点密度的单位,单位英寸上点的个数,同iPhone的PPI

  Android的xxhdpi机型是安卓机中市场占有率最高的机型,因此设计的时候,我们可以用1080px宽作为通用尺寸,在app中按比例缩放显示,比较特殊的地方在另外设计适配相应机型的图片。

  即借助H5的viewport参数,我们可以使px单位尺寸等价于dp、pt来使用。为兼容各种类型的手机屏幕,我们可以设置页面最大宽度为640px,设计效果图的时候可以按640px宽设计来统一页面效果,图标使用矢量图或字体图标的方式,在不同屏幕分辨率下都可以显示得清晰,部分图片需要适配不同尺寸的屏幕,可另外设计。返回搜狐,查看更多