您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

设计师与前端的灵魂碰撞-字

原创文章 分类: 经验/观点 版权:
9207 162 265 18
2019-01-27
71.4
首页推荐


Image title

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

系统:安卓、ios


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

前端:“哪里不一样了?”

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

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

设计师:“???”


设计师:“这个字怎么没有加粗啊?”

前端:“这哪里有加粗的,我看不出来啊?”

设计师:“???”


设计师:“你这个字跟图片没有居中,图片往上移动个1px吧!”

前端:“就1px,这又看不出来,就不移了呗!”

设计师:“???”

...


Image title


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

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

Image title

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


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

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


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

· 默认字体和字体粗细


ios字体


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


Image title

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

Image title

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


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


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

Image title


Android字体


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


· 文字组合、距离


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

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

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

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

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


· 总结


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


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


补前端知识的图


Image title






我叫小梦婷

WX: DY1410006357

201粉丝/103关注

砖家小有见解当仁不让lv.1一鸣惊人首页新秀
小梦婷的2018闪屏页插画设计(一)

扫描二维码
去手机端查看海报

我叫小梦婷

TA已经获得12枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN