恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
关于sketch文本行高,间距,标注,消除小数点的解答
0.0°
2019-05-01 原创文章 经验/观点 举报 35182 158 110 20

设计中遇到文本间距,小数点,标注偏差等问题,特进行汇总处理

现在用sketch做页面的时候都会边做边按住Alt键进行测量,但是用sketch导出的时候出现偏差和小数点,我在网上查找资料进行参考和实操之后在这里做个梳理和归纳


一、文本与文本之间的间距处理


在进行问题处理之前,我想先对行高做个解释。在sketch一倍图中,我们输入一行文字选中时,顶部和底部到边框距离有留白,那么行高就是文字的大小和顶部加底部留白的高度,如下图所示,文字大小为12,行高为18,顶部加底部的留白为18-12=6

Image title

问题1.多行文本和单行文本间距处理

多行文本的时候,设置行高为1.5倍(阅读更舒适),那么文字到边框会有留白(标红处),下图为sketch一倍图,文字大小为16,行高为16x1.5=24(经常需要手动设置行高),上下留白为(24-16)÷2=4

Image title


单行文本把行高清零,如文字大小为16,行高为文字大小16,上下留白为零

Image title


现在要设置多行文本和单行文本之间的间距为8px,则两个文本框之间的距离为8-多行文本留白4=4则在sketch和sketch measure中测量距离为4px,如图所示:

Image titleImage title

问题2.多行文本和多行文本间距处理

根据问题一的原理,多行文本与多行文本之间的间距由上文本底部留白加文本之间的留白和下文本顶部留白。

例如一倍图中,多行文本字体大小为16,行高为24,顶部和底部留白为(24-16)÷2=4,设置多行文本和多行文本之间的间距为16px,则16-4-4=8,在sketch和sketch measure中测量距离为8,如图所示

Image title


问题3.单行文本和单行文本间距处理

单行文本和单行文本的行高都清零,即行高等于文字大小,那么想要设置的距离进行测量即可

Image title

二、测量出现小数点


如果在在进行页面设置前不进行像素对齐设置,则会出现小数点的情况


Image title



那么怎么消除小数点呢?


打开sketch工具栏,版本不同可能位置也不一样,把show pixels 和 round to pixel调出来,在设计页面的时候选中页面,在点击这两个工具,即可消除虚边和小数点

Image title


三、组的测量


我之前做页面的时经常会把icon和文本组到一个组里面,但是我发现导出后存在一个问题,在sketch里面测量,经常是单个元素与组进行测,而sketch measure里面则是单一元素进行的测量,容易出现偏差。在非表单类设计时,可以不需要把元素组在一起 。


四、表单类设计


在进行表单类设计时,如果元素较多,需要设置两行,那么根据眼动规律,第一行放置的信息要比第二行重要,在进行表单设计时,先做好布局,然后在框里填充内容上下居中对齐。这是UI设计中的惯例,不要轻易打破。

Image title


设计中遇到的问题及时解决处理,那么做常规页面会越来越快,可以把更多时间放在需要更多设计的页面,比如活动页、H5等










更新:2019-05-01

收藏

158人已收藏

予安的笔记

用心设计

  • 20

    作品

  • 100

    粉丝

  • 34

    关注

  • 设计师一定要懂印刷吗?
  • 平台设计师”与“业务设计师”的区别
  • PS软件系统学习笔记(二)
  • 学习心得+PS软件系统学习笔记(一)
相关标签
经验分享教程ui

    猜你喜欢

      2019-05-01 原创文章 经验/观点 举报 35182 158 110 20

      关于sketch文本行高,间距,标注,消除小数点的解答

      0.0°

      你确定要举报关于sketch文本行高,间距,标注,消除小数点的解答

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年06月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      110
      158
      20

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录