Abstract

Abstract - 你的 Sketch 文件管家 - 胡思

版本控制

<p><span style="caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto; background-color: rgb(255, 255, 255);">Runner 有着直观的界面，能让你更快更有效的使用 Sketch，给日常工作来个大提速。去面板上、菜单里找功能实在太慢啦，搭配 Runner，利用好快捷键，快速完成你的操作吧！</span></p><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>🏃🏻运行功能和插件：</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-898f4b4eeadecb8d65f4a814dd24e769_b.gif"/></p><p>使用 run 这个命令你可以快速调用 Sketch 中已有的功能，包括面板上的功能和菜单里的功能。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-589bb4f9af054b330bfc30445f62a602_b.gif"/></p><p>当然，你也可以调用所有已安装插件中的功能。</p><p><br/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>🤾快速定位：</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-18ca4dfb5993d9a4b6ccc77b4dadfb07_b.gif"/></p><p>用 goto 命令你可以定位到文件中的任何 page，artboard，group 或 layer 。</p><p><br/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>🏌🏻插入 symbol：</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-124f7435d03f8e73ef5488acc8f4c2a9_b.gif"/></p><p>使用 jump 命令你可以快速查找 symbol，并能直接浏览它的外观。</p><p><br/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>🤺创建样式或 symbol：</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-3af7654ae212fe83f153d2e8dd559481_b.gif"/></p><p>使用 apply 命令你可以快速定义 symbol 或共享样式。</p><p><br/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>🏋应用样式：</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-18ff152cf437b9dccc1f9690f76f0318_b.gif"/></p><p>使用 apply 命令你可以给选中的图层快速应用已经定义好的共享样式。</p><p><br/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>⛹🏻安装插件：</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-efdeb11ec7783cd7475cbfa4db70f20d_b.gif"/></p><p>你可以用 install 命令搜索插件并快速安装。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-ff4a0ac9e758ec60c1384602683ea19e_b.gif"/></p><p>如果有插件更新，你会及时得到通知。</p>

Runner

Runner - 给你的 Sketch 加加速 - 胡思

功能调用

插件安装

Sketch Plugin Monster

Sketch Plugin Monster - Sketch 插件快捷键管理 - 胡思

改快捷键

冲突定位

蓝湖

蓝湖 - 国内最好的产品设计协作平台 - 胡思

自动标注

设计评审

样式代码

Connection Flow Arrows

Connection Flow Arrows - 连接 Sketch 里的元素 - 胡思

连接元素

<p><span style="caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto; background-color: rgb(255, 255, 255);">除了完成设计稿，设计思路沟通也是设计师的必修课。这里介绍一款用户流程展示工具 Overflow，希望能够帮助各位设计师去更优雅的讲故事。</span></p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-72add67a7d6e6df30d87205d3356ebea_b.jpg"/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>第一步 | 安装</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-be350937cae61964afb445e3d9fb81ec_b.jpg"/></p><p>Overflow 在安装过程中有详细的功能与界面介绍。安装后需要先打开 Overflow，这样 Sketch 中会出现 Overflow Sketch Panel 这个插件。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>第二步 | 导入</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-d9f9ba08aaf685e880637acd2e52a473_b.gif"/></p><p>选中需要导入 Overflow 的画板，Sketch 界面右侧会出现导入按钮。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>第三步 | 连线&amp;添加说明</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-3edfb1eed9e0207f9025a61cb689a577_b.gif"/></p><p>Overflow 里可以识别导入画板中的图层，点击图层和画板进行连线，并在连线上添加操作说明。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>第四步 | 演示</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-e59c008f1207fe7d9d16ac19a9904795_b.gif"/></p><p>连线&amp;说明完毕后，右下角按钮进入演示模式，可以点击图层在画板间穿梭，并且能够鸟瞰全局。</p><p><br/></p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-d78cc611e3e84e369b372520799f2682_b.jpg"/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>原型</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-a107bf2f5d03b7133e78d0589477269d_b.gif"/></p><p>需要先进入演示模式，才能进入原型模式。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>换肤</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-3212019df1f0625e2ecf49e7c31e1e23_b.gif"/></p><p>响应新 Mac 功能，有一套深色皮肤，当然他们团队后续也会推出更多的皮肤。</p><p><br/></p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-81977ba300fde9ac21a538e3f3a293fe_b.jpg"/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>设计评审中的痛点</p></h2><p>曾经有幸供职于不同的公司，经历过不同的设计评审。如何高效的展示设计稿和设计思路一直是一个问题。不同的公司，不同的团队，不同的设计师都有着自己的交付习惯，有时候会扔过来一包 PNG，在评审的时候一张一张过，有时候会扔一个原型，在评审的时候一边演示一遍过。然而这两种展示方式都不能很好的讲清楚界面之间的关系与用户流程。我需要一种能够获得结构性反馈的展示方式。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>我的探索</p></h2><p>我尝试去迭代优化自己讲故事的方式。面对评审中的产品经理、工程师、需求方等不同职能，我需要一种方式让大家信息同步。所以，我需要一张大盘图，可以讲清楚单个界面，可以讲清楚界面间的关系，也可以讲清楚界面间不同的用户流程。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-ef38819eb4d7de2f75815f2da477583f_b.jpg"/></p><p>Dribbble 上的飞机稿</p><p>受到这些飞机稿的启发，我最后输出设计稿的方式是这样的。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-62a00d7f23ba3c6bd4575a16286139b4_b.jpg"/></p><p>废弃设计稿</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>Overflow 团队的努力</p></h2><p>用户流程使参与评审的人可以获得对于整个产品的上帝视角，了解各个界面之间的关系，通过流程的引导来体验整个用户流程。Overflow 团队基于 User Flow 设计了这款工具来帮助设计师讲故事。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-5518467692cfd95d9dbd813c8c5879cd_b.jpg"/></p>

Overflow

Overflow - 将设计稿连接成用户流程 - 胡思

用户流程

uiLogos

uiLogos - 为设计稿快速填充 logo - 胡思

填充 logo

Material Theme Editor

Material Theme Editor - 自动生成 Material 主题设计稿 - 胡思

生成组件

Kitchen

一款为设计者提升工作效率的 Sketch 工具集，包含 Iconfont 图标库、设计稿上传、智能排版、数据填充、色板管理、Symbol 同步、组件生成器七个功能。其中从 Iconfont 拖拽图标和设计稿上传节省了我很多时间。搭配语雀使用更好，可以实现自动标注。

一个好汉三个帮，Sketch 和他的小弟们

Abstract

Runner

Sketch Plugin Monster

蓝湖

Connection Flow Arrows

Overflow

uiLogos

Material Theme Editor

Kitchen

Zeplin

Anima

CRAFT

Arrange