从零开始设计一款APP之Android设计规范篇

2023-05-16

一. 基础概念

1. 什么是DPI?

DPI(Dots Per Inch):每英寸点数,表示指屏幕密度。是测量空间点密度的单位,最初应用于打印技术中,它表示每英寸能打印上的墨滴数量。较小的DPI会产生不清晰的图片。

后来DPI的概念也被应用到了计算机屏幕上,计算机屏幕一般采用PPI(Pixels Per Inch)来表示一英寸屏幕上显示的像素点的数量,现在DPI也被引入。
在这里插入图片描述
安装Windows操作系统的电脑屏幕PPI的初始值是96,Mac的初始值是72,虽然这个值从80年代起就不是很准确了。 一般来说,非retina桌面(包括Mac)的PPI的取值区间在72-120之间,因为这个取值区间能够确保你的作品在任何地方都能保持大致相同的比例。

这里有一个应用实例: 27寸Mac影院显示屏的PPI是109,这表示在每英寸的屏幕上显示了109个像素点。斜角长是25.7英寸(65cm),实际屏幕的宽度大概是23.5英寸,23.5109约等于2560,因此原始屏幕分辨率就是2560x1440px。在这里插入图片描述

  • 屏幕密度计算公式:
    在这里插入图片描述
  • 1080x1920px屏幕密度:
    在这里插入图片描述

2. 什么是PPI?

PPI(Pixels Per Inch):图像分辨率;是每英寸图像内有多少个像素点,分辨率的单位为ppi,通常叫做像素每英寸。图像分辨率一般被用于ps中,用来改变图像的清晰度。在这里插入图片描述

二. Android界面设计规范

1. Android各设备屏幕密度

安卓尺寸众多,按每个屏幕去适配肯定是不现实的。

所以为了解决这个问题,安卓手机屏幕有自己初始的固定密度,安卓会根据这些屏幕不同的密度自己进行适配。这一点内容掌握到能满足自己设计工作需要就可以了……

以下是Android的密度划分以及代表的分辨率,这里你可以发现已经和设计稿尺寸和切图输出开始挂钩了。

  • 安卓各屏幕密度
    在这里插入图片描述
    U妹来带大家了解一下iPhone各设备的手机屏幕密度:

iphone 4/4S/5/5S/SE/6/7≈320DPI

2. Android开发单位DP和SP

**DP:**安卓专用长度单位。以160 DPI屏幕为标注,则1DP=1PX
计算公式:dp x dpi/160=px
例:以720x1280px (320dpi)为例计算 1dp x 320 dpi/=2px

**SP:**安卓专用字体单位。以160 DPI屏幕为标注,则1SP=1PX
计算公式:sp x dpi/160=px
例:以720x1280px (320dpi)为例计算 1sp x 320 dpi/=2px

3. 设计稿尺寸

从目前市场主流设备尺寸来看,我们要用1080 x 1920 PX 来做安卓设计稿尺寸。

在这里插入图片描述
以1080x1920px作为设计稿标准尺寸的原由:
① 从中间尺寸向上和向下适配的时候界面调整的幅度最小,最方便适配。
② 大屏幕时代依然以小尺寸作为设计尺寸,会限制设计师的设计视角。
③ 用主流尺寸来做设计稿尺寸,极大的提高了视觉还原和其他机型适配。
所以做安卓设计稿时请以1080x1920px来做设计稿
(sketch用户以540 x 960来做设计稿)
在这里插入图片描述
在这里插入图片描述

  • 界面设计控件尺寸:
    在这里插入图片描述

4. 安卓图标尺寸

在这里插入图片描述

安卓的图标相对iOS来说较少,我们只需提供以下几个尺寸就可以了,但是需要提高2套,圆角和直角各一套,因为有的地方都会用到。

512x512px、192x192px、144x144px、96x96px、72x72px、48x48px
在这里插入图片描述

因为安卓有很多的机型,不同屏幕密度的手机对应的icon大小也是不同的,所以U妹这里没法给你给出相应的icon所被应用的位置。

5. 安卓设计字体

英文字体为 Roboto字体,中文字体为 思源黑体。在Android 5.0之后,使用的是思源黑体,字体文件有2个名称,“source han sans”和“noto sans CJK”。
在这里插入图片描述
思源黑体是Adobe和Google领导开发的开源字体,支持繁简日韩,有7种字体粗细。

思源黑体字体下载地址,请戳这里:《免费下载!谷歌携手ADOBE推出超好看的的思源宋体(7种字重)》

