UI设计基础知识点之Android设计规范篇

2023-11-08

目录:

  • 基础概念

  • Android界面设计规范

  • Android切图标注

  • 安卓开发单位换算

  • 总结

一. 基础概念

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的对应关系

五. 总结

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

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

UI设计基础知识点之Android设计规范篇 的相关文章

  • Android TelecomManager 中的 addIncomingCall 没有执行任何操作

    我正在尝试使用本机 Android 来电 UI 我有一个连接服务 并且我已经成功注册了一个电话帐户 但在我调用方法 addNewIncomingCall 后什么也没有发生 对我所缺少的有什么想法吗 显现
  • 在工具栏下显示内容

    您好 我试图简单地将我的内容放在工具栏下方 但是当我运行我的应用程序时 某些内容本应位于工具栏下方 却隐藏在工具栏后面 我已经阅读了有关使用框架布局来尝试将其分离的内容 但我有点卡住了 我目前正在使用该软件提供的基本 android stu
  • Android ToggleButton 始终检查

    如果切换按钮处于选中或取消选中状态 我想存储在 SharedPreferences 中 toggle setOnCheckedChangeListener new OnCheckedChangeListener public void on
  • Android中将JSON数据存储到本地数据库

    好的 我创建了一个应用程序 它使用 JSON 从我的服务器检索数据 现在我想将检索到的数据存储在手机的本地存储 数据库中 我该怎么做 我是android编程新手 这是我从服务器收到的 JSON messages id 44 issender
  • Android Camera.takePicture() 有时不返回?

    我正在编写一个Android 拍照应用程序 该代码在 onPreviewFrame byte data Cameracamera 中从预览中获取帧后进行一些处理 问题在于 android hardware Camera 的函数 takePi
  • 我无法再在后台应用程序中接收任何 FCM 消息

    当应用程序处于后台时 我无法再在应用程序中接收任何数据消息 请注意 直到最近它在我的应用程序中都运行良好 也许在我的开发环境最近更新后它停止工作了 我不能说 所以我尝试用快速入门 android 项目 https github com fi
  • 无法在 Android Studio 中导出签名的 APK

    当我使用keytool list keystore path to keyfile jks并提供我的密码 我可以看到那里的条目 但是当我在尝试使用相同的密码生成签名的 APK 时使用相同的密码时 我收到错误 无法加载密钥库 密钥库被篡改 或
  • Android 中使用黑白 alpha 蒙版的高效位图蒙版

    我想用黑白 alpha 蒙版来掩盖位图 我的蒙版图像是黑白的 黑色区域意味着透明 白色区域意味着不透明 我需要的是 当我使用此蒙版图像来蒙版任何其他图像时 如果蒙版图像的相应区域为黑色 则生成的图像区域应为透明 否则 生成的图像区域应该是不
  • 如何在不使用 Firebase 控制台的情况下发送 Firebase 云消息通知?

    我从新的 Google 通知服务开始 Firebase Cloud Messaging 感谢这段代码https github com firebase quickstart android tree master messaging htt
  • 当我单击“完成”键时,Android OnEditorActionListener() actionId 给出 0

    我创建了一个键盘 当用户输入数字时 它会输入特定的 EditText 但是当用户单击Done关键 它没有去setOnEditorActionListener但它关闭了键盘 这是我的代码 final EditText txtQty new E
  • 如何使用 RecyclerView 创建此布局?

    我正在尝试使用这种类型的布局创建回收器视图 这些项目是字符串 可以以不同的大小出现 我不知道每行中有多少项目 我可以使用 StaggeredGridLayoutManager 来做到这一点吗 该图像只是一个假示例 每行可以有更多项目 您可能
  • 如何在Android中的DataBinding的ViewModel类中获取R.string

    我目前正在使用databinding对于我的 Android 应用程序项目 我想设置error留言在我的CustomTextView from R string txtOldPassWordError并从另一个名为的类中进行设置ViewMo
  • Android L,使用 joda.time 库的异常

    该应用程序适用于所有设备 包括 nexus 5 和 nexus 7 在 Android L 预览版上运行相同的应用程序时 应用程序崩溃了 我一直在调试 并且调用 DateTime 构造函数发现了异常 public static String
  • 使用 DataBinding 测试片段时膨胀类 Fragment 时出错

    有人可以帮我解决这个问题吗 在我的测试中 我想检查登录按钮是否显示在起始页上 今天我已经为这个错误苦苦挣扎了一段时间 我不知道应该如何解决它 我在这里错过了什么 也许这个问题与这个问题有些相似 Espresso 测试失败 并显示 java
  • FragmentActivity 无法解析为类型

    我正在尝试来自的应用程序这个博客 http android developers blogspot com 2011 02 android 30 fragments api html 在延长的同时FragmentActivity 我收到以下
  • Android:WebView/BaseInputConnection 中的退格键

    我在 Android 4 2 中遇到软键盘退格问题 我在 WebView CodeMirror 中有一个自定义编辑器 它使用一个空的
  • 使用 Proguard 通过 Dropbox.com 库混淆 Android 应用程序

    我刚刚创建了一个需要 Dropbox com API 库的 Android 应用程序 我现在尝试在 发布 模式下构建应用程序 并希望在代码上运行混淆器以对其进行混淆 但是 每当我尝试运行 Proguard 时 都会收到以下错误 Progua
  • Android 的 Intent 和 Parcelable 对象

    为什么我需要打包我的对象 即使我只需将其发送到同一任务的另一个线程 实际上 我需要打开一个甚至可以在同一线程 主线程 上运行的活动 换句话说 为什么 Google 不提供一个 startActivity 版本 它采用通用对象广告参数而不是捆
  • 动态更改按钮上的图像视图

    在我的应用程序中 我有按钮和ImageView 当我按下按钮时我想改变ImageView 我的可绘制文件夹中有 5 张图像 按下按钮时 ImageView 根据按钮单击一张一张地更改图像 我想要它的解决方案 感谢任何可以提供帮助的人 维护一
  • 我想测量 ListView 的高度 (getHight() = 0)

    我无法自己决定任务将是问 我想测量 ListView 的高度 无法捕捉渲染 ListView 的时刻 rssListView getHight 0 public class RSSactivity extends Activity publ

