android APP UI设计图标注、换算_安卓ui设计标注-程序员宅基地

技术标签: 尺寸换算  APP设计图标注  尺寸标注  Android  ui设计  


作为一名 Androider,能遇到一个优雅的设计屎也得靠运气。唉,说多了都是泪啊。

狼哥特地贴上一篇关于UI设计的文章,你可以拿去BS你们的设计屎了。


——————————————


众所周知,对追求高还原的移动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标注工具


第二个:苦逼APPUI设计师的标注切图的利器—PxCook

PxCook

虽然25学堂介绍了好几款移动APP的切图工具和标注的工具。

第三个:nice – 标记生活的美好 是一款给图片标注的APP。非常棒,值得体验。

年轻人最爱玩的App!App store多次推荐!图片+标签让你的照片时尚时尚最时尚。

给图片打上标签,标签可以是品牌,地点,人物以及任何你想表达的情绪和想法。用标签表达你的快乐与哀愁。

 

第四个:Sketch.app Measure 标注神器

Sketch.app-Measure-标注神器

这是一款Sketch设计软件的插件,只适合苹果电脑使用。

 

下载地址和安装步骤:

1、https://github.com/utom/sketch-measure 下载最新的版本, 并解压;

2、打开 Sketch.app, Menu (菜单) -> Plugins (插件) -> Reveal Plugins Folder… (显示插件文件夹…);

3、将解压的文件夹复制到 Plugins Folder(插件文件夹)


谢谢CCTV, 谢谢MMTV,谢谢AVTV

啪啪啪.....(巴巴掌,别想多了)




版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lijunhuayc/article/details/48440273

智能推荐

【小李木耳】出品:一直舍不得丢掉的东西:“一(个)白云、三(个)兔子...” 和“...早日发账”-程序员宅基地

文章浏览阅读841次。 什么是虚拟化3.0时代? 微软公司的云计算服务有哪些? 云计算IDC服务都包括什么? 什么是云计算? 向私有云过渡的步骤有哪些?一直舍不得丢掉的东西:“一(个)白云、三(个)兔子...” 和“...早日发账”(写于2011年12月10日00:17 北京)今天这个话题比较有感觉,就晒一晒我舍不得的两件东西:“一(个)白云、三(个)兔子...” 和“

Unity_用鼠标控制相机旋转、拖拽、视角缩放_unity 相机 平移 拖拽 缩放-程序员宅基地

文章浏览阅读2w次,点赞17次,收藏97次。一、滚轮控制视角缩放 /// <summary> /// 滚轮控制相机视角缩放 /// </summary> public void CameraFOV() { //获取鼠标滚轮的滑动量 float wheel = Input.GetAxis("Mouse ScrollWheel&am_unity 相机 平移 拖拽 缩放

精选力扣500题 第22题 LeetCode 88. 合并两个有序数组【c++详细题解】_力扣22 c++-程序员宅基地

文章浏览阅读280次,点赞6次,收藏4次。目录1、题目2、思路13、代码14、思路25、代码21、题目给你两个有序整数数组 nums1 和 nums2,请你将 nums2 合并到 nums1中,使 nums1 成为一个有序数组。初始化 nums1 和 nums2的元素数量分别为 m 和n。你可以假设 nums1 的空间大小等于 m + n,这样它就有足够的空间保存来自 nums2的元素。示例 1:输入:nums1 = [1,2,3,0,0,0], m = 3, nums2 = [2,5,6], n = 3输出:[1,2,2,3,5,6]_力扣22 c++

php文本框怎么设置好看,一个很不错的CSS改写的大表单文本框和搜索按钮组-程序员宅基地