6. 常见主流手机尺寸和分辨率

在这里插入图片描述

三. Android切图标注

1. 标注设计稿时,使用px还是dp或sp?

答:这个问题需要和安卓工程师沟通,推荐使用dp和sp进行标注(这里指的是在安卓设计稿的前提下)。但目前很多设计师对dp和sp这个单位并不理解,所以有些设计师提供安卓设计稿的时候依旧使用px进行标注,这一点去和你的搭档工程师进行沟通,如果不影响他开发以及他能换算清楚的前提下,你可以考虑使用Px,但是我并不推荐。
在这里插入图片描述
这里要记住一点(你只需要记住能帮助你工作就可以):

  • 当屏幕密度为MDPI(160DPI)时,1dp=1px
  • 当屏幕密度为MDPI(160DPI)时,1sp=1px

像素字号=屏幕密度/160 * sp字号 可以根据这个去算算设计稿中的像素字号标注为sp是多少,比如xHDPI下,36px的字标注为sp就是18sp,以此类推。

按照不同的屏幕密度换算,也就是下图所示的意思:
在这里插入图片描述

2. 你需要提供几套切图资源?

答:理论状态下,如果你想兼顾到目前还存在的各个机型,应该为不同的密度提供不同尺寸大小的切图。

但这无疑提升了巨大的工作量,而且还可能浪费很大的资源空间,实际上,很多机型已经不占有主流市场了,而且很多奇葩的分辨率也没必要去考虑适配,所以,具体输出几套需要看公司的产品需求而定。

通常我是这么干的:
在这里插入图片描述
选取最大尺寸提供一套切图资源,交给开发工程师处理,适配到各个屏幕密度。

这里要注意,这个“最大尺寸”,指的并不是目前市面上Android手机出现过的最大尺寸,而是指目前流行的主流机型中的最大尺寸,这样可节省很大的资源空间。关于最大尺寸选取多少,你需要和你们的安卓工程师沟通,每个安卓工程师对这个问题的结论并不同。(我的安卓搭档,让我提供XXHDPI的切图资源就好,我用的切图工具是Cutterman,切图一键搞定)

3. Android的切图资源提供哪个尺寸给开发哥哥?

答:iOS的切图有@2x,@3x之分,那么Android的切图根据dpi的不同,其实和iOS的类似,只不过是按照dpi来进行资源文件夹的命名,如下图:在这里插入图片描述
根据不同的分辨率进行切图归类,但是你看到了,如果切片特别多,提供5套切图岂不是要累死了?

一般情况下,我们只需要提供3套切图资源就可以满足安卓工程师的适配,分别是HDPI、XHDPI、 XXHDPI 3套切图资源。在这里插入图片描述
目前我使用的办法就是只提供最大尺寸的切图,交给安卓工程师自己去缩放适配其他分辨率吧,所以和你的搭档沟通一下。

其实现在绝大多数公司限于人力物力的限制,没有这么严格的工作方式,基本上就是一个文件夹,命名好了就提供给工程师了。
在这里插入图片描述
这里还是提醒各位,没有固定的工作方式和方法,任何方式都是为了提升工作效率而进行的。

4. 在做设计稿时我们遇到的最多问题

① 用哪种尺寸做设计稿?

  • iOS:用750x1334px来做设计稿。
  • 安卓:就目前的市场来看,XXHDPI属于主流机型;这样无论是标注,还是主流机型都能兼顾的到,所以推荐使用1080x1920px来做设计稿尺寸,这样即使你标注的是px,工程师也可以很方便的进行换算。在这里插入图片描述

② 如何用iOS的设计稿去适配安卓(划重点啦)

现在有一种情况现在非常普遍,那就是一稿两用;设计师都是做iOS版本的设计稿,来适配安卓,现在要给安卓用,应该怎么办?

iPhone的屏幕密度已经达到xHDPI了,用750x1334px的尺寸做设计稿。

实际上,750×1334的@3x的切图资源正好是安卓XXhdpi(1080x1920px)的切图资源;安卓开发用iOS的设计稿自己进行换算就可以了,前提是你必须和安卓工程师沟通。
在这里插入图片描述
另一种情况:你可以把750×1334的设计稿等比例调整尺寸到安卓1080×1920尺寸下,对各个控件进行微调,重新提供标注(用dp标注)。也就是说,你需要提供两套标注,一套给iOS的标注,一套给Android的标注。

