追逐像素-完美的梦想

2020-11-08 23:51:51

我多年来一直在使用HTML和CSS进行构建,但我仍然不知道如何实现像素完美的设计。

如果您不熟悉这个术语,像素完美是指您的HTML/CSS实现应该尽可能接近原始样机。测量和间距应该精确到像素。

我经常听到这种担心;即使在多年的经验之后,许多前端开发人员也很难完美地复制设计。

当设计师递给我们一个完整的样机时,他们相信我们会忠实地实现他们的愿景。他们的工作是通过我们的实现来完成的,他们一直在祈祷我们不会在这个过程中太多地破坏他们的工作。

我们究竟如何生产出我们的设计师会引以为豪的东西呢?复制精确到像素的设计现实吗?为什么这件事这么难呢?

在这篇文章中,我们将回答这些问题,并学习一些技巧来帮助我们更接近像素完美的✨。

让我们先把这件事说清楚:从严格的法律意义上讲,我不认为像素完美实际上是可能的。

我们编写的HTML和CSS需要在各种令人眼花缭乱的设备上运行。有太多的变量会影响实现的呈现方式。

为了好玩,我在两台不同的设备上截取了完全相同的亚马逊列表的屏幕截图。

当并排查看时,这两张截图看起来非常相似,但当在它们之间切换时,很明显它们并不相同。它们包含非常不同的像素。

当我在DigitalOcean工作时,我能够参观他们的一个数据中心。它是狂野和超现实的;巨大的房间可以容纳数百排,每排都有几十个架子,每个架子上都有几十台电脑。每台机器都是一样的。

我有时会嫉妒后端开发人员。后台有很多棘手的问题,别误会我的意思,但至少他们控制着运行代码的设备!它不必运行在所有能想到的设备上,从5&34;部手机到72&34;台电视机,再到智能冰箱。

在上面的演示中,我只更改了两个变量:操作系统和浏览器。想想还有多少其他因素会影响绘画效果:

这是我刚刚想到的,我打赌你有几个我错过了!

因此,很明显,当涉及到屏幕上各个像素的RGB值时,我们永远无法确保100%的一致性。这是一个不可能达到的标准。但这也不是真正的意义所在。

没有人要求放大镜下的东西看起来是一样的。大多数情况下,设计者希望实现方式在肉眼上看起来近乎相同,并有明显的对准偏差和松散的鹅毛腿间距。他们希望它非常接近像素,而不是像素完美。

当你收到刚印好的新鲜样机时,通常会以某种设计工具(如Figma或Zeplin)的形式交付给你。

这些工具令人敬畏,因为与静态图像不同,它们是设计的活生生的表现形式。您可以选择单个元素并选择颜色和大小。

不幸的是,这些信息并不总是可信的!泽普林告诉你标题和段落之间有64px的差距并不意味着它是正确的。

像Sketch这样的工具从根本上说是设计工具;它们继承了设计界的一系列实践和特质,它们并不总是整齐地映射到网络上。他们肯定会很接近,但不一定足够接近。

不要相信你从设计工具得到的测量结果,你应该自己测量!我最喜欢的方式是使用MacOS的内置截图工具:

您可以使用键盘快捷键cmd-Shift-4打开此功能。单击并拖动以绘制一个框,并使用右下角的数字测量距离。如果你松开鼠标,它会截屏,或者你也可以按Esc键取消它,以避免桌面上乱七八糟的图片。

一定要测量样机和您的实现!根据需要进行调整,直到数字相同。并且测量到实际字母的距离,而不是他们周围的某个想象中的盒子!

努力找出不同之处。排列窗口,使模型和实现并排,并寻找细微差别。把它当做那种点对点、点对点的游戏。

还有像xScope xScope这样的工具。XScope有一系列巧妙的工具可以在屏幕上测量东西。这是付费应用程序,但您的组织可能愿意购买许可证!它比截图工具方法更容易使用,后者需要鼠标和大量的灵活性!

看看下面两个圆圈。你认为哪个居中位置正确?

第二个看起来更好,不是吗?然而,第一个问题在技术上是正确的。

在CSS中,一切都是盒子。数字1&34;会在它周围画一个方框,这个方框正好居中。

右侧的已移动,使其茎与垂直轴对齐:

这称为光学对准。它的排列是基于人的感知,而不是基于方框之间的绝对数学距离。

诚然,这是一个非常小的细节,如果数字是由数据驱动的,这就变得不切实际。但这是一个很好的例子,说明了数学居中并不总是让人感觉正确。有时,我们需要做一些小调整,这样我们的眼睛才能相信事情是完全一致的。

我经常发现自己需要像这样做一些微调。让我们看看另一个例子。在这两个选项之间切换,看看哪一个让你感觉更好:

这是标题下面的一段话。这一段有很多词,你可以想象它有非常重要的东西!

如果我们使用元素检查器,我们会看到内容框在版式左边缘之前有几个像素的空白:

