联系我们 face+ 关于 服务 案例
首页 案例 服务 关于 face+

手机ui设计dpi如何把握,看这3个平台各自的画布设置情况

Time: 2020-11-27

智能手机的发展可以说是当下科技发展的趋势之一,在智能手机的发展过程中,APP的开发是关键。而dpi是影响APP设计的重要因素之一。今天就让小编为大家介绍手机ui设计dpi如何把握。

  手机ui设计dpi如何把握

  dpi是指每英寸的像素,也就是扫描精度。DPI越低,扫描的清晰度越低,由于受网络传输速度的影响,web上使用的图片都是72dpi,但是冲洗照片不能使用这个参数,必须是300dpi或者更高350dpi。

  UI设计师在设计移动APP时非常容易犯错误,不好把握屏幕的尺寸,实际应有起来也很头疼。

  1、IPhone

  从市场占有率数据来看,目前最多的是iPhone5/5s的屏幕。倍率为2,逻辑像素320×568。上升势头最猛,未来有望登上第一的是iPhone 6的屏幕。倍率为2,逻辑像素375×667。按照这两种尺寸来设计,都是比较主流的做法。可以兼顾短一些的iPhone 4s,大一点的6 plus也不会过于空旷。不过在切图的时候要注意,由于iPhone 6 plus的3倍图是由2倍图放大而来,所以位图要注意保证清晰。

  2、Android

  都说Android碎片化严重,但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于统一了:360×640,就看你设成几倍了。

手机ui设计dpi

手机ui设计dpi(图片来自网络)


  3、Web

  手机端网页就没有统一标准了,比较流行的做法是按照iPhone 5的尺寸来设计。倍率2,逻辑像素320×568。这样的做法比较实在,倍率2的屏幕无论在iOS还是Android方面都是主流,而且又是2倍屏幕中逻辑像素最小的。所以图片的尺寸可以保持在较小的水平,页面加载速度快。当然,缺点就是在倍率3的设备上看,图片不是特别清晰。如果追求图片质量,愿意牺牲加载速度,那么可以按照最大的屏幕来设计。也就是iPhone 6 plus的尺寸,倍率3,逻辑像素414×736。

  移动端的尺寸比PC端复杂,关键就在倍率。但也正因为倍率的存在,把大大小小的屏幕拉回到同一水平线,得以保证一套设计适应各种屏幕。

  移动端设计的基础知识

  1、现象

  首先说现象,大家都知道移动端设备屏幕尺寸非常多,碎片化严重。尤其是Android,你会听到很多种分辨率:480×800, 480×854, 540×960, 720×1280, 1080×1920,而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了:640×960, 640×1136, 750×1334, 1242×2208。不要被这些尺寸吓倒。实际上大部分的app和移动端网页,在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法,而且有规律可循。

手机ui设计dpi

手机ui设计dpi(图片来自网络)


  2、像素密度

  我们要引入最重要的一个概念:像素密度,也就是PPI(pixels per inch)。这项指标是连接数字世界与物理世界的桥梁。

  Pixels per inch,准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度,等于2.54厘米,大约是食指最末端那根指节的长度。像素密度越高,代表屏幕显示效果越精细。Retina屏比普通屏清晰很多,就是因为它的像素密度翻了一倍。

  3、倍率与逻辑像素

  在现实中,这两者效果却是一样的。这是因为Retina屏幕把2×2个像素当1个像素使用。比如原本44像素高的顶部导航栏,在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小,反而和3gs效果一样了。画质却更清晰。

  以上就是小编为大家介绍的关于手机ui设计dpi的相关内容。手机ui设计是当下最热门的一项技术,了解和学会dpi的设计,对于画面和图像清晰程度来说是非常关键的。


合作咨询

上海(总部)

上海市浦东新区郭守敬路498号22号楼
021-61057328
service@faceui.com

办公地址地图

北京

北京市东城区后永康17号A座
010-64015620
service@faceui.com

办公地址地图

成都

四川省成都市锦江区东大街牛王庙段100号
028-62790929
service@faceui.com

办公地址地图
首页 | 案例 | 服务 | 关于 | face+ | 智见

Copyright © 2009-2022 FaceUI design. All rights reserved


沪ICP备13044459号-5

上海办公地点地图
北京办公地点地图
深圳办公地点地图
在微信中搜索faceui
或保存二维码在微信中打开