企业如何通过vue小程序开发满足高效运营与合规性需求
1285
2023-01-03
移动应用开发作图（移动设计图）
本篇文章给大家谈谈移动应用开发作图，以及移动设计图对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
今天给各位分享移动应用开发作图的知识，其中也会对移动设计图进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
1、如何理解「像素密度」和「逻辑像素」两个概念？
2、面对琳琅满目的手机型号和屏幕大小，应该选择何种倍率和尺寸进行作图？
3、基准设计稿完成后，如何进行屏幕适配？
说明：本章涉及的概念有：屏幕尺寸、PPI、DPI、物理像素。
诺曼在《情感化设计》一书中提到愉悦感的四大类，其中第一类是：生理的愉悦，也就是本能的感官体验。画质的清晰、细腻、逼真是视觉感官体验的一部分。而画质是由屏幕性质决定的。
当前市场手机型号众多，如何判断不同屏幕清晰度质量的好坏？这里，我们需要引入一个重要概念。
我们知道，屏幕是由很多像素点组成的，每个点发出不同颜色的光，构成我们看到的画面。当我们眼睛的视杆细胞和视锥细胞接收到的光线越多，我们感知到的画面就会越丰富。而如果需要光线多，就需要保证像素点够多。
我们在计算「人口密度」时，会抓出一平方公里的地区，看里面塞了多少人，据此，判断人口的密集程度。同理，我们可以抓出一英寸的界面，看里面塞了多少个像素点，判断像素的密集程度，这就是「像素密度」。
前面提到，「像素密度」表示一英寸界面中的像素点数，所以它跟两个参数有关：界面尺寸 和 像素。
一般手机的出厂配置信息中都标有「屏幕尺寸」，指的是屏幕的对角线长度，单位是inch（1英寸=2.54厘米，大约是食指最末端那根指节的长度）。设备长、宽的实际长度，即「物理尺寸」，用勾股定理计算可得屏幕尺寸。
我们也可以查到设备的分辨率，即在横纵切上的像素点数，也叫「物理像素」，单位是px。
拿到这两个参数，就可以计算出「像素密度」。
还有一种计算方法，是先算出「物理像素」的平方和，再开根号，最后除以「屏幕尺寸」。
从计算方法可以看出，像素密度就是pixels per inch，简称：PPI。
值得注意的是，在Android系统中，除了像素密度PPI，还有一个DPI，也是「像素密度」，全名为：Dots per inch，两者的区别是：
PPI：表示物理像素密度，是客观存在不会改变的。
DPI：表示软件像素密度，是软件参考了ppi后，人为指定的一个固定值，写在系统出厂配置文件上，保证在某一个区间的ppi在软件上使用同一个值，它是安卓特有的。
所以，可能有几款安卓手机的PPI不同，但是DPI相同。比如，有3款相同分辨率不同尺寸手机的ppi可能分别是430,440,450，那么在Android系统中，可能dpi会全部指定为480，以保证相同分辨率手机的表现一致。
苹果手机型号有限，所以没有DPI的概念，全部用PPI表示。
「像素密度」是连接数字世界和物理世界的桥梁。它是设备的固有属性，反映了屏幕呈现影像细节的能力。像素密度越高，屏幕显示的密度越高，拟真度就越好。Retina屏比普通屏清晰，就是因为它的像素密度翻了一倍。
我们可以根据「像素密度」判断屏幕显示质量的好坏。iPhone 3gs和iPhone 4物理尺寸相同，但是后者的ppi为326，是前者163的两倍，分辨率也是两倍的关系，说明4的呈像能力更佳。同时也可以看出，手机屏幕的物理尺寸和像素尺寸是不成比例的。
总之：只要两款手机的「像素密度」相同，它们的显示「精细程度」就是相同的。
说明：本章涉及的概念有：逻辑像素、倍率、逻辑像素密度。
假如我们在界面A（1英寸，4x4 px）上放一个1×1像素的红方格，然后把它移动到同样尺寸、2倍像素密度的界面B（1英寸，8x8 px）上，如下图所示。
在界面B上，红方格还是涵盖了1×1像素，但是实际的物理尺寸却变小了。这是不符合一般人的常识的，为什么同一个内容在同样尺寸的界面上显示不一样？
如何解决这个问题？我们可以试着分析一下：
对比界面A和B，B的「像素密度」更大，「界面-物理像素」也更大。
红方格在移动过程中，方格的「物理像素」不变，方格的「物理尺寸」变小。
以上因素中，「物理尺寸」是我们唯一肉眼可以观察到的属性。我们的目标是让红方格的变化过程符合常识，也就是保持红方格的「物理尺寸」不变。根据「像素密度」的计算公式，红方格物理尺寸一定时，当像素密度变成2倍，在界面B中的红方格的物理像素就必须变成原来的2倍。
物理尺寸一样，红方格在界面A和界面B中显示的内容物的多少就是一样的。为了标记这种“不同分辨率界面呈现同样多内容显示效果”的能力，我们引入一个抽象概念，它就是「逻辑像素」。我们约定把界面A的物理像素作为基准，界面B可用对应的像素乘以倍数得出，A和B的显示范围是一样的。这个基准就是逻辑像素。
现在，我们再次把红方格，从界面A移到界面B，因为界面B的像素密度是界面A的2倍，为了红方格在两个界面中肉眼可见的大小排版一致，根据公式，红方格在界面B中占据的物理像素是界面A中的2倍，如下图所示：
逻辑像素作为一组基准手机的分辨率尺寸，为了表达方便，需要有统一的单位。
由于iOS和Android的开发工具不同，逻辑像素在两个平台的单位名称也不同，iOS是pt, Android是dp, 设计师可以简单理解为：pt=dp
iOS 的 pt ：point 表示点 。
Android 的 dp ：Density-independent Pixels，指密度无关像素。
计量单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。
「逻辑分辨率」就是用逻辑像素描述屏幕的分辨率；「逻辑像素密度」是用“屏幕像素密度”相对于“基准屏幕密度”的倍数表示，即相对密度。
假设「逻辑像素密度」为n，那么 1 pt = 1 dp = n px。具体单位之间的换算关系随倍率变化：
@1×倍：1pt=1dp=1px
@1.5×倍：1pt=1dp=1.5px
@2×倍：1pt=1dp=2px
@3×倍：1pt=1dp=3px
@4×倍：1pt=1dp=4px
可以把「逻辑像素」和「物理尺寸】相关联，在分辨率较低的手机中，可能1pt=1px,而在分辨率较高的手机中，可能1pt=2px，这样的话，一个108*108pt的控件，在不同的手机中就能表现出肉眼观看的差不多的大小，只是分辨率高的展示的更加清楚。如下图所示。
知道了逻辑像素和单位，实际「物理像素」的计算公式：
iOS的分辨率：px=pt * 倍率.（其中pt是逻辑像素尺寸，iOS常用倍率为@2×，@3×）
Android的分辨率：px=dp * (dpi / 160). (其中dp是逻辑像素尺寸, dpi是逻辑像素密度，160是规定的@1×的基准逻辑像素密度)。
「逻辑像素」是人为约定的，会影响屏幕显示内容的多寡，与影响清晰度的「像素密度」无关。
物理分辨率：硬件所支持的。
逻辑分辨率：软件可达到的。
当两个设备逻辑像素一致，显示容量就一样；当逻辑像素不一致时，尺寸大的那个显示的内容多。
比如，以iPhone 3gs 和iPhone 4 为例，两者的物理尺寸一致，逻辑分辨率一致；物理分辨率3gs是320×480, 4是640×960，后者无论物理分辨率，还是像素密度都是前者的2倍。因为物理分辨率不同，4的硬件支持的呈像质量更高；因为逻辑分辨率相同，两者的软件可达的容纳物的多少是一致的。
再比如，有两台Android设备的屏幕尺寸为480x800px和720x1280px，它们分别属于hdpi和xhdpi，除以各自倍率1.5倍和3倍，得到逻辑像素为320×533dp和360×640dp。很显然，后者更宽更高，能显示更多内容。
逻辑分辨率的三大作用：
1、作为屏幕显示内容多少（也就是容积）的表征。逻辑像素尺寸大，显示的内容就多，和设备实际的分辨率尺寸、像素密度和倍率都无关。
2、保证控件在不同屏幕间切换符合人的常识和预期：屏幕显示内容的多少，和分辨率、像素密度无关，和屏幕的物理大小有关，这也符合人们的常识：屏幕越大，显示内容越多。
3、应用于设计和开发：我们不需要关注屏幕的像素密度，只需要关心逻辑分辨率即可，方便设计沟通。
说明：熟悉了概念，下面进入实操：UI设计作图。
UI设计过程中，在我们决定采用哪一种手机屏幕的尺寸作图前，应该首先考虑选择何种倍率呢。
因为正是「倍率」，把大大小小的屏幕拉回到了同一水平线，得以保证一套设计稿适应各种屏幕。
另外，在为开发提供的设计资源图片中，同一张图通常有两个，甚至三个尺寸。文件名有的带@2x或@3x字样，有的不带。其中@2x,@3x就表示是倍率。不带的用在普通屏上，带的用在Retina屏上。只要图片准备好，iOS或Android会自己判断用哪张。
我们可以直接选择逻辑像素尺寸（也就是x1倍率）进行设计作图。
但是，x1倍率的设备目前差不多已被淘汰。而我们通常会将做好的设计图导入对应设备查看效果，目前主流设备都采用x2、x3倍率，x1的设计图放入主流设备查看效果必须进行放大，粗略的放大会导致失真，影响效果查看。所以x1倍率在最终查看效果图时存在缺陷。
那x3倍率的怎么样？
在与程序员沟通、设计切图时，我们都会进行倍率之间的换算。x3切图换算不方便；
另外，程序员拿到标注图后，需要将其中的px转换成pt进行开发。（1）情况1：x2倍率下，将列表高120px, 头像高102px的标注转换成逻辑像素后为：60pt,52pt，两者是无法居中对齐的，会有1pt误差，最终设备呈现效果就会有2px的像素偏移；（2）情况2：假如将x3倍率的100px转换成逻辑像素，由于逻辑像素与物理像素一样，必须取整数，程序员只可能在33pt和34pt之间选取一个数值。如果采用33pt，最终呈现在设备上的尺寸是99x99px, 有1px误差；如果采用34pt，最终设备呈现的尺寸是102x103px, 有2px误差。所以，为确保设计图的落地效果，我们需要：
在x1倍率下，尺寸必须为 偶数；
在x2倍率下，尺寸必须为 4的倍数；
在x3倍率下，尺寸必须为 6的倍数。
可以看出，x3倍率的执行难度最高。
通过以上，我们也可以排除“x3倍率”作为我们的作图选择。
因为x1倍率、x3倍率都存在明显短板，常用倍率只剩下x2倍率。鉴于x2倍率各方面都比较均衡，所以：
选择x2倍率作为我们的作图尺寸。
选定作图倍率后，我们就可以选择具体的作图尺寸。
目前iPhone的主流机型在x2倍率下的尺寸有5种，如下图：
其中，iPhone X 可以认为是iPhone 6 的加长版；iPhone XR 可以认为是iPhone 6P的加长版。如下图：
所以这4种尺寸可以归为2个类型：宽度为750和828的。
而Android系统逻辑像素已统一为360x640，x2倍率就是：720x1280.
最后，总结出双平台@2x倍率，共计4种屏幕尺寸。
大屏时代，用小屏为设计基准显然不合时宜。我们一般选择中间尺寸为基准进行适配，因为从中间向上或向下适配，调整幅度最小。
中间尺寸有两个分别是iOS和Android的，要选哪一个？
大多数设计师日常用的都是iPhone，对Android开发可能了解不够；同时Android验收不太受重视，设计师对Android的容错率较高，这也导致Android端常常容易出问题。根据“哪里问题多，从哪里着手”的原则，可选择以 720×1280 作为设计基准。
但是选择750×1334也没有毛病，很多比较倾向于iOS设计。两者都可以“一稿适配双平台”。
当然，很多团队都是同时出iOS和Android两套设计稿，那就可以：
同时把 750×1334 px 和 720×1280 px 作为设计基准。
为了发现作图尺寸和设计规范之间的关系，我们对比不同倍率的屏幕控件尺寸：
发现：控件高度随倍率等比放大/缩小。
（其中iPhone Xs Max只不过顶部状态栏在原来的20pt基础之上增加了24pt变为44pt，底部增加34pt的主页指示器。）
相同倍率，对比控件尺寸：
发现：相同倍率，控件大小不变。页面尺寸变化，不会对控件大小产生影响。
综上得出：控件大小只随倍率变化，与实际作图尺寸无关。也就是说：
作图尺寸对设计规范没有任何影响，设计规范就是组件规范。
说明：开始作图后，我们开始考虑更多的细节问题。
什么是适配？
就是让同一套APP的UI设计，在不同尺寸分辨率比例的「移动终端设备」上都能正常显示。为此需要根据不同机型对构成界面的组件进行的一系列调整。
为什么要适配？为了在多样性的设备环境中追求体验的一致，保持理想的展示效果。适配只看3个参数:
渲染像素——屏幕截图的图片尺寸，单位 px
逻辑像素——程序员开发所用尺寸，单位 pt
倍 率——渲染像素/逻辑像素 得到的倍数关系，常见倍率有@2x、@3x。倍率决定切图。
界面元素按照屏幕大小整体等比例缩放，一般是界面版式特殊，布局不能变化的情况。比如图片墙、图片列表。适配时，控件尺寸大小随屏幕宽度变化自适应。屏幕越宽，单屏显示内容越少。
注意：界面缩放过程中，要保证资源图片在拉伸后的清晰度，避免降低产品品质。
对局部控件做调整，进行缩放或自适应。比如，图片列表控件中局部图片的放大，文字列表控件文字长度的自适应。
如果界面不适合拉伸，或界面本来就有很多可扩展区域，可考虑将增加的空间分配到这些区域，增加元素的间距。比如，九宫格列表。
还有一些满屏界面，比如启动图、音乐播放器、活动H5页等。因为显示屏宽高比不同，拉伸会导致形变。可以通过调整背景间距增加延展性。
我们平常讲的适配常常都是指宽度的适配，因为一般界面的内容总是在纵向存在超过一屏的滚动内容，可以不断往下滚动，所以纵向的适配设计常常被忽略。
但是，全面屏的出现，使我们不得不正视这个问题。因为全面屏刘海和屏幕圆角的问题，导致整体高度的变化，进而影响了比例的变化。
首先，iPhone全面屏出现了刘海和屏幕圆角设计，我们需要重新定义「安全区域」，确保页面内容不能超出安全区域。
具体的安全区高度=屏幕高度-44-34（单位：pt），如下图所示
以下就顶部、底部和满屏界面进行适配。
顶部区域，非全面屏状态栏高为20pt, 全面屏状态栏高为44pt, 两者存在24pt, 在设计顶部时，需要就差值作出适配。
一般顶部区域主要放置的控件以及应对策略：
底部区域用于手势进入主屏或切换应用。如果将触发交互行为的按钮放在屏幕底部，会破坏APP的操作体验。除了一些无操作的信息流可以不用另外设置，常规做法都是将底部操作区全部提高34pt。
上文已经提到，正常全屏适配的常规做法就是间距调整，全面屏依然适用。需要注意的是一些全屏的视频播放，需要控制在安全区域内。
马上即将迎来折叠屏手机，折叠屏的适配也需要纳入考虑范围。目前有华为和三星两家手机厂商即将发布折叠屏。相关尺寸参数如下：
目前淘宝设计推荐的方法是，采用内容流动的适配方式。
具体需要等正式上市，再进行专门适配。待续……
说明：以下提供iOS和Android两个平台一些常见的手机型号、屏幕尺寸、分辨率等参数。
iOS常用的逻辑像素有：320×568 pt（5/5c/5s/se），375×667 pt（6/6s/7/8），375×812pt（X/Xs），414×736 pt（6p/6sp/7p/8p），414×896pt（XR/Xs Max），常用倍率有：@3x，@2x.
根据友盟数据，目前iPhone使用最多的是6/6s/7/8的750×1334px屏幕,倍率为2，逻辑像素320x667 pt。上升势头最猛，未来有望登上第一的是6p/6sp/7p/8p的1080×1920px屏幕。倍率为2，逻辑像素414x736 pt。
注意：iphone 6plus适配中，有设计版，物理版，放大版：
因为plus屏幕有1080个像素点，但截屏后发现图像是1242像素，就是在一个物理有1080个像素点的屏幕里塞了个1242像素的内容。而放大版，就是iphone 6的尺寸等比放大1.5倍得出的分辨率。
在iPhone6的x2倍设计稿中，界面元素之间的常用距离，亲密距离：20px；疏远距离：30px。
疏远距离：比如，所有元素距离手机屏幕最左边的距离。
亲密距离：比如，左边图标与右边文字之间的距离。
安卓由于屏幕尺寸过多，分辨率跨度大，根据dpi分成几个范围区间：
像素密度为160dpi左右的称为mdpi, 240左右的为hdpi, 320左右的xhdpi…以此类推。这样，所有的安卓屏幕都找到了自己的位置，并赋予了相应的倍率。
Android约定：当dpi=160时，倍率为@1x，逻辑像素=320×480 dp 或 360×640 dp ，称之为mdpi，其它的都是基于此通过倍率转化：hdpi:1.5倍；xhdpi:2倍；xxhdpi:3倍；xxxhdpi:4倍。
如今的Android屏幕逻辑像素已经趋于统一，基准为：360x640 dp。
在实际操作中，我们要用「逻辑像素尺寸」思维来思考界面，把单位设置成逻辑像素。打开PS的首选项——单位与标尺界面，把尺寸和文字的单位都改成点（Point）。这里的点也就是pt，无论设计iOS、Android还是Web应用，单位都用它。
要调节倍率，则通过图像大小里的DPI来控制。这个DPI，其实就是PPI，像素密度。有个常识大家都知道，屏幕上的设计DPI设成72，印刷品设计DPI设成300。
本文从理论入手，先介绍了「像素密度」和「逻辑像素」两个重要概念，其中像素密度影响“屏幕的成像质量”，逻辑像素影响“界面的容积能力”；接着进入实际操作，设计作图应该选择何种倍率和屏幕尺寸；然后是细节的处理，常用的适配方法，以及全面屏的适配。最后是iPhone和Android手机的一些设计参数。
本文目录一览：
- 1、什么是用于设计移动应用程序开发的UI，UX工具呢？
- 2、android 如何在别的应用窗口绘图
- 3、移动端UI设计的PPI,逻辑像素,作图尺寸及适配
- 4、手机作图app有哪些
- 5、手机可用的平面设计作图软件
什么是用于设计移动应用程序开发的UI，UX工具呢？
1. Axure RP (Mac Win) |(495美元/用户)
Axure RP是一个桌面应用程序，允许设计者创建、测试和共享交互式原型。它被称为最全面移动应用开发作图的(在功能方面)原型工具，是一个理想移动应用开发作图的桌面软件，无论是静态移动应用开发作图的，低保真原型和更复杂的，交互式原型。作为一个非常专业的用户体验工具，Axure需要一个陡峭的学习曲线。
2. Mockplus (Mac Win) |(199美元/年)
Mockplus是一个包罗一切的快速原型工具，支持PC、网站和移动设备的主流平台。打包的交互组件和创造性预览方法允许设计者在几分钟内设计和预览。这是一个坚实的原型应用程序的专业UI/UX设计师谁想要生产高质量的原型，但没有太长的学习曲线。2017年，Mockplus团队发布了Mockplus 3.2版本，该版本添加了强大的功能，包括:
UI流程设计模式——在原型和UI流程设计模式之间的即时切换;显示全部或部分页面的UI流程;页面之间的智能连接，可手动调整;显示页面的重要标记;立即导出UI流。
转发器-将任何组件转换为转发器很容易。拖动中继器的边框可创建重复的元素。您对一个组件所做的调整将适用于所有组件。
演示项目和模板-演示项目:结构良好的演示，供您参考。模板:各种内置模板可以帮助您轻松快速地构建原型。
草图导入-在Mockplus中将选定的草图画板作为团队项目发布。插入草图画板到Mockplus团队项目。
其移动应用开发作图他功能，如思维导图设计模式将在Mockplus 3.2之后的版本中呈现。
3.Justinmind (Mac WIn) |(228美元/年)
Justinmind是一个灵活的原型工具，用于web和移动应用程序原型和高保真网站线框。Justinmind中丰富的手势让设计师能够更好地构建手势交互移动应用程序。Justinmind还需要一个深度学习曲线，比如价值表达。
4. Balsamiq (Win) |($89/用户)
Balsamiq mockkups是一款快速线框图制作工具，可以帮助您更快、更智能地工作。它再现了用电脑在白板上画草图的体验。相比之下，Balsamiq更专注于静态和低保真度的原型。
5. OmniGraffle (Mac) |(199.99美元)
OmniGraffle是一个功能强大的设计工具，它为对象、画布、模板、检查器和模板提供了广泛的选择，帮助设计师快速做好一些事情。它获得了2002年的苹果设计奖。
一些其他的模型工具:
折纸——一个设计现代用户界面(Mac) |的免费工具
Mockplus iDoc，切换设计与准确的规格，资产，代码片段自动
免费开始
Adobe体验设计——第一款面向UX设计师的一体化工具(Mac)
Prott——一款专为设计团队设计的手机应用原型工具(Mac) |(421美元/年)
原理—交互式原型动画设计工具(Mac) |($129/年)
所以，如何完成一个好的原型设计取决于移动应用开发作图你如何选择原型设计/线框图工具。以下是最流行的基于网站、桌面和移动设备的模型和原型/线框图工具和应用程序。
android 如何在别的应用窗口绘图
是一种线框移动应用开发作图，可让您设计Android移动应用程序。Android线框是您移动应用程序视觉设计移动应用开发作图的起点。由于线框简单易懂移动应用开发作图，因此您可以将其作为业务需求文档移动应用开发作图的一部分，以便为客户提供将要开发的产品的图片。创建Android线框移动应用开发作图：1.通过从应用程序工具栏中选择“项目”“新建”来创建一个新项目。在“新建项目”窗口中，输入“教程”作为项目名称，然后单击“创建空白项目”。2.从应用程序工具栏中选择图新建。3.在“新建图”窗口中，选择“ Android手机线框”，然后单击“下一步”。4.输入Google Play商店作为线框名称（图），然后单击确定。这将创建一个空白的Android Phone线框。移动端UI设计的PPI,逻辑像素,作图尺寸及适配
说明：本文主要从UI设计师角度，试图回答在移动产品UI设计过程中会遇到的以下问题：1、如何理解「像素密度」和「逻辑像素」两个概念？
2、面对琳琅满目的手机型号和屏幕大小，应该选择何种倍率和尺寸进行作图？
3、基准设计稿完成后，如何进行屏幕适配？
说明：本章涉及的概念有：屏幕尺寸、PPI、DPI、物理像素。
诺曼在《情感化设计》一书中提到愉悦感的四大类，其中第一类是：生理的愉悦，也就是本能的感官体验。画质的清晰、细腻、逼真是视觉感官体验的一部分。而画质是由屏幕性质决定的。
当前市场手机型号众多，如何判断不同屏幕清晰度质量的好坏？这里，我们需要引入一个重要概念。
我们知道，屏幕是由很多像素点组成的，每个点发出不同颜色的光，构成我们看到的画面。当我们眼睛的视杆细胞和视锥细胞接收到的光线越多，我们感知到的画面就会越丰富。而如果需要光线多，就需要保证像素点够多。
我们在计算「人口密度」时，会抓出一平方公里的地区，看里面塞了多少人，据此，判断人口的密集程度。同理，我们可以抓出一英寸的界面，看里面塞了多少个像素点，判断像素的密集程度，这就是「像素密度」。
前面提到，「像素密度」表示一英寸界面中的像素点数，所以它跟两个参数有关：界面尺寸 和 像素。
一般手机的出厂配置信息中都标有「屏幕尺寸」，指的是屏幕的对角线长度，单位是inch（1英寸=2.54厘米，大约是食指最末端那根指节的长度）。设备长、宽的实际长度，即「物理尺寸」，用勾股定理计算可得屏幕尺寸。
我们也可以查到设备的分辨率，即在横纵切上的像素点数，也叫「物理像素」，单位是px。
拿到这两个参数，就可以计算出「像素密度」。
还有一种计算方法，是先算出「物理像素」的平方和，再开根号，最后除以「屏幕尺寸」。
从计算方法可以看出，像素密度就是pixels per inch，简称：PPI。
值得注意的是，在Android系统中，除了像素密度PPI，还有一个DPI，也是「像素密度」，全名为：Dots per inch，两者的区别是：
PPI：表示物理像素密度，是客观存在不会改变的。
DPI：表示软件像素密度，是软件参考了ppi后，人为指定的一个固定值，写在系统出厂配置文件上，保证在某一个区间的ppi在软件上使用同一个值，它是安卓特有的。
所以，可能有几款安卓手机的PPI不同，但是DPI相同。比如，有3款相同分辨率不同尺寸手机的ppi可能分别是430,440,450，那么在Android系统中，可能dpi会全部指定为480，以保证相同分辨率手机的表现一致。
苹果手机型号有限，所以没有DPI的概念，全部用PPI表示。
「像素密度」是连接数字世界和物理世界的桥梁。它是设备的固有属性，反映了屏幕呈现影像细节的能力。像素密度越高，屏幕显示的密度越高，拟真度就越好。Retina屏比普通屏清晰，就是因为它的像素密度翻了一倍。
我们可以根据「像素密度」判断屏幕显示质量的好坏。iPhone 3gs和iPhone 4物理尺寸相同，但是后者的ppi为326，是前者163的两倍，分辨率也是两倍的关系，说明4的呈像能力更佳。同时也可以看出，手机屏幕的物理尺寸和像素尺寸是不成比例的。
总之：只要两款手机的「像素密度」相同，它们的显示「精细程度」就是相同的。
说明：本章涉及的概念有：逻辑像素、倍率、逻辑像素密度。
假如我们在界面A（1英寸，4x4 px）上放一个1×1像素的红方格，然后把它移动到同样尺寸、2倍像素密度的界面B（1英寸，8x8 px）上，如下图所示。
在界面B上，红方格还是涵盖了1×1像素，但是实际的物理尺寸却变小了。这是不符合一般人的常识的，为什么同一个内容在同样尺寸的界面上显示不一样？
如何解决这个问题？我们可以试着分析一下：
对比界面A和B，B的「像素密度」更大，「界面-物理像素」也更大。
红方格在移动过程中，方格的「物理像素」不变，方格的「物理尺寸」变小。
以上因素中，「物理尺寸」是我们唯一肉眼可以观察到的属性。我们的目标是让红方格的变化过程符合常识，也就是保持红方格的「物理尺寸」不变。根据「像素密度」的计算公式，红方格物理尺寸一定时，当像素密度变成2倍，在界面B中的红方格的物理像素就必须变成原来的2倍。
物理尺寸一样，红方格在界面A和界面B中显示的内容物的多少就是一样的。为了标记这种“不同分辨率界面呈现同样多内容显示效果”的能力，我们引入一个抽象概念，它就是「逻辑像素」。我们约定把界面A的物理像素作为基准，界面B可用对应的像素乘以倍数得出，A和B的显示范围是一样的。这个基准就是逻辑像素。
现在，我们再次把红方格，从界面A移到界面B，因为界面B的像素密度是界面A的2倍，为了红方格在两个界面中肉眼可见的大小排版一致，根据公式，红方格在界面B中占据的物理像素是界面A中的2倍，如下图所示：
逻辑像素作为一组基准手机的分辨率尺寸，为了表达方便，需要有统一的单位。
由于iOS和Android的开发工具不同，逻辑像素在两个平台的单位名称也不同，iOS是pt, Android是dp, 设计师可以简单理解为：pt=dp
iOS 的 pt ：point 表示点 。
Android 的 dp ：Density-independent Pixels，指密度无关像素。
计量单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。
「逻辑分辨率」就是用逻辑像素描述屏幕的分辨率；「逻辑像素密度」是用“屏幕像素密度”相对于“基准屏幕密度”的倍数表示，即相对密度。
假设「逻辑像素密度」为n，那么 1 pt = 1 dp = n px。具体单位之间的换算关系随倍率变化：
@1×倍：1pt=1dp=1px
@1.5×倍：1pt=1dp=1.5px
@2×倍：1pt=1dp=2px
@3×倍：1pt=1dp=3px
@4×倍：1pt=1dp=4px
可以把「逻辑像素」和「物理尺寸】相关联，在分辨率较低的手机中，可能1pt=1px,而在分辨率较高的手机中，可能1pt=2px，这样的话，一个108*108pt的控件，在不同的手机中就能表现出肉眼观看的差不多的大小，只是分辨率高的展示的更加清楚。如下图所示。
知道了逻辑像素和单位，实际「物理像素」的计算公式：
iOS的分辨率：px=pt * 倍率.（其中pt是逻辑像素尺寸，iOS常用倍率为@2×，@3×）
Android的分辨率：px=dp * (dpi / 160). (其中dp是逻辑像素尺寸, dpi是逻辑像素密度，160是规定的@1×的基准逻辑像素密度)。
「逻辑像素」是人为约定的，会影响屏幕显示内容的多寡，与影响清晰度的「像素密度」无关。
物理分辨率：硬件所支持的。
逻辑分辨率：软件可达到的。
当两个设备逻辑像素一致，显示容量就一样；当逻辑像素不一致时，尺寸大的那个显示的内容多。
比如，以iPhone 3gs 和iPhone 4 为例，两者的物理尺寸一致，逻辑分辨率一致；物理分辨率3gs是320×480, 4是640×960，后者无论物理分辨率，还是像素密度都是前者的2倍。因为物理分辨率不同，4的硬件支持的呈像质量更高；因为逻辑分辨率相同，两者的软件可达的容纳物的多少是一致的。
再比如，有两台Android设备的屏幕尺寸为480x800px和720x1280px，它们分别属于hdpi和xhdpi，除以各自倍率1.5倍和3倍，得到逻辑像素为320×533dp和360×640dp。很显然，后者更宽更高，能显示更多内容。
逻辑分辨率的三大作用：
1、作为屏幕显示内容多少（也就是容积）的表征。逻辑像素尺寸大，显示的内容就多，和设备实际的分辨率尺寸、像素密度和倍率都无关。
2、保证控件在不同屏幕间切换符合人的常识和预期：屏幕显示内容的多少，和分辨率、像素密度无关，和屏幕的物理大小有关，这也符合人们的常识：屏幕越大，显示内容越多。
3、应用于设计和开发：我们不需要关注屏幕的像素密度，只需要关心逻辑分辨率即可，方便设计沟通。
说明：熟悉了概念，下面进入实操：UI设计作图。
UI设计过程中，在我们决定采用哪一种手机屏幕的尺寸作图前，应该首先考虑选择何种倍率呢。
因为正是「倍率」，把大大小小的屏幕拉回到了同一水平线，得以保证一套设计稿适应各种屏幕。
另外，在为开发提供的设计资源图片中，同一张图通常有两个，甚至三个尺寸。文件名有的带@2x或@3x字样，有的不带。其中@2x,@3x就表示是倍率。不带的用在普通屏上，带的用在Retina屏上。只要图片准备好，iOS或Android会自己判断用哪张。
我们可以直接选择逻辑像素尺寸（也就是x1倍率）进行设计作图。
但是，x1倍率的设备目前差不多已被淘汰。而我们通常会将做好的设计图导入对应设备查看效果，目前主流设备都采用x2、x3倍率，x1的设计图放入主流设备查看效果必须进行放大，粗略的放大会导致失真，影响效果查看。所以x1倍率在最终查看效果图时存在缺陷。
那x3倍率的怎么样？
在与程序员沟通、设计切图时，我们都会进行倍率之间的换算。x3切图换算不方便；
另外，程序员拿到标注图后，需要将其中的px转换成pt进行开发。（1）情况1：x2倍率下，将列表高120px, 头像高102px的标注转换成逻辑像素后为：60pt,52pt，两者是无法居中对齐的，会有1pt误差，最终设备呈现效果就会有2px的像素偏移；（2）情况2：假如将x3倍率的100px转换成逻辑像素，由于逻辑像素与物理像素一样，必须取整数，程序员只可能在33pt和34pt之间选取一个数值。如果采用33pt，最终呈现在设备上的尺寸是99x99px, 有1px误差；如果采用34pt，最终设备呈现的尺寸是102x103px, 有2px误差。所以，为确保设计图的落地效果，我们需要：
在x1倍率下，尺寸必须为 偶数；
在x2倍率下，尺寸必须为 4的倍数；
在x3倍率下，尺寸必须为 6的倍数。
可以看出，x3倍率的执行难度最高。
通过以上，我们也可以排除“x3倍率”作为我们的作图选择。
因为x1倍率、x3倍率都存在明显短板，常用倍率只剩下x2倍率。鉴于x2倍率各方面都比较均衡，所以：
选择x2倍率作为我们的作图尺寸。
选定作图倍率后，我们就可以选择具体的作图尺寸。
目前iPhone的主流机型在x2倍率下的尺寸有5种，如下图：
其中，iPhone X 可以认为是iPhone 6 的加长版；iPhone XR 可以认为是iPhone 6P的加长版。如下图：
所以这4种尺寸可以归为2个类型：宽度为750和828的。
而Android系统逻辑像素已统一为360x640，x2倍率就是：720x1280.
最后，总结出双平台@2x倍率，共计4种屏幕尺寸。
大屏时代，用小屏为设计基准显然不合时宜。我们一般选择中间尺寸为基准进行适配，因为从中间向上或向下适配，调整幅度最小。
中间尺寸有两个分别是iOS和Android的，要选哪一个？
大多数设计师日常用的都是iPhone，对Android开发可能了解不够；同时Android验收不太受重视，设计师对Android的容错率较高，这也导致Android端常常容易出问题。根据“哪里问题多，从哪里着手”的原则，可选择以 720×1280 作为设计基准。
但是选择750×1334也没有毛病，很多比较倾向于iOS设计。两者都可以“一稿适配双平台”。
当然，很多团队都是同时出iOS和Android两套设计稿，那就可以：
同时把 750×1334 px 和 720×1280 px 作为设计基准。
为了发现作图尺寸和设计规范之间的关系，我们对比不同倍率的屏幕控件尺寸：
发现：控件高度随倍率等比放大/缩小。
（其中iPhone Xs Max只不过顶部状态栏在原来的20pt基础之上增加了24pt变为44pt，底部增加34pt的主页指示器。）
相同倍率，对比控件尺寸：
发现：相同倍率，控件大小不变。页面尺寸变化，不会对控件大小产生影响。
综上得出：控件大小只随倍率变化，与实际作图尺寸无关。也就是说：
作图尺寸对设计规范没有任何影响，设计规范就是组件规范。
说明：开始作图后，我们开始考虑更多的细节问题。
什么是适配？
就是让同一套APP的UI设计，在不同尺寸分辨率比例的「移动终端设备」上都能正常显示。为此需要根据不同机型对构成界面的组件进行的一系列调整。
为什么要适配？为了在多样性的设备环境中追求体验的一致，保持理想的展示效果。适配只看3个参数:
渲染像素——屏幕截图的图片尺寸，单位 px
逻辑像素——程序员开发所用尺寸，单位 pt
倍 率——渲染像素/逻辑像素 得到的倍数关系，常见倍率有@2x、@3x。倍率决定切图。
界面元素按照屏幕大小整体等比例缩放，一般是界面版式特殊，布局不能变化的情况。比如图片墙、图片列表。适配时，控件尺寸大小随屏幕宽度变化自适应。屏幕越宽，单屏显示内容越少。
注意：界面缩放过程中，要保证资源图片在拉伸后的清晰度，避免降低产品品质。
对局部控件做调整，进行缩放或自适应。比如，图片列表控件中局部图片的放大，文字列表控件文字长度的自适应。
如果界面不适合拉伸，或界面本来就有很多可扩展区域，可考虑将增加的空间分配到这些区域，增加元素的间距。比如，九宫格列表。
还有一些满屏界面，比如启动图、音乐播放器、活动H5页等。因为显示屏宽高比不同，拉伸会导致形变。可以通过调整背景间距增加延展性。
我们平常讲的适配常常都是指宽度的适配，因为一般界面的内容总是在纵向存在超过一屏的滚动内容，可以不断往下滚动，所以纵向的适配设计常常被忽略。
但是，全面屏的出现，使我们不得不正视这个问题。因为全面屏刘海和屏幕圆角的问题，导致整体高度的变化，进而影响了比例的变化。
首先，iPhone全面屏出现了刘海和屏幕圆角设计，我们需要重新定义「安全区域」，确保页面内容不能超出安全区域。
具体的安全区高度=屏幕高度-44-34（单位：pt），如下图所示
以下就顶部、底部和满屏界面进行适配。
顶部区域，非全面屏状态栏高为20pt, 全面屏状态栏高为44pt, 两者存在24pt, 在设计顶部时，需要就差值作出适配。
一般顶部区域主要放置的控件以及应对策略：
底部区域用于手势进入主屏或切换应用。如果将触发交互行为的按钮放在屏幕底部，会破坏APP的操作体验。除了一些无操作的信息流可以不用另外设置，常规做法都是将底部操作区全部提高34pt。
上文已经提到，正常全屏适配的常规做法就是间距调整，全面屏依然适用。需要注意的是一些全屏的视频播放，需要控制在安全区域内。
马上即将迎来折叠屏手机，折叠屏的适配也需要纳入考虑范围。目前有华为和三星两家手机厂商即将发布折叠屏。相关尺寸参数如下：
目前淘宝设计推荐的方法是，采用内容流动的适配方式。
具体需要等正式上市，再进行专门适配。待续……
说明：以下提供iOS和Android两个平台一些常见的手机型号、屏幕尺寸、分辨率等参数。
iOS常用的逻辑像素有：320×568 pt（5/5c/5s/se），375×667 pt（6/6s/7/8），375×812pt（X/Xs），414×736 pt（6p/6sp/7p/8p），414×896pt（XR/Xs Max），常用倍率有：@3x，@2x.
根据友盟数据，目前iPhone使用最多的是6/6s/7/8的750×1334px屏幕,倍率为2，逻辑像素320x667 pt。上升势头最猛，未来有望登上第一的是6p/6sp/7p/8p的1080×1920px屏幕。倍率为2，逻辑像素414x736 pt。
注意：iphone 6plus适配中，有设计版，物理版，放大版：
因为plus屏幕有1080个像素点，但截屏后发现图像是1242像素，就是在一个物理有1080个像素点的屏幕里塞了个1242像素的内容。而放大版，就是iphone 6的尺寸等比放大1.5倍得出的分辨率。
在iPhone6的x2倍设计稿中，界面元素之间的常用距离，亲密距离：20px；疏远距离：30px。
疏远距离：比如，所有元素距离手机屏幕最左边的距离。
亲密距离：比如，左边图标与右边文字之间的距离。
安卓由于屏幕尺寸过多，分辨率跨度大，根据dpi分成几个范围区间：
像素密度为160dpi左右的称为mdpi, 240左右的为hdpi, 320左右的xhdpi…以此类推。这样，所有的安卓屏幕都找到了自己的位置，并赋予了相应的倍率。
Android约定：当dpi=160时，倍率为@1x，逻辑像素=320×480 dp 或 360×640 dp ，称之为mdpi，其它的都是基于此通过倍率转化：hdpi:1.5倍；xhdpi:2倍；xxhdpi:3倍；xxxhdpi:4倍。
如今的Android屏幕逻辑像素已经趋于统一，基准为：360x640 dp。
在实际操作中，我们要用「逻辑像素尺寸」思维来思考界面，把单位设置成逻辑像素。打开PS的首选项——单位与标尺界面，把尺寸和文字的单位都改成点（Point）。这里的点也就是pt，无论设计iOS、Android还是Web应用，单位都用它。
要调节倍率，则通过图像大小里的DPI来控制。这个DPI，其实就是PPI，像素密度。有个常识大家都知道，屏幕上的设计DPI设成72，印刷品设计DPI设成300。
本文从理论入手，先介绍了「像素密度」和「逻辑像素」两个重要概念，其中像素密度影响“屏幕的成像质量”，逻辑像素影响“界面的容积能力”；接着进入实际操作，设计作图应该选择何种倍率和屏幕尺寸；然后是细节的处理，常用的适配方法，以及全面屏的适配。最后是iPhone和Android手机的一些设计参数。
手机作图app有哪些
1、美图秀秀
美图秀秀是2008年10月8日由厦门美图科技有限公司研发、推出移动应用开发作图的一款免费图片处理的软件移动应用开发作图，有iPhone版、Android版、PC版、Windows Phone版、iPad版及网页版 移动应用开发作图，致力于为全球用户提供专业智能的拍照、修图服务。
2、PicsArt照片
PicsArt美易照片编辑( PicsArt Photo Studio) ,是一款免费的移动图片编辑器，是一款iOS、 Android及Windows 平台集合拍照和照片处理的应用软件，可以直接绘图，对照片进行效果处理、文字添加和增添艺术效果，也是摄影艺术家社交网络和图片作品库。
3、Snapseed
Snapseed软件可以对照片进行多种细节处理，包括亮度、环境、对比度、饱和度、白平衡、锐化等，支持拉伸、旋转以及剪裁。
在滤镜方面，Snapseed可以制作黑白、复古、戏剧、移轴等多种风格，基本上可以把原始照片改的面目全非，让人人都是摄影家。
4、天天P图
天天P图 为全能实用美图类App，由腾讯出品。包括美化图片、自然美妆、疯狂变妆、魔法抠图等七个模块。简单实用的图片编辑功能，让手机也可轻松制作单反级效果移动应用开发作图；多款新潮妆容，瞬间打造出精致美颜。
5、camera360
Camera360（相机360） 是成都品果科技有限公司推出的基于iOS、Windows Phone和Android的功能强大的手机摄影软件。多种相机拍摄模式，能拍摄出不同风格，不同特效的照片，特效相机里还提供移动应用开发作图了丰富的特效滤镜，不会PS可轻松拍出大师级照片。
手机可用的平面设计作图软件
手机可用的平面设计作图软件有绘画神器手机版、AUTO CAD、Photoshop、3D MAX、Corel DRAW、freehand等等。
列举如下：
1、绘画神器
《绘画神器》是一款影音图像类软件，支持Android 3.0。是全球最大的二维、三维设计和工程软件公司Autodesk出品的画图软件，献给对于所有热爱画画的用户。这是一个专业着色和绘图的程序，专门为Honeycomb tablet设备进行了优化。
2、AUTO CAD
AutoCAD（Autodesk Computer Aided Design）是Autodesk（欧特克）公司首次于1982年开发的自动计算机辅助设计软件，用于二维绘图、详细绘制、设计文档和基本三维设计，现已经成为国际上广为流行的绘图工具。
3、Photoshop
Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。
4、3D MAX
3D Studio Max，常简称为3d Max或3ds MAX，是Discreet公司开发的（后被Autodesk公司合并）基于PC系统的三维动画渲染和制作软件。其前身是基于DOS操作系统的3D Studio系列软件。
5、Corel DRAW
CorelDRAW Graphics Suite是加拿大Corel公司的平面设计软件；该软件是Corel公司出品的矢量图形制作工具软件，这个图形工具给设计师提供了矢量动画、页面设计、网站制作、位图编辑和网页动画等多种功能。
关于移动应用开发作图和移动设计图的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 移动应用开发作图的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于移动设计图、移动应用开发作图的信息别忘了在本站进行查找喔。版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~