角色：UI设计师、前端(安卓/ios开发)

系统：安卓、ios

设计师：“你这写的字跟图片的间距不大一样啊？”

前端：“哪里不一样了？”

设计师：“你看看这个间距，是不是比我设计的大了许多...”

前端：“但是我就是按照你的给的间距写的啊！”

设计师：“？？？”

设计师：“这个字怎么没有加粗啊？”

前端：“这哪里有加粗的，我看不出来啊？”

设计师：“？？？”

设计师：“你这个字跟图片没有居中，图片往上移动个1px吧！”

前端：“就1px，这又看不出来，就不移了呗！”

设计师：“？？？”

...

上面的对话是否也是你日常工作的一部分？

在跟前端沟通的过程中，经常会因为终端上线的视觉效果产生各种问答。而设计师常常会产生这样的疑问：输出的设计上都是有明确的标注的，为什么前端写出来的效果跟设计稿会有那么多不同？应该大多数设计师都曾有过这样的疑问吧，而最终判定是前端审美的缺陷(天生的)而谅解了所有的bug。的确，大多数前端是有审美的缺陷，但为什么在美女帅哥的选择上却高度统一呢？

想必还是方法用的不到位吧~

移动的界面内容都是有限的，很多效果重复，对界面效果判断也是可以在工作积累中提升的(若一直无法提升，那就是人问题)。前端只要在写完页面后与设计稿多进行比对，与设计师多沟通设计的规范，视觉问题基本都是可以避免的。如果前端用肉眼还是无法识别视觉问题，设计师可以建议前端运用透明覆盖的方法查看效果，这种方法最适用于查看元素之间的距离、图标、按钮、字体大小，当然界面的主要元素也就是这些(设计稿是ios尺寸，安卓顶部导航栏高度会有所差异)。

除了给予前端查找视觉问题方法，设计师也需要主动的向前端了解一些技术默认的规则，这里我对文字、文字组合进行了整理：
1、默认字体和字体粗细
2、文字组合、距离

字体相关文章：https://www.pc841.com/shoujizhishi/54418.html

· 默认字体和字体粗细

ios字体

移动端APP字体使用上是可以自定义的，但是所用字体基本上都是系统默认的，自ios9问世后“苹方”字体替代了使用多年的“华文黑体”。苹方字体有三种样式TC、SC、HK，且分别有6个字重(字体粗细)，三种字体比较， SC 看着更加规范统一，设备使用上也基本是 SC ，而我发现 TC 和 HK 的字体样式上基本一致，但最让我不理解的是，、。都一致靠上显示，字体也就个别有所不同(字重均是Regular)。

根据字体的字面理解，我查看了繁体字和香港常见字体...很显然跟 TC、HK差异很大，所以这两种字体差异具体有啥作用？希望了解的设计师，能够在留言处讲解一下~在此谢谢！

前面提到苹方是有6种字重(字体的粗细)，大多终端展示使用的是“Regular”，一般加粗使用“Semibold”，如果追求页面逼格的，常用文字可以选用“Light”，加粗选用“Medium”。
在追求逼格的时候，一定要分析项目用户是否适合使用纤细的字重，小说类型产品的用户也包含大批中年层，中年层视力不比年轻人，纤细的字重不易看清，所以文字偏多的产品不适合使用纤细字体。

还有一点是文字的颜色也会影响阅读感受，很深字色过重，字体会产生粗壮的感觉，阅读起来会很累，所以文字较多，字色要适当的添加一些灰度，缓和一下视觉。
微博与陌陌是属于社区+社交类的产品，陌陌首页用户发布状态的文字明显是比较纤细的，浏览整个页面，用户的文字类容吸引力很弱，且分隔线很浅，内容组合就显得较弱，整体看着比较凌乱。

严选属于电商类产品，走小资风格路线，整体页面风格走简单和性冷淡。且多次见到的线下推广是在各个互联网公司比较多的地方，互联网公司年轻人最多，目标用户比较年轻化，接受度强。电商类产品主要以图片吸引用户，严选弱化文字的字重，很符合整体的设计格调和用户定位。

Android字体

安卓系统默认字体英文：Roboto   中文：Noto（思源黑体），在设计中，思源黑体字重有7种。
但是系统默认的字重只有两种，Bold和Normal，italic是字体样式，倾斜，虽然类别比较少，但是安卓字体也是可以自定义的。

· 文字组合、距离

文字与图片，文字中穿插标签的组合是很常见的，设计图的距离十分完美整齐且规范。

但是每次视觉验收的时候，就开始出现问题，起初让前端只是动动距离，但是这问题过于频繁，也不是个事，然后开始炮问前端。在得知原因后，原来这个问题是我们设计师了解的却又容易忽略的问题。

在用sketch设计的时候，元素之间的距离处理都是统一的，为了便于元素之间的距离计算，会将段落间距显示位置进行数据调整。

而设计输出的软件只显示默认的行间距，调整后的是计算不了的，前端看不到，代码上也就默认处理了。所以，段落的间距可以与前端约定俗成，或者是在设计稿中添加提示。

标签与文字组合，标签有偏上的问题也是跟文字顶部间距相关，若需要去除文字顶部与最底部间距(段落中间行间距不变)，前端是可以添加属性去除。


· 总结

1、文字可以自定义，可以要求前端调整字重(字体的粗细)。
2、多行文字，sketch默认间距为6px(包含上下间距)。
3、便于元素之间的距离计算，可将段落间距调至到“Paragraph”内。
4、系统默认字段行间距，前端可以添加属性，去除最顶部与最底部的间距，段落之间距离不变。

如有疑问和见解，欢迎共同解决探讨~

补前端知识的图