移动端UI设计750揭秘

为何大家都选用750作为移动端页面的宽度尺寸?

很多刚入门的ui小伙伴,不知道移动端为什么设计稿要做成750px宽, 今天我来阐述一下自己的想法, 以下是我个人见解,不喜勿喷.对于移动端页面, html的head中有一个

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

这一句的作用是将手机的实际分辨率转换成逻辑分辨率, 为什么要这样做呢, 大家应该还朦胧的记得以前的一些页面在手机端打开的时候字非常的小, 以至于都看不清, 需要放大才能看清, 比如iphone实际横向分辨率是750, 一个被设置成font-size: 12px的字体会占屏幕宽的12/750,这样的字是非常小的, 但是加入上面的viewport之后, 网页的宽将会变成375px而不是750px, 那么12px的字将占12/375这么多了, 这样就比较正常了, 不太明白逻辑分辨率的同学可以自行百度一下’此像素非彼像素’. 有了这层知识我们就可以来揭秘750的秘密了.(本文中不加特殊说明说的分辨率均指逻辑分辨率).

大家都知道现在手机碎屏化越来越严重, 比如320, 360, 375, 412, 414等, 如果只有一种屏幕分辨率的话那么我们只做一个这个分辨率宽的设计稿, 但是如何兼容现在这么多分辨率的设备就是一个问题了, 为每一个分辨率出一套方案显然不太可能, 技术成本将会加大, 于是iphone6的实际分辨率750就被关注到了, 理由如下:
移动端设备一般针对大多数手机和平板, 平板又是比较特殊一点, 因为平板手持方向不同, 调用的网页是不同的, 横向时走pc端样式, 竖向时走移动端样式.那我们切图的时候该怎么办呢?
现在我们可以做出一个750的设计稿, 1:1切给pad用, 不会有失真, 2:1(换算后是375)切给手机, 由于现在大多数移动端页面是采用rem布局实现的, 对于375及其以下的手机屏幕自然不会失真, 而对于375以上的手机设备,比如iphone6 plus 414的分辨率将会有少许失真, 图片将会被放大10%左右, 这是一个比较完美的折衷方案, 因为我们不可能为每一种分辨率设计一套方案, 所以注定会有一些设备上的图是失真的, 那又有人问为什么不做个比较大的设计稿, 夸张一点做成10000宽, 这样做的话能解决图片的失真问题, 但是图片太大必定会占用更多的带宽, 从而导致加载过慢, 带来不好的用户体验.
好了, 这就是我理解的750, 在本文中我只提到了横向分辨率, 并未提到竖向的值是多少, 这是因为绝大多数的设备屏幕是根据16 : 9设计的, 也就是大多数屏幕是几乎相似的(就是我们初中数学学的相似三角形的相似), 我们能从横向分辨率换算到纵向的, 出于这个原因我并未提起纵向分辨率.
希望能够对你有所帮助!