亚博账号登录

守望者

@胡桃子:stay实际开发过程中,字体上遇到的problem是most ,So is it最难以解决的。不know 小伙伴stay验收的时候会不会遇到this样的情况,开发明明是按照设计图上的字体和间距来的,可跟设计稿的间距still有差异,this是为what呢?今天和everybody分享一下,文字Yes? 搭建和使用,how 正确的设梦淖肿龀正确的设计,且符合项目开发的实市枰

 

一、排版属性

1.行高

行高是一行文本垂直方向的高度,this个高度和指呶薰兀淖帜谌菽洗τ趖his个高度的水平居中位置,如下图所示。

staycommonly的UISoftware中,Wesurefind 通常默认行高一定比字号本身更大,例如字号为 12dp的文字行高为17dp,导致文本region高度大于实际的指摺his是一个正常现象,becauseif行高和文字同高或更小,那么stay多行文本状态下就无法正常display。

 

2.行间距

stay Sketch、XD 等Software中没有包含的属性需要causeWe重视,那就是“行间距”。

行间距是一个独立于行高之外的属性,stay一些复杂的设计、排版Software中会出郑约癷OS、Android 等前端语言中也有providethis个属性,它是造成We标注与实际开发过程出错的罪魁祸首。

无论是设计过程中,或者设计标注文件中,家灼羧何有关行间距的概睿虽然 iOS 使用行间距sure实郑琱owever实现的effect和设计稿是有出入的。because设计稿中We只能使用行高,所以stay一个文本region中,它的上下两侧都有行高增加的空白region,however实现过程里面没有this一截间距,导致实际文本region和上方元素的距离effect有偏差。

 

3.其他

除了行高、行间距,还有段间距、对齐方式、字间距等排版样式,但对开发的影响不大,设计男』锇应该都懂,所以this里however多步狻

 

二、文字行高适配

目前文字行高间距的标注方法有3种。

1.own手动标注行高

有部分设计设计师用原始方法来标注文郑从梦淖肿畹点和最高点作为行高就行标注,如下图,标注从下面文字“丽丽”的start测量到下面灰色文字的最高点“阿卓”结束。staythis种情况下,开发人被乖隼吹膃ffect和设计稿有一定的差距,需要调试很多遍才能达到想要的effect。


(错误的方式)

 

2.使用sketch默认男懈

使用sketch默认男懈呓斜曜ⅲ瑃his是UI设计师常见的操作习惯,但stay验收开发版本还原度的时候,stillfind 与设计稿标注的间距不一样。


(错误的方式)

this是为what呢?because不同的字形stay高度上都会产生微小的差异,无论是使用原始方法或是使用sketch默认行高去标注文郑加肭岸藄tay编辑文字的Software里的字体默认行高不一致。

 

3.手动修改sketch行高为开发环境下的默认行高

手动修改文字行高,把sketch文字行高与前端默认行高修改成一致,从而给出准确的文字间距。this种方式虽会花费不少time,但也最精确,你sure据此设置出最美观合理的间距,而不用担心上线稿的还原度problem。

下图是iOS的Xcode以及Android文字编辑器对应下默认男懈摺

最便捷的方法:手动调整sketch里的字体的默认行高并形成样式。this样规范蒙杓颇芨玫让开发人被乖杓聘澹脖阌赪e后期的page面校对和调整。

this时眼尖的friendprobably会find ,Android和iOS开发的文字编辑器默认男懈咭膊灰谎。难道We要出2套设计标注文件吗?虽然不可deny的是,最理想状态of course是设计师出2套设计稿,但stay职场打滚过的设计师都会know ,多数product都是处于fast速迭代的过程,出2套设计稿花费的time成本过高,并不符合实际情况。

对于this点,比较建议everybodysure尝试把ios和安卓都设置成一样男懈撸琲n the light of特殊page面再单独做标注调整。

总而言之,specific 使用哪种方法去做文字的标注,要根据own的项目specific 情况specific 分析。

 

总结

由于开发环境下文字上下是有padding高度的,设计师需要手动修改sketch行高为开发环境下的默认行高

以上就是personal男⌒〉木椋琱opesure给everybody一些启发和借鉴~~

 

原文地址:(official account)
author:胡桃子

转载请注明:亚博账号登录 » 开发文字错位,UI需要know 的解决办法

登录收藏
 
你probablylike的:
设计思考——how 设计空状态界面设计思考——how 设计空状态界面
设计沉思录 | 流量魔法师笔记之流量分发设计设计沉思录 | 流量魔法师笔记之流量分发设计
苹果的设计牛stay哪儿苹果的设计牛stay哪儿
App bars: bottom 底部应用栏App bars: bottom 底部应用栏
原创 | 一文彻底看懂UI设计适配与落地(上)原创 | 一文彻底看懂UI设计适配与落地(上)
UI界面设计基础知识UI界面设计基础知识
how 提升UI界面中的下拉菜单细节设计how 提升UI界面中的下拉菜单细节设计
保姆级UI界面版式设计实用小技巧,你知多少?保姆级UI界面版式设计实用小技巧,你知多少?
移动端表单表格设计移动端表单表格设计
设计万花筒|进击的盈利模式之member体系设计万花筒|进击的盈利模式之member体系