header_v0.7.32

UI 经验谈——在 1x 倍率下做设计

74天前发布

原创文章 / UI / 观点
扑热息痛 原创,如需商业用途或转载请与扑热息痛联系,谢谢配合。

8个优势,听我道来。



-卷首-

纯技术文章一篇

比较干涩……

可以说很干!

照着做就对了。




| 在 1x 像素密度下做设计的好处 


不在 1x 倍率下做设计也不是不行,只是到后面你会发疯,毕竟设计师中没几个人数学好的……

p.s. 此文所有论述基于软件 Sketch;基于我本人的项目经验并参考了一部分国外文章。

废话少说。为什么我建议大家在 1x 倍率下做设计,好处呢??



好处1

- 避免计算 


如果你不在 1x 倍率下做设计,等着你的将是无尽的计算!是的!无尽……我们知道,移动设备的屏幕五花八门,光 iOS 设备就 3 个倍率,安卓的主流倍率更是高达 5 个。相信我,如果你不以 1x 为基准做设计的话,那么在后期切图、标注和与程序员对接这几个环节上你会无比痛苦,设计过程也不好受。


举个栗子:

假如你在 2x 倍率下做设计,将以下像素(px)转换成点(Pt):字体为 36 px 大小,左右页边距为 40 px,分割线为粗细 1 px。


好!如果在 3x 倍率的屏幕中呢?1x 倍率的屏幕中呢?要知道,程序员开发用得单位可不是 px 而是 pt(以 iOS 开发为例)!你的所有这些像素单位全部要换算成 pt,分割线在 2x 倍率下如果是 1px 的话,那么换算为 pt 就是 0.5 pt,换句话说,在 1x 倍率的屏幕上就是半个像素……这可如何是好?


你看程序员 GG 会不会喷你~



好处2

- iOS 和 Android 统一了!


棒呆!iOS 和 Android 之间长度单位一一对应!天啦!!简直不敢相信!


且慢,好像哪里不对?!iOS 开发单位是 pt,Android 的开发单位是 dp,怎么就一样呢?名字都不一样。相信我,这是经过计算的,pt 是在 163 ppi 下诞生的,与像素一一对应;dp 是在 160 ppi 下诞生的,与像素一一对应(见下图)也就是说,pt=1/163 inch,dp=1/160 inch。对,几乎一样!数值差异可能在小数点好几位后才体现,忽略不计咯~不要矫情。


6aa45965874ca8012193a343bd3d.jpg

62ea59658761a8012193a37bd7b0.jpg


好处3

- 切图直出!


好的,若你是在 2x 倍率下做得设计 ,想导出一些切图。对于 iOS,您需要导出 0.5x(实际是 1x),1x(实际是 2x)和 1.5x(实际是 3x)

玩数字游戏吗??不搞乱就算阿弥陀佛了!!(见下图右侧)


对于 Android,有五种尺寸。您将导出为 0.5x(实际是 1x / mdpi),0.75x(实际是 1.5x / hdpi),1x(实际是 2x / xhdpi)1.5x(实际是 3x / xxhdpi)和 2x(实际是 4x / xxxhdpi)(见下图右侧)


然而,当在 1x 倍率下设计时,这一切都变得干净、清晰。以 1x 输出实际上得到的就是 1x  的切图!!简单、高效!(见下图左侧)


以下是 Sketch 中从 1x 和 2x 导出的对比


18ce59658788a8012193a310dbca.jpg


好处4

- 与开发 GG 使用的单位一致了!


程序员们开发时不使用像素为单位~他们用 pt 和 dp。


YES!在 1x 倍率下设计时,像素与 pt、dp 是一致的,所以你在 Sketch 里长度单位已然和程序员 GG 们一致了,这样的好处是你们终于可以无障碍交流了,因为你们使用了一致的长度单位。完全不需要换算!


反例,如果你在 2x 倍率下作图,你跟程序员描述一个 50 px 的长度时,他得除以 2,也就是 25 pt,然后才能用于他的开发环境!损人不利己是也……



好处5

- 预览无压力


不要以为在 1x 倍率下作图在手机上预览就会模糊。完全不用担心,不管你用 Sketch Mirror 还是 Skala Preview,都没问题~我保证!Perfect~



好处6

- 文件更小


您的设计文件将会更小,特别是包含一些位图图像时。如果您在 Sketch 中有许多画板,你的电脑难免会卡顿。但在 1x 倍率下,画板的尺寸就小了很多,电脑和人脑的压力自然也就小了很多~



好处7

- 防患于未然~

YES!天知道以后还会出什么倍率的手机,反正屏幕像素密度越来越大~~不用怕!反正在 1x 倍率下设计又不用的担心咯~~出图直接乘以系数就 OK 啦!



好处8

- 避免欺骗性


对的,在 2x 倍率下,也就是高像素密度的屏幕里,往往会有一些看上去很美的东西而导致设计师犯一些错误,比如,高分屏下总是能显示更多的细节,设计师往往会过于刻画它们,而忽视了当它们出现在 1x 倍率屏幕中的样子,其实往往那些细节就会丢失或失效。



总结


以上言论基于个人经验,因为我曾在此问题上吃过苦!是的,我有过一次以 2x 倍率为基准做设计,之后切图和标注的时候差点没烦死我自己,好在我们的开发很给力,自己写了一个程序来帮我计算并纠正。总之,如果你们使用 Sketch 做 UI 设计,记得新建画板的时候以一倍的倍率来设置(见下图所示,其实 Sketch 已经把这个列为默认尺寸了,不要自作聪明地去改它们就好),百利而无一害!Trust me~


73e4596587c9a8012193a34b3bba.jpg


-写在最后-

我知道今天的推文有点干涩,似乎都是数字。。。。其实我数学也不好,希望大家花点时间消化一下,了解一些根本的东西我觉得对后面做设计是有好处的。如果还是不清楚,可以加我微信( prxt_16 )详聊,我会在有空的时候给大家解答。




参考文献:

https://medium.com/shyp-design/design-at-1x-its-a-fact-249c5b896536

http://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/

https://developer.apple.com/library/content/documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/WindowsandViews/WindowsandViews.html

https://developer.apple.com/ios/human-interface-guidelines/graphics/image-size-and-resolution/

http://sebastien-gabriel.com/designers-guide-to-dpi/


1
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功