在Sketch中设计更好的20种方法

Sketch首先被称为Adobe Photoshop的竞争对手,然后是Adobe XD的竞争对手,现在也是InVision Studio的竞争对手。对于一个从未发布过Windows版本的应用程序而言,它具有令人惊讶的弹性 - 尽管当您既了解它可以做什么,又知道如何做到这一点时,这似乎并不令人惊讶。

Sketch是一个用于设计用户界面的应用程序,但其强大,直观的工具使设计过程非常流畅,您可以快速了解为什么以及如何为新一代设计应用铺平道路。

以下是20条提示,可让您在几分钟内成为超级用户。

01.让您的设计与图书馆协作

其他设计师也可以使用你的符号吗?绝对!草图库非常易于使用。您需要做的就是在单独的.sketch文件中创建符号,然后将.sketch文件留在可访问的位置,例如Box,Dropbox或Google Drive。

然后,其他设计人员可以通过导航到文件>添加库...将草图库导入其草图文档。之后,可以通过常用的插入>符号方法访问该草图库中的符号。

草图库是在团队中实现设计协作的绝佳方式。草图库更新后,使用该库的任何.sketch文件都将收到通知,请求您是否要更新文档。

很酷,对吗?

02.使用调整大小测试响应式设计

您有一个容器,可以是Group或Artboard,也可以是该容器内的各个层。假设这个容器是一个带有浮动徽标和导航的网站标题 - 徽标浮动在左侧,导航浮动在右侧。

调整容器大小时,您希望徽标仍然向左浮动,向右导航。输入Resizing,其中包含的元素可以浮动到容器边缘,帮助您测试响应式设计。

再一次,这一切都发生在Inspector的Resizing选项卡下。您可以固定四个可能的位置:

  • 剩下:对象将固定在左侧
  • :对象将固定在右侧
  • 正确和顶部:对象将固定在顶部和右侧

真的很简单,但有一个障碍。当您通常调整容器大小时,相应调整包含的元素的大小。您可以通过激活“修复宽度”和“修复高度”选项来解决此问题,这将阻止这种情况发生。集中对象也将保持集中。魔法。

03.按页面分隔您的项目

过了一会儿,你的画布会开始变得杂乱,尽管它基本上是无限的。大型设计需要组织,这就是为什么我们可以在逻辑上将画板分成不同的页面。

将Artboards组织成Pages的最佳方法是通过平台。例如,如果您正在设计移动应用的Android和iOS版本,则每个版本都可以有一个单独的页面。

原因在于,当您使用原型设计和设计切换工具时,您需要将正确的画板导出到正确的项目中,因此以这种方式将它们分开具有逻辑意义。通过网页设计,我通常会在自己的页面上创建符号和徽标等内容。

04.自动化您的资产出口

定义导出选项后,您不必再次执行此操作。无论您是从Sketch导出图像资源还是导出到设计协作应用程序(例如InVision,Marvel,Sympli或Zeplin),都是如此。

以下是您需要了解的内容:文件格式很重要。 SVG更适合网络,因为它是一种矢量格式,这意味着您可以在不降低质量的情况下上下缩放。 SVG格式的文件大小通常也较小,这使得网页加载速度更快。

我们将PNG用于移动应用程序,虽然为了满足Retina / HDPI屏幕的需要,我们可以导出图像@ 2x和@ 3x,具体取决于我们正在服务的设备。您可以根据需要定义任意数量的选项。

只需单击Inspector最底部的Make Exportable按钮,列出不同的导出选项。然后,每当你需要重新导出时,点击CMD+转移+Ë。您的导出设置现在将被保存,但您也可以选择仅导出您选择的一个,或部分或全部图层。

05.将图像资产导出组织到文件夹中

开发人员不希望对导出的图像资源的整个文件夹进行排序,尤其是对于大型设计。将它们分解为文件夹更有条理,我们可以从Sketch执行此操作。只需使用以下格式重命名图层:'subfolder / asset.png'即可在导出中自动创建文件夹。

