• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 学会这4大Sketch 高阶技巧,让你的效率猛翻10倍!

学会这4大Sketch 高阶技巧,让你的效率猛翻10倍!

作者:Kane_D 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含sketch,Symbol,团队协作,工作效率,效率工具,模块化设计,经验分享,设计师团队协作等相关知识,Kane_D希望在学习及工作中可以帮助到您

如何将想法和工具结合起来,让自己的工作效率翻倍,这篇文章为你答疑解惑。

工欲善其事必先利其器,在日常工作中,怎么样提高自己及团队的工作效率应该是很多设计师和团队在思考的问题。Sketch 作为 UI 设计师的必备工具,我们已经相当熟悉,如何结合 Sketch 来提高自己以及团队的工作效率呢?我从下图所示的几个方面结合自己的经验做个简单分享。

一、Symbol

1. Symbol 介绍

Symbol 是 Sketch 中一个强大且实用的功能,可以让你轻松的在画板和页面以及多个文件中复用重复元素。Symbol 的存在类似智能对象在 PS 中的存在,但 Symbol 比智能对象更加灵活实用。那么如何高效合理的利用 Symbol 进行工作呢,下面我介绍下 Symbol 的使用方法。

2. Symbol 使用方法

Symbol 的使用场景主要集中在模块化设计,如何合理的利用模块化思维进行设计工作,是现在的设计师需要思考的一个问题。那么什么是模块化设计呢?对于产品体验设计而言,模块化设计就是将产品流程、产品结构、交互方式、表现形式等产品的主要组成要素模块化。通过模块化设计可以让我们在差异化跟高效之间找到一个合适的平衡点。

模块化设计主要分为以下步骤:模块划分——模块设计——模块组合,这里主要针对模块的划分以及模块的设计进行重点说明。首先模块是由控件组成,主要包括字体、按钮、图标、列表等。而模块又由控件组成,模块跟控件存在父子关系。

在模块划分标准上要遵循:单一性(模块颗粒度要小,一个模块解决一个需求)、完整性(内部流程可打通,形成闭环)、独立性(每个模块和其他模块的依存关系要低,以便跟其他模块组合适配)。

在模块设计的部分遵循:复用性(尽可能的提高复用模块占比),延展性(考虑一定的模块控件可拓展性,以便处理在一定范围内的差异性),互换性(需要注意对外信息结构一致,保证全局信息结构快速互换)三大原则。

在产品的设计过程中,根据产品的实际情况,我们使用 Symbol 对模块进行控件化,以下图为例:

我们可以看到上图导航栏模块,分别由背景、图标、文字、分割线、状态栏组成。依照模块化设计的标准,我们依次对他们创建 Symbol(文字除外),这时候控件元素已经创建好,对他们进行对应的排列组合这个模块就已经完成了,在日常基本工作中,这部分工作已经完成了。但是做到这些是不够的,我们需要更深层思考,例如适配其他端应该怎么处理,有没有其他情况下会跟现在的控件重复或者冲突等等,这都是要思考的问题。那么如何合理的创建 Symbol,避免控件样式的重复呢?我们继续以导航栏模块为例:

根据上一部分我们知道导航模块第一种类型已经完成了,但是在实际项目中我们知道导航栏样式不会只有这么一种类型,根据产品实际情况我们想到会出现以上几种情况,所以我们也对他们进行模块化。可以复用的元素就可以调用之前模块里面的控件,例如状态栏、返回按钮、背景色,这样做可以最大化的避免模块控件的重复,也可以在产品设计早期完善模块,做到未雨绸缪,为以后的设计工作做准备。

看到这里,大家可以看到,我并没有讲 Symbol 的任何具体使用方法,工具只是实现想法的一种媒介,我们应该多思考,举一反三,将工具跟想法结合起来才能达到效率和质量的最大化。

二、Library

1. Library 介绍

Library 其实只是一个普通的 Sketch 文件,其中包含 Symbol,你可以在其他 Sketch 文件中使用此 Symbol。如果您更新 Library 文件中的任何一个 Symbol,你都会收到更新通知,利用 Library,团队成员们可以在 Sketch 文件之间共享 Symbol,并使其更新以始终保持同步。

2. Library 使用方法

在设计团队中,多人协作是必然情况,那么如何使通用模块和控件始终保持一致呢?我们只需将 Librar 文件存放在一个固定的地方,例如云盘、公司内部网盘等位置,将通用的控件以及模块存放在其中,然后其他设计师就可以轻松调用了。当这个 Librariy 有任何修改,你都可以接收到更新通知。

通常情况下,我们会将公司产品的设计规范、通用模块和控件做成 Library 文件,让团队内的其他设计师进行调用。一般里面包括颜色、图标、文字、还有其他模块控件等。团队的设计师可以充分利用 Library 来让自己文件里面的 Symbol 始终保持最新,以及和团队成员保持一致。但是由于任何设计师都可以对 Library 文件进行编辑,所以我们要将 Library 进行安全的分离,对 Library 的编辑只能在特定的位置、特定的文件,甚至特定的人进行,因此一般不会有不相关的编辑。如果一旦不小心无意进行了修改一定要及时修改回来,不然团队内的其他设计师的文件就会出问题。

下面就分享下如何简单的创建一个 Library 文件。这里我们以 Apple 官方的 Library 文件为例进行讲解,这里我们选择将文件存放在坚果云里面。详细看下图:

我们将文件存放好之后,打开 Library 添加弹层如下图:

Add Library 按钮选择存放在坚果云的 sketch 文件,如下图:

这样 Library 文件已经添加成功,我们就可以轻松的访问我们 Library 里面的控件了。如果有人对我们的 Library 文件进行了编辑,那我们会在自己使用 Library 文件中收到如下图一样的更新提示,我们可以根据自己的需求选择是否更新 Symbol,如下图所示:

通过上面的流程讲解,我们可以看到 Library 的使用很简单,通过 Library 可以让我们团队协作得更加顺畅,工作效率和工作质量会有很大的提升。设计师们如果有机会一定要尝试构建 Library 文件,不论是为个人还是为团队都对自己的整体把控能力有很大的提升。

三、好用的小技巧

使用了这么久的 sketch。有几个好用的小技巧分享给大家。

1. Sketch支持简单的数学计算,再也不用计算器了,直接在输入框内就可以计算,用途广泛,如下图所示:

2. 在一倍图 0.5px 的分割线让很多设计师头疼,这里利用内阴影教大家制作,如下图所示 :

3. 默认的图形样式是可以设置的,这样可以更加个性化,如下图所示:

4. 如何利用圆周率进行 Loading 制作,如下图所示:

5. 如何利用内阴影快速制作可复用表格,如下图所示:

6. 如何测量组内跟组外间距,组内量组外间距快捷键为:option+上档键+鼠标悬浮。

7. 如何快速查到历史用色记录,如下图所示:

四、效率拓展

下图是给大家推荐的11款常用 sketch 插件和一个 Sketch 文件版本管理工具,下面我就依次介绍下这11款插件和1个软件。

  • Runner —— 使用命令行来提高你的工作效率
  • Cfaft —— 帮你提高效率的自动填充神器
  • Rename it —— 快速批量重命名你的图层
  • Remove Unused Symbols —— 一键删除未使用的 Symbol
  • Artboards to PDF —— 批量导出选定画板为多页 PDF
  • ImageOptim —— 一键导出所有切片资源并自动优化体积
  • Sketch Measure —— 快速创建规范为开发者和团队协作提供方便
  • Midnight —— 增加替换主题功能及小工具
  • Flavor —— 给你的设计加点料
  • Sketch2AE —— 轻松导出 Sketch 资源至 AE 并自动定位
  • Anima —— 可以实现自动布局
  • Abstract —— Sketch 文件版本管理软件

您可能想查找下面的文章:

  • 高手进阶技巧!全方位深入理解 Sketch 库(上)
  • 高手进阶技巧!全方位深入理解 Sketch 库(中)
  • 大公司如何做设计系统?24 个 Sketch 组件库源文件合集下载
  • 我们拿到了InVision Studio 的内测资格,设计师们关心的都在这里
  • 免费高效!用 Paddy 让你的 Sketch 学会自动排版!
  • 学会这4大Sketch 高阶技巧,让你的效率猛翻10倍!
  • 两分钟认识一款把 Sketch 变成 Principle 的插件:Diya
  • Sketch 49 的交互原型新功能怎么用?来看这篇教程!
  • 简单实用!七步学会用 Sketch 搭建复杂表格
  • 新鲜出炉!五个超方便的Sketch 48 新功能介绍

相关文章

  • 2018-08-23工作复盘:从四大角色带你了解H5制作流程
  • 2018-08-23网站要上线了,问问自己这15个问题再做决定
  • 2018-08-23看完就会!超详细的自制手工水彩本教程
  • 2017-08-06评论回复弹出遮罩效果实现思路兼容ie 8/chrome/firefox
  • 2017-08-06css float属性 图解float属性的点点滴滴
  • 2018-08-23案例超多!3大类APP弹窗提醒方式总结
  • 2018-11-02打包 React 项目
  • 2018-08-23想提高可用性?看谷歌Material Design 的官方教程是怎么做的!
  • 2018-08-23还只知道“A/B测试”?是时候了解一下“多变量测试”了
  • 2018-08-23在Justinmind眼中,这7款APP的UI设计是今年最佳

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 优设专访!优设×追波人气第一名的设计大神Mike
    • BAT都在使用的设计创新方法 ,现在手把手教你做!
    • 如何画好一组线性图标?来看这份新手科普总结!
    • Google I/O 大会之后,Material Design 发生了这些变化
    • 实例解析!如何成为有交互和视觉思维的UI 设计师?
    • flash 嵌入网页 与IE, FF,傲游兼容问题
    • 浅谈JavaScript中浏览器兼容的问题
    • Unicode签名bom详细说明
    • 引入CSS的方式有哪些?link和@import的有何区别应如何选择
    • HTML标签及基本元素学习总结

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有