交互设计师设计APP（一）—了解分辨率的那些事。

最近准备设计移动端界面了，当我画好用户体验流程图，准备将用户痛点、机会点解析成界面原型时，一直设计PC端界面的我才发现我不知道界面原型该设计成多大。PC端一般是考虑终端显示器的主流分辨率，依据主流分辨率1：1的设计。然而友盟大数据统计的手机端的分辨率为：

1、Android的分辨率方面1920x1080以及1280x720是应用适配占比最高，

2、iOS系统中1334x750的4.7寸依然是目前适配率最高的分辨率。

显然手机分辨率、手机显示的尺寸和电脑显示尺寸差距很大，不能1：1的设计。那么问题来了，手机APP的低保真原型到底该设计成多大？如用墨刀等原型工具就不用纠结了，直接选用手机模板开画就可以。但是作为交互设计师怎能不明就里的设计，怎能容忍自己的好奇心。故通过简书、百度等多方查阅整理自问自答如下，如有理解不对的地方希望能得到专家指正。

一、Question

1、手机分辨率1920*1080是什么意思？屏幕分辨率、物理分辨率、DPI、PPI又都是什么意思？原型到底该多大？

2、交互、视觉、开发又是怎么将这些原型沟通至适配不同手机的分辨率呢?

二、Answer

众多分辨率词的比较解释 引用CSDN博主图片，不同设备的分辨率值

看图说话：

1、逻辑分辨率*倍率（Scale Factor）=物理分辨率（设备分辨率）,倍率叫做像素倍率(@2X\@3X的倍率)

2、交互设计师只需要按照逻辑分辨率去设计低保真原型。

3、视觉设计师根据需适配的屏幕制作不同倍率的图片

4、开发工程师按照不同终端去适配而调用不同倍率的图片，文字默认按照倍率放大即可。

5、逻辑分辨率与设备分辨率有时候会相等，特别是当设备分辨率较小的时候。

6、通常说的手机尺寸都是对角线尺寸，见下图屏幕尺寸=对角线值

7、像素本身是一个抽象概念，可大可小，也可以理解为一个百分比的概念，如果想精度高就让单位长度显示多个像素。

引用CSDN博主图，直观感受下iPhone尺寸

ok，到此初步理解了，作为交互设计师可以开始工作了。当然后期关于原型尺寸标注、或不同精度要求下更精细的计算，比如以最小逻辑分辨率设计导图时将图片放大@2x 或@3x，或者以最大物理尺寸去设计图片自动压缩的选择。这是更细节的考量，若以后有心得可以继续更新分享。

其实通常PC端设计师会被问到是否有app移动终端设计经验，以前我理解设计理论是一样的，只是设计规范不一样。今天看来大的方向理论是一样的，但是落地设计还是有很多细节值得去专研。后续会继续去摸索亲身体会移动端和PC端的细节差别在哪，希望可以写成系列文章。

感谢杰哥指导，一直因关键词不对搜索不到有效资料，证明平时结交专家的好处。感谢那些在简书或CSDN分享的人，文中图片为了能让我的文章更好的被理解，有引用，如侵权请联系删。

参考1：http://blog.csdn.net/phunxm/article/details/42174937/ iPhone 屏幕尺寸、分辨率及适配 的图片——文中关于设计尺寸开发代码写的较为详细。

参考2：https://www.jianshu.com/p/c3387bcc4f6e （全解析）屏幕尺寸，分辨率，像素，PPI之间到底什么关系？——简单明了的解释这些概念，易懂。

20180317 by 兰哥