设计师的像素眼是怎样炼成的?

传说的像素眼,也就是可以快速分辨出 1px 以上差异的双眼,往往由资深设计师所 get√,想要练就一双迷人的像素眼,除了常年累月的经验之外,还是有些技巧可以快速掌握的。今天分享7个像素眼的常用场合,按图索骥,用心观察,你也可以修炼成功!


传说的像素眼,也就是可以快速分辨出 1px 以上差异的双眼,往往由资深设计师所 get√,想要练就一双迷人的像素眼,除了常年累月的经验之外,还是有些技巧可以快速掌握的。今天分享7个像素眼的常用场合,按图索骥,用心观察,你也可以修炼成功!

小鸡君本人是个苦逼程序员,但小鸡君的像素眼也不比任何一个设计师差。当然了,距离真正的像素眼神人还是有很大差距的,比如下面这种游戏,小鸡君还真是玩不起:

设计师的像素眼是怎样炼成的?

不过对于平常的工作来说,比如还原个视觉稿什么的,小鸡君的双眼还是绰绰有余的(不是指个数)。

那么传说的像素眼真的有那么神奇?1px 的差异真的那么隐蔽吗?当然不是。

下面小鸡君就来分享一下这些容易被像素眼发现的重灾区,只要你用心观察,一定是可以看出差距的。

不同字号对齐

大小字号搭配,是最容易分清主次信息的手法了。在页面的具体实现过程中,也很容易忽略这里的对齐问题。所以,这里往往是展示你像素眼技能的好地方。

比如下面这张图,底边有 1px 没有对齐,左侧下沉了一点:

设计师的像素眼是怎样炼成的?

我们把截图放到 PS 里面看一下,为了清晰,我把参考线调成了黑色:

设计师的像素眼是怎样炼成的?

可以看到,左侧的销售价三个字的底部已经有 1px 在参考线以下了。所以下次,作为一个追求极致的设计师,再看到页面时就可以先关注一下这种地方,一定会有意想不到的收获。

图片与文字对齐

图片与文字对齐是网页制作还原时的一大重灾区,没有之一。随便打开一个网页,几乎十有八九可以找到对不齐的地方。

之所以会如此严重,一方面与从业人员经验有关,另外,不同浏览器关于垂直居中的兼容性问题也确实比较多。对于一些不太主流的浏览器,也不会要求 100% 还原设计稿了,几个像素的差距是可以接受的。

我们来看下面这张图:

设计师的像素眼是怎样炼成的?

乍一看总感觉歪歪扭扭,这也跟多个不同图标组合有关,非对称的图标会在视觉上造成偏重的感觉。我们再看放大图:

设计师的像素眼是怎样炼成的?

其实单从图标上看,已经是对齐的了。左侧的眼睛上下紧贴参考线边缘,而另外两个图标上下各留 1px。

但是,如果你看得足够仔细,你会发现数字的上方距离参考线是 4px,而下方距离参考线是 3px。那么问题来了,16px 高的眼睛图标,如何能与 9px 高的数字垂直居中对齐?

答案是:不可棱! (16px – 9px)/2 = 3.5px,网页上是没有 0.5px 的,所以只能一个 3px 一个 4px。所以,如果设计稿就是酱紫,那就永远无法对齐了。

等高元素对齐

等高元素对齐也是很常见的,比如下图这种两个等高的按钮:

设计师的像素眼是怎样炼成的?

这种设计有个小问题,就是右侧的浅色边框与左侧的色块放在一起的时候,视觉上就会感觉右侧的高度少一点。因为右侧的边框太接近白色背景,而左侧的对比则比较明显,边界更清晰。

但是我想说的不是这个问题,而是这张图里面的两个按钮,确实在垂直方向上错开了 1px,我们来看放大图:

设计师的像素眼是怎样炼成的?

问题已经很明显了,显然,这里也是个重灾区。

结尾元素的边框

当多个列表元素中间有边框相隔时,往往有些童鞋会忘记去掉结尾的边框。这里也是重灾区:

设计师的像素眼是怎样炼成的?

这张图乍一看像是加了个阴影特效,貌似效果还不错。但是有些设计的配色,就不一定有这么好的效果了。我们来看看放大图:

