【基础篇】夜雨原创玩转Sketch教程课时2:初识Sketch界面

【基础篇】夜雨原创玩转Sketch教程课时2:初识Sketch界面,第1张

安装并打开Sketch软件后,首先看到的是欢迎界面,在欢迎界面,我们可以选择新打开文档,或者打开历史已有的文档。

Sketch的主界面非常的简洁明了,主要分为菜单栏、工具栏、页面/组件、图层区、画布/画板、检查器等几个部分。

一共有12个一级菜单,比较常用的是“Sketch”、“文件”、“插件”这几个。

其中,在“Sketch”中,可以配置组件库和素材;在文件菜单中,可以选择从模板新建一个Sketch文档,或者导出的内容;在“插件”菜单中,可以支持我们按照并使用第三方插件。

菜单栏下方就是工具栏,这里放置一些常用的工具可供我们使用,例如用矩形工具画一个矩形。

右键点击工具栏,选择“自定义工具栏”,即可根据自己的需求定制工具栏。分成3步走:

中间的空白区域,我们称之为“画布”,是可以无限延伸的,我们可以在上面添加形状、线条、图像、文字等内容。

通过添加“画板”,即点击“画板”工具,可以在画布上添加一个画板。另外,Sketch还提供各种尺寸的画板预设,帮助你定义好界面设计尺寸。可以限定设计区域。

在画布的左侧和顶部边缘,有标尺显示,方便我们把握设计尺寸;也可以添加参考线来设计,在标尺上点击,可以添加参考线,把参考线拖动到标尺左上角的位置,松开即可删除参考线。

页面/组件位于工具栏下方,整个Sketch页面左上的位置,在Sketch中,可以用“页面”来组织、区分不同的设计内容,在“页面”上,点击“+”可以新增一个页面,双击页面名称,可以“重命名”页面。

另外,在“组件”面板可以维护组件,后续在组件篇章专门讲。

图层我们可以理解为界面的元素,包括形状、线条、图像、文字等元素,都可以是图层。点击图层右侧的“眼睛”图标,可以显示、隐藏图层;在图层栏底部,可以对图层进行筛选。

选中多个图层(可以在画布或者图层里圈选),右键点击呼出菜单,可以把它们归在一组。

在Sketch界面的右侧,就是检查器,主要是用来调整图层的大小、样式、阴影、模糊等属性,比如说调整矩形的颜色。

该系列课程已经全部上架网易云课堂,完全免费学习,基于最新版Sketch61.1制作,迭代更新速度快。 课程地址,点击篮字直达,可以提前学习全部课程。

对交互设计有兴趣的,可以购买收费课程《零基础入行交互设计》学习。 课程地址,点击篮字直达,现在购买,和夜雨1对1交流设计经验。

Sketch Mirror只能识别在画板上设计的原型,如果设计内容不在画板上,是不能被Sketch Mirror识别出来预览的。所以,我们可以先通过工具栏“画板”工具(或者快捷键“A”),添加一个合适的画板,点击“画板”工具后,在检查器就可以看到不同的标记好尺寸的画板预设,我们可以点击其中一个,即可快速创建画板。或者通过自定义来绘制一个画板。

如果您在使用自定义绘制的画板,即时大小是iPhone 8的大小,但是在Mirror上播放原型时,您会注意到您的画板可能会缩小(左侧),因为它们会自动调整到适合视图的高度。

这是因为mirror不能识别到你的“屏幕设计大小”导致的,所以,我们必须先从检查器那里选择一个预设好的画板,例如iPhone 8,Sketch Mirror就会知道这个屏幕设计的大小是iPhone 8,不管我们对它的大小如何进行调整,Sketch依然可以识别得出来(如上图右侧所示)。

推荐阅读:

使用手册: Sketch中文手册(2019)

好书推荐: 新书《Sketch交互设计之美:从零基础到完整项目实现》上架

画布是我们的设计产生的地方,是无限的。所以我们不必担心我们的设计在何处开始,因为画布不会没有空间。(类似无限平面)不过如果你一定更喜欢在一个固定的空间中开始设计的话,你可以在你的画布上创建一个艺术画板。(画板在工具栏中可创建,快捷键A)

