如何有效标注才能高度还原设计稿？（三）

三、图标分割线

3.1图标

图标是设计中最常用的基础元素，我们会在金刚区、tab栏、个人中心、导航栏等不同位置用到。分析图标的间距标注，我们会把所有图标简化成为两类：

规则（有底版）图标

不规则图标

有底版图标

这类图标大多出现在金刚区，比如：淘宝、唯品会。

金刚区图标常用布局有两种，一种是等间距，一种是屏幕等分。

淘宝用的是等间距布局，唯品会用的是屏幕等分。先标注出图标尺寸，再针对不同布局方式来进行间距的标注。这样我们就完成了有底版图标标注，与开发人员对接的时候就能很好的说明清楚，减少不必要的沟通成本。

不规则图标

这类图标会出现在金刚区、列表流、导航栏、tab栏等位置，比如：得到、马蜂窝等。

不规则图标我们需要按照图标盒子的区域来进行切图，标注的时候也是以图标盒子区域来进行标注。

同时，还需要：标出图标盒子是有最小可点击区域。通常来说最小的可点击区域是48px*48px，把它写入规范文档中。这样，方便开发人员查阅，也节省了整个项目流程的时间。

3.2、分割线

分割线作为页面中的微小元素，我们很容易在设计中忽视它，因此，做好分割线的标注是非常重要的。下面主要以3个主要场景来分点解释分割线的标注：

列表流

feed流

内容块之间

3.2.1 列表流

大部分列表流都会用到分割线，比如：支付宝、微信。

这种分割线叫等屏分割线，用于分割列表中的每个数据项。我们标注出列表流的高度，再以图标为参考标注出分割线到图标的距离。

当我们自己在画分割线时，建议分割线使用1px的高度，与开发人员对接时说明在@1、@2、@3的情况下，分割线都是1px。

3.2.2 feed流

feed流也是使用分割线的常客，比如：澎湃新闻、简书。

我们需要标注出分割线到内容的间距，再标注出分割线到文字的间距，文字的标注需要注意一点，就是文字本身有默认行高。所以我们不能完全标注到文字本身，而要留出几个像素作为文字自身的行高。

3.3、内容块之间

内容块之间有时候也会用到分割线，比如：开眼、哔哩哔哩。

我们需要标注分割线到内容的间距，再标注出上间距和下间距。

但这里有一点需要注意的是：在画分割线时会出现遗漏的问题。我们经常会用到sketch来画，但是由于sketch的默认属性，线条的线型是居中（center）的，这会导致我们画的线条在视觉上是对齐像素的，但是在数据上会显示0.5个像素。

当多个元素之间计算间距时会导致数据上显示的和实际画面中的图形不一致。这时就需要我们使用矩形工具来画一个1像素宽的线条，这样就可以既保证视觉上对齐，数据中也是整数。

相关推荐

: 2020年Java程序员就业难吗？

2020年Java程序员就业难吗？2020年无论是对于企业还是个人都是比较艰难的一年，在这年因为疫情有些企业扛不住了，倒了下来，有些人呢！失业啦！所以2020年对于大家来说都比较艰难，但是学习Java成为Java工程师就业会好转吗？Java工程师好就业吗？饱和了吗？

: Java工程师是干什么的？

Java工程师是干什么的？我们经常听到Java工程师就业薪资高，都想通过Java培训成为Java工程师，但是具体到Java工程师是做什么的可能在参加Java培训班之前我们并不清楚今天小编汇总一下Java工程师是做什么的。

: Java工程师前途在哪里？

Java工程师前途在哪里？有些小伙伴参加完Java培训成为Java工程师，现在做的还不错，有些小伙伴参加完Java培训班直接转行了，现在Java工程师的前景到底怎么样？还好吗？下面小编分析一下Java工程师的前途如何？

: Java学到什么程度可以就业？

Java学到什么程度可以就业？我们参加Java培训无非就是为了就业，很多零基础学习Java的小伙伴特别想了解自己学习Java技术到什么程度就可以就业啦，其实不同的公司对于Java程序员的要求是不一样的，而且还有初级Java工程师，高级Java工程师之分，其实技术多多益善最好，不过小编针对不同重量级的公司进行简单介绍。