③ 大家可能还有一个问题,那就是我用cutterman切安卓图片输出的有drawable和mipmap 2个文件夹,到底将哪个给开发工程师呢?
在这里插入图片描述
答:以前用的开发工具,是只有drawable, 没有mipmap的,后来新的开发工具里面才有mipmap这个文件夹,专门用来放png格式的图片的,不过drawable里面还是可以放png图片。

所以现在我们给安卓工程师的切图输出文件只需给mipmap-前缀开头的就好。

四. Android开发单位换算

1. 安卓机型各种尺寸下的PX与DP、SP的对应关系

在这里插入图片描述

2. 字体单位SP与PX的对应关系

在这里插入图片描述

3. 距离单位DP与PX的对应关系

在这里插入图片描述

五. 总结

这里说的只是一种工作方法,好的工作方法才能自己事半功倍,在具体工作中也要灵活应用,一定要多和开发沟通交流,良好的沟通才是解决问题的唯一方法。

往期回顾:

《从零开始做APP 系列之项目立项+预估时间篇》
《从零开始做APP 系列之界面设计篇》
《UI实战教程!从零开始做APP 系列之切图标注篇》
《UI实战教程!做设计稿前应该做哪些准备工作?》
《从零开始设计一款APP之视觉还原+上线准备》

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从零开始设计一款APP之Android设计规范篇 的相关文章

  • ACTION_VIEW 的 Intent.createChooser 仅显示默认浏览器

    我正在尝试使用 Intent createChooser 显示应用程序选择器对话框 该对话框将列出用户手机中所有可用的网络浏览器 我正在使用下面的代码 Intent browserIntent new Intent Intent ACTIO
  • Android - 如何访问 onResume 中 onCreate 中实例化的 View 对象?

    In my onCreate 方法 我正在实例化一个ImageButton View public void onCreate Bundle savedInstanceState super onCreate savedInstanceSt
  • 合并两个位图图像(并排)

    任何人都可以帮助将两个位图图像合并为单个位图 在android中 并排 谢谢 尤瓦拉吉 您可以使用Canvas 查看这篇文章 http www jondev net articles Combining 2 Images in Androi
  • android 谷歌+登录定制

    我正在创建一个 Android 应用程序 现在我正在实现社交网络登录 Facebook 按钮很好 但 google 按钮的语言与 Facebook 不同 另外 它只说 登录 我想让它说 用谷歌登录 我是 android 编程的新手 看到我需
  • Mailgun POST /messages API 总是抛出 401 禁止

    我正在尝试使用改造库在 Android 中发送 Mailgun POST messages API 请求 以下是改装要求 HTTP POSThttps api key xxx v3 sandboxxxx messages https api
  • 如何在照片删除后刷新 Android 的 MediaStore

    问题 如何使媒体存储刷新其已删除文件的条目 从外部存储中删除代码中的照片后 我仍然在图库中看到已删除照片的插槽 空白照片 画廊似乎反映了媒体存储 并且在媒体存储中找到了已删除的照片 直到手机重新启动或通常 直到重新扫描媒体为止 尝试扫描已删
  • 如何将单选按钮状态保存到已保存/共享首选项?

    我可以在保存的首选项中保存字符串 但很难保存单选按钮 public class PersonalDetailsf extends Activity private SharedPreferences sharedPreferences pr
  • Locale.getDefault().getCountry() 返回空字符串

    我正在尝试使用国家 地区代码获取用户语言 例如en US es es 但是当我使用Locale getDefault getCountry 它返回空字符串 虽然它给了我正确的语言Locale getDefault getLanguage N
  • invalidateOptionsMenu 在片段中不起作用

    显示或隐藏项目ActionBar根据文本中是否有文本EditText or not 所以 我做了以下事情 public class NounSearch extends android app Fragment EditText seach
  • 我们可以在 android studio 中拥有没有 app 文件夹的项目,并将所有内容(java/res/etc)放在根目录中吗

    我想知道在 Android studio 中是否可以有没有应用程序模块 应用程序或任何其他名称 的 android 项目 意味着我可以在项目本身的根目录中创建包和资源 而不是使用应用程序模块 编辑 结构看起来像 MyApp idea gra
  • Facebook LoginActivity 未正确显示

    我有一个使用 Facebook 登录的应用程序 我有 FacebookSDK 并且使用 com facebook LoginActivity 问题是 在 10 英寸平板电脑上 当显示软键盘时 活动无法正确显示 我使用的是 Samsung G
  • 有没有办法在Android上创建一个三角形按钮?

    有没有办法创建一个三角形的按钮 我知道我可以将三角形图像作为背景 但这将使三角形之外的区域可单击 有没有办法固定按钮角 X 和 Y 以便我可以将其变成三角形 您可以覆盖OnTouch http developer android com r
  • onTouchEvent()中如何区分移动和点击?

    在我的应用程序中 我需要处理移动和单击事件 一次点击是由一个 ACTION DOWN 操作 多个 ACTION MOVE 操作和一个 ACTION UP 操作组成的序列 理论上 如果您收到 ACTION DOWN 事件 然后收到 ACTIO
  • 如何在android中录制音频时暂停背景音乐

    我正在 Android 中开发一个音频记录应用程序 因此 如果设备音乐播放器中已播放任何背景音乐 则应在开始录制之前暂停该背景音乐 并且每当录制停止或暂停时 背景音乐都应恢复 播放录制的音频时也应该如此 有人可以帮我解决这个问题吗 提前致谢
  • 带有空白白屏的 WebView

    我在 DialogFragment 中有一个 webview 它使用以下方式显示文档和 PDF它可以进行几次尝试 但如果用户尝试频繁打开和关闭对话框 webview 将显示空白屏幕 我已经尝试了所有的线程link1 https stacko
  • Android:单一活动,多个视图

    我不是 Android 专业人士 尽管我开发了一个包含 50 多个活动的应用程序 这使得该应用程序非常庞大 经过8周的开发 现在出现了一些问题 导致应用程序难以维护和升级 我正在处理的主要问题是 我无法将对象引用传递给活动的构造函数 事实上
  • Google Android Drive api 在已安装版本上登录失败

    我开发了一个使用 GoogleDrive api 的 Android 应用程序 当处于调试状态或运行调试版本时 应用程序 工作正常 并正确验证附加的谷歌帐户 等 当我构建发行版本时 使用我的签名密钥 并且 安装apk文件 当我运行时 Goo
  • 使用支持库中的 BottomSheet 时如何调暗背景?

    怎样才能让背景像显示的那样变暗here https material design storage googleapis com publish material v 8 material ext publish 0Bzhp5Z4wHba3
  • 在 Android 中更新到 API 26 时,清单合并失败并出现多个错误

    我尝试使用 API 26 更新我的 gradle 安卓工作室2 3 3 但我在编译项目时遇到以下错误 这是我收到的错误的屏幕截图 应用级别build gradle Top level build file where you can add
  • 绘制大位图时 nSyncAndDrawFrame 速度极慢

    我想用多个大位图优化视差滚动视图 在我的 Nexus 5 上 一切都很顺利 Traceview 转储如下所示 doFrame 方法大约需要 18 毫秒才能完成 但是 当使用我的 Nexus 7 或 Android 6 模拟器 Genymot