随机推荐

  • Zotero学习

    看到几个很好的教程 帮助很大 做个备忘 B站 Zotero快速入门 链接 link Zotero基础操作 比Endnote更好用的文献管理软件 链接 link 知乎 Zotero SciHub 青柠学术 链接 link 搭建属于自己的文献数
  • Java API在HDFS上实现文件的上传、下载到本地、创建文件夹、删除文件和重命名文件

    前期准备 一 前期准备 1 Hadoop集群已配置完毕 2 linux系统安装jdk 3 在linux系统中安装并破解IntelliJ IDEA 二 通过JAVA API接口操纵HDFS 1 在IDEA中创建maven项目 2 设置配置文件
  • 大比拼:讯飞星火大模型将超越ChatGPT?

    5月6日 讯飞星火认知大模型成果发布会于合肥举办 会上 备受业界期待的 星火 认知大模型正式发布 讯飞AI学习机 讯飞听见 讯飞智能办公本 讯飞智慧驾舱 讯飞数字员工 四大行业中的五大成果同步演示 发布会全程进行实机展示 引发业界热烈反响
  • 查看Linux内核版本的命令

    方法一 命令 uname a 作用 查看系统内核版本号及系统名称 方法二 命令 cat proc version 作用 查看目录 proc 下version的信息 也可以得到当前系统的内核版本号及系统名称 补充说明 proc文件系统 它不是
  • wazhu架构搭建 小结

    基本的搭建步骤都在这个博客下 https www cnblogs com backlion p 10394369 html 下面写一些我再安装过程中遇到的问题 1 首先安装wazuh中的各个版本都需要一致 例如我安装的是 wazuh man
  • android.util.AndroidRuntimeException: Calling startActivity() from outside of an Activity context

    问题描述 FATAL EXCEPTION main Process com wuchen juexiao mvvm PID 11732 android util AndroidRuntimeException Calling startAc
  • Linux基础服务11——LNMP架构

    文章目录 一 环境说明 二 安装nginx 三 安装mysql 四 安装php 五 配置nginx 六 配置php 七 验证 一 环境说明 主机 服务 192 168 161 129 nginx 192 168 161 131 mysql
  • Vagrant 扩大磁盘根目录(图文详解)

    Vagrant 扩大磁盘根目录 图文详解 实验环境 root centos72 cat etc redhat release CentOS Linux release 7 2 1511 Core root centos72 uname a
  • 【我的第一千篇文章】

    作为一名Java开发者 我很自豪地宣布 这里是我输出的第一千篇文章 在过去的六年里 我一直坚持每月输出优质内容 并将其分享给了全世界的读者们 这一千篇文章中 有很多关于Java编程的技巧 经验分享 优秀实践示例 案例分析等等 每篇文章都代表
  • 决策树分析例题经典案例_一级造价师考试——工程造价案例分析之2.3决策树分析法在方案评价中的应用...

    一级造价师考试 工程造价案例分析之2 3决策树分析法在方案评价中的应用 决策树分析方法一般会和资金时间价值综合起来进行考核 要会正确绘制决策树 根据资金时间价值计算各机会点的期望值 进行方案选择和决策 1 决策树的概念 决策树是以方框 和圆
  • Maven 命令

    输出依赖树 mvn dependency tree 输出依赖树到指定文件 mvn dependency tree gt tree txt 输出lib mvn dependency copy dependencies DoutputDirec
  • 如何将爬虫的数据添加到mysql数据库中

    以爬取糗事百科中24小时网页中第一列表页中所有文章的内容 作者 搞笑数 评论数为例 将爬取的四项内容存入到mysql数据库中 思路 要想存入到数据库中就需要用到数据库中的表 所以我们首先创建一个名叫 myblog 的数据库 然后在此数据库中
  • PHP 的Laravel 框架

    在windows下 搭建PHP的Laravel框架很简单 先把PHP的安装目录 加入到环境变量里 在命令行能访问到php v 就说明可以了 然后 这些是需求的环境 PHP gt 7 1 3 不用说了 OpenSSL PHP扩展 用compo
  • 51单片机编写60秒倒计时程序

    include
  • linux下mysql安装

    一 解压缩mysql 5 6 4 m7 tar zip 1 gt unzip mysql 5 6 4 m7 tar zip 会生成mysql 5 6 4 m7 tar gz的压缩文件 2 gt tar zxvf mysql 5 6 4 m7
  • mysqlbinlog命令使用

    参考 https www cnblogs com zouhong p 14540380 html https www iteye com blog wx1568934009 2469938 获取二进制日志列表show binary logs
  • Shell Script—线程

    本文主要介绍shell中的线程 线程中的等待和信号 1 线程 Shell中线程的实现有多种方式 目前只介绍通过 符号 通过在命令末尾加上 符号 可以在后台启动一个进程并立即返回 允许Shell进程继续执行其他命令 示例 bin bash N
  • 023.二叉树的最近公共祖先

    题目链接 236 二叉树的最近公共祖先 大概思路 题目要求 给定一个二叉树 找到该树中两个指定节点q p的最近公共祖先x q p一定存在且值不同 最近公共祖先 两个节点共同的祖先 同时深度尽可能大 其中一个可以是祖先本身 思路 q p的最近
  • 作业asd

    餐馆 class Restaurant def init self restaurant name cuisine type self restaurant name restaurant name self cuisine type cu
  • UI设计基础知识点之Android设计规范篇

    目录 基础概念 Android界面设计规范 Android切图标注 安卓开发单位换算 总结 一 基础概念 1 什么是DPI DPI Dots Per Inch 每英寸点数 表示指屏幕密度 是测量空间点密度的单位 最初应用于打印技术中 它表示