对于UI设计师而言,Sketch充满了新鲜空气。

  我想说:感谢sketch让Photoshop不再是UI设计师必备软件。这时候很多初学者的UI设计师对sketch充满了兴趣,甚至踊跃学习。下面胡老师给大家分享一些UI设计中sketch使用指南—入门篇。

  1.符号

  Sketch具有大量的内置功能,可让您尽快从A转到B。但是,如果您不了解这些功能怎么办?甭着急胡老师来了。

  如果您在Sketch中看到“符号”一词,有没有考虑过“什么是符号,我该如何使用它?” 符号实际上是Sketch上最强大的省时功能之一。如果您不使用它们,那么您可以也就完不成今天的工作!

  符号只是可以反复使用的图层。如果更改符号,则该符号的每个实例都会更新。因此,不再需要对一个画板进行调整,而只需要对其他10个画板进行相同的调整即可!

  2命名图层和画板

  一旦开始涉足设计,您要担心的就是图层和画板的命名!

  但是许多初学者低估了保持逻辑和描述性命名方案的重要性。

  首先,一个好的命名方案可以使文档更容易浏览。想象一下您正在处理文件,然后过了一个月才再次打开它是什么样,所以命名也是良好习惯的一部分。

  如果没有正确命名的图层和画板,几乎不可能记住什么地方。忘记搜索特定的图层!

  拥有正确命名的文件还意味着其他设计人员可以方便打开和使用,并在您上次停下来的地方进行提取,而不必浪费时间进行搜索。

  正确命名的作用

  好的命名方案不仅可以使文件易于浏览,而且还可以使导出过程更轻松!您是否知道,如果您将图层,组或画板命名为“assets/图标”,然后导出该图层,它可以智能地将图片导入适当的文件夹中。

  3.不使用参考线,网格和布局

  Sketch附带了大量工具,可帮助您快速有效地设计UI。其中包括辅助线,网格和布局,所有这些都以不同的方式工作,但是在这里可以帮助您使设计保持对称和对齐。

  辅助线

  辅助线可以将您创建设计元素可以捕捉到的结构。辅助线不会在最终设计中导出,它们可以随用随拉。

  您可以通过简单地从标尺上单击并将其拖到画布的顶部和左侧来创建辅助线。如果您没有看到任何标尺,转到“画布>>显示标尺”以启用它们。

  Sketch还具有称为“智能辅助线”的功能。这些并不是您自己创建的,而是Sketch在您移动对象时尝试智能判断距离和路线。

  自己尝试创建两个形状,然后再移动其中之一。您会看到出现这些红色虚线,以帮助您调整形状。

  Smart Guides可以节省大量时间,但有时可能会妨碍您的工作,或者有些麻烦。如果您不喜欢它们,可以通过单击查看>>画布>>显示智能向导来关闭它们。

  网格

  网格由覆盖整个画板的线条组成,以便为您提供使事物保持一致的作用

  您可以通过转到布局>>网格设置来调整网格的间距和颜色。

  版面

  布局的工作方式与网格相似。他们的目的是帮助您保持一致。但是,布局不是传统的网格线,而是提供了垂直和水平列,可用于使元素在整个设计中保持一致的对齐和正确的大小。

  布局对于视口大小可能会根据浏览器或设备尺寸而变化的Web和移动布局特别有用

  4.不使用画板模板

  在Sketch中节省大量时间和麻烦的另一种方法是使用软件附带的预制画板模板。

  您只需单击画板工具(插入>>画板)即可查看这些模板,然后您将在右侧的检查器中看到可用的模板。

  Sketch提供了适用于iOS,Android,图标和其他内容的有用的入门模板,这有助于避免猜测创建和不清楚尺寸。

  5.使用插件

  Sketch当然是用于设计UI的功能强大的程序,但它不能完成所有工作!

  这就是插件的来源:插件通过添加额外的功能来扩展Sketch的功能。

  我建议做的第一件事是下载Sketch Toolbox,它可以帮助您搜索和管理插件。

  完成此操作后,花一些时间学习使用插件,看看那里有什么样的功能!

  我建议您使用Icon Font插件可以轻松地将图标添加到Sketch设计中,并建议使用Magic Mirror插件,可以设计漂亮的UI设计稿。

  总结

  在表面上看来sketch很简单UI设计中Sketch使用指南—入门篇https://www.aaa-cg.com.cn/ui/2880.html?seo1,但是隐藏在背后的快捷,强大的功能更是数不胜数。学到精髓之后可以节省很多时间,并且可以提升您的设计水平。

摘自:https://www.aaa-cg.com.cn/ui/2880.html?seo1

