移动端页面尺寸设计应该考虑哪些细节？

2020-04-29 12:44:45

字体：大中小

来源：转载

供稿：网友

移动端页面尺寸设计应该考虑哪些细节？我们看到的电商网站如聚美优品等的手机界面大都是直接按照手机尺寸设计的，那么你知道移动端页面尺寸设计应该考虑哪些细节吗？小编就来与大家聊一聊这个问题。

有个常识大家都知道，屏幕上的设计DPI设成72，印刷品设计DPI设成300。为什么是这两个数字?

首先说300，这和人眼的分辨能力有关。由于1英寸是固定长度，每1英寸有多少个像素点决定了画质清晰程度。之前说过，这就是像素密度，也就是DPI。DPI达到300以上，其细腻程度就会给人真实感，像真实世界中的物件。相反，DPI只有10的话，在你一个食指指节大小的长度内只有10个像素，这明显就是马赛克了。所以印刷品要设成300，才能保证清晰。

再说72，这有一定的历史原因。最早的图形设计是在mac电脑上进行的，mac本身的显示器分辨率就是72。PS中把图像DPI也设成72，就能保证屏幕上显示的尺寸和打印尺寸相同，便于设计。72的PC显示器分辨率逐渐成为一种默认的行业标准，这套规则就这么沿用下来。

现在回到正题，我们怎么通过DPI来调节倍率?既然屏幕本身的分辨率是72，DPI设成72刚好是1倍尺寸，那设成72的两倍就是倍率为2的屏幕了，就这么简单。

下面来看看3个平台各自的画布设置：
iPhone
iPhone的屏幕尺寸各不相同，我说的是逻辑像素尺寸，这确实是让人很头疼的事情。如果想用一套设计涵盖所有iPhone，就要选择逻辑像素折中的机型。

从市场占有率数据来看，目前最多的是iPhone5/5s的屏幕。倍率为2，逻辑像素320x568。上升势头最猛，未来有望登上第一的是iPhone 6的屏幕。倍率为2，逻辑像素375x667。

按照这两种尺寸来设计，都是比较主流的做法。可以兼顾短一些的iPhone 4s，大一点的6 plus也不会过于空旷。

不过在切图的时候要注意，由于iPhone 6 plus的3倍图是由2倍图放大而来，所以位图要注意保证清晰。

移动端页面尺寸设计应该考虑哪些细节？以上文章内容就是小编总结的移动端页面尺寸设计应该考虑哪些细节的全部内容了，这些你都学会了吗？

上一篇：网站Web端交互式设计的一些误区是什么？

下一篇：建站教程：企业建站如何选择域名主机与邮局

学习交流

利用笔记本无线网卡实现共享上网

利用笔记本无线网卡实现共享上网...

热门图片

猜你喜欢的新闻

猜你喜欢的关注