工具栏提供我们快速渐变的接口帮助我们去取得重要的工具和做一些你常做的事情。通常情况下软件帮你在工具条中安排了一些默认值,但是你也可以根据你的使用习惯改变这些 *** 作。 你可以通过自定义工具栏这个选项(视图->自定义工具栏)来添加其他常用的工具。

在右边这块区域,你可以发现你可以在这边改变任何你选中的层上的内容设置,或者是你正在使用的工具。

在层目录中,你可以看到和选择文档中的所有页面,也可以看到页面上的艺术画板和不同的层。

组件面板,在此你可以找到文档中的所有你的控件,文字样式,层样式,你也可以使用任何你允许的公共库。你可以轻易的拖动组件进入画布中。tips:如果你想要显示你的全部设计,可以将sketch的ui全部隐藏(视图->隐藏 *** 作界面)

#如何放大和移动这个画布

你可以通过摁住空格键+鼠标点击不放松拖拽的方式移动画布,或者如果你没有选中任何涂层的话,使用方向键。

如果要放大或者做小的话,你可以按住⌘ 键+鼠标滚轮(两只手上下移动 mac),或者直接使用触摸板的放大缩小功能(即两只手指的距离变大或者减少)或者直接使用快捷键Z。这里也有一些快捷方式:比如⌘+是放大,⌘-是缩小。

#如何使得画布转变为像素展示

sketch的默认画布展示是矢量模式,即他的分辨率是独立的,可以无限放大。(如不理解可搜矢量图的特点)

如果你从事的设计去看到每个像素是十分重要的,那么你可以在视口->画布 ->缩放时显示像素,或者直接使用快捷键⌘p来显示像素,当你缩放超过100%时,就会有独立的像素点显示。

#如何显示像素网格

选择视口->画布 ->缩放时显示像素网格或者直接使用快捷键⌘X来显示,一旦你显示超过600%的放大比例,那么就可以在页面上显示尚未对其像素网格的内容,从而调试对齐。

#如何使用标尺和创建引导线

sketch一开始的展示是将标尺默认隐藏的,如果要打开的话可以在视口->画布 ->显示标尺或者使用快捷键⌘R

你可以通过拖拉和点击你的标尺来设置基准点。如果要锁定他们就在角落上点击锁住,重置这些标准点是可以通过视口->画布 ->还原标尺

你也可以简单的通过拉取标尺来设定引导线,当你不需要他们的时候可以在标尺上右击删除全部竖向/横向参考线,或者摁住不需要的参考线离开画布并松开。

#如何创建网格

Sketch提供两种格式的网格,一种是普通的网格,一种是布局,如果需要的话两者可同时呈现。 

如果要设置普通网格的话,选择视口->画布 ->显示网格或者通过快捷键⌘G,如果要改变网格的格子大小,或者是线的粗细和颜色的话,选择视口->画布 ->网格设置

如果要设置布局的话,选择视口->画布 ->布局设置,使用选项可以显示横纵的布局,包括颜色,宽度。

*需要注意的是,你只能在艺术板上应用网格,或者如果没有任何艺术版的话可以在画布上显示。你可以同时为不同的艺术班设计不同的网格布局。

当你有一个网格布局时,组件会自动吸附到你所创立的网格系统上。

#测量

在一个画布的不同层之间进行测量,你需要选中第一层,然后按住 option键 选中你要测量的其他层。如果是在同一个组之间测量,那么需要按住 ⌘ 。

#吸附功能和智能辅助是如何工作的

当你移动或者插住图层或者标记时,sketch会自动展示与附近层之间的距离,而智能辅助就会帮助你吸附到距离最近的层上的物体中心或者是边缘。(此部分功能基本上同ppt的吸附)可对齐边缘/中心,模仿临近元素的宽度和高度。

你可以改变工具栏上的功能呈现,下面是默认的工具栏状态。

置入:  可以添加不同的层级元素到画布上,包括矩形,圆形,图片,文字等

素材:  可以插入文字,图像或者是自定义的素材

创建控件  将一个你选择的组件或者元素转变为一个可以重复使用的控件,你可以为它新建一个名字以及一些其他选项

前置一层/后置一层/编组/解组  帮助你组合你的元素以及移动他们的层级关系 

编辑/旋转/蒙版/缩放/展平  为编辑元素提供简单的入口

联结/减去/交集/差集 主要是布尔运算(boolean)的 *** 作

放大/显示  改变了你的设计是如何在画布中展示的,以及你的重点在哪儿

预览 展示了你的设计在原型机上是如何演示的

云端  允许你分享你的文档在sketch云端

输出  提供了一种快速导出文档的方法

*你也可以将工具栏隐藏(视图->隐藏工具栏)

可以找到所选图层的设置或正在使用的工具。检视栏根据选择的或正在执行的 *** 作隐藏或显示这些设置。

对齐选项  这些按钮会在你选择2项以上时亮起。

图层特性  这些选项可以更改图层的位置、大小和旋转,以及翻转(左右/上下)图层。

圆角设置  将鼠标悬停在它们上方将显示上下箭头以更改值。还可以单击标签上的圆角/平滑圆角修改弧度。

调整约束大小 如果在组或艺术板中选择了一个层,将看到这些控件

样式  使用样式工具可以控制图层的外观。若要添加新样式,请单击要使用的样式的标题旁边的“添加”按钮。添加样式后,可以通过取消选中样式旁边的复选框来隐藏样式。若要完全删除样式,请取消选中其复选框,然后单击显示的垃圾箱图标

输出 

#如何隐藏和锁定层

要隐藏一个层,只要将其标题旁边的小眼睛,如果在你点击前已经有了一个眼睛的标记,那么说明他已经被隐藏了。

要锁定一个层,按住option键在点击锁定,锁定后你将无法编辑和移动,如果要解锁,直接点击锁定的按钮。

#如何使用页面

你可以在草图文档中使用任意多的页面。它们可以方便地组织您的工作,以及提高文档的效率。

若要在草图中创建新页面,请单击“层”列表顶部的加号箭头,然后为新页面命名。

如果你要切换他们,有两种方式,一种是按住fn+上下方向键,还有一种方式是点击下箭头将他们折叠为一个列表,并使用下拉菜单在它们之间导航。

您可以拖动页面以更改其顺序,或者控制单击页面以复制或删除它。

创建页面后,可以在“页面”面板中将“层”列表中的艺术板或层从一个页面拖动到另一个页面。

#如何使用艺术板

艺术板是完全可选择的,不是每个人都需要。但它方便创建画布上的固定框架,以创建您的工作。如果你是为一个特定的设备或屏幕尺寸而设计,它们是有用的。

若要创建艺术板,请从工具栏或菜单栏中选择“插入->艺术板”,或按快捷键A。也可以在画布上单击并拖动以创建自定义大小的艺术板,或者在检视器中选择已有的模版。

你也可以自定义一个艺术板,为他命名且保存。在你创建了一个艺术板后,按住⌘D可以复制它。

#如何移动艺术板

如果要移动他,可以长按并拖动他的头部标题,可以直接拖动或者使用方向键。也可以通过右侧的检视器设置position

#如何为艺术板重新设计尺寸

如果要重新为艺术板设计尺寸,选择他然后点击它周边的上下左右的方向箭直接拖拽就可以改变大小,需要精确调整的话,可以使用右侧的检视器。

你也可以点击检视器中的自适应,为根据艺术班的大小自动调整其中的内容大小。

#如何删除艺术板

如果要删除艺术板的话,之间点击delete就可以,但是如果你需要保留艺术板内的内容而只是删除艺术板的话,将艺术板解组即可。

#过滤层

当你的层特别多的时候,可以通过左侧底部的筛选,快速找到你需要的文件。

“组件”面板是搜索、查找和管理文档和任何启用的库中的所有符号、图层样式和文字样式的快捷方法 。

#如何访问组件面板

要访问“组件”面板,单击“层”列表顶部的组件(也可以分别使用Ctrl+1和Ctrl+2在“组件”面板和“层”列表之间切换)。可以选择查看“所有”组件,也可以只查看属于文档或特定库的组件。

此列表下面的三个图标允许您查看符号、文字样式和图层样式。

#如何过滤组件面板

你可以使用面板底部的搜索栏筛选所选内容。单击任何组件都会在面板底部显示一个大的预览,因此很容易区分具有微小差异的符号或样式。

找到要使用的符号或样式后,可以将该组件直接拖放到画布上开始使用它。

#组织组件

“组件”面板使您可以轻松地组织库。双击任何组件来重命名它,如果你想将它们组织到文件夹中,只需将一个拖到另一个上面。

<<--以上


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11411516.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-15
下一篇 2023-05-15

发表评论

登录后才能评论

评论列表(0条)

保存