APP设计~剪图那些事

1、考虑适配Android 各种复杂的分辨率，如主流的1280X720、800X480、640X480、480X320、以及各种非主流分辨率。2、.9神器 pn

1、考虑适配Android各种复杂分辨率，如主流1280X720、800X480、640X480、480X320以及各种非主流分辨率。

2.9神器png

3.PNG24+jpg

4.交互控件应不小于最小可操作尺寸：android规范为48dp

5、图片中的视觉元素应尽可能在文档中居中，以便于对齐和注释。

6. 能够用代码实现目标，尽量避免使用图片，如单色色值、渐变、文字、分割线等。

7. 考虑控制的多功能性。

按钮设计

1、实际可以点击的区域要尽可能的大，至少不能小于一根手指的宽度。那么，点击的命中率就应该高，否则就会有一种“点击不灵敏”的感觉，当然这并不是真正的不灵敏。但没有点击操作的区域。（用户可以忽略这些原因，多考虑）。

2、RadioButton和CheckBox至少要有3种状态图片：正常、点击、选中。有时，为了方便起见，您不能只显示两张图片：普通图片和选定图片。这种情况下，点击过程中也会有一种“反应迟缓”的感觉，因为毕竟点击状态下图片是没有变化的。

版式设计

对于整体设计，我们应该尽量考虑易用性和实用性，而不是可用性。我自己的经历是这样的。

1.任何需要响应点击或其他事件的部分都应该尽量与屏幕周围的边框保持一定的距离。如果必须将这部分放在屏幕边缘，最好放大操作区域。因为点击屏幕边缘并不是那么好用（如果设备有保护盖的话，点击屏幕边缘会比较困难），至少我用过的设备都是有边框的，这意味着您可以直接用手点击屏幕边缘。大多数时候都是错过。

2、背景与内容的对比度要适当。有美术基础的人都知道这一点，但是很多时候我们在设计的时候会犯这样的错误。您的设计必须考虑到其使用环境，例如在阳光下。如果对比度不够，在强光环境下使用会比较困难。背景和内容会融为一体，难以区分。

APP设计~剪图那些事

3. 尽可能少使用对话框。特别是网页中的对话框非常多。随着时间的推移，人们已经开始厌恶对话框（至少我是这么认为的）。如果可以以更好的方式提供提示，请尽量避免使用对话框。如果没有，则使用如果不可能的话，建议接口不超过两个。总是弹出对话框的应用程序最终会拒绝用户。

4、界面简单。这有两层意思。一是界面完成的功能非常清晰、简洁，二是类似的操作尽量在一个界面上完成。感觉这两点是冲突的，其实不然。如果确实无法做到界面简单、功能统一，那么最好重新设计。

例如，在用户信息输入功能中，第一界面完成用户名和密码的输入。确认无误后，进入第二个界面设置头像。我个人认为这样的界面太啰嗦了。由于它们的作用都是为了完善用户信息，因此可以将它们设计成界面。这样可以让整个功能更加紧凑，少一个接口，使用起来更加简洁。

5.使用一定的动画。使用动画让界面过渡感觉更柔和、更平易近人。现在有太多功能强大的应用程序。如果您的应用程序需要脱颖而出，它就必须与众不同。有时一些简单的动画会给你的应用程序增添很多色彩。

6、总体布局。我不是专业美工，但看过很多优秀的应用，应该有发言权，哈哈。优秀的应用程序有一些共同点。现在让我们总结一下。无论出于何种考虑，界面中都应该避免左右布局严重不平衡。当然，也有刻意设计的不对称设计。例如，如果界面底栏有两个水平排列的按钮，那么这两个按钮最好整体居中。如果偏左或偏右，就会有左右不平衡的感觉，要么左重右轻，要么左重右轻。左轻右重，看上去有一部分是空的。

7.屏幕适配。 Android开发中最麻烦的问题之一就是屏幕适配问题。硬件制造商太多，屏幕尺寸也太多。一个好的应用程序应该适应尽可能多的屏幕。在UI 设计过程中，您应该考虑UI 应如何适应屏幕变宽、变高、变窄和变短的情况。有一个总体原则。屏幕适配不应改变整体布局。即布局不变，只是拉伸图形（关键是如何拉伸）。屏幕适配其实是需要一点经验的，慢慢体会吧，哈哈。

在切割APP图片之前，需要做好以下6点：

1、与客户的技术进行良好的沟通。当使用不同的框架实现时，图表会以不同的方式进行切割。比如Tabbar应该和背景一起裁剪还是图标单独做透明背景？文字应该放在图片里还是加在最后？

2.有一些小图标式的按钮。您不能只剪切到图标的边缘。相反，你必须考虑到在最终的实现中，图像将被制作成一个按钮来与用户交互。因此，需要留下更多的透明边缘，使可点击的图片在8888以上，这样才能保证用户更容易点击。

3.个人强迫症，能用PNG24就别用PNG32，能用PNG8就别用PNG32。并使用Fireworks来优化尺寸。

4、对于不改变可见图形但需要增加点击区域的图片。然后在切割图像时，建议在可见图形周围添加1像素的透明度。这是为了在不造成可见区域图像失真的情况下放大和拉伸图像。

5、剪切图片的高度。对于通用的背景图像，例如带有圆角和背景的文本，在切割图像时，它并不像渲染中所示的那么高。为了通用性，只需要剪切到一行文本的高度即可。然而，这并不是绝对的。准确的说，剪切高度应该是H=paddingTop+textHeight+paddingBottom，即文本相对于背景的上边距+一行文本的高度+文本相对于背景的下边距。

6、剪切图片的宽度。如果是一般的背景图片，那么它的宽度应该是渲染中的最小宽度，这意味着背景可能会在多个地方使用，所以就取最小的宽度即可。比较麻烦的是，当它覆盖整个屏幕时，你需要检查你制作的效果图的宽屏宽度，所以在制作效果图时，最好制作小屏效果图。

有人可能会问，第9点的图片不能拉伸或者压缩吗？为什么我们需要参考最小宽度？根据个人经验，我发现如果在大图片上点击9且屏幕较小时，图片被拉伸的部分会变暗。