提示:您知道可以将图层列表中的图层拖到桌面上进行导出吗?默认情况下它将是@ 1x PNG文件。

06.用Stark插件分析颜色对比度

虽然它不像原型和动画这样的概念那么时髦,但颜色对比是一个大问题。颜色对比度差导致可访问性有限,特别是对于视力有限的用户(影响全球13亿人的用户)。

WCAG(Web内容可访问性指南)设定了全球色彩对比度标准,对于之前从未听说过的人来说,这有点难以理解。

斯塔克插件不仅可以帮助您根据WCAG 2.0标准比较两种颜色,以确保您的对比度足够,还可以让您根据八种不同类型的色盲测试您的设计。

要检查的关键是两个背景彼此相邻;按钮背景;最重要的是,背景文字。字体大小因素也是如此,因为较小的文本难以阅读,因此考虑到这里有很多值得思考的问题,Stark在您的工具箱中很方便。

Stark在新窗口中打开(插件> Stark> Show Stark)。按↑和↓循环显示色盲类型,←和→循环浏览文档中的画板,或选择两种颜色分析颜色对比度。颜色对比度由两个不同的水平/比例(AA和AAA)定义,您的颜色对比度应至少满足AA要求。

07.使用Zeplin或Sympli插件进行设计切换

设计切换通常内置于InVision和Marvel等原型应用程序中,但它们仅适用于具有企业级订阅的团队。较小的设计团队(或独奏设计师)不需要那种规模的设计协作,因此专用的设计切换工具,如ZeplinSympli,可能更合适。

您将进行设计交接和协作,但代价是原型设计功能,这可能会很好,具体取决于您或您的团队进行原型设计的方式(因为还有纸质原型设计和免费工具,例如手艺)。

像大多数这种机芯的工具一样,您可以使用Sketch插件将画面从Sketch导出到Zeplin或Sympli。两种工具的工作方式大致相同。使用Zeplin,使用CMD+CTRL+Ë在Sketch中导出屏幕;使用Sympli,使用CMD+ÿ

这两个应用程序都允许您标记屏幕以增加可搜索性(对于缩小切换界面中的屏幕非常有用)并自动收集您在Sketch中标记为可导出的图像资源,以供开发人员实施。

与所有竞争工具一样,使用免费试用版并自行决定。

08.将形状与布尔运算相结合

booleans on a computer screen

布尔可以轻松制作新形状

布尔运算让我们组合形状来制作新形状。

步骤01:创建两个形状
我们在这里以圆圈为例。您可以根据需要使用布尔运算组合多个形状,但是现在我们只使用两个。创建一个圆圈,然后复制它(CMD+D)创造另一个圈子。确保它们重叠,以便我们可以使用其中一个作为蒙版并查看效果。

步骤02:从菜单栏中选择一个布尔运算
从Sketch菜单栏中可以看到,有四种布尔操作可供选择:Union,Subtract,Intersect和Difference。 Union是所有布尔运算中最简单的,其中两个形状组合在一起以创建新形状。

使用Subtract,其中一个形状会吞噬其他形状或形状,从中减去。使用“相交”时,只能看到形状重叠的部分。对于差异,它是完全相反的,仅显示形状不重叠的部分。对于简单的形状,这通常比使用矢量工具徒手创建它们更快。

步骤03:明确哪个层是掩模
正如我之前所说,您可以将多个形状与布尔运算组合在一起。其中一个必须是面具,这是出现在“底部”的面具,如图层列表中所示。组合形状一旦组合就像一个组,因此层次结构中最低的是掩模。您可以重新排序这些图层以更改哪个是蒙版。

注意:布尔运算在技术上由路径和子路径组成,但是掩码的概念可能使布尔运算更加熟悉。

步骤04:了解快速访问的键盘快捷键
当然,与Sketch中的其他内容一样,您可以使用键盘快捷键更快地访问这些布尔操作:

  • 联盟:cmd + Ctrl + U.
  • 减去:cmd + Ctrl + S.
  • 相交:cmd + Ctrl + I.
  • 区别:cmd + Ctrl + X.

