android APP 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

智能推荐

centos6/7单用户模式, 自定义boot安装镜像, 模拟微型linux系统_根哥的博客的博客-程序员秘密

文章目录1,centos 6/7但用户模式cent6cent71,centos 6/7但用户模式使用场景: 忘记密码,系统启动异常(网络配置错误,磁盘挂载异常)cent6#centos6(开机bootloader读取配置文件: /etc/grub.cfg)[[email protected] ~]# ll /etc/grub.conf lrwxrwxrwx. 1 root root 22 1月 2 ...

ORACLE中VARCHAR和BLOB之间的相互转换_ymcaptain的博客-程序员秘密_oracle varchar转blob

1、BLOB转VARCHAR函数create or replace Function Blob_To_Varchar (Blob_In In Blob) Return clobIs V_Varchar Varchar2(32767); V_Varchar1 Varchar2(32767); V_Start Pls_Integer := 1; V_Buffer...

等保2.0|网络安全保护解决方案_军哥系统集成号的博客-程序员秘密

图1:等保2.0网络安全等级保护解决方案概述随着2019年5月13日,《信息安全技术网络安全等级保护基本要求》(GB∕T 22239-2019)(以下简称等保2.0)正式发布,我国的网络安全保护标准体系正式进入到等保2.0阶段。“等保2.0”与《中华人民共和国网络安全法》中的相关法律条文保持一致,是指对网络和信息系统按照重要性等级分级别保护的一种工作。保护对象包括基础信息网络(广电网、电信网等)、信息系统(采用传统技术的系统)、云计算平台、大数据平台、移动互联、物联网和工业控制系统等。等..

大学英语二听说文本_weixin_30362801的博客-程序员秘密

网页表格 大学英语听说文本以及答案.rar--------------------说明--------------------------------假设光盘目录为F:// 听力的文本数据库目录:F:\lib\data.mdb打开方式:Access打开密码:natasha包含听力的全部文本,以及对应音频的名字音频所在目录:F:\snd文件名u05_2.1_1n.mp3u05_2.1_1s.mp3...

Shell脚本静默安装数据库Oracle 12c (Centos6)_weixin_34376986的博客-程序员秘密

刚入职不久,主管就叫我用shell脚本部署Oracle数据库,一开始懵的一批,手动安装也搞了很久,皇天不负有心人,哈哈!!!搞了几天终于搞好了,也搞了份脚本安装oracle。(对于经常搭建Oracle数据库,重复步骤做得很烦的盆友可以来看看)Oracle安装脚本:[[email protected] ~]# cat oracle_install.sh#!/bin/bash#insta...

Linux环境下配置DNS服务器_mldl_的博客-程序员秘密_linux设置dns服务器

1、安装# yum -y install bind caching-nameserver//// named.conf//// Provided by Red Hat bind package to configure the ISC BIND named(8) DNS// server as a caching only nameserver (as a localhost DNS resolver only).//// See /usr/share/doc/bind*/sample/ f

随便推点

C++字符类型TCHAR、char和wchar_t_hwlfly的博客-程序员秘密_tchar类型

1、首先,char是8位字符类型,最多只能包含256种字符,许多外文字符集所含的字符数目超过256个,char型无法表示。2、wchar_t是C/C++的字符数据类型,是一种扩展的字符存储方式,wchar_t类型主要用在国际化程序的实现中,但它不等同于unicode编码。unicode编码的字符一般以wchar_t类型存储。3、wchar_t数据类型一般为16位或32位,但不同的C或C

RHCE_POPSTFIX_TItiany的博客-程序员秘密

三种协议:1.POP3POP3是Post Office Protocol 3的简称,即邮局协议的第3个版本,它规定怎样将个人计算机连接到Internet的邮件服务器和下载电子邮件的电子协议。它是因特网电子邮件的第一个离线协议标准,POP3协议允许电子邮件客户端下载服务器上的邮件,但是在客户端的操作(如移动邮件、标记已读等),不会反馈到服务器上,比如通过客户端收取了邮箱中的3封邮件并移动到其他文件夹,邮箱服务器上的这些邮件是没有同时被移动的 。端口:1102.IMAPIMAP全称是Internet M

B/S-软件发展的方向?_socoolfj的博客-程序员秘密

B/S-软件发展的方向?  一、什么是C/S和B/S   第一、什么是C/S结构。C/S (Client/Server)结构,即大家熟知的客户机和服务器结构。它是软件系统体系结构,通过它可以充分利用两端硬件环境的优势,将任务合理分配到Client端和Server端来实现,降低了系统的通讯开销。目前大多数应用软件系统都是Client/Server形式的两层结构,由于现在的软件应用系统正在向分布式的W

云计算框架下基于信用的调度算法分析_zc_ft的博客-程序员秘密

整个程序是在Cloudsim3.0的框架下进行仿真的。

详解sprintf()&sprintf_s()_m0_37346206的博客-程序员秘密_sprintf_s

sprintf函数功能:把格式化的数据写入某个字符串头文件:stdio.h函数原型:int sprintf( char *buffer, const char *format [, argument] … );返回值:字符串长度(strlen)在将各种类型的数据构造成字符串时,sprintf 的功能很强大。sprintf 与printf 在用法上几乎一样,只是打印的目的地不同...

推荐文章

热门文章

相关标签