随机推荐

  • 运行x程序出现:Can't open display 原因及其解决方法

    因为Xserver默认情况下不允许别的用户的图形程序的图形显示在当前屏幕上 如果需要别的用户的图形显示在当前屏幕上 则应以当前登陆的用户 也就是切换身份前的用户执行如下命令 xhost 43 xhost 43 的作用 xhost 是用来控制
  • ORACLE数据库管理员的职责

    ORACLE数据库管理员的职责 一 xff0e 概述 ORACLE数据库管理员应按如下方式对ORACLE数据库系统做定期监控 xff1a 1 每天对ORACLE数据库的运行状态 xff0c 日志文件 xff0c 备份情况 xff0c 数据库
  • 实用webpack插件之ProvidePlugin

    现代化前端的全局引入是一个很有趣的东西 先来看下以下几个场景 xff1a 在webpack中 xff0c 我们可以在resolve的alias中定义一个层级较高的目录为一个自定义变量 例如resolve alias 64 path join
  • Conda&&Pip 使用

    提示 xff1a 文章写完后 xff0c 目录可以自动生成 xff0c 如何生成可参考右边的帮助文档 目录 一 conda 配置环境 1 查看conda版本 2 升级conda版本 3 修改conda下载源渠道 4 conda删除追加的下载
  • IDEA2022.1创建maven项目,规避idea2022新建maven项目卡死,无反应问题

    idea 2022的新建项目和旧的不一样 选择maven archetype 输入 name xff08 项目名称 xff09 location xff08 项目文件路径 xff09 jdk 1 8 catalog xff1a 目录 xff
  • tightvnc绿色版,细数4款超好用的tightvnc绿色版

    在使用tightvnc软件时 xff0c 通常都希望能找到绿色版软件 xff0c 那大家知道有哪些tightvnc绿色版软件吗 xff1f 你所使用过的tightvnc绿色版软件又有哪些呢 xff1f 接下来让我们一起来看看那些超好用的ti
  • 修改 FTP 文件夹 权限 Linux

    cd 到根目录 1 例如FTP服务器根目录是aliRoot cd aliRoot 2 指定一个文件夹修改权限 xff1b 命令 xff1a chmod R 777 goodlist 现在 aliRoot goodlist 文件夹下就可以上传
  • Linux命令大全: mkdir命令 - 创建目录

    1 详解 mkdir命令是 make directories 的缩写 xff0c 用来创建目录 注意 xff1a 默认状态下 xff0c 如果要创建的目录已经存在 xff0c 则提示已存在 xff0c 而不会继续创建目录 所以在创建目录时
  • shell基础教程25: Shell字符串截取(最详细的教程,看完这篇可以弄懂整个原理)

    Shell 截取字符串通常有两种方式 xff1a 从指定位置开始截取和从指定字符 xff08 子字符串 xff09 开始截取 一 从指定位置开始截取 这种方式需要两个参数 xff1a 除了指定起始位置 xff0c 还需要截取长度 xff0c
  • Linux命令大全: nohup命令 – 后端运行程序

    nohup命令的全称为 no hang up xff0c 该命令可以将程序以忽略挂起信号的方式运行起来 xff0c 被运行的程序的输出信息将不会显示到终端 无论是否将 nohup 命令的输出重定向到终端 xff0c 输出都将附加到当前目录的
  • Linux命令大全: cat命令 – 在终端设备上显示文件内容

    1 详情 Linux系统中有很多个用于查看文件内容的命令 xff0c 每个命令又都有自己的特点 xff0c 比如这个cat命令就是用于查看内容较少的纯文本文件的 cat这个命令也很好记 xff0c 因为cat在英语中是 猫 的意思 xff0
  • Nginx安装报错:./configure: error: the HTTP gzip module requires the zlib library.

    错误信息 span class token punctuation span span class token operator span configure error the HTTP gzip module requires the
  • Nginx安装时:安装zlib1g-dev时提示“E: 无法定位软件包 zliblg-dev“的原因

    起因 安装zlig1g dev 依赖包时 xff1a sudo apt get install zliblg dev安装失败 发现 zlig1g dev中的第5个字母不是l xff0c 而是阿拉伯数字1 解决 输入sudo apt get
  • Nginx在Linux下常用的命令

    一 命令说明 选项说明 h帮助命令 v查看版本号 V查看版本号和配置选项 可用类查看已安装的所有模块 t测试配置文件是否正确 T测试nginx conf文件是否存在语法错误 q优雅停止nginx xff0c 有连接时会等连接请求完成再杀死w
  • ubuntu安装nginx与卸载

    一 安装nginx 1 前言 安装nginx 主要有2种方式 1 直接使用 sudo apt get install nginx 2 使用源码的形式安装 本次主要记录的是使用源码安装 2 下载nginx源码 a nginx官网下载地址 gt
  • ping不通Linux服务器怎么办?

    问题描述 xff1a ping是最常见的网络命令 xff0c 用来测试和远程机器是否连通的方法 我们常常会遇到一个问题 xff1a 无法ping一台远程主机 原因分析 xff1a ping不通远程机器 xff0c 最常见的原因有 xff1a
  • Nginx 学习 2: nginx进程模型

    一 概述 nginx有两类进程 xff0c 一类称为master进程 相当于管理进程 xff0c 另一类称为worker进程 xff08 实际工作进程 xff09 启动方式有两种 xff1a 单进程启动 xff1a 此时系统中仅有一个进程
  • nginx学习 3: Nginx 核心配置详解

    一 结构说明 说明 main 配置影响nginx全局的指令 一般有运行nginx服务器的用户组 xff0c nginx进程pid存放路径 xff0c 日志存放路径 xff0c 配置文件引入 xff0c 允许生成worker process数
  • Android中最佳实践@BindView代替繁琐的findViewById

    ButterKnife ButterKnife是一个专注于Android系统的View注入框架 以前总是要写很多findViewById来找到View对象 xff0c 有了ButterKnife可以很轻松的省去这些步骤 是大神JakeWha
  • 从零开始设计一款APP之Android设计规范篇

    一 基础概念 1 什么是DPI xff1f DPI xff08 Dots Per Inch xff09 xff1a 每英寸点数 xff0c 表示指屏幕密度 是测量空间点密度的单位 xff0c 最初应用于打印技术中 xff0c 它表示每英寸能