如果您有最新的一个带触摸条的MacBook Pro在键盘上方,这些工具也可通过触摸快速访问。

09.创建自己的Sketch快捷方式

screen in sketch

您可以根据需要添加任意数量的新快捷方式

您可以创建自己的草图快捷方式。要设置自己的Sketch快捷方式,请转到macOS首选项>键盘>快捷方式>应用程序快捷方式> +,然后选择Sketch作为应用程序并键入要为其定义快捷方式的菜单命令。例如,“折叠所有组”(CMD+CTRL+C)是一种快速清理图层列表的有用方法!根据需要添加任意数量的快捷方式。

10.使用数学函数定义测量值

screen inside Sketch

没有必要浪费时间在棘手的心算上

使用Inspector指定测量值时,您可以使用数学函数来避免在脑中进行计算。假设您希望矩形跨越画板的整个宽度减去每侧20px(即20px边距),您可以将宽度定义为“100%-40px”。使用320px画板,矩形的宽度将等于280px。

11.模仿CSS框架

grid systems

布局网格为您提供响应式网格系统的灵活性

Web开发人员经常使用CSS框架,例如Bootstrap和Foundation,它们都有自己的响应式网格系统。因此,为了使设计更加耐用和灵活(并保护开发成本),使用Sketch的设计人员可能希望使用布局网格复制这些网格系统。

导航到“视图”>“画布”>“布局设置...”以显示“布局网格”模式,然后指定行数和列数以及网站容器的总宽度和任何列/装订线宽度。布局网格在画布上显示为浅灰色,但您可以更改此颜色。打开和关闭它们CMD+ALT+大号,您的开发人员将在以后感谢您!

12.保持你的共同颜色方便

colour preferences in Sketch

通过掌握您的首选颜色,确保视觉一致性

在整个设计中重复使用颜色以实现视觉一致性。如果使用正确,颜色对用户意味着什么,因此UX得到了改进。品牌,正文,标题等都有一定的颜色,我们可以在Sketch中保存这些颜色以便快速使用,这样我们就不必从内存中调用hex / RGBA值。

每当您进入颜色选择器窗口小部件并且选择了所需的颜色时,单击“文档颜色”下面的“+”图标将其保存到文档样本中。如果向“全局颜色”样本添加颜色,它们将出现在所有Sketch文档中。将颜色拖出颜色选择器小部件以删除。

有关有效使用颜色的更多信息,请参阅我们的帖子色彩理论

13.像专业人士一样的原型

原型设计和设计协作现在风靡一时。在开发开始之前,能够通过交互式热点,动态组件和动画看到您的设计变得生动,这不仅有趣,而且让团队和利益相关者可以测试用户体验并尽早留下反馈。

在用户体验应用或网站之前能够消除大部分折痕可确保您的转化率更高,您的客户投诉更低,并且您的产品发布会产生更大的影响。

在Sketch中直接原型的最佳方法之一可以说是工艺插件通过InVision,它以多种方式增强您的设计过程。这是破败的:

  • 为您的设计提供逼真的虚拟数据。
  • 来源库存图片为您的内容。
  • 垂直和水平重复内容。
  • 创建存储在云中的共享设计库。
  • 进入手绘模式进行讨论和协作。
  • 使您的设计充满活力和互动性。
  • 将所有这些同步到核心InVision应用程序中。
  • 启用切换,以便开发人员可以检查设计样式。

Craft作为Sketch中的Inspector旁边的垂直侧边栏存在。尽管有许多功能,但UI非常易于使用。

奇迹是另一个拥有Sketch插件的原型应用程序。虽然它只是将设计导出到Marvel核心应用程序的一种方式,但使用Marvel而不是InVision有一些好处。虽然它没有InVision那么灵活 - 例如它具有更多的原型特征 - 学习曲线更小,而且Marvel界面比InVision更简单。

尝试一下,他们太棒了!

14.使用省时的快捷方式

person with hands on laptop

通过学习这些基本的Sketch快捷键,加快您的工作流程

