提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
设计中遇到文本间距,小数点,标注偏差等问题,特进行汇总处理
现在用sketch做页面的时候都会边做边按住Alt键进行测量,但是用sketch导出的时候出现偏差和小数点,我在网上查找资料进行参考和实操之后在这里做个梳理和归纳
一、文本与文本之间的间距处理
在进行问题处理之前,我想先对行高做个解释。在sketch一倍图中,我们输入一行文字选中时,顶部和底部到边框距离有留白,那么行高就是文字的大小和顶部加底部留白的高度,如下图所示,文字大小为12,行高为18,顶部加底部的留白为18-12=6
问题1.多行文本和单行文本间距处理
多行文本的时候,设置行高为1.5倍(阅读更舒适),那么文字到边框会有留白(标红处),下图为sketch一倍图,文字大小为16,行高为16x1.5=24(经常需要手动设置行高),上下留白为(24-16)÷2=4
单行文本把行高清零,如文字大小为16,行高为文字大小16,上下留白为零
现在要设置多行文本和单行文本之间的间距为8px,则两个文本框之间的距离为8-多行文本留白4=4则在sketch和sketch measure中测量距离为4px,如图所示:
问题2.多行文本和多行文本间距处理
根据问题一的原理,多行文本与多行文本之间的间距由上文本底部留白加文本之间的留白和下文本顶部留白。
例如一倍图中,多行文本字体大小为16,行高为24,顶部和底部留白为(24-16)÷2=4,设置多行文本和多行文本之间的间距为16px,则16-4-4=8,在sketch和sketch measure中测量距离为8,如图所示
问题3.单行文本和单行文本间距处理
单行文本和单行文本的行高都清零,即行高等于文字大小,那么想要设置的距离进行测量即可
二、测量出现小数点
如果在在进行页面设置前不进行像素对齐设置,则会出现小数点的情况
那么怎么消除小数点呢?
打开sketch工具栏,版本不同可能位置也不一样,把show pixels 和 round to pixel调出来,在设计页面的时候选中页面,在点击这两个工具,即可消除虚边和小数点
三、组的测量
我之前做页面的时经常会把icon和文本组到一个组里面,但是我发现导出后存在一个问题,在sketch里面测量,经常是单个元素与组进行测,而sketch measure里面则是单一元素进行的测量,容易出现偏差。在非表单类设计时,可以不需要把元素组在一起 。
四、表单类设计
在进行表单类设计时,如果元素较多,需要设置两行,那么根据眼动规律,第一行放置的信息要比第二行重要,在进行表单设计时,先做好布局,然后在框里填充内容上下居中对齐。这是UI设计中的惯例,不要轻易打破。
设计中遇到的问题及时解决处理,那么做常规页面会越来越快,可以把更多时间放在需要更多设计的页面,比如活动页、H5等
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册