App UI设计注意

原文地址：http://www.uipsd.cn/?p=3215

众所周知，对追求高还原的移动APP产品来说，移动APP设计稿上的精确尺寸标记是必不可少的的一步。很多设计师都抱怨APP程序员做的效果太差，跟设计图相差太多，你有没有提供最规范的Android APP界面标注尺寸呢？有没有提供设计师的UI设计规范给程序员呢？

其实，作为一名移动APP设计师，这些我们都应该在于Android程序员沟通好的基础上，尽最大的努力为他们提供最全的设计规范和设计标注、测量等信息。

下面是某安卓设计师的实践和工作总结。值得参考，也可以说是设计 Android APP的最佳实践：

1. 画布大小定位 720 x 1280，72 dpi

2. 只使用偶数单位的尺寸，比如 96 px 的列表项高度，16 px 的边距，64 px 的图标边长

3. 只使用 24 pt，28 pt，36 pt 和 44 pt 的字体

4. 设计完成以后，所有尺寸的 px 值除以 2 作为 dp 数值交给工程师

5. 所有字体的 pt 值除以 2 作为 sp 数值交给工程师

6. 所有切图变成三份，分别是原始大小、缩小 1.5 倍，缩小 2 倍，分别作为 xhdpi，hdpi，mdpi 的资源交给工程师

具体的如下图：

下面是一些解答你疑问的安卓术语啦！

为什么要选择720*1280来作为设计稿，而且分辨率设置为72

因为 320 dpi 屏幕的分辨率最常见的是 720 x 1280，以这个尺寸作为画布尺寸，是最带感的，这样的设计稿就和应用在最多数的 320 dpi 的机器上运行起来的样子一样。

而且挑密度最大的，因为图片缩小比放大好，放大会失真，选 320 dpi 作为目标屏幕，为其他屏幕提供图片时，只需要缩小。

72 dpi 是 Photoshop 的默认设置，不要改就好，这个数字和后面的换算有关系。

Android 4.0 以后的设计规范中建议只使用四种字号，分别是 12 sp，14 sp，18 sp 和 22 sp，这也是 Android framework 用到的全部字号。

下面25学堂根据前辈的一些经验，分享2个安卓字体的换算方式：

有两种算法：

算法一

根据 dp 的定义「在 160 dpi 的屏幕上，1 dp 大约等于 1 px」，那么在 320 dpi 的屏幕上，1 dp 约等于 2 px，我们就是为 320 dpi 做的设计，所有 px 值除以 2 就是 dp 值。字体略复杂一点，1 pt = 1 / 72 inch，即在 72 dpi 的画布上，1 pt = 1 px，我们的画布就是 72 dpi，又有 1 sp 约等于 2 px（同 dp 的定义），所以 1 sp = 2 pt，所有 pt 值除以 2 就是 sp 值。

算法二

可以想象是把一个 320 dpi 的手机屏幕放大到了 Photoshop 里，放大倍数是 320 / 72，即手机上的 1 dp，在画布上就是 320 / 72 dp，而 1 dp = 1 / 160 inch，所以在画布上就是 2 / 72 inch，而画布是 72 dpi，所以在画布上就是 2 px，即手机上的 1 dp 对应画布上的 2 px。字体的计算一样，只是多一个在 72 dpi 上，1 pt = 1 px 的转换。

至此，都算清楚了，在这个画布上，px 到 dp，pt 到 sp 都是除以 2 的关系。

最后，给 320 dpi 做的图片，到 240 dpi，160 dpi 上就要分别缩小 1.5 倍和缩小 2 倍。

第二部分：常用的一些APP标注工具

第一个：马克鳗

App UI设计注意相关推荐

【APP UI 设计模式】（一）APP UI 设计原则和流程
一.基本原则 1.用户体验原则UCD,以用户为中心去设计 2.设计模式是可重用的设计规范实现 3.反模式是糟糕设计的典型,极力避免使用 ...
最意想不到的5个APP UI 设计范例
现如今,智能手机已成为人们生活中不可或缺的一个物件,琳琅满目的手机APP充斥着各大应用市场.对于普通人来说,他们的衣食住行因此而变得简单方便:对设计师们来说,他们则面临更多的机遇和挑战.每位设计师都梦 ...
Android开发详解：第3章《App UI 设计》
第3章:App UI设计 3.1:UI设计的相关概念 3.3:布局管理器 3.4:常用APP UI界面设计 3.1:UI设计的相关概念 View View类在Android中可以理解为视图.它占据屏幕 ...
adobe xd_如何在Adobe XD中创建Finance App UI设计
adobe xd 在本教程中,您将学习如何在Adobe XD中创建财务应用程序设计,以及(更重要的是)如何轻松对其UI的各个部分进行动画处理. 您将在本Adobe XD教程中学到什么如何在Adobe ...
APP UI设计及切图规范--2016
1.概述 1.1 编写目的该文档主要针对移动端开发的视觉设计和开发过程中的工作环节做统一的规划规范,是系统进入UI设计的前置文档. 1.2 读者对象项目实施工作组UI/UE设计人员. 2.色值规范 ...
【设计】近期发现的 APP UI 设计趋势
翻译文章,作者:AppMaster.io https://appmaster.io/blog/top-10-mobile-app-ui-design-ideas-2022 -------------- ...
完整的金融类APP UI设计素材,深度学习临摹
从开屏页到app内部都是统一的风格,干净简洁.元素统一.内容包含了常见的登陆注册页面.个人中心.好友.通知.对话.购票.支付等功能区!采用层次分明的配色使APP内容一目了然,页面简约美观,对用户来说也 ...
博客园客户端UAP开发随笔 -- App UI设计的三大纪律八项注意
前言每一个页面都是这个App的门面,尤其是主页面,看上去干净整洁清爽宜人容易操作,那么你的App就成功了一半.这也反映出了你这个开发团队的基本审美素质和设计理念.如果你不是一个团队,而是一个个人开发 ...
优秀APP UI设计作品可以临摹学习，还没灵感就撞墙吧！
作为UI设计师,我想绝大多数刚入行的设计师朋友临摹出好作品绝对是最有效的途径,临摹是设计师必备的技能,非常锻炼我们对作品的概括能力,掌握了这招,你就可以做到轻松抄出自己的原创好作品!当然这里讲的临摹, ...

App UI设计注意

App UI设计注意相关推荐

最新文章

热门文章