令人高兴的是,导致这种差距的字距调整似乎在不同的浏览器呈现引擎中是一致的,因此我们可以安全地将内容移动几个像素以实现普遍改进的对齐。

需要说明的是,我知道这是非常微妙的。你可以在不做光学对准的情况下实现非常锐利的设计。我们现在是最后5%的区域。但它确实起到了作用,对于关键任务页面(主页、高流量登录页面)来说,花几分钟进行这些调整是值得的!

您可能已经注意到本文中的一个模式:为了让事情感觉正确,需要进行大量的小调整。

不停地移动东西会让人感觉很混乱。为了增加一些约束,并确保使用一致的策略,我喜欢为自己创建一个小的Reaction组件。下面是它的样子:

即使您不熟悉Reaction,希望这段代码能让您了解它在做什么。我们的ShiftBy组件允许我们沿任一轴移动几个像素。

我喜欢这一点,因为它的意图非常清楚;我们正在进行微小的调整,让人感觉一切都很协调。我们并不是在一堆已经存在的元素上随意地散布一些CSS,看起来似乎是随机的。

转换:翻译是我所知道的最不具侵入性的转换方式。与使用保证金不同的是,它不会把兄弟姐妹拉上车。

你会惊讶于这个组件经常派上用场。例如,我稍微切换到无序列表中的自定义项目符号:

将它们对齐到中心或基线感觉不太正确,所以我调整了几个像素,直到它们适合我的眼睛。

CSS是一种看起来很棘手的语言。它相对容易上手,可以调整排版样式和移动东西。但现实世界的项目从来都不是那么简单,事情很快就会变得复杂起来。

在这篇文章中,我们已经看到了小的调整是如何产生巨大的不同的,但我们根本没有讨论如何让这些小的调整发挥作用,让事情变得足够紧凑!?

我知道很多JS开发人员对CSS没有信心。他们理解语法,在应用风格上没有问题,但他们还无法弥合这一差距,无法熟练掌握;他们在进行大规模布局工作或提出可伸缩的体系结构时并不自在。

我正在学习一门名为《面向JavaScript开发人员的CSS》的课程,该课程名为《面向JavaScript开发人员的CSS》。这是一门多形式的课程,利用我在这篇博客上使用的相同技术来构建动态和交互式的小工具,我将把它提升到一个全新的水平。

如果你想更舒服地使用CSS,我想它真的会很有帮助!了解有关该课程的更多信息了解有关该课程的更多信息。

在这篇文章中,我们谈了很多关于技术方面的事情。但这还有另一个方面。

我以前写过,与设计建立良好的工作关系对于做伟大的工作是绝对必要的。如果你还没有读过,你应该去看看;我认为这是我发表过的最有影响力的博客帖子之一。

事实是,有时候我们作为前端工程师的经验是有价值的。例如,设计者可能对一个漂亮的<;Select>;元素有一个很好的想法,并希望它是像素完美的…。但它们的设计不会像本机表单控件那样易于访问。有时,平台默认设置比自定义用户界面元素更可靠,我们的工作就是倡导它们。这需要良好的工作关系!

当设计师要求移动一些像素时,不要称它们为nits。我不想让别人给我的作品贴上这样的标签!设计师们常常为让我们负担他们的要求而感到难过,而实际上,这往往是我们的错,因为我们从一开始就把球搞砸了!

如果你曾经试图从头开始设计一些东西,你可能会发现这很令人沮丧;你可以选择和Airbnb这样的产品一样漂亮的颜色和华丽的字体,但最终得到的东西看起来既业余又不专业。

在我最初的一份工作中,我们买了一个看起来很漂亮的模板,但在实现了几个定制功能后,它看起来很粗糙。我们没有改变那么多;为什么看起来更糟了??

事实是,当涉及到间距和一致性时,设计往往是相当脆弱的。如果你把一些东西移开,整个东西就会像纸牌屋一样坍塌。

这就是为什么这些东西很重要。这不仅仅是为了安抚你团队中的设计师。如果你要采访用户,我怀疑没有人能够清楚地表达这些东西。没有人称赞元素周围的一致间距!然而,它产生了影响。

大多数人看不到那种程度的东西。他们会完整地看一页,然后根据感觉做出判断。要么感觉良好和专业,要么感觉糟糕和马虎。

我的搭档的弟弟是一个典型的网民,他是一名音乐专业的学生,对设计或开发不感兴趣。我曾经就我正在做的一件事征求他的反馈,他说这件事看起来很“真实”。大多数成功的在线企业都是经过精心设计和周密实施的;如果你的企业不是这样,它就不会显得合法。良好的执行有助于建立可信度。

仅仅几个像素的变化并不能决定一个网站的成败,但它会累积起来。这是一个千篇一律的剪纸领域;总的来说,这些东西产生了巨大的不同。

平台的差异使得它不可能达到真正的像素完美,但在实践中,这并不是什么大不了的事。我们不能保证万能的一致性,但我们可以确保每一次体验都是内在一致的,并且忠实于设计的精神。这是最重要的。