Sketch设计UI/交互设计规范

微信设计团队量身打造,最强Sketch插件合集!

2017-07-13  本文已影响1649人  波普先生爱设计

一个强大的 Sketch 插件合集,由微信设计团队量身打造,让设计师和开发者更佳高效的使用 Sketch。

  • 更高效的团队协作,如:UI Kit 同步、色板同步等。

  • 更快捷的交互设计,如:图标库、自动连线、标记注释、全局替换文字、字体、颜色。

  • 更精准的前端还原,如:补齐宽高导出图片、导出 CSS 代码(支持小程序)等。

  • 下载 & 安装    

  • 下载 Zip 安装包 解压缩。 (支持 Sketch v44 以上版本)  

  • 打开 wesketch.sketchplugin 安装使用

  • 界面预览    

    菜单栏

    工具栏

    功能 & 教程    

    1.管理Ui Kit

    本功能用于团队输出 UIKit 设计标准,并用于团队成员快速协同。

    1. 新建一个 Sketch 画板,选择 WeSketch => 管理 UIKit => 同步 UIKit,本插件为您提供了三个可使用的示例。

    2. 选择 WeUI 或其它,点击确定,你所打开的画板,会下载已经在放在 http 服务器的 UIKit 并导入到你现在的画板。

    2.管理色板

    本功能用于团队约定一套颜色标准,并用于团队成员快速协同。

    1. 新建一个 Sketch 画板,选择 WeSketch => 管理色板 => 同步色板,本插件为您提供了一个可使用的示例。

    2. 选择 WeUI 点击确定,你所打开的画板,会下载已经在放在 http 服务器的色板并导入到你现在的画板。

    3. 在你颜色设置的 Document Colors 面板可以看到已经同步的颜色标准库。

    3.批量替换文本、字体、颜色

    本功能用于快速解决产品经理的反复无常的脑洞 (我们再改一下下,再改一下下,算了,换回第一版吧)

  • 文字

  • 字体

  • 颜色

  • 由于本功能十分简单打开就能用,所以说明主要用于调侃产品经理:)

    4.交互连线

    本工具用于快速标注 UI 设计中的页面关系。本功能与市面上已有的连线工具最大的不同是,可以自动绕过障碍,连线不会重合选中页面中任何两个元素,点击交互连线。即可完成两者之间的连接。

    5.注释标记

    本工具用于快速标注设计中对元素进行注解。选中页面中任何一个元素,点击标记注释,即可按选择顺序生成从1开始排列的序号。

    十分建议记下功能快捷键,初始快捷键为 command+shift+2。若想自定义快捷键,可以打开 WeSketch => 快捷键设置,进行自定义快捷键。

    本功能只有一个功能键,即交互连线按钮。但依然有很多细节。

  • 选择一个元素,若此元素没有添加过标记,按快捷键,即可添加一个在右边的标记。

  • 选择一个已有在右边的标记,按快捷键,会删除右边的标记,生成左边的标记。

  • 选择一个已有在左边的标记,按快捷键,此时若选中的数字在页面中不为最后一个标记(假如页面中有9,删除第8个标记),页面中会弹出选项。

  • 选择删除标记并保留排序 (选择此选项会将 8 标记删除,9 标记不动,下次再标记会以 8 开始)

  • 删除标记并重新排序 (选择此选项会将 8 标记删除,之后 9 标记变为 8,如果后续还有会依次类推,下次再标记会以最后一个数的后一个数开始)

  • 6.自定义宽高导出

    本功能用于快速解决一些占位 icon 需要扩大点击区域,或者 icon 需要导出统一尺寸但又不能拉伸的需求。

    选中任意个 icon 点击导出,或使用快捷键 command shift U,弹出窗口填入你统一导出的宽高、倍数、格式,确定之后选中目录,即可获得相对应的图片。

    7.生成代码(支持小程序)

    本功能用于开发 GG 用一个快捷键就能导出各种设计稿中的字体及各种基本块状样式能力。

    选中一个你需要获取对应代码的字体或者图形,使用获取样式的快捷键 command shift d,插件会按照常见 css 写法将样式放入剪贴板中。

    8.快捷取色

    选中一个你需要获取颜色的字体或图形,使用快捷键 command shift c,插件会导出 web 标准色。或带透明度,会使用rgba形式。

    9.图标库

    本功能提供常用 icon,并提供搜索功能,让你在使用 Sketch 完成交互稿的过程中不需要再费心去找 icon 了。

    打开 WeSketch => 图标库,点击图标库中任意 icon 即会出现你的画稿中央,供你设计交互过程中快速使用。

    10.自定义快捷键

    十分建议在了解功能之后首先搭建自己常用功能的快捷键。以此借助此插件你的 design 或者 code 达到比快更快的目标。

    选择一个你需要设置的功能的对应输入框中使用 shift option command 三个功能键一个及以上,搭配字母或数字键,同时按住,输入框中出现你想要的组合键,点击确定后尝试使用。

    插件下载地址:

    https://github.com/weixin/WeSketch/blob/master/README-zhCN.md

    上一篇下一篇

    猜你喜欢

    热点阅读