作者Akanelee,中国台湾设计师妹子,个人博客:blog.akanelee。
上回好玩的《中国台湾设计师吐槽:我们的UI到底怎么了?》刚发,这回纯干货呈上。做UI设计的童鞋,还没弄懂8px的赶紧来学习一下。
淘宝网的官方Blog有篇「一张图解释手机端8px原理」,简单来说就是把 iOS 和 Android 放在一起比较。同时探讨 1x、2x、ldpi、mdpi、hdpi、Xhdpi、xxhdpi 的尺寸与分辨率。本文就以我个人角度提出看法。(图片取自 Android - Devices and Displays)
8px 的文章内容就我的理解是基于「iOS 接口和 Android 接口长得完全一样」的情况下进行开发所写。iOS 和 Android 是两种完全不同的系统,用户操作习惯完全不同,在开发上本来就不应该把这两套做得完全一模一样。退个一百步、就算因为客户预算不足导致接口相同,也没有这么愉快的一套打天下方式。
屏幕尺寸换算
先讲最容易理解的 iOS:1x(320x480px)、@2x(640x1136px),就这两种尺寸。顶多留意一下 iPhone4 的 640x960,视签约内容而定,仍属于 @2x 的制图规范。要注意的就是「做大缩小」时所有尺寸单位要是双数,包含距离、坐标、切图等等(字级倒是允许0.5pt)。现在的 Store 审核就算不做 1x 尺寸也能通过,但 iOS 工程师在刻接口时仍就以 1x 为基准,坐标什么的还是要用1x 当单位。所以 UI 在做 @2x 大图时还是乖乖的把所有的数字都设定成双数吧。
Android 比较麻烦,屏幕尺寸和机种非常多,不可能每种尺寸都出一版 PSD,通常签约时就会载明在「特定某几支手机」一定没问题、其他手机尽量完美运行但不保证。我在做 Android 接口时会出 1.5x、2x、3x 这三种尺寸的切图。1x 的机型已经不多见了,何况 0.75x 的 ldpi?(官方图解上已拿掉ldpi、增加 4x 的xxxhdpi。)(每个国家国情不同,这部份要研究一下当地机型尺寸。)
dpi 对 UI 来说影响不大,最大的问还是在屏幕尺寸身上。我自己常用的尺寸如下,px 尺寸也许和其他人惯用的不太一样,但无影响,Android 屏幕尺寸本来就很多种,所以才需要 9-patch 来辅助。
- mdpi 160dpi (1x) 480x320
- hdpi 240dpi (1.5x) 800x480
- xhdpi 320dpi (2x) 1280x720
- xxhdpi 480dpi (3x) 1920x1080
Android 屏幕尺寸
此部份感谢友人 Takeru 说明。
- 为了适应android百花齐放的屏幕分辨率与屏幕尺寸,都是以dpi(Dot peer inch)为基准;
- 在Guideline的定义中 http://blog.csdn.net/moruite/article/details/6028547 这边有dpi的计算方法;
- dpi会受到屏幕尺寸实际大小的影响;
- 即使同样分辨率在不同的屏幕尺寸中,会得到不同dpi;
- 已有网站整理目前各机种的屏幕分辨率和dpi http://screensiz.es/phone;
- 所以当dpi在480~320之间时,系统会以xxhdpi的图档为第一优先;
- 至于1920x1080则是目前最常见的分辨率;
- 之后,320~240之间,则是以xhdpi的图档为优先,以此类推;
- 同样的,在xhdpi中1280x720是最常见的分辨率;
- 所以,最初列表中的分辨率为常见的分辨率,并非绝对;
- 图档文件夹虽是以dpi作为区隔,都是以一个范围,非单一值;
(大部份都是以此为标准,当然也有例外,例如:note2);
图片放大缩小
为了 iOS 和 Android 总共只出一套psd、不能使用 9-patch 延伸的图片部分,在 1x 情况下都要以 4px 为单位设计,做 2x 图时是以 8px 当单位。所有图片能用向量制作就用向量,设定 4px 是「 为了避免因比例换算产生 0.X px 导致图片模糊失真 」(px 一定是整数、没有小数点),而不是最后的切图产出。切图一样要针对不同分辨率切几套出来,别以为用 4px 当单位、整个 psd 文件放大 2 倍,像素 icon 图就不会糊掉了。
切图和标示文件不可能共享
光切图方式就不一样了是要怎么用同一份标示文件?Android 有个独有的切图方式称「9-patch」,可以让切图自动延展。iOS 同样也有延展设计,但标示方式和 Android 不同,我另外开文写这部分。(有的 iOS RD 会要求使用坐标来制作标示文件,但 Android RD 没办法使用坐标。)
即使是相同的设计也无法使用同一套切图,举个例子:就以按钮来讲,iOS 可以把文字直接和底图上切成一张图,不管是 iPhone 5s 或 iPhone 4 上文字边缘依然锐利。但若希望 Android 每台手机都能看到锐利的文字,底图和文字就要分开,给 RD 的切图就是标了 9-patch 的纯底图一张,文字必需由系统产生才能保持绝对清晰。
在无法使用内建文字的情况下,Android 底图和文字要分开切、不能使用 9-patch。9-patch 只能延伸底图,如果延伸很长的话,会变成底图很大字还是很小的情况。
结论
为了 RD(工程师)好,还是把 iOS 和 Android 分开看待...直接拿 iOS 的切图和标示文件给 Android 的 RD 就等着被退货吧。
- iOS 和 Android 分别设计接口。
- 做 1x 再放大给其他尺寸使用最安全。
- 做大缩小的情况下所有数值一定要设成双数。
- 研究一下如何放大缩小图片无损吧,我有写过教学文。
- iOS、Android 一定要「分开」切图。
- 标示文件一定要 iOS、Android 「分开」。
再强调一次 iOS 接口本来就不应该和 Android 长得一样 。光是实体的 Back 就有差。就某些 RD 的角度会觉得出一版给两家平台使用维护很方便,是 UI 就该仰天长啸「这不优雅~」。
原文地址:blog.akanelee
作者:Akanelee
【优设网 原创文章 投稿邮箱:2650232288@qq.com】
================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。
设计微博:拥有粉丝量68万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:
复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。
发评论!每天赢奖品
点击 登录 后,在评论区留言,系统会随机派送奖品
2012年成立至今,是国内备受欢迎的设计师平台,提供奖品赞助 联系我们
MJ版AIGC绘画原理
已累计诞生 626 位幸运星
发表评论 已发布2条
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