美狮美高梅-美狮美高梅官方网站

美高梅视点
美高梅曾经做过哪些事情?美高梅的发展怎样
用4px网格策划方法,让您的策划还原高达 95百分比
发表时间:2019-07-12

美狮美高梅

【直营信誉】MGM,美狮美高梅官方网站最具公信力的博彩集团官网、更有高质料的游戏平台、打造在线博彩第一直营,美狮美高梅不单拥有环境上最多样化的游戏投注平台,再是为衣食父母供给实时、刺激、高信誉的效劳保证和高质料的游戏。

易于 可言,文字的实际占位在页面中并不是紧贴文字可视边界,是有一定的额外边距的,以是对于标注稿中的文字部分来说,开发往往做出来的成果与策划稿会有偏差。那如何精确视觉规范,又能兼顾开发实现,是本文探讨的一个小case。文章供给一套策划方法,旨在更好严谨地实现规范化,精确化,在策划与开发之间保持平衡。

我用 4px 网格策划方法 2 年多了,也尝试着让我的TEAM使用这套方法论。方另,我终于克服了拖延症,决定在我的第一篇 Medium 文章中来探讨这个方法,并期望用这篇文章来获得众家的一些反馈。

小case

在平时的work中,让我感到抓狂的是,文本占位险些总是比实际的文本高度要高。易于 ,当使用文本占位的高度来应用边距规范时,总是会显得比预期的要更大。文字行高越大,偏差就越大。在下面的示例中,策划是通过运用文本之间的容量来创建的,当一切间距都为 32px 时,一切的垂直间距就现实来说会比 32px 大很多

译者注:这个众家在使用 sketch 时应该会经常遇到。



△ Photo by Max Delsid on Unsplash

解决

由于这样的小case,我使用 4px 网格方法来规范视觉精度。以下是我的策划过程:

  • 在背下中设置一个 4px 的网格;
  • 把一切的圆素和文本都对齐在网格上;
  • 使用网格来测量文本之间的留白区域,而不是直接使用文本占位的大小。

易于 得出,受到 Medium 上 Nathan Curtis 的《 Space in Design Systems 》文章影响,我也给TEAM定义了一组间距值,方便快速使用。



为了让一切始末都能对齐于网格上,这种方法基本上将文本的可视高度取整为 4 的倍数,这样可能会遭成 1-2px 的误差,但莫过于仍然会比直接用文本占位来设定间距更为精确。


△ 测量文本上方最近的一条网格线的跨距

有一个例外:在组件或者某个容器中的图标或者文本应该垂直居中,而无论他们是否对齐于基准网格上。因为大多数时候开发可以使用弹性计划(flexbox)将圆素直接居中,这比标注静态的间距更为实用。



每个行内圆素中的文本在 sketch 中都使用上下居中对齐,基线在此时没有对齐也是没有关系的。


理由

上卫意义上,网格策划常常用于纸媒印刷,用来打造垂直方向上的节奏感,在策划 Web 用户体味的work中,同样也需要把握好这样的节奏感。

对我来说,使用 4px 网格方法是视觉精度和策划效率之间的平衡。在小case部分,我聊下了使用文本占位对齐所带来的麻烦,用户莫过易于 看不见这个所谓的文字外框的。以是使用这种「严谨」的策划,莫过易于 没有多大意义的,会遭成视觉上的不平衡,并没有给用户带来好处。

另一个角度来说,忽略文本占位容量,使用网格来进行测量,则可以获得更高的精度。

下面是这两种方法的比较,吾们可以看到,当使用同样的间距值(32px,12px,32px,32px)时,使用网格测量的策划更准确地反映了预期的间距。

译者注:这里我想提一句,在实际输出标注稿的时候,间距不是图中所示,标注会自动减去文字占位容量,譬喻 Seattle 与 City in Washington 之间的标注间距可能是 8px,这样开发写出来的 css 代码才能与页面中的实际文本占位对齐。





有人可能会说,如果是因为从文本占位而产生了太多的间距,so,将上图第一张卡片策划中的「Seattle」间距从 32px 降低到 28px 或者 24px 来与顶部和左侧的 Padding 值同样不就行了。但是,这样做就成了一件靠感觉的事情,除非去计算像素,否则永远无法细目。另一关键,4px 网格规范供给了一个更精确、更好把握的方法来细目间距大小。



已知小case:如何与开发对接

当开发拿到这样的策划标注稿时,看到的间距可能是看似没有规律的随机间距,这对开发来说,并不友好。




吾们还研究了许多人提出的一种减少随机性小case的热门 技术实现 ,使用::before 和::after CSS 伪类来「裁切」边界框(本质上是对行内圆素的间距校正)。然则,我的开发男友则告诉我:

使用::before 和::after CSS 伪类并不理想,因为在不同的字体,浏览器,操作系统甚至不同的屏幕分辨率上都不一致。针对某一个字体做好的设置,在其他区域又可能出现小case。从开发的角度来说,这样做也没有遵循很好的代码规范,因为是使用了负边距,将无关的多余圆素应用到了 DOM 结构中,这可能会导致一些意想不到的副感化。易于 ,在真实porject中,这种 技术实现 不值得冒险。

(译者注:貌似这里作者并没有明确与开发的对接,我个人认为,作为垂直方向上的间距,在文字大小不变的环境下,让开发直接按标注的间距值来写 CSS 值,复杂度也能接受。)

不同语言如何应用

我曾经做了一项不同区域语言的研究,研究我的方法是否支持 8 种书写语言(拉丁语,汉语,西里尔语,德语,希腊语,韩语,日语和泰语)。然下我意识到,无论使用哪种度量方法,最终开发都是从标注稿中获得间距值写进 CSS 中的边界框间距才是最要紧的。不同的字体,即使行高同样,可视高度也会有相似处。然则,正如下图中所示,尽管有一些细微的改动,一切语言的始末仍然相对聚集在同样的地位上。


△ Photo by Joshua Sortino on Unsplash



——美高梅分享

XML 地图 | Sitemap 地图