最新公告
  • 欢迎您光临xd素材中文网xdsucai.cn,服务于广大UI设计师。立即加入我们
  • 超实用的Sketch的10个小技巧_Sketch教程

    我们经常用Sketch设计过程中会遇到各种小问题,我们今天就教大家一些sketch技巧或许会给你带来帮助。

    1、Sketch分割线,用 fill 替代 border

    List 模块是界面设计中最为常见的模块,一倍图下(以下案例均以1倍图示意,即 375*667 尺寸),用 skech 处理单个 list 单元分割线时,建议使用高为 0.5px 的图形,而不是border。
    这样可将 0.5px 的图形与底部做底部对齐处理,而使用 border 则会出现 0.5px 的悬空,造成设计稿不够严谨的情况。

    2、奇数与 0.5 的使用场景

    一般情况下,我们建议所有与元素的尺寸与间距均设定为偶数,而对于不可抗拒的因素,比如在制作大按钮时,iOS官方的处理办法是固定左右间距(Margin),即按钮距左右边界的间距一致(如右上图:按钮距左右分别为 24px,此时按钮宽度出现 327px 是可以的)。
    但对于按钮内部而言,按钮的高度一般为偶数,而我们时常会遇到字高(Font height)为基数的情况,此时建议将文字做强制居中处理(如下图:当文字距离上下分别为 10px、9px 时,建议将文字上移 0.5px ,以保证视觉居中的识别效果)。

    3、善于使用Sketch的图像填充

    设计过程中,对于需要使用图像(pic)填充的元素,建议使用图形填充属性中的「图像填充」而非将图片做剪切蒙版的处理。
    这样不仅能保持设计文件的轻量化,对于经常团队协作的小伙伴而言,也能在一定程度上降低必要操作的工作量。
    题外话:为了保证使用图形填充的美观程度,这里需要将图片素材提前处理成一致大小的素材备用,并做好分类整理,尽管前期会有一定的工作量,但对于后续的工作内容上,不仅能提升选用图片素材的效率,也能保证设计稿视觉风格的一致性。

    4、剪切蒙版让画板更加整洁

    如今越来越的团队开始强调设计的组件化意识,而对于设计稿中的组件化模块,不妨试试试这样做:
    在模块单元下方绘制一块图形,然后将上方的所有元素剪切蒙版至这块图形当中,并做打组 合理命名处理,这样在框选画板中的元素时,你的文件自上而下都是规整的矩形模块,而不会出现超出画板的定界框。

    5、你的文字调整字高么

    文字是制作界面的必要元素,在设计与开发这对cp的相处过程中,我们经常会发现开发小哥哥尽管按照设计稿的切图标注一比一开发,也依然会出现实现效果不佳的情况,这是因为 sketch 的默认文字高度与开发工具的字高不是完全一致的,如果将 sketch 中的字高调整成开发工具中的字高,则会在一定程度上解决这个问题。
    具体规律如下(限 iOS系统中的英文字体):8-14号字高范围为字号 2、16-24号字高范围为字号 4、26-36号字高范围为字号 6、38-40号字高范围为字号 8。
    小伙伴们也可以自行跟自己的开发伙伴配合,测量 iOS 中文,Android 中英文的匹配关系与规律,以便更好的还原自己的设计作品。
    题外话:对于 iOS 系统而言,英文字体为 San Francisco,它具有动态可调节的神奇效果,即字号小于 20pt 时,使用 SF Text,因为其字母的半封闭空间与字母间距更大,可读性更好,适用于较小的字体;而字号大于等于 20pt 时则使用 Display。

    6、在 symbol 中切图效果更佳

    Sketch设计过程中,建议将所有需要切图的 icon 或 图片,都在元素底部绘制好透明的定界框,打组将其转换为 symbol,并做好合理命名。
    在 symbol 中,切片放在元素的组上方,最后将切片和内容再打一个组,选中切片勾选中右侧属性栏中的 Export group contents only,即可保证设计稿上传任何协作工具(蓝湖 or invision)时,下载的切图为透明且为预期尺寸的。

    7、整理一下 symbol 的命名

    symbol的命名按「一级/二级/三级/…」或「分类A/分类B/分类C…」即可在设计文件中切换相同种类的素材时,保证右侧的选项中元素的一致性,大大提升设计效率。(注意两者之间一定要用/区分)

    8、整理一下 symbol 的排序

    symbol的排序按照尺寸大小,自上而下的排列,这样在团队协作的过程中,尤其是整合多人的设计文件,也能保证 symbol 的合理性和整洁程度。
    题外话:多人协作要保证命名一致,合并文件时系统则会自动将两个文件中的 symbol 合并为一个,从而避免出现一份文件中,同一的组件出现 n 种样式的情况。
    题题外话:在设定 symbol 的过程中一定要保持克制,精简切图的尺寸数量,比如将 22、24、26px 大小的切图都合并为24px,不要问为什么(不想打字解释了,太累了),稿做多了你会感谢我的😂

    9、Sketch 文件也可以有封面

    设计稿完成后,尝试制作一个简单的封面(可包含项目Logo、版本、或其他描述什么的,至于具体放什么完全取决于你),然后在封面页保存,你的设计文件缩略图就会显示为你的封面内容,对于多模块,多版本的设计文件而言,这简直就是强迫症的福音。

    10、试试用 iPhone X 的尺寸做设计吧

    试试用 iPhone X 的尺寸做设计吧,为什么呢~
    实际上,我们发现 X 的尺寸(375*812)与 8 的尺寸(375*667)宽度上是一致的,所以用 X 还是用 8 在宽度上是没有任何差异化影响的;
    而使用 X 尺寸的画板设计,我们不需要额外考虑任何适配成本,用 8 怎么做,用 X 就怎么做,因为 iOS 的官方 UI kit 中,已经将顶部刘海和底部的 Home Indicator 预留好了,所以完全按照在 8 的画板中的做法去做就好了,而我们却可以同时感受设计稿在 8 和 X 两种尺寸中的效果,也便于注意特殊吸底元素的适配关系,一举两得。
    题外话:使用 X 做设计,在项目复盘的过程中,你的设计也会包装的更加出色~  
    xd素材中文网,提供优质的UI设计资源免费素材,有xd源文件,sketch源文件,设计规范,实用的商业ui设计教程。
    XD素材中文网 » 超实用的Sketch的10个小技巧_Sketch教程

    常见问题FAQ

    关于我们
    我们是一家服务广大ui设计师的素材平台,提供包括UI、平面设计、ppt模版,网页素材、png素材、设计插件、设计软件等一些列优质资源免费分享给到设计师,有效提升工作效率。
    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    百度网盘为什么下载慢?
    国内只有在百度网盘放资相对靠谱,基本不会出问题,但百度网盘限制了非SVIP用户的下载速度和稳定性,不过使用百度云盘软件下载(不要用网页直接下载)会相对稳定,而且能断点续传;
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

    发表评论

    • 62049会员总数(位)
    • 28003资源总数(个)
    • 141本周发布(个)
    • 0 今日发布(个)
    • 538稳定运行(天)

    提供最优质的资源集合

    加入会员 免费领会员