myvin

亲爱的设计师,对不起。请好好爱你的开发者吧。

myvin · 2017-01-11翻译 · 750阅读 原文链接

亲爱的设计师,

对不起。

对不起,我按照你的设计稿完成的响应式网站并没有达到像素级完美。对不起,我使用的单位是 rem 和百分比,而不是像素。我知道你用像素单位给每级标题都设置了非常具体、有意的字号和行高。我知道这个图片的展现高度应该是 450px,宽和屏幕等宽;我知道那些图标的宽度应该是 24px,高度不能大于 26.25874px。

你很棒,你的设计也很棒,你们都如出水芙蓉般清新脱俗。

哎,我还是当第一个吃螃蟹的那个人吧,我必须得承认,在你的 Sketch 文件和 PNG 图片里一切都完美无瑕,无论屏幕宽度是 1440px 还是 320px。但是你知道么亲,如果一些人并没有用上述的两种尺寸来浏览网站会发生什么吗(这种情况可是时有发生)?极度混乱。糟糕的一塌糊涂,大小尺寸布局没有能看的。这种网站就是一团糟,我看到了除了难受就是难受。

我只是在努力完成我的工作。

作为一个开发者,对于优秀的设计我很欣赏,我对天发誓要将你(以 Sketch 文件的形式)赠与我的雕琢成一件高雅的艺术品。我并不粗鲁地对待你创造出的美丽,直到连它都认不出你这个创造者了。但是有时候,某些方面是不可避免的;发生了这种事,我想让你知道,我很抱歉。同时,也请你不要对这种事过于敏感。

然后我们相遇了...

当我们按照设计稿对当前开发进度进行审核时,你一眼就能看出来哪些像素在移动设备上不是精确的 14px,对于你这种明察秋毫的技能我不得不服。我能按照设计稿的像素改过来吗?当然可以。但是改完了就能够获得更好的体验吗?并不能。改过来有什么意义呢?你仅仅只是想在 320px 和更低像素的设备下把字体大小设置为14px?还是说,我应该在 480px(如果你现在使用就是 480px 的设备咋整) 以上的设备下修改字体大小?那 768px 怎么办?怎么办?你在 768px 的设备上看过吗?那他妈的简直就是噩梦!

哦,但是也没有那么糟糕,因为我——就是那个开发者——使用的是 rem、百分比、vw、vh,而不是像素。这是不是就是说在你的小手机屏幕尺寸(320px)上就有一些元素大小不是精确的 14px 了?是的。但是,它们的尺寸会随着屏幕尺寸变化而变化,它们看起来会更加合适,需要的代码量也更少(因此加载时间和维护时间都会减少等等)。

这并不是你的错,是你的工具的错

请不要误会我,我并没有责备或羞辱你的意思,当然也不是在这里要让你难堪(说实话,如果我真想那么做的话,我就不会把这些东西写下来了)。如何既能保证合适的尺寸大小,同时也能向他人(也包括设计师们)精确地展示你的设计,为此我花了大量时间去想对策。说实话,这可能是我花的时间最多的事情之一了(其实我很清楚,有时候我也许没有必要在这上面花时间,因为我又不是设计师)。但是,如果我没有除“桌面”(1440px)和“移动”(320px)宽度的屏幕之外的任何设计,就变得省时多了。

我理解,这并不是你的错,作为设计师你一直就是这样被训练的。你是在一个“静态”的环境里工作。当你改变 Sketch 窗口或屏幕大小时,你的设计尺寸并没有变化,你要做的就是滚动滚动屏幕然后找到你的设计。也许你应该尝试着记住这一点:这种方式并不适合我。当浏览器窗口尺寸发生了变化,或者当我更换了浏览设备,一切都可能会发生变化。当然,我可以用其他方式来强制,但是相对于现代标准来说,这是反直觉的,不是吗?不是吗!?

谁能救我与水火之中

现在我不理解的是,为什么就没有一些灵活的工具来让我们的设计师设计出流式/自适应的设计呢...这还是个事儿吗?是,因为它确实确实应该是。但是我还没有发现这种工具,恰好在读这篇文章的兄弟姐妹观音菩萨们,请给我指点明津吧。求求你们了!

我仍然很抱歉。但是,也许吧,没关系。

总的来说,我想说的是,我没有将你的设计像素级完美实现,我为此表示抱歉。刚开始开发的时候我努力去做到完美实现,不同的排版我都设置了特定的像素大小,但是有一次当我在家工作,用我的笔记本上打开网站时,灾难降临了。这导致我花了好几个小时将网站修改成自适应的。尽管我知道在设计审核时,你应该会指出,“哦,嘿,在手机上,段落字体大小应该是 14px,行高应该是 22px;那些标题应该是...”

像素级实现并不完美。

在现实生活中没有任何事物是像素级完美的,所以,当 web 越来越接近像素级完美时,作为设计师的你,请尝试着去理解:尽管开发者能够施展某些魔法,但是我们并不是书上写的那些魔法师,我们有我们的极限,我们有我们的标准。但是最重要的是,我们很少使用像素单位直接去设置元素尺寸。

敬启,

开发者上。

译者myvin尚未开通打赏功能