二、分割线
分割线作为页面中的微小元素,我们很容易在设计中忽视它,因此,做好分割线的标注是非常重要的。下面主要以3个主要场景来分点解释分割线的标注:1. 列表流;2.feed流; 3. 内容块之间。
1.列表流
大部分列表流都会用到分割线,比如:支付宝、微信。
这种分割线叫等屏分割线,用于分割列表中的每个数据项。我们标注出列表流的高度,再以图标为参考标注出分割线到图标的距离。
当我们自己在画分割线时,建议分割线使用1px的高度,与开发人员对接时说明在@1、@2、@3的情况下,分割线都是1px。
2.feed流
feed流也是使用分割线的常客,比如:澎湃新闻、简书。
我们需要标注出分割线到内容的间距,再标注出分割线到文字的间距,文字的标注需要注意一点,就是文字本身有默认行高。所以我们不能完全标注到文字本身,而要留出几个像素作为文字自身的行高。
3.内容块之间
内容块之间有时候也会用到分割线,比如:开眼、哔哩哔哩。
我们需要标注分割线到内容的间距,再标注出上间距和下间距。
但这里有一点需要注意的是:在画分割线时会出现遗漏的问题。我们经常会用到sketch来画,但是由于sketch的默认属性,线条的线型是居中(center)的,这会导致我们画的线条在视觉上是对齐像素的,但是在数据上会显示0.5个像素。
当多个元素之间计算间距时会导致数据上显示的和实际画面中的图形不一致。这时就需要我们使用矩形工具来画一个1像素宽的线条,这样就可以既保证视觉上对齐,数据中也是整数。
04、文字
一、文字行高适配
有部分设计设计师用原始方法来标注文字:如下图,标注从上面文字“科”的末端开始测量到下面灰色文字的最高点“2”结束。在这种情况下,开发人员还原出来的效果和设计稿有一定的差距,需要调试很多遍才能达到想要的效果。