您可能会惊讶于只使用键盘可以使用Sketch。许多工具都是单字母快捷方式,重复的平凡任务现在已成为一种都市神话。再一次,这是你会喜欢的捷径:

  • 长方形:R
  • 椭圆:O
  • 线:L
  • 文本:T
  • 画板: 一个
  • 编辑模式:回归
  • 在层次结构中上移: 退出
  • 改变对象的不透明度:0-9
  • 改名:cmd + R.
  • 出口:cmd + Shift + E.
  • 放大/缩小:cmd和+/-

Cmd / Alt / Shift组合

  • :cmd + G.
  • 取消组合:cmd + Shift + G.
  • 移动对象:↑→↓←
  • 调整对象大小:cmd +↑→↓←
  • 将对象移动10px:Shift +↑→↓←
  • 通过10px调整对象大小:cmd + Shift +↑→↓←
  • 单击以组中的对象:cmd +左键单击
  • 激活智能指南:alt
  • 带有点击的智能指南:cmd + Alt +左键单击
  • 在层次结构中向上/向下移动对象:cmd + Alt +↑↓
  • 增加/减少字体大小:cmd + Alt和+/-
  • 左对齐:cmd + Shift + {
  • 对齐中心:cmd + Shift + |
  • 对齐吧:cmd + Shift +}

最小化您的工作空间
总是让我对Adobe Photoshop感到沮丧的是它感觉到的臃肿和混乱。这是一个多学科的工具,用于设计和艺术,所以毫无疑问。

相比之下,Sketch专注于UI设计,因此不仅默认情况下它是最小的,而且您可以使用快捷方式打开和关闭工具栏。这对于在需要时在画布上创建更多空间或者当您需要输入“Just show me design”模式时非常有用。

这些是您需要知道的草图工具栏快捷方式:

  • 显示/隐藏工具栏(在顶部):cmd + Alt + T.
  • 显示/隐藏图层列表(左侧):cmd + Alt + 1
  • 显示/隐藏检查员(右侧):cmd + Alt + 2
  • 演示模式(隐藏所有内容):cmd +。

你不应该忘记这些快捷方式:

切片:S
创建一个可以导出的矩形选区,这对于突出显示或截断关键部分非常有用。请务必激活“检查器”中的“修剪透明像素”选项,以从切片中删除任何空白。

向量:V
矢量工具可以帮助您徒手绘制完全独特的形状 - 例如图标或插图。一旦聚焦在矢量点上,您可以在键盘上使用1,2,3和4,将点样式从默认的直线样式更改为镜像,非对称或断开连接。

面具:cmd + Ctrl + M.
当一个形状用作蒙版时,它会重新定义溢出该形状的任何内容。这方面的一个例子可能是当你需要一个正方形图像以适合圆形时 - 圆形掩模隐藏方形图像的90度角。便利。

15.使用符号重用组件

颜色不是我们可以重复使用的唯一东西。实际上,我们可以重用整个组件。举一个主导航,例如 - 你会在大多数(如果不是全部)屏幕上使用它,对吗?如果您对其进行了更改,那么您希望这种更改是通用的,对吗?

这是符号的来源。

选择要重复使用的组件,然后单击顶部工具栏中的“创建符号”。之后,导航到“插入”→“符号”,然后单击画布上的任意位置以插入它。

您可以选择将符号的主实例存储在远离主设计的单独页面上。这是您想要对其进行通用更改时编辑的符号实例。双击主设计中的任何其他实例,无论如何都会将您重定向到主实例。

16.嵌套符号和符号覆盖

您还可以使用与将任何其他类型的图像附加到元素相同的方法将SVG图像嵌入到CSS中的页面中。

通过这种方式使用SVG,我们可以利用其他CSS背景属性,允许我们将图像的大小,位置和重复作为元素的背景。

为了提供支持,我们可以使用浏览器解析CSS的方式,并在我们包含SVG之前提供后备PNG。

17.使用共享样式保持设计一致性

最后有共享样式,它们就像符号,但是用于图层。考虑您的标题样式,按钮文本样式,正文文本样式等 - 您将一次又一次地重复使用的样式。共享样式在Inspector中创建。

