网易云音乐「Fin字高修复神器」正式开源上线 | 小而美的「插件」,彻底解决了困扰业界由于“字高因素“导致视觉还原不一致的问题
该工具帮助 UI 设计师与开发之间简化繁重的验收步骤,让双方合作变得更简单、高效和一致。
?本文纯干货,约1900字
预计阅读时间:5分钟
1. 我们如何与视觉还原度较劲?
1.1 行业痛点
-
设计???
-
开发???
1.2 现状分析
「问题深挖:影响设计还原的关键因子是什么??」
2. 我们是如何解决的(设计+技术)
「我们的目标:最好是能做到字高像素级还原!?」
开发??? 号外号外!各端的解决方案现开源给到大家,别太感动了哈~
3. 「Fin字高修复神器」设计使用指南
「一款手残党也能快速领悟并上手的工具,不接受反驳哦?」
3.1 插件安装与打开(Figma)
? 当前可修复的字号仅限在8-75号之间,目前仅限苹方(PingFang SC), SF UI Display, Inter字体
进入「community/社区」→ 搜索 “字高修复神器” →「Plugins/插件」→「Install/安装」
3.2 插件功能介绍(Figma)
「字高修复神器涉及两个核心功能?」
功能一:单行行高修复神器— 主要修复在设计稿中 Frame/画板内的所有单行行高问题。
功能二:多行行高计算器 — 快速解决在设计稿中想快捷设置多行行高的场景。
3.3 插件使用方式(Figma)
1. 设计师在交付给开发前,选择想要修复的 Frame 或 Text 后点击「Auto Fix/自动修复」,同时底部会出现 “Fix Success/修复成功” 的提示信息说明你选择对象中所有单行行高修复已完成。
3.4 插件安装与打开(Sketch)
「重要的事情说三遍!?」
3.5 插件使用方式(Sketch)
#import <NEUIKit/UILabel+NEDolphinText.h>
UILabel *label = [UILabel new];
// 设置字号为12
UIFont *font = [UIFont fontWithName:@"PingFangSC-Regular" size:12.f]
// 设置字体、文字内容、视觉要求行高
[label ne_dolphin_setTextWithFont:font text:@"测试文案" lineHeight:17];
方法1:文本包装span修改字体属性 - 建议
android:includeFontPadding="false"
单行标准行高 // 内容 + 字号 + 字号单位
setText(warpStandardHeightSpan("ceshi", 12 , TypedValue.COMPLEX_UNIT_DIP))
多行指定行高 // 内容 + 设计稿指定1.5倍行高
setText(warpFixHeightSpan("ceshi" , 18))
方法2:自定义组件
<com.netease.cloudmusic.core.dolphin.component.text.DolphinTextView
android:textSize="12dp" // 设置字体大小
app:dolphinText="文本内容" // 设置文本内容
app:dolphinLineHeight="18dp" // 设置行高 (仅多行文本需要)
/>
{/*lineHeight即视觉稿行高 */}
<Text style={{ fontSize: 12, lineHeight: 17 }}>
文本内容
</Text>
撰文 ✎ 网易云音乐MDC
图片 ✎ 原创/网络
未 经 允 许 请 勿 转 载 到 其 他 公 众 号
在 首 页 输 入 关 键 词 转 载 获 得 授 权
本篇文章来源于微信公众号: 网易UEDC