[译]移动开发中用 1x 视觉稿设计的好处

简介: 本文讲的是[译]移动开发中用 1x 视觉稿设计的好处,那我就开门见山了:我确信你们很多人都已经知道 1x 设计的好处了。但是呢,言语和风声总不会那么一致。在移动设备上,到底是使用 1x 设计稿更好,还是 2x 设计稿,一直没有达成共识。
本文讲的是[译]移动开发中用 1x 视觉稿设计的好处,

移动开发中用 1x 视觉稿设计的好处

那我就开门见山了:我确信你们很多人都已经知道 1x 设计的好处了。但是呢,言语和风声总不会那么一致。在移动设备上,到底是使用 1x 设计稿更好,还是 2x 设计稿,一直没有达成共识。

背景简述

当我刚加入 Shyp 的时候,我们为 iOS 进行 2x 分辨率的设计,而为 Android 端进行 3x (xxhdpi) 的设计,那段回忆简直像一坨屎一样。我们到底为什么要这样做?

  1. 进行低像素,非 retina 的设计是反直觉的。实际上,我已经有很长时间没有见过 iPhone 3GS 了。
  2. 那时,1:1 比例的设计使我们可以很方便的在设备上预览我们的草稿,我们使用 iPhone 5 和 Nexus 5 来做测试,那些低于 2x 和 3x 的设计稿,在屏幕上都是模糊不清的。
  3. 抗拒改变 — 正因为我们所有的设计都是 2x,重新设计他们是一份费力的事情。(后来我们把它们全部重新设计成 1x 了)

这些理由真令人伤感,但却都不能和 1x 设计的好处相媲美。

使用 1x 视觉设计稿的 7 条理由

关于到底是 1x 设计更好,还是 2x 设计更好其实已经没必要再争论了。鉴于我从没见过任何一个关于 1x 好处的列举,我把这些好处在下面列出来了。

1. 不用数学

如果你要设计非 1x 的设计稿,那么你就要步入那条无休无止的为不同分辨率转换像素尺寸的道路了。

不信啊,你上呗 —— 在 2x 分辨率下把这些下面这些 pixel 转换到 point:36px 的字体大小,左右各是 40px 内边距,上下则是 20px。你算完了,好那在 3x 分辨率下面再试一次吧。

你觉得这一切很有趣吗?

并不,我也一样。而且如果像素还不是偶数的话,那简直是一场灾难。“那啥,请在那上面加上 16.66pt 的缩进。”

2. IOS 与 Android 保持一比一的比例

额的神啊。这节省了多少时间。所有的设计都在 iOS 和 Android 之间无缝衔接,字体大小,图标,空白。你懂的,就是那些设计指南里的好东西,非常容易的就重用上了。

3. 导出直观

好了,现在假设我在按 2x 来设计稿子,并且打算把它导出为资源 (assets) 。对于 iOS,你需要按照 .5x、1x 和1.5x 导出(实际上是 1x、2x 和 3x)。毫无逻辑可言。对于 Android 来说,则有五个不同的值,即 .5x、.75x、1x、1.5x、2x(实际上是1x、1.5x、2x、3x、4x)。

当你按照 1x 设计时,事情就变简单了,1x 就是 1x,

下面是在 Sketch 里面 1x 设计稿和 2x 设计稿的导出界面的比较:

4. 跟工程师们使用同样的标称

你的设计难道不应该和写代码实现它的人在相同的次元么?是的,当然应该。工程师们都用 point,不用 pixel。

Jiashu Wang,Shyp 的一个 iOS 工程师对这个问题是这样回复的:

工程师用 point(不用 pixel),所以 1x 的 Sketch 设计对我们来说刚刚好,我们可以直接在 Sketch 里面找到需要的值而不需使用比例系数(scale factors)。

比方说,如果用 2x 的 Sketch 文件,iOS 工程师就会按照下面的步骤执行: —— 在 sketch 里查看一个 UI 元素的值,比方说是 50 —— 接下来开始算:50(元素在 sketch 里的值)/ 2(设计稿对应的系数)= —— 在代码里写上 25。

现在,我们用 1x ,我们看到 25 ,就是 25。

(作者注:是的,我们的工程师直接用 Sketch,酷毙了!)

不仅工程师会爱上你,实际上还使得设计中犯得错误更少了。那些关于像素调整的不必要的品控都可以避免掉了。

5. 设备上的预览仍然可以使用

记得我之前说 Sketch 里的 1x 的设计图预览会变得模糊不清么?其实那早就不是问题啦。现在所有一切都可以无缝的在设备上预览了。

对于 Android 设备来说,也可以 Photoshop 和 Skala 达到同样的效果。Duang!一切都可以完美缩放了!

6. 文件更小,性能更棒

这样你的设计文件会更小,特别是当你还使用了位图(bitmap)的时候。在 Sketch 里,如果一个页面 (page) 里包含了过多的画板 (artboard) ,延迟就是一个很头疼的事情了,而更小的画板意味着更好的表现。

7. 保证未来

按照 1x 来设计避免了以后 Apple 和 Google 推出新的分辨率又要再做一次转换的问题。还记得苹果发布 iPhone 6 Plus 的时候,大家每天念叨着该如何为这个屏幕做设计么?这个困惑导致了后来出现来一系列关于如何做转换的资源

按照非 1x 下设计总给人一种随意的感觉,总有更多新的屏幕分辨率会出现。只有 1x 的设计才是恒久远的。

-

更新 1:Dave Bedingfield,推特的一名设计师,指出了按照 1x 另一个重要的优点。

理由8 — 过多空白带来的假象

在 2x 和 3x 设计时往往会给人一种错觉,那就是“我还有很多的空间”。特别是对于那些刚入行的设计师来说,他们会在高像素的空间里放入更多的内容,容易造成点击区域过小或者显示不清晰的问题。而按照 1x 设计则避免了这样的影响。

Designing for 2x can also cause designers to experience a placebo effect: designing at 2x is quite appealing, visually, and can mask. However, a baseline of 1x is still the optimal “starting point” in and I actually think our designs benefit from this constraint (a design that “works” at 1x will also “work” 2x; we avoid fooling ourselves into thinking that 2x provides more space to “cram” elements). The temptation to design for higher resolutions can cause tap targets to shrink, type sizes to decrease, legibility to suffer, etc.. Designing at 1x can help protect from that.

本段引用,译文如下:

按照 2x 的设计也容易给人造成一种假象:在视觉上,2x 的设计的确更具诱惑。但是, 1x 设计仍然是设计的“出发点”,我甚至认为,1x 的设计正是受益于它的限制( 1x 的设计在 2x 下仍然是可用的;避免了让自己误以为还有更多空间可以“塞下”更过的元素)。在更高的分辨率下做设计会导致可以点击的空间缩水,可以输入的空间变少,内容的辨认度下降等等…按照 1x 设计则帮助我们规避了这些问题。

Dave 是我认识的最了解在不同平台设计这一学问的人了,这也带给了推特的很多独创性的想法。很多年前他给推特的设计团队发的一封很长的邮件,强调了 1x 设计的重要性,摘录于此链接

以上。客官,您请随便用。如果我有漏掉的,还请客官补充。

特别鸣谢 Jeremy Goldberg ,将我带入正途并说服我使用 1x 设计的第一人。






原文发布时间为:2016年07月10日

本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。
目录
相关文章
|
6天前
|
存储 项目管理 数据库
设计师协作工具的功能评测:提升设计师效率的关键
在现代设计工作中,团队合作与项目管理至关重要。本文推荐五款适合设计师的协作工具:板栗看板、Notion、Figma、Monday.com 和 ClickUp。这些工具各具特色,支持任务管理、实时协作、文档共享等功能,适用于不同规模和需求的设计团队,有效提升设计效率和项目管理质量。
设计师协作工具的功能评测:提升设计师效率的关键
|
机器学习/深度学习 人工智能 自然语言处理
相比优秀的服装设计师,AIGC 可以如何突破设计灵感的界限?是纯粹的机械语言还是一点点的灵光乍现?
这些日子学的那些 AIGC生图本领,这回用上啦!阿里云携手国民服装品牌森马推出 AIGC T 恤设计大赛,无论您是开发者、设计师、还是AI绘画爱好者,都可以使用阿里云函数计算快速部署 Stable Diffusion,以“宇宙漫游”为主题,进行AI 创作并投递作品即可参赛。所有作品均有机会被森马选中并购买版权成为下一季服装图案主题。
相比优秀的服装设计师,AIGC 可以如何突破设计灵感的界限?是纯粹的机械语言还是一点点的灵光乍现?
|
人工智能 搜索推荐 大数据
相比优秀的服装设计师,AIGC 可以如何突破设计灵感的界限
这些日子学的那些 AIGC生图本领,这回用上啦!阿里云携手国民服装品牌森马推出 AIGC T 恤设计大赛,无论您是开发者、设计师、还是AI绘画爱好者,都可以使用阿里云函数计算快速部署 Stable Diffusion,以“宇宙漫游”为主题,进行AI 创作并投递作品即可参赛。所有作品均有机会被森马选中并购买版权成为下一季服装图案主题。 https://developer.aliyun.com/adc/series/activity/aigc_design?spm=a2c6h.13066369.question.3.3e7223c08Zpgdl
137 1
|
传感器 XML 定位技术
《移动互联网技术》第九章 感知与多媒体: 了解质感设计的基本原则和设计方法
《移动互联网技术》第九章 感知与多媒体: 了解质感设计的基本原则和设计方法
104 0
|
搜索推荐 SEO 智能硬件
无障碍Web设计与开发的重要性
无障碍Web设计与开发的重要性
171 0
|
移动开发 数据可视化 信息无障碍
|
机器学习/深度学习 人工智能 移动开发
开发界的“神笔码良”来了!从设计稿智能生成H5应用
脱离切图仔,3步从设计稿直接智能生成H5应用,2000个顶级域名免费领!
5310 0
开发界的“神笔码良”来了!从设计稿智能生成H5应用
|
数据可视化 JavaScript 物联网
ThingJS之3D开发:如何做颜值高的设计?
不要把关于设计的这些内容看得太过严肃。
ThingJS之3D开发:如何做颜值高的设计?
|
定位技术
网站风格及框架规划
做网站重要的一环是页面制作,而页面制作的第一步就是确定网站风格及框架规划。
1161 0
|
UED
这些更细致的色彩知识,能让你的设计体验更好
当我们讨论色彩的时候,聊的更多的是色彩的搭配。虽然有些设计师认为有些色彩是一些纯粹的美学上的选择,但是实际上,色彩对于用户的心理和行为的影响相对更深,最终会反映在用户体验和行为反馈上。 经过深思熟虑的配色最终会从「不错」提升到「优秀」,平庸的配色最终会降低用户体验,甚至会影响网站本身的可用性。
1254 0
下一篇
无影云桌面