恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
设备尺寸是如何影响设计
0.0°
2018-08-02 原创文章 经验/观点 举报 1423 5 10 0

本文结合自身几年前刚开始接触UI时的困惑,我通过查阅学习整理总结出,希望能帮助大家一起了解iOS和Android这两个平台设备分辨率对设计的影响。期间经过多次修改,尤其这两年ios设备不断更新发布以及sketch这款设计工具的大面积使用。


现如今,手机的屏幕分辨率越来越多样化,而如何适配各种屏幕分辨率的设备,一向是设计师和开发者非常头疼的事儿。因此,对于每位设计师来说,要想更好的理解并掌握标注与切图的规范,首先需要了解与学习相关的基本概念。


作为一名设计师,我刚接触移动应用的界面设计时,最先需要考虑的问题就是:要用多大的画布尺寸设计?页面上的元素应该画成多大的?需要设计多套设计稿吗?如何切图协助技术完成界面开发?



一、在明白用何种尺寸做设计之前,我们先了解下几个点:


(1)    ppi (pixels per inch):图像分辨率 (在图像中,每英寸所包含的像素数目)


(2)    dpi (dots per inch): 打印分辨率 (每英寸所能打印的点数,即打印精度)


(3)    PPI = √(长度像素数² + 宽度像素数²) / 屏幕对角线英寸数;

        1 in(英寸)=2.54 cm


Image title


(4)    DIP(也就是我们用的dip/dp):device independent pixel,设备独立像素,  不会直接使用px,而是使用dp,px = dp * density(密度或叫倍数由DPI决定,如后面会讲到的,320dpi下,density=2,则2px=1dp)。

dp是开发写layout(布局)的时候使用的尺寸单位,sp是开发写layout(布局)时关于字体的字号单位,且dp与sp总为1:1关系。


(5)  pt是ios的开发单位,dp是Android的开发单位,这两个都是绝对长度,可以换算成对应的实际物理长度英寸(px没有长度概念)。



二、设备尺寸如何影响设计


视觉稿在客户端的还原程度,最终还是要取决于控件的大小及适配程度,而需要输出的控件的大小则取决于设备的分辨率大小 。


为此接下来就需要了解ios和Android两个平台的对应的换算关系(以下没有涉及到全面屏,但是了解原理后,其实都一样)。


【Android】

Google 规定的(以下dpi与屏幕分辨率规定的是一个区间值):

Image title


根据以上的换算,再结合公式  【PPI = √(长度像素数² + 宽度像素数²) / 屏幕对角线英寸数】, 要在不同分辨率设备上适配一张切图,并保存实际呈现效果能够合理,需要根据对应的倍数比切出对应尺寸的切图。现在Android端切图主要是输出hdpi、xhdpi、xxhdpi、xxxhdpi:

Image title


为什么要用160dpi作为基准进行换算?看下面这张图

Image title

1、当以160dpi为基准进行的尺寸换算, 只要是 4 的公倍数,那么各个模式下换算得到的都会是整数;如果以其它dpi作为基准,再按照上面的去算下, 会发现很复杂,多了很多小数点。

2、而且第一款机子是160dpi(我觉得这个不算是主要原因)。

所以,以160dpi作为基准换算就更合理了。


这里也顺便讲一下,用@2x(也就是720*1280)做为Android主要设计稿尺寸,是因为只需要输出一套切图去上下适配,图片即使放大缩小也不会有明显的失真。这种情况下,切图基于8px原理输出,就不会在缩放时候出现小数点的情况。(如果不考虑ldpi,只需要保证是4的公倍数)


而现在有sketch作为主要的UI设计工具,由于其具有矢量方便缩放的特性,一般直接用@1x(360*640)作为设计尺寸,而且开发也是直接用@1x的标注数值去写样式。这种情况下切图基于4px原理输出,就不会有小数点的。(如果不考虑ldpi,只需要保证是偶数就行)



【ios】

ios跟Android的适配其实是一个道理,都有对应的倍数换算关系,但是iOS机型相对Android的机型是少且统一,只是ios是用pt(设备独立像素,跟dp一样也是有实际的长度)作为开发单位。

Image title

仔细看上面的图表,跟Android一样,ios也是可以根据对应的屏幕分辨率去适配和换算的。屏幕的像素密度越高,对应的一个pt下,容纳的像素点会越多。同样也是按照@1x,160dpi作为基准,则px=pt*dpi/160。


按照输出一套切图去上下适配的话,应该采用@2x(750*1334)作为设计稿的尺寸,只需要保证是偶数就可以单独适配ios端。但是,大部分产品都以ios的iphone8的尺寸750*1334为主做一套设计稿,最终输出标注与切图应用于ios和Android两个平台(当然,某些控件的大小后期可以根据适配的效果来调整)。ios只需要输出@2x和@3x的切图,而Android需要用到@1.5x,@2x,@3x,@4x,所以在这个前提下,采用ios的设计尺寸,但是按照Android倍数换算,保证切图是基于8px的原则输出。


但是,现在UI设计大部分都用高效的sketch作为主要的设计工具,配合sketch measure、sketch mirror以及基于sketch开发的第三方工具,较之PS等传统的设计工具,更加轻量、高效,同时在图标以及界面的处理上,可以矢量化的处理——所以,现在可以基于@1x(375*667)这套尺寸来设计,最后切图输iOS(@2x.png、@3x.png) 和Android (@hdpi、@xhdpi、@xxhdpi、@xxxhpdi),按照最终采用的这种情况,只要保证切图是偶数就行。Sketch也在其右侧属性检查器区域为我们提供了现在主流的设备尺寸,按快捷键A就可以看到。


Image title

手机、电脑等智能硬件设备更新很快,本文的总结个人也跟随着修改过好几次。这样的总结既能帮助我自己梳理思路同时也能加深理解,也希望能给大家解决掉一些困惑。谢谢阅读!

更新:2018-08-02

收藏

5人已收藏

Bruce_菜

走走看看,读读写写

  • 10

    作品

  • 3

    粉丝

  • 20

    关注

  • 弹框的那些事
  • 智能健身操房-大小屏设计
  • 智能运动手环界面展示
  • 记一次项目设计总结【智能运动生活馆】
相关标签
设计经验分享ui

    猜你喜欢

      2018-08-02 原创文章 经验/观点 举报 1423 5 10 0

      设备尺寸是如何影响设计

      0.0°

      你确定要举报 设备尺寸是如何影响设计

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年08月02日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      10
      5
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录