020-29815005
预约专线时间:09:00-23:59

UI设计尺寸单位

新闻来源:优漫本站 日期:2023-04-14
​随着信息的呈现方式越来越多元,UI/Web设计师面对的工作也变得更加复杂。在这种情况下,许多基本功就容易被忽略掉,分辨率和设计的尺寸单位就是其中一个。iOS的pt、CSS的pt、Android的dp、ppi、px这些单位和名词到底是什么?该如何使用?

  随着信息的呈现方式越来越多元,UI/Web设计师面对的工作也变得更加复杂。在这种情况下,许多基本功就容易被忽略掉,分辨率和设计的尺寸单位就是其中一个。iOS的pt、CSS的pt、Android的dp、ppi、px这些单位和名词到底是什么?该如何使用?

UI设计尺寸单位


  举例来说,「pt(point,点)」这个单位,就同时出现在iOS、CSS、还有传统的平面设计里,但他们三者的意义却是不同的;而Android设计使用的单位则是「dp」,这些单位都不像px那样单纯好懂,也是我观察到现在,最多人学习UI设计时会卡关的地方。有些人没有学好,就干脆当作没这回事,继续使用px打天下,而这样子就会制造出一些问题,例如:

  从设计稿汇出的图文件素材不是工程师要的正确尺寸,要不是一直被要求重出,要不就是放上画面变成模糊的。

  设计师以小屏幕机种的尺寸来画稿子,工程师拿着大支手机来问:「那这要怎么办?」

  明明工程师照着设计来做,但一放到手机上,字就变得太小或太大。

  各种屏幕的分别

  在我们开始解释细节前,我们必须先定义讨论的范畴。

  本篇文章主要专注在探讨UI设计师如何处理各式各样的屏幕种类;屏幕的大小多变,就算大小一样,其细致度也有差,有的屏幕颗粒很粗,有的则细到眼睛看不到个别像素点,专业的设计师如何让自己的设计在各种屏幕上达到近似的体验呢?我们要先从「分辨率」看起。

  分辨率、像素密度

  分辨率一词在各种领域的定义有细微的差别,在UI设计中,我们可以理解成「显示器呈现影像细节的能力」。也就是说,成像单位越细小、越密集的屏幕,分辨率就越高。

  而大多数屏幕的成像单位是像素(Pixel),因此描述密度/分辨率的方法就是抓一段固定长度(通常是英吋),看看里面塞进了几颗像素点,固定长度能塞越多颗,就代表这个屏幕的点越细。

  广州优漫动游教育UI培训,系统学习,融会贯通,直奔主流技术,节省时间,老师督促指导,学习效率高,随堂练习,及时解决问题,企业IT大牛指导实战落地项目,与企业需求无缝连接,签订就业协议,诸多合作名企,4个月后直接走向工作岗位,避免工作后的水土不服。高薪名企有增加!