大家都是产品经理【起点学院】,BAT居然派产品总监带你通过系统学习产品和运营。
从零开始学习Sketch——高级章节
Sketch是一款矢量图应用,矢量图无疑是设计网页、图标、界面的最佳方式。
在熟悉了Sketch的界面布局和基础工具之后,我们就可以开始学习高级的素描工具了。本文将主要涉及素描模板和插件的使用,分享素描在具体使用过程中的一些技巧。
如果你接触过PS、AI、Axure等软件,那么你应该不会对下面的内容感到陌生,因为所有设计软件的学习路径都是相似的,都是一个从了解基本的功能框架,到整合利用外部资源,最后形成你个人风格的过程。
Sketch模板
Sketch自带模板
Sketch自带模板,就是文件菜单栏下的Sketch的模板。
输入模板
在使用的过程中,我们只需要将所需的模板复制到我们的画板中即可。需要注意的是,在调整规模时,需要固定长钱的比例。
Sketch自定义模板
在Sketchappsources网站中,有很多Sketch的模板可以下载,我们可以将这些控件导入到Sketch中。
或者在工作中,团队经常使用一些固定的组件。为了避免重复工作,我们可以将它们转换成模板。复用的思想和Axure中的自定义主是一样的。
具体步骤如下:
第一步:下载或建立一个草图文档,其中包含要导入的模板;
第二步:点击文件下的“另存为模板”;
所有草图文件可以直接保存为模板。
第三步:命名你的自定义模板;
第四步:点击模板菜单栏目录,你定制的模板就出现了。
要用好模板,除了平时多积累素材,还要注意模板之间的独立不重复和规格的统一,比如iPhone顶部信号条的宽度等细节。
Sketch插件
插件是设计软件的必备神器。PS和AI都有强大的插件库,Sketch也是。
安装插件的方法
素描的插件大多是技术大牛写的。有三种方法可以得到它们:
方法一:下载工具草图工具箱,从里面下载你需要的插件库,然后点击草图工具栏中的插件,就可以看到你下载的插件库;
扳手工具箱
方法二:在Github上搜索你需要的插件名,然后直接打包下载即可。
方法三:点击Sketch的插件菜单下的管理插件,在弹出的对话框中点击“获取插件”。
点击获取插件,就会跳转到sketch的官网插件库。
推荐几个超炫插件
关于插件,建议一开始不要装太多。推荐使用以下插件库来满足日常工作需求:
内容生成器:可自动填写类型图片、姓名、联系方式等信息,避免手动输入带来的不便;
自动填充用户头像. gif
重命名它:
这个插件的目的是批量修改图形名称。
比如上面的动图,我们可以选择所有的矩形,然后点击重命名它插件,命名为“%N”,就可以得到一串逆序排列的矩形名称。主要规则是:
输入“%N”给对象编号;输入“”和“button”将所有选定的对象名称更改为以button结尾的名称;输入新层名时,使用” “代替原始层名。比如big button就是保留原来的名字,在末尾加上big和button;输入“%w”或“%h”以添加层的长度和宽度。草图测量插件:
该插件可以添加图形大小、距离、颜色和文本属性的注释,并将自动对注释进行分组,供您自己修改和管理。
图形长度和宽度标签
在团队中工作时,使用Sketch Measure插件可以更容易地将设计草稿交付给相关同事。
素描笔记本:
给一个对象添加注释和批注,可以更自由地标记和解释设计稿。
草图颜色样本:
这个插件方便我们在设计初期参考其他一些网站的基本配色方案。
有了Sip这个调色工具,我们可以直接得到想要的网站配色。以简书为例:
色样3360输入颜色值得到色样。
导出Flinto文档:这个插件可以将我们的设计稿转换成Flinto文件形式,从而在Flinto软件中完成动态交互设计,因为Sketch不提供动态交互功能。当然,现在素描基调的组合越来越流行了。说白了就是把Sketch里设计好的框架和组件拖拽到Keynote里,然后用Keynote构造原型。这也是一个不错的选择!
Sketch Mirror
要说Sketch之所以脱颖而出,很重要的一点就是它满足了在手机上实时查看的功能,这是Axure所不具备的。
在手机上下载APP Sketch Mirror,然后在Mac端的工具栏中点击Sketch Mirror。只要两台设备在同一个wifi环境下,就可以同步查看。
使用Sketch的快捷键
快捷方式列表,感谢图片作者:康
实战:制作图片分享APP-个人展示页
使用模板和插件制作图片分享APP的个人展示页面
制造步骤如下:
画布的设置和布局:选择iPhone 5作为画板,将画布分为上下两部分,用矩形分割,将元素分组;打开模板,选择iOS design UI模板,将头部信号条(白色)放置在画布顶部,调整其大小;将图片显示部分分成20个小方块,用内容生成器插件填充自定义的“视图”风景图片。同时设置头像和封面照片;输入文本并调整细节。这是关于素描的进阶文章介绍。日常生活中可以多想想优秀app的页面。如果让你做,你的想法是什么?然后实践应用。不懂就去论坛问;同时,养成重复每件作品制作流程的习惯,思考哪些地方可以优化。即使是微小的细节也能带来巨大的效率提升。
共同进步!
#专栏作家#
宗小苗,微信微信官方账号:宗_小苗,人人都是产品经理专栏作家。腾讯产品经理。有传播背景的产品新人,喜欢研究原型设计工具。