UI设计中Sketch使用指南—入门篇相关推荐

  1. UI设计中搜索页设计指南

    在开始之前,我们先来想一个问题,用户为什么要使用搜索功能呢? 今天我带大家一起来探讨一下UI搜索页面的一些设计方法. 用户搜索的目的是为了快速找到自己想要的结果!搜索页是用户进行搜索的第一站,最理想的 ...

  2. UI设计中的作品集避坑指南

    在作品集和简历的制作过程中,有很多注意事项值得关注,而这些能够让你的作品集和简历,更上一层楼.今天我总结出来的是设计师简历和作品集中常见的 10 个死穴.在此之前,我因为这些问题而拒绝过很多设计师的申 ...

  3. UI设计中引导页设计指南

    一个好的引导页设计会给用户留下良好的第一印象.也可以降低用户的学习成本,快速上手产品并了解新增功能,避免用户使用过程中的迷茫,减少误操作,是提升产品体验的必要手段.今天我就针对UI设计中引导页设计指南 ...

  4. UI设计中首页设计指南

    一款好的APP产品,其首页设计不仅能清晰展示产品核心功能.特点,有着较好的用户体验,还能展示公司的品牌形象,提升用户品牌认知度.今天我就针对UI设计中首页设计指南进行简单的说明. APP首页设计至关重 ...

  5. UI设计中按钮设计指南

    一天,领导丢过来个需求,要求改一下页面上的一个按钮.我想了想,按钮简单啊,很快就画好发过去了,没想到被领导打回来说不行! 我看着自己做的按钮,一脸茫然,这个按钮饱满诱人还亮晶晶的,怎么就不行了呢? 是 ...

  6. UI设计中智能电视设计指南

    最近有小伙伴私信我关于电视端的设计问题,整理了一些个人最近在TV端应用的一些设计经验,供大家交流学习.以下就是我在TV设计的过程中整理的一些方法,结合自己有限的经验后总结的一些针对TV设计的方法规范, ...

  7. Ui设计中LOGO设计指南

    字体LOGO设计就是为了保持简单.纯字体外观是各行各业的流行选择,尤其是科技,媒体,时尚和食品.今天我就针对UI设计中LOGO设计指南进行简单的说明. 什么是字体标志?这是一种LOGO设计,仅包含以字 ...

  8. UI设计中的Feed流设计指南

    拿起你的手机,看看微博,知乎 ,今日头条 ,微信朋友圈....... 谋杀我们多少时间?它们为什么有这样的魔力?让我们来一探究竟吧. 从结构来看,这些社交和资讯类app中,都使用了feed流.feed ...

  9. ui设计中的版式设计_设计中的版式-第3部分

    ui设计中的版式设计 and how not to suck at it 以及如何不吸吮它 This is the 3rd and last part of the series. Here we t ...

最新文章

  1. Spring Cloud Alibaba基础教程:Sentinel使用Nacos存储规则
  2. 自定义的调试函数clr/c++
  3. MySQL查询昨天的数据
  4. 上下文保存 中断_Linux性能优化(CPU篇)(5)——CPU的上下文切换有几种类型?什么是进程上下文切换?...
  5. doxygen相关问题
  6. Android学习笔记---android平台中利用,SAX解析xml
  7. php bc 比较,php BC高精确度函数库
  8. element中form表单resetFields()方法重置表单无效
  9. [状压dp][剪枝搜索] 洛谷 P2831 愤怒的小鸟
  10. 2019每特教育蚂蚁课堂-Java互联网微服务架构面试宝典v1
  11. Javascript对象基础讲解
  12. 360度不停旋转动画demo效果示例(整理)
  13. 12306 流程解析
  14. C语言数字图像处理---2.5图像频域滤波
  15. 浪潮互联网峰会张冬技术报告
  16. 黑马程序员---其他对象
  17. unity应用(Apply)预制体时报错
  18. 我,是一个培训班出来的程序员
  19. 学习ARM开发(3)
  20. 保险基本概念测试人员须知(一)

热门文章

  1. fNIRS中的假阳性和假阴性:问题、挑战和方法
  2. ChatGPT 未来五年会对 NLP 从业者带来怎样的冲击?—分享七月在线nlp高级
  3. android 分析boot.img,Android bootimg的详细分析.pdf
  4. ata计算机操作员 中级 题库,ATA计算机操作员技能补充题库
  5. 避免踩坑之公网域名之实名认证
  6. python 鱼骨图_鱼骨图分析法
  7. 科学家在类脑芯片上实现类似LSTM的功能,能效高1000倍
  8. [软考]系统架构设计师 备考经验分享(一) - 备考计划篇
  9. 初级会计实务--第四章第三节、留存收益
  10. Glide硬盘缓存逻辑