关于 figma 的单位

2022-05-20 08:47:30 +08:00
 dagger2

设计出的图,上面显示的单位都是 px ,Android 开发一般用 dp ,有人知道这个怎么才能查看 dp 吗,问了 UI 也说不知道怎么看。。

4156 次点击
所在节点    程序员
12 条回复
WilsonGGG
2022-05-20 08:52:05 +08:00
dp = (width in pixels * 160) / screen density

Material Design 的官方文档有写。https://material.io/design/layout/pixel-density.html#pixel-density-on-android
WilsonGGG
2022-05-20 08:58:09 +08:00
补充 #1:这个 160 是怎么来的呢?是由于 Android 要做自适应,所以定义 1dp 为在一块 160dpi 屏幕上,显示为一个物理像素,对应你可以理解,如果你的程序运行在一块 640dpi 的屏幕上,那么 1dp 显示为 4 个物理像素。

px= dp ( dpi / 160 )
Leonard
2022-05-20 09:16:08 +08:00
UI 不知道怎么看???
dagger2
2022-05-20 09:21:57 +08:00
@Leonard 真不知道。。。
dagger2
2022-05-20 09:23:44 +08:00
屏幕适配用的 autosize ,设计图尺寸是 750*1624 ,如果直接把这个当 dp 处理的话,第三方库的 UI 没法看了,第三方的大小一般都是按 720P 的设计图来的
chengyiqun
2022-05-20 09:31:32 +08:00
UI 是写死的值, 让研发换算适配不同屏幕是吧?

这个你可以用一个软件 Pixel Ruler, 可以在手机屏幕上, 把 px 转成 dp
https://play.google.com/store/apps/details?id=com.bidyut.app.pixelruler
Tenlp
2022-05-20 10:34:30 +08:00
试下在元素的 Inspect -> Code -> CSS 改成 android ,样式代码里面有 dp 属性
whyrookie
2022-05-20 11:04:58 +08:00
@dagger2 #5 这个本身就是 autosize 的一个缺陷?
itgoyo
2022-05-20 13:09:55 +08:00
你这个 750 * 1624 本来就是错的,正常的 UI 给图的尺寸都是 750 * 1334
我也在用 autosize 基本没啥问题,只是之前时候 dialog 可能有莫名其妙的问题,后面自定义了之后就好了
davin
2022-05-20 14:12:01 +08:00
5 小时 17 分钟前 · 996 次点击 😁可以看看隔壁的蓝湖或者腾讯的 Codesign ,他们的设计稿右边都会有不同设备的单位比例转换。
pengtdyd
2022-05-20 14:16:59 +08:00
android 开发工具没有 px 转 dp 的插件吗,我记得 vscode 有类似的插件,写 px 自动转为 dp
darkengine
2022-05-20 21:52:01 +08:00
750*1624 应该是按照 iOS 的 @2x 标准出的图,安卓的话直接用标注值除以二来设置就行(简单适配的情况)。如果要做到效果更好,UI 应该要标注那些地方的约束是定死的,哪些是可自适应的。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/854062

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX