跳到主要内容

17个使用Sketch的重要提示

任何设计的构思和线框设计阶段都可以让您考虑布局和布局用户体验从项目的一开始。通过仅使用网页设计的核心组件 - 页眉,页脚,导航,按钮 - 开始,您始终可以确保您的焦点在于用户,而不会分散使用哪种调色板。

有很多线框工具在那里,但今天许多网络团队使用Sketch。它的可用性和无与伦比的速度使其成为显而易见的选择。

从标题开始,如果我们首先接近移动项目,我们需要什么?徽标是主要焦点吗?我们应该考虑使用“汉堡”导航来确保最佳实践吗?这些是任何设计师在构建线框组件和创建页面设计时应始终不断询问自己的问题,以及如何使用Sketch解决这些问题等等。

单击每个图像右上角的图标将其放大

草图中的线框图

01.在Sketch中构建组件

第一步应该是为移动或桌面创建一个画板,并开始在页面上构建具有简单形状的组件,以便定义组件的轮廓,如标题。

太多的颜色可能会分散注意力,因此请尽量减少调色板,以清晰地定义线框中的重要元素。在与同事和客户共享设计时,使用更大胆的颜色突出显示重要内容(调用操作按钮,标题文本)是创建视觉层次结构的一种微妙但有效的方法。

例如,在标题内,在柔和的蓝色背景上以粗体蓝色插入徽标和导航,将它们显示为组件中的重要元素。

同样值得注意的是,可以更新Sketch首选项中的链接颜色,以防设计中出现默认橙色的颜色冲突。

02.使用网格和指南

网格线可以帮助您定义线框

在定义线框时,尽快考虑网格系统,填充和边距也很重要。通过转到视图>画布>显示标尺(或。)在Sketch文件中显示标尺CTRL+[R)。单击这些标尺(在画板左下方和上方)将创建指南,这样可以在共享设计时节省大量压力,因为在定义设计系统时,一致性是关键。

03.在Sketch中创建符号

计划在多个画板中使用这些组件?为什么不创建一个符号?符号是Sketch中最好的功能,它们可以作为超级组件来更新它们当前所在的所有画面。要创建组件,请右键单击元素,然后选择“创建符号”。这将保存到一个可从符号页面管理的打包项目中。

改进Sketch原型

04.在Sketch中添加动画

通过添加原型设计面板中提供的类似动画的动画来增强您的原型(右)

在右侧面板的目标区域下方,可以选择在画板之间添加动画。使用动画是为原型添加更多生命的好方法。但是,目前的选项更适合应用原型,如果展示网站设计,则不会提供太大的灵活性。也就是说,预计该列表将在未来的Sketch更新中增长,例如使用渐变过渡等选项。

05.标记您的首页

在预览原型时,位于选择下拉列表旁边的弹出窗口标题中的标志图标是指示哪个画板是主页的好方法。选择后,每次打开原型时,此画板将成为第一页。这也将在云中共享原型时设置主页。

在Sketch中协作

06.使用Sketch Cloud

sketch cloud

Sketch Cloud是进行一些用户测试的绝佳平台

Sketch的最新云功能是在一个地方展示所有页面和画板的在线展示。任何人都可以注册使用Sketch Cloud来查看,下载和评论Sketch文件,这些文件已经公开或私下直接从Sketch共享。

Pages充当Sketch Cloud链接上的部分,并按照Sketch中的结构顺序显示(从上到下)。这些页面中的画板也是如此,因此请确保结构正确(对于画板,从左到右排序)以按特定顺序显示设计。这也是在您共享云链接后执行某些用户测试的绝佳平台。

原型完成后,单击Cloud图标,使用帐户注册,然后将设计上传到云端。从这一点开始,链接将保持不变,因此在点击云图标并在共享弹出窗口中选择更新时,将上载添加到项目中的任何未来修订。云上的仪表板可自行解释原型,画板和符号可按顺序查看。

07. Sketch Cloud中的原型

如果您之前在Sketch文件中查看了原型,并将其中一个页面标记为起始页面,则Sketch Cloud将创建一个新部分,并准备好此原型。

看不到原型?只需返回Sketch文件,突出显示您想要作为起始页面的画板,单击预览以便看到弹出窗口,最后单击标志图标。在你下一次推向云端时,这个原型将等着你。

08.在Sketch Cloud中启用评论

所有具有访问权限的用户都可以在每个画板上留下评论,将所有反馈保存在一个地方,因此不再需要那个冗长的电子邮件。如果您希望获得有关原型或设计的反馈,或想要分享在公共链接上的原型,单击云仪表板右上角的齿轮图标。在这里,您可以启用注释(通过单击右下角的图标查看设计时会显示注释),并为您的设计创建公共链接以进行共享。

您可以将设计保密,并通过电子邮件提供给幸运的少数人。要在没有用户必须在Sketch云中导航的情况下共享您的原型的直接链接,在原型模式中添加“播放”或抓取URL并启用公共共享链接将执行此操作。例如:sketch.cloud/s/1abc2/all/website/home/

09. Sketch Cloud中的基本快捷方式

Sketch Cloud

选择此图标即可将更改推送到云端

通过选择此图标将您的最新更改推送到云端 - 您的浏览器将在完成后打开链接。

通过仅选择要在左上角下拉列表中显示的页面来整理草图云链接,并从此处共享URL。

sketch cloud

您可以使用此功能与团队分享更改

在设置面板弹出窗口中,勾选“作为库使用”以自动让您的团队知道发生了变化。

在预览模式下标记您的开始画板,然后再推送到云,使其首先显示在Sketch云链接上。

在Sketch中构建设计系统

10.保持井井有条

document colours in Sketch

在Sketch中组织颜色很容易

通过选择所述颜色并单击“+”图标,保持文档调色板中的品牌颜色。

正确命名符号以使其有条理

在命名符号时使用斜杠将您喜爱的符号组织成多种状态,例如命名符号'Button / Active'和'Button / Disabled'将符号组合在同一类别下。

在Sketch中使用单个页面向每个人显示他们可以获取资产的位置

通过将定义品牌的所有元素分离到Sketch中的自己的页面来创建设计系统页面。这是向每个人展示他们可以获取资产的简单方法。

在Sketch中轻松进行小的更改

您可以覆盖符号中的内容,例如按钮中的文本(参见上文),因此如果只是一个小的更改,您无需担心创建新元素。

创建页面设计

12.创建强大的可视层次结构

sketch

首先设计以用户为中心的组件可以帮助构建您的站点

强大的视觉层次结构确保了任何以用户为中心的设计的清晰度。首先,设计最通用的组件 - 例如颜色和排版 - 然后再设计为较小的组件,如按钮和输入组件。

要在设计中插入任何内容,请将鼠标悬停在Sketch UI顶部的“插入”选项卡上,单击,然后开始将元素导入到画板上。请记住您的线框和设计系统,以确保您的工作一致性。

13.明智地使用颜色

颜色可以说是任何设计工作流程中最重要的元素。通过颜色,我们可以设置设计的整体外观,感觉和色调,因此请始终确保使用它与它们所分配的元素的重要性相关联。

尝试将颜色分组如下:

  • 原色:主要品牌颜色,用于创建项目的基本配色方案和按钮等关键元素。
  • 二次色:这些都伴随着原色,并从原色中妥协出不同的色调,渐变和色调。
  • 三原色:一个重要的组,显示系统消息,例如警报,警告和通知。

要使颜色尽可能高效,请在Sketch文件中将每种颜色创建为符号,以确保更改设计中的元素。

14.有效地使用排版

设计所有标题(H1,H2,H3等)和段落的样式和大小以创建可视层次结构非常重要。通常,排版没有很多风格变化,例如颜色或重量,因此请考虑有效地使用您的颜色来呈现品牌个性。

一旦您满意,请在右侧面板中定义文本样式,通过单击“无文本样式”下拉列表并选择“新文本样式”,一旦保存,您可以在整个设计中使用此排版样式,如符号。

15.使用图标添加上下文

有效使用时,图标会将上下文添加到更复杂的组件(如按钮,标签或表)中。通过鼓励用户进行交互,您的设计中的图标可以起作用 - 例如,使用按钮中的“X”表示“删除”操作。

考虑创建一组UI图标作为嵌套的Sketch符号,以帮助补充设计框架中的其他UI元素,例如箭头,可用于滑块,上一个和下一个按钮以及分页。

16.设计按钮和输入

在设计按钮和输入时,请确保设计各自的“状态”。每个状态都有多个状态,并为用户提供可视反馈,以指示当前状态(例如,悬停,单击)。将每个状态创建为单独的符号是一种很好的做法,因为这样可以增加灵活性。

17.复杂的组件和部分

在这个阶段,设计可以被认为是完整的,因为它具有创建功能产品所需的一切。但是,花费更多时间为UI框架创建组件(例如卡片,表格和表单)是值得的。然后可以将它们组合起来开发部分,塑造我们的网站和应用程序所依赖的块,例如标题,导航和横幅。

本文最初出现在Web Designer的第277期。买第277期在这里或订阅

阅读更多:



翻译字数超限