文章浏览阅读139次。《一个很不错的CSS改写的大表单文本框和搜索按钮组》要点:本文介绍了一个很不错的CSS改写的大表单文本框和搜索按钮组,希望对您有用。如果有疑问,可以联系我们。先看效果图:HTML代码部分:开始爬取CSS部分:/*大搜索框*/.searchInputBox{height:62px;width:810px;margin:0auto;border-radius:6px;background-..._css 好看 文本框

select下拉框启用和禁止-程序员宅基地

文章浏览阅读3.4k次。描述:通过你好来判断hello是否启用和禁止html:<li> <span class="xin">*</span><label>你好</label> <select id="dimAcc"> <option >类似</option> ..._select下拉框启用和禁止

【前端面试--JS】=>关于async/await、promise和setTimeout的执行顺序_js执行顺序console.log('script start') async function a-程序员宅基地

文章浏览阅读988次,点赞29次,收藏21次。前言之前面试遇到这样一个题目。关于async/await、promise和setTimeout的执行顺序,当时没做对。后来查了查是非常经典的题目。也给大家解疑答惑一下,说出自己的理解。题目是看代码写结果。async function async1() { console.log('async1 start'); await async2(); console.log('asnyc1 end');}async function async2() { console.log('async2_js执行顺序console.log('script start') async function async1() { await async2

随便推点

Vue笔记整理,12.项目-完成tabbar的小图标设置_tab-bar设置图标-程序员宅基地

文章浏览阅读912次。一、前言上一节我们介绍了:vs code工具的一些特殊使用,使用vs code默认集成的Git工具快速提交代码,详细可参考博文:原创Vue笔记整理,11.项目-使用vs code默认集成的Git工具快速提交代码这篇我们将介绍项目-完成tabbar的小图标设置二、完成tabbar的小图标设置更新中。。。..._tab-bar设置图标

D4 - Makefile_d4文件-程序员宅基地

文章浏览阅读109次。第一节 Make与MakefileMake简介Make将只编译改动的代码文件,而不用完全编译Make使用Makefile1:Make只能读取Makefile文件2:Makefile功能包含’由谁生成’可执行文件,‘怎么生成可执行文件’.‘生成什么可执行文件’Makefile格式生成什么:由谁生成 <table> commandMakefile隐含规则第二节 创建与使用变量Make变量(变量必须大写)去""的字符串Make变量为了便_d4文件

Android MVVM(使用经验篇)-程序员宅基地

文章浏览阅读702次。MVVM的大名相信做手机开发的肯定不会陌生,我第一次听到它是从做IOS开发的同学那里听到的,我们的项目之前应用了MVP,要说服大家从MVP到MVVM,肯定得说说为啥,他优秀在那里? 首先我们看看正常MVP的依赖关系图: 这是个经典的MVP依赖关系,View 层和Presenter,Presenter和Model层彼此依..._android mvvm image src

postgresql 日志配置_pg修改log_connections-程序员宅基地

文章浏览阅读4.8k次。PostgreSQL有3种日志,分别是pg_log(数据库运行日志)、pg_xlog(WAL 日志,即重做日志)、pg_clog(事务提交日志,记录的是事务的元数据)pg_log默认是关闭的,需要设置参数启用此日志。pg_xlog和pg_clog都是强制打开的,无法关闭。1.启用pg_log并配置日志参数log_destination = 'csvlog'logging_collector = o..._pg修改log_connections

php逆波兰表达式,我就给一个PHP逆波兰表达式的算法吧---工资计算专用-程序员宅基地

文章浏览阅读62次。有个网友写信给我谈到关于PHP计算工资问题。我以前一篇文章中谈到过一种计算工资的方法,不过是偷巧,利用现有的表达式的工具,现在既然有人想要,我就给出一个逆波兰的算法。 我们的目标是实现如下的计算公式: 假设有一个计算公式如下: $expression = "(F1*F12+10.34)"; 其中的变量值如下: $expression_value = Array('F1'=>10, 'F12'..._php 逆波兰算法 函数

模板类之间的友元关系实现Blob和BlobPtr-程序员宅基地

文章浏览阅读57次。16.12编写你自己版本的Blob和BlobPtr模板,包含书中未定义的多个const成员。Blob.h(注意,成员函数的声明和定义要放在一个头文件中)/*记住,模板的头文件中通常既包括声明也包括定义。函数模板和类模板成员函数的定义通常放在头文件中,不能分开放。。。。谨记*/#ifndef BLOB_H#define BLOB_H#include<iostream&g..._blobptr