要创建共享样式,请选择有问题的图层,然后单击检查器中的“无共享样式”下拉列表(如果是文本图层,则单击“无文本样式”)。然后,从下拉选项列表中选择“创建新文本/共享样式”,然后为其指定一个有意义的名称(例如“最大标题”)。

共享样式的灵活性比使用符号更自然,在符号中,您只需在共享样式的一个实例中更改需要更改的内容,这些更改将不会自动与其他实例同步。更改是手动更改,您需要在同一下拉菜单中点击同步图标。

如果没有点击此处的同步图标,您将对其他视觉上一致的共享样式进行单一更改。

18.使用Sketch Mirror实时预览您的设计

当移动应用程序和网站设计为拇指使用时,用拇指测试它们是有意义的,这正是Sketch Mirror非常方便的地方。我们需要这样才能将我们的设计从大屏幕上移到小屏幕上。

使用Sketch Mirror for iOS,您可以在iOS设备上预览Sketch画板。单击工具栏中的“镜像”,然后从选项列表中选择您的设备。如果您看不到自己的设备,请确保您的设备上已打开草图镜像,并且它们都在同一个无线网络上。

提示:在iOS控制中心右侧滑动,然后点击“录制”图标以录制用户测试或创建视频演示,然后您可以通过快速消息将其发送给您的团队成员或其他任何人!

19.创建吸烟的iOS模糊

在为iOS设计移动应用程序时,您通常会使用许多原生UI元素和视觉概念,其中一个是烟雾模糊,作为背景显示,可减少任何背景元素的视觉干扰。例如,当控制中心打开时,此效果会模糊背景。

您可以通过从Inspector中选择“背景模糊”选项来创建此效果。应该注意的是,如果填充的不透明度为100%,则这不起作用。不透明度越低,模糊效果越大。

背景模糊与高斯模糊的不同之处在于,使用高斯模糊,模糊背景的边缘也是模糊的。

20.使用Sketch Cache Cleaner

Sketch Cache Cleaner

Sketch Cache Cleaner可以快速清除所有不需要的早期版本

草图用户经常抱怨.sketch文件在他们的计算机上占用了大量空间。以下是解决该问题的方法。

删除草图缓存以节省空间
当.sketch文件自动保存为备份时,新的缓存版本不会覆盖旧的缓存版本。每个缓存版本都存储在安全的地方,这使Sketch的本机版本控制功能成为可能。虽然这对那些需要回滚到其设计的早期版本的人有用,但这些版本最终会窃取所有兆字节(或千兆字节)。Sketch Cache Cleaner是一个独立的应用程序,当此缓存变得太大时删除所有这些版本。当然,您可以在Sketch的首选项中关闭版本控制,但有时它很有用。

相反,只有在您确定无需任何操作时才清理缓存。如果您正在使用版本控制应用程序,例如抽象要么,那么在这种情况下,它可以很好地关闭Sketch的本机版本控制。

减少草图文件的大小
即使Sketch文件本身也会变得非常大,但Sketch现在具有内置功能,可以减小文件大小,您可以在文件>减小文件大小中找到它。有些设计师说减少了完美的应用程序尽管如此,团队在这方面的效率会更高一些,因为它可以更好地保持色彩质量。 Reduce可以免费下载并位于macOS菜单栏中,随时可以快速轻松地访问。

保持井井有条
一般来说,养成在设计时(或定期)清理.sketch文档的习惯会减少文件大小。我的意思是删除任何冗余图层,取消组合(CMD+转移+G)任何冗余的组,基本上使您的文档清洁和易于阅读。

这不仅有利于您的文件大小,而且还使您的工作对任何在您之后查看它的人都可读,其中可能包括正在检查您的工作以便将其转换为代码的开发人员,或者甚至是您可能与之合作的其他设计人员在大型设计上。

本文最初发布于2017年版的创意网页设计杂志Web Designer,并且已经更新。在此订阅Web Designer

相关文章:



翻译字数超限