1. 兔课网
  2. 资讯
  3. 平面设计教程
  4. APP设计~切图那些事儿

APP设计~切图那些事儿

3285人阅读 2020-05-14 收藏

APP设计~切图那些事儿

APP切图基本知识点以及注意事项

1.考虑采用安卓的各种复杂分辨率,如主流1280X720、800X480、640X480、480X320和各种非主流分辨率。

2 . 9伪影png

3、PNG24 jpg

APP设计~切图那些事儿

4.互动控件不得小于最小可操作尺寸:安卓规格为48dp

5.图片中的视觉元素应尽可能在文件中居中,以便于对齐和标记。

6.尽可能使用代码来避免使用图表,如单色值、渐变、字符、分隔线等。

7.考虑控制的普遍性。

总之,切割是一项技术性的工作。因此,小伙伴千万不要忽视切托的魅力!

APP设计~切图那些事儿

按钮的设计

1.你能真正点击的区域应该尽可能大,至少不小于一个手指的宽度。在这种情况下,命中率更高。否则,你会觉得“点击不敏感”。当然,它不是真的不敏感,而是没有点击操作的区域。(不管这些原因如何,用户都可以为用户考虑更多)。

2.对于单选按钮和复选框,至少应绘制3个状态图:正常、单击和选定。有时只画两幅画是不方便的:普通画和精选画。这种情况在点击过程中也有“反应慢”的感觉,因为毕竟在点击状态下没有地图变化。

APP设计~切图那些事儿

排版的设计

对整个设计来说,我们应该尽力考虑易用性和实用性,而不是有用性。我自己的经验是这样的。

1.对点击或其他事件做出响应的任何部分都应尽可能远离屏幕周围的边界。如果你必须把这部分放在屏幕的边缘,你最好放大操作区域。因为点击屏幕边缘不是那么容易使用的(如果设备配有保护罩,在屏幕边缘会非常困难),至少我使用过有边框的设备,也就是说,用手直接点击屏幕边缘是很容易错过的。

APP设计~切图那些事儿

2.背景和内容之间的对比必须适当。作为一名艺术家,每个人都知道这一点,但他在设计时经常犯这样的错误。你的设计必须考虑使用环境,如在阳光下。如果对比度不够,在强光环境下效果不好,背景和内容会融合在一起,很难区分。

APP设计~切图那些事儿

3.使用尽可能少的对话框。特别是,网页中有许多对话框。随着时间的推移,人们也变得厌恶对话框(至少我这么认为)。如果你能以更好的方式提示,尽量避免使用对话框。如果必须使用它们,那么建议不要超过两个接口。是用户一直在播放对话框。

APP设计~切图那些事儿

4.界面很简单。这有两个意思。一是界面的功能清晰简洁。另一个是尽可能在一个界面上完成类似的操作。我觉得这两点之间有冲突。事实上,它不是。如果界面不简单,功能统一,那么设计最好回到设计和设计

APP设计~切图那些事儿

例如,在用户信息输入功能中,第一界面完成用户名输入和密码输入,确认后,用户进入第二界面设置头像。拥有这种界面的人认为他们太罗嗦了。由于它们都完成了用户信息的功能,它们可以完全设计成一个界面。这样,整个功能可以变得更加紧凑,并且使用更少的一个接口更简单。

APP设计~切图那些事儿

5.使用特定的动画。动画在界面过渡中的使用让人们感觉更柔和、更亲近。现在有太多的应用程序,它们非常强大。你的应用程序需要从人群中脱颖而出,所以它必须与众不同。有时候一些简单的动画会给你的应用程序增加色彩。

APP设计~切图那些事儿

6.总体布局。我不是专业的艺术家,但我见过许多优秀的应用,所以我应该有发言权。优秀的应用程序有一些共同点。现在让我们总结一下。不管是什么原因,界面应该避免左右布局的严重失衡,当然,也有有意将设计变成不对称的美女。例如,在界面的底部列中,有两个水平排列的按钮,因此这两个按钮应该整体居中。如果他们是左或右,会有一种左右失衡的感觉,不是左重右轻,就是左轻右重,有些人看起来很空虚。

APP设计~切图那些事儿

7.屏幕适应。安卓开发中最棘手的问题之一是屏幕适应问题。硬件制造商太多,屏幕尺寸太大。一个好的应用程序应该适合尽可能多的屏幕。在用户界面的过程中,设计,应该考虑在屏幕加宽、增大、缩小和缩短的过程中用户界面应该如何适应。总的来说,有一个原则,即屏幕的适应不改变整体布局,即布局是一样的,只是拉伸图形(关键是如何拉伸)。屏幕适应实际上是一些经验,慢慢理解吧,呵呵。

APP设计~切图那些事儿

在进行APP切图的前,需要做以下6点:

1.与客户良好的技术沟通。当不同的框架用于实现时,图表将有不同的切割方法。例如,Tabbar是将背景剪切在一起还是使图标透明,以及文本是放在图片中还是添加在图片之后。

2.有一些小图标按钮,它们不能被剪切到图标的边缘,但是应该通过将图片制作成按钮并与用户交互来实现。因此,有必要留下更多的透明边缘,使可点击的图片可以超过8888,这样用户可以保证更好的效果。

APP设计~切图那些事儿

3、个人强迫症,如果你能使用PNG24你就不需要PNG32,如果你能使用PNG8你就不需要PNG32。并使用烟花来优化大小。

4.对于不改变可见图形但需要扩大点击面积的图形。然后,建议在切割图形时,在可见图形周围增加1个像素的透明度,即在不扭曲可见区域图像的情况下放大和拉伸。

APP设计~切图那些事儿

5.切割图的高度。对于一般的背景图像,如文本圆形边框背景,在剪切图像时,没有必要剪切得和效果图像一样高,而只需要剪切一行文本的高度即可。然而,这也不是绝对的。准确地说,高度h=填充顶部文本高度填充底部,以及文本相对于背景的高度、文本行的高度和文本相对于背景的底部边距。

APP设计~切图那些事儿

6.剪切图的宽度。如果它是一般的背景图像,那么它的宽度应该是效果图像中的最小宽度,也就是说,如果背景可以在许多地方使用,最小宽度是足够的。问题是,当全屏铺砌时,它需要查看您制作的渲染的宽屏宽度,所以制作渲染时最好是制作小屏幕的渲染。

APP设计~切图那些事儿

有些人可能会问,第9点的图形是不是可以拉伸和收缩,为什么你需要提到最小宽度?根据个人经验,当屏幕对于大图片来说很小时,图片的拉伸部分会变得更暗。推荐阅读:界面设计!的极简主义原则

APP设计~切图那些事儿

相关文章推荐

质感人像,利用中性灰和PS工具制作出质感人像照片
倒影效果,给风景照做水中倒影效果教程
磨皮教程,双曲线磨皮视频教程
色彩的"性格"!五颜六色、各具特色
汉字字"形"的结构与重构!
Illustrator绘制设计创建巧克力文字
怎么样学习平面设计?,学习平面设计如何入门?
运用Photoshop调整图层调出MM照片粉嫩色系
文字设计,通过PS设计炫酷故障效果文字海报
溶图教程,拿杨颖的照片来讲解PS溶图技巧

特别推荐

上一篇>> 海报设计的创意表达!

下一篇>> 提升销量的包装策略!

新人大礼包

1
咨询客服

交流Q群

微信公众号
返回顶部