175 6191 5976

添加官方微信

领创时代关于网站建设、青岛画册设计、青岛网站设计的观点和相关新闻 将我们的想法与焦点与你共享

Sketch的几个小技巧让设计更高效率

2019-05-14 来源:小领

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

只需单击Inspector最底部的Make Exportable按钮,列出不同的导出选项。然后,当你需要再出口,打CMD + Shift键 + é。您的导出设置现在将被保存,但您也可以选择仅导出您选择的一个,或部分或全部图层。

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

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

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

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

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

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

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

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

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

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

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

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

版权声明:转载此文章须经 领创时代 同意,并请附上 领创时代 及本页链接http://www.leadnov.com/newsItem.aspx?id=135
创造品牌视觉体验 X 创新IT技术赋能企业
领创帮助您创新品牌战略,让品牌成为最具价值的资产。
中国·山东 青岛市市北区郑州路43号橡胶谷A栋
热线:175 6191 5976
微信:leadnov
Copyright © 2018-2020 leadnov.com 版权所有
鲁公网安备37020302372323
ICP证: 鲁ICP备18056479号

关注领创公众平台

添加官方微信

175 6191 5976