设计师的像素眼是怎样炼成的?

所以,在有多个列表元素并带有边框时,大家就要注意一下第一个元素(有的时候是左侧边框或者上边框)和最后一个元素了。

垂直居中的对齐

其实前面说的很多都是垂直居中对齐,可见页面仔实现垂直居中有多么难了。对于最常见的按钮,中间带文字的,也是很容易对不齐的。

比如这个:

设计师的像素眼是怎样炼成的?

在视觉效果上已经比较居中了,我们看看放大效果:

设计师的像素眼是怎样炼成的?

从技术上来说,这个已经算是垂直居中了。汉字的 baseline 在底部,所以真正的底部是“煮”字下面多出那四个点的底部,也就是第三条线的位置。

如果按照第二条线来划分,刚好上下都是 9px。但是这张图上,除了“煮”字的底部多了 1px,其他都是对齐的。所以视觉效果上的底线应该是在第二条线的位置,也就是上面 9px 下面 10px,所以会感觉有一点点偏。

这种情况与字体息息相关,也没有什么好办法,如果内容固定的话,可以考虑为了视觉偏重而刻意采用不对称的间距,以此来弥补视觉的偏重。

状态变换时的位置抖动

这是个非常隐蔽的灾区,我们页面中经常有很多操作是有状态变换的。大家都知道,网页的具体实现时,是用 background-image 来定位的,而两种状态又是互斥的,所以很多新人会忽略状态切换时的位置变化。

比如这张图中的收藏,单独看两种状态几乎看不出任何问题:

设计师的像素眼是怎样炼成的?

但是如果来回切换几次,就会发现高亮的状态比正常的状态下,图标向左挪动了 1px,我们看看大图:

设计师的像素眼是怎样炼成的?

放大之后,图标与文字间距的差异已经非常明显了。

像素眼的比例尺

好了,讲了这么多像素眼可以发挥的重灾区,再讲一个参照物小技巧。很多人刚一开始没有任何参照物,根本不知道页面或者手机上的任何东西的大小,也就无法得出其他元素的大小。

其实,对于手机来说,有物理尺寸、像素分辨率、像素比等等,不过一般人不会记得,也没办法去心算出来这些结果。

那么最直接的参照物就是,最常用的网页字体,正文一般都用 12px,所以你可以看附近的正文,如果是 12px,那么就相当于有了一个小比例尺了。

比如下图这个字是 12px :

设计师的像素眼是怎样炼成的?

你大概就能估计出蓝灰文字中间的间距也就是 5~6px 了,所以你只需要记住几个常见的字号在各种设备上的长相,那么你就有了一系列的比例尺了。

这里没有考虑放大因素,retina 屏等等,如果把这些都考虑进去的话,那么我想“100像素有多宽”也是一道不错的面试题。

总结

像素眼其实很容易训练的,初期的时候可以多注意一下小鸡君上面提到的重灾区,往往会有收获。

慢慢地就会对这些差异越来越敏感,再后来你就可以瞬间看出页面上的各种瑕疵了,这真的不是处女座的神技,任何人都可以的。

原文来自:优设

作者:@姬小光

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/31752/

(0)
CatherineCatherine
上一篇 2017-06-02 15:08
下一篇 2017-06-02 17:06

相关推荐

  • 陌陌:不全面商业化 不伤害用户体验

    关注订阅号“电商大世界”,海量电商资讯文章打包阅读以下文章数据,由电商大世界 "AI-贝贝",采集、分拣,由编辑 北风整理发布。电商本周要闻:阿里慧聪两大人事变动阿里巴巴B2B事业群总裁戴珊接任速卖通阿里巴巴集团合伙人、B2B事业群总裁戴珊将直接负责全球速卖通业务,而原阿里巴巴全球速卖通总经理沈涤凡,将出任阿里健康CEO。据了解,全球化战略是阿里未来20年的三大核心战略之一。业内人士认为,戴珊此次接任速卖通业务,不仅说明以速卖通为代表的...

    2018-04-01
  • 和几位牛逼的设计师聊了聊“理想雇主”这件事,还有些别的故事...

    互联网领域的设计师们更像是一群“走钢丝的人”:游走在逻辑和审美之间,游走在说服和被说服之间,游走在PM、开发和大BOSS之间,试图最终达到各方的平衡和实现最有效的解决方案。

    2016-06-20
  • 怎样做好汽车交互设计?

    文章来源:汽车造型设计编辑整理:IO酱车内交互系统看似只是整车的一小部分,但由于承担了车辆和用户的“交流”任务,因此里面涉及到的内容很多,每一项拿出来都需要巨幅讨论,今天我们就和大家概括谈谈这里面的几点。目前重点汽车交互设计是决定智能汽车发展水平的重要标志,现阶段智能汽车在此方面关注的主要一点是用户体验。设计流程汽车交互设计的一般流程包括:1. 需求沟通;2. 资料调研;3. 专家评估;4. 用户研究;5. 需求及信息架构梳理;6. 概...

    2018-03-15
  • 当戒指也走向智能化

    小编导语:这是这是一个不错的创新产品设计,特意推荐给大家看看哦。 这款叫做 Smarty Ring 的智能戒指使用了防过敏不锈钢材质,宽 13mm,厚度为 4mm,黑色给人一种酷炫高冷的感觉。 它不仅可以当手表使用,而且它…

    2015-04-11
  • 用户体验七境界

    外观重不重要?当然重要。无论是工业产品设计还是用户界面设计,视觉表现直接传递给用户对产品的第一感受,而这种感受贯穿用户在整个产品的使用周期中,间接影响了最终的用户体验。

    2017-05-29
  • 想为 iPhone X 做交互设计?你需要读这篇文章

    点击上方“CSDN”,选择“置顶公众号”关键时刻,第一时间送达!作者丨NIELS译者丨陈冬【编者按】尽管 iPhone X 采用的全面屏设计方案已经是当下技术的最优解,但其“刘海”却依然引起了众多吐槽,在无法达到真正全面屏之下,为何苹果会选择使用非主流的“刘海”设计,而不是主流的“窄额头”?这是一个仍然在讨论的问题。对于众多的 iOS 工程师及设计师而言,为 iPhone X 进行屏幕适配以及交互设计才是重中之重。对此,本文作者 —— ...

    2018-02-01
  • 极简主义风格:要讲究四大设计要点

    极简风并不是简单的做减法,这也是极简设计最棘手的地方。想必设计师都明白“少即是多”这个概念,但是要怎么在实际设计中践行这种极简设计的理念呢?今天的文章,就帮你梳理一下基本的法则,帮你在设计之前就理顺思路。“完美的设计是可以实现的,也许你还可以向其中加入更多的东西,但如果想从中移除某些元素,就完全不可能了。”

    2017-05-11
  • Word产品需求文档,已经过时了-快使用Axure制作产品需求文档

    说来有些惭愧,写这篇文章是用来教大家写需求文档的,但其实,我很少会写传统意义上的产品需求文档,甚至,我连word都很少用。用惯了Axure的任意布局方式,再用word感觉非常别扭,尤其是在添加图片时,简直感到捉急…

    2016-01-06
  • 金蝶首席用户体验官对“用户体验”的思考

    “也曾经有人要我用一句话来描述清楚什么是用户体验,我说,不好意思,我一句话描述不出来,你给我半个小时。”金蝶公司首席用户体验官钟承东这样回答。产品人,你是否也曾这样认真地思考过:用户体验究竟是什么?你又需要要花掉多少时间多少语言,来组织出一个满意明确的答案?我们渴望的用户体验是什么样子?相信每个人都憧憬这样的用户体验,使用精心设计的产品,有如诗如画的视感,有如沐春风的触感,有余音绕梁的听感,甚至会精细到照顾用户的嗅觉和味觉,接触和使用产...

    2018-04-04
  • 做好用户体验,掌握这些要素就够(一)

    我在人人都是产品经理这个平台上,没看到更全面概括原则与思想的文章,所以我想在这系统的说说。考虑到篇幅太长,用户看的可能会比较费劲,所以我会分成几篇文章来讲。

    2017-05-19