详细教程 · Lanhu

点击首页右上角的【下载】图标，打开后，即可下载蓝湖 Sketch 插件；

安装成功后，请重启 Sketch。 👇

打开 Sketch【Plugins】→【蓝湖】上传设计图；

👇

点击登录页右下角切换到私有登录页面；

👇

输入你的蓝湖账号、密码以及私有服务器地址，登录蓝湖；

选择设计图对应的团队和项目。

👇

插件内 “当前设计” 是指当前设计图的大小，根据设计图大小选择对应倍数。

确定当前设计基于的设备是 iOS、 Android 还是 Web,

再确定现在的设计图是基于几倍设计的，最后选择和设计图匹配的设备和倍数。

◆ 分类：

iPhone、iPad、iWatch 这三种设备的界面设计 属于—— iOS；

安卓系统的界面设计 属于 —— Android；

网页类型的界面设计 属于 —— Web。

👇

◆ 例如：

375 x 667， 属于 iOS 1x；

750 x 1334，属于 iOS 2x；

1920 x 1080, (是手机界面还是网页 )手机建议选 Android-xxhdpi；网页选 Web-1x。

◆ Web 类型：

1x,是常用尺寸，大家做的网页一般都是选 1x；

2x 是指为特定的屏幕（4k 屏）设计的尺寸，通常该尺寸会是正常网页的 2 倍。

通过蓝湖 Sketch / Photoshop / Adobe XD 插件标记需要生成的切图，上传设计图后，在设计图详情页，你家工程师就可以一键下载多倍数切图文件；

1️⃣ 标记切图：

👇

💗 以下切图教程以【B.切片类型切图】为例，且推荐此方法。

选中需要标记为切图的图标，点击 Sketch 右下角的 【Make Exportable】，然后再点击 Sketch 右下角的【切刀】图标，即可标记切图；

或者使用快捷键【S】，鼠标会显示成切刀工具，此时鼠标右键需要标记为切图的图标，即可标记切图。

👇

2️⃣ 自定义切图尺寸

当设计图上的切图尺寸不合适的时候，可以自定义切图尺寸。 选中需要自定义尺寸的图标，在右上角的图标尺寸栏中，输入合适的尺寸，然后再将该图标的切图图层跟原始图层合并成一个分组，即可成功自定义切图。

👇

✨PS：如果你标记的切图有背景图层，而此时你需要切图是透明背景，此时选中 Slice 层后，再在右侧菜单中勾选【Export group contents only】这个选项，即可得到是透明背景 的切图。

👇

打开蓝湖插件，Sketch【Plugins】→【蓝湖】上传设计图；

可一键上传当前 page 内全部的 Artboard，也可以上传选中的 Artboard。

或使用快捷键，

“cmd + ctrl +L ” 上传当前 page 内全部画板，

“cmd + L ” 上传所选画板。

💌 设计图内切图较多会影响上传速度，请耐心等待，或取消不必要的切图，再次上传。

👇

下载微信官方提供 Sketch 文件，然后基于 Sketch 文件内的 Symbols 设计的小程序设计图，上传到蓝湖之后，可以在标注详情页查看、复制相应的小组件对应的相关代码。

👇

插件右下角 “ 切图导出 SVG ”，勾选后上传的切图会自动生成 SVG 格式。

💌 注意：

1.需要被切图层是矢量的图层, 如形状图层和文本图层，图片图层不会输出 SVG 格式。

2.个别情况下有描边的矢量图标会导致导出错误，请把描边转为路径，后上传。

3.如果不需要使用 SVG 资源的时候，建议关闭 SVG 导出。

点击首页右上角的【下载】图标，打开后，即可下载蓝湖 Photoshop 插件；

安装成功后，请重启 Photoshop。

★ 注：蓝湖 Ps 插件仅支持 Photoshop CC 2015 及以上版本 。

👇

打开 Photoshop【窗口】→【扩展功能】→【🐳 蓝湖】；

👇

点击登录页右下角切换到私有登录页面；

👇

输入你的蓝湖账号、密码以及私有服务器地址，登录蓝湖；

选择设计图对应的团队和项目。

👇

插件内 “当前设计” 是指当前设计图的大小，根据设计图大小选择对应倍数。

确定当前设计基于的设备是 iOS、 安卓 还是 Web,

再确定现在的设计图是基于几倍设计的，最后选择和设计图匹配的设备和倍数。

◆ 分类：

iPhone、iPad、iWatch 这三种设备的界面设计 属于—— iOS；

安卓系统的界面设计 属于 —— 安卓；

网页类型的界面设计 属于 —— Web。

👇

◆ 例如：

375 x 667，属于 iOS 1x；

750 x 1334，属于 iOS 2x；

1920 x 1080, (是手机界面还是网页 )手机建议选 Android-xxhdpi；网页选 Web-1x。

◆ Web 类型：

1x,是常用尺寸，大家做的网页一般都是选 1x；

2x 是指为特定的屏幕（4k 屏）设计的尺寸，通常该尺寸会是正常网页的 2 倍。

选中切图的图层，或图层组，点击【标为切图】即可；

👇

数值是可选的，如果不填数值，默认使用当前图标内容的大小；

如果大小不是自己想要的，可自定义修改。

👇

PS：不勾选“显示切图区域”即可隐藏切图区域，该切图区域隐藏后，不影响切图的上传。

💌 设置切图的图层或组，不可重复嵌套

选中要上传的画板，也可选择全部画板（无画板选全部画板），点击【上传】即可。

👇

设置好的切图，会跟随页面一同上传至蓝湖 Web 端，可看标注，并下载切图。

💌 注意：

1.蓝湖推荐使用 Ps 画板工具，可同时上传多个页面。

不建议使用 一个 psd 文件通过隐藏显示文件夹来区分不同页面，这样会导致上传的多张设计图成为设计图的历史版本，不便于以后的修改更新。

2.智能对象等同于位图，不会有标注内容和 SVG 格式切图

切图生成 SVG 格式需要被切图层是矢量的图层, 如形状图层和文本图层，但是图片图层、智能对象不能生成 SVG。

在打开“快速上传模式”之后，才能生成 SVG。

快速上传模式 🌱

快速上传模式是 v2.38 版新增的上传模式, 开启后可以更快的上传, 并且支持矢量图层生成 SVG 格式的切图,还能避免切图不对应等意外情况发生。

👇

开启快速上传模式 🌱

👇

💌 注意：

v2.38 之前的版本不能通过插件内自动更新来获得快速上传功能,只能 重新安装插件

快速上传模式只能在 Photoshop CC 2017 以上版本使用.

● 打开: Photoshop 首选项-增效工具-启用生成器

● 在插件右上角的菜单中勾选"启用快速上传"

● 如果你有上传 SVG 的需求, 可以开启"导出 SVG", 如果不需要, 可以关闭它来提升上传速度。

👇

点击首页右上角的【下载】图标，打开后，即可下载蓝湖 Adobe XD 插件；

安装成功后，启动 Adobe XD。

★ 注：蓝湖 Adobe XD 插件支持 Adobe XD cc 及以上版本，且支持 Windows 和 Mac 双系统。

👇

启动【蓝湖 XD】程序后，点击登录页右下角切换到私有登录页面；

👇

输入你的蓝湖账号、密码以及私有服务器地址，登录蓝湖；

选择设计图对应的团队和项目。

👇

★ 注：

如果你之前下载安装过【蓝湖 Photoshop 插件】，【蓝湖 XD】程序会自动获取你的帐号信息，团队和项目都是之前 Photoshop 内的设置，可自行修改；

如果你之前未使用过蓝湖，在蓝湖官网注册好帐号后，再登录【蓝湖 XD】程序。

插件内 “当前设计” 是指当前设计图的大小，根据设计图大小选择对应倍数。

确定当前设计基于的设备是 iOS、 安卓 还是 Web,

再确定现在的设计图是基于几倍设计的，最后选择和设计图匹配的设备和倍数。

◆ 分类：

iPhone、iPad、iWatch 这三种设备的界面设计 属于—— iOS；

安卓系统的界面设计 属于 —— 安卓；

网页类型的界面设计 属于 —— Web。

👇

◆ 例如：

375 x 667，属于 iOS 1x；

750 x 1334，属于 iOS 2x；

1920 x 1080, (是手机界面还是网页 )手机建议选 Android-xxhdpi；网页选 Web-1x。

◆ Web 类型：

1x,是常用尺寸，大家做的网页一般都是选 1x；

2x 是指为特定的屏幕（4k 屏）设计的尺寸，通常该尺寸会是正常网页的 2 倍。

选择需要标记为切图的图层，在 Adobe XD 的组或图层上，点击【批量导出标记】后，即可完成切图设置；

👇

选中需要导出的画板，选择【文件】→【导出】→【蓝湖】；

Mac 系统

👇

Windows 系统

👇

在【蓝湖 XD】程序上，选择需要上传的团队和项目，选择【当前选中的画板】，或者【全部画板】，上传到蓝湖。

👇

★ 注：

如果上传文件和之前上传过的文件名称和画板 ID 两项一致，上传默认为新增版本；

两项内，任何一项不一致，则是新增设计图 。

点击画布页上方的【添加】图标，选择【设计图】，在弹出的列表中，点击最左侧“本地上传 PNG、JPG、GIF”下方的【上传】，选择需要上传的图片，即可将本地设计图上传到蓝湖。

👇

✨PS：蓝湖支持上传 PNG、JPG、GIF 格式的本地图片，且此上传方式不能自动标注。

将电脑上的图片直接拖拽到蓝湖【设计画布】页，即可将图片上传到蓝湖。

👇

添加到剪切板的截图，可直接粘贴到（Mac：Cmd+V；Windows：Ctrl+V）到蓝湖【设计画布】页。

👇

双击项目封面，即可进入蓝湖【设计+产品文档管理页】，选择”设计“，即可进入画布页。

👇

按住 Shift + 鼠标左键选择多张设计图;

鼠标右键拖拽可框选设计图 ;

框选后，可以选左对齐、右对齐、居中对齐等自动对齐选项，排列设计图。

👇

通过蓝湖 Sketch 插件、 Photoshop 插件或者 Adobe XD 插件一键上传设计图。

选中需要下载的设计图，或者框选设计图，右键菜单，即可下载选中的设计图。

（还可以一次选中多张设计图进行下载）

👇

在画布页面，按住 Shift + 鼠标左键选择多张设计图，或者，鼠标右键拖拽可框选设计图 ;

框选后，右键菜单，选择【下载切图】，即可同时一键下载多张设计图内的全部切图。

👇

选中需要复制的设计图/文字卡片，右键菜单；

或使用快捷键“ Ctrl / Cmd + C ”复制， “ Ctrl / Cmd + V ”粘贴 或右键菜单粘贴，

即可复制该设计图当前版本/文字卡片。

👇

选中要删除的设计图，右键菜单，或使用快捷键 “delete” 键即可删除该设计图及其所有历史版本、批注等内容。

👇

删除设计图之后，点击画布右下角“撤销”图标，即可撤销操作。

👇

💌 当页面刷新后 就无法再执行 “撤销”命令了，请谨慎删除操作。

点设计图名称前的【修改】图标，或者选中需要重命名的设计图，右键菜单，即可对该设计图进行重新命名。

👇

鼠标左键长按设计图不放，可随意移动；

鼠标右键可框选多张设计图，随意拖拽移动。

👇

移动设计图之后，点击画布右下角“撤销”图标，即可撤销操作。

👇

💌 当页面刷新后 就无法再执行 “撤销”命令了。

点击画布上方“搜索”图标，输入设计图名称即可。

👇

💌 设计图搜索功能支持拼音。

👇

💌PS：

单击设计图，即可在画布内定位展示；

双击设计图，可打开当前设计图的标注页面。

使用快捷键“F”，即可全览画布上所有的设计图。

👇

点击画布左侧工具栏分组旁的【添加】图标，或使用快捷键“G”；

点击选择要添加至分组的设计图，然后【确定】 ；

输入“分组名称”，点击【确定】即可。

👇

点击左侧分组列表中，分组名称旁边的【拓展】图标，在打开的菜单栏中选择【编辑】，即可进入分组编辑模式。

👇

① 添加/删减设计图

在画布上，选择放进分组的设计图，即将设计图添加至该分组；

将原来选中的设计图的“√”点掉，即将该设计图移出该分组。

👇

② 修改名称

左上角分组名称旁边的“笔”按钮，输入分组新名称即可。

👇

或者点击分组名称旁的【拓展】图标，选择【重命名】，输入正确的名字，点击确定，即可。

👇

③ 删除分组

点击右上角的“删除”按钮即可删除分组。

👇

④ 修改排序

左侧分组列表中，鼠标左键选中分组名称拖拽到合适位置。

👇

💌 不打开编辑模式 也可修改分组排序。

当分组名称跟上传到蓝湖的 Auxre 文档页面名称一致时，即可将该分组跟 Axure 文档页面绑定在一起； 点击 Axure 页面后面的【跳转到设计图】图标，即可跳转到其对应的设计图分组，方便对比、查看原型和设计图。

👇

我们经常会遇到同一页面、但表现不同情况的设计图 。(例如无网络、未登录等状态)

把这些图拖拽合并为状态图，就可以大大地方便团队理解和查看。

把是状态图的设计图拖拽至设计图的上方覆盖，即可生成状态图，设计图右侧标签可切换。

👇

拖拽任意一个子标签出来（非第一个耳朵）即可取消。

👇

选中右侧标签后，按“delete”即可删除该状态图。

👇

画布空白处鼠标左键按下拖动，可快速拖拽画布；

💌 按在设计图上 会移动设计图。

👇

或长按“空格”键，进入抓手模式，点击画布任意地方都可以拖拽画布。

点击右上角的【更多】，选择【分享项目】；

👇

① 选择【分享并邀请】

分享给团队成员，可查看标注、原型等项目内容；

直接复制链接，分享给团队成员即可。

👇

💌 该链接会同时邀请加入团队，再次自行登录后即可查看，不用多次重复分享；

该链接 14 天内有效。

② 选择【快捷分享】

分享给客户等团队外部人员，仅可查看画布内容；

复制链接及密码，分享给客户等外部人员即可，他们无需加入团队，每次通过密码查看。 （该链接长期有效，但点击重置按钮后，原链接和密码失效）

👇

点击画布上方【＋】图标，选择【文字卡片】，或使用快捷键 “T”，单击画布空白处，即可创建“文字卡片”。

文字卡片大小可拖拽选中后的 6 个控制柄根据需求随意调整。

👇

点击画布页上方的【连线】图标，或者快捷键 L，即可进入设计图连线模式； 👇

鼠标左键分别点击两张设计图，便可在它们中间绘制一条跳转连线。 该连线可一对多展示设计图关系。

👇

单击项目封面，即可进入蓝湖【设计+产品文档管理页】，选择”产品“，即可进入产品文档共享页。

👇

安装好蓝湖【Axure 客户端】之后，点击登录页右下角切换到私有登录页面；

👇

输入你的蓝湖账号、密码以及私有服务器地址，登录蓝湖；

👇

即可将 Axure 文档共享至蓝湖客户端，一步到位，从此告别重复打包文档、重复确认同事是否收到文档等繁琐环节。

P.S.

1️⃣ 蓝湖【Axure 客户端】支持 Mac 和 Windows 系统；

2️⃣ 如果你之前未使用过蓝湖，在蓝湖官网注册好帐号后，再登录【蓝湖 Axure 客户端】。

登录你的蓝湖帐号，点击【蓝湖 Axure 客户端】左上角的团队名称，即可切换/选择团队；

👇

点击项目列表旁的下拉图标，选择对应的项目名称，即可切换/选择项目；

👇

在项目较多的情况下，可以点击项目列表左侧的“搜索”图标，输入项目名称，快速搜索项目。

👇

点击项目列表右侧的“+”，输入项目名称，选择项目类型，即可在当前文件夹路径内新建项目。

👇

如果你需要切换/退出当前帐号，点击【蓝湖 Axure 客户端】右上角的“设置”图标，选择“退出登录"即可。

👇

在 Axure 内打开需要上传的文档，点击 Axure 右上角的“预览”

👇

然后打开【蓝湖 Axure 客户端】；

P.S.

如果【蓝湖 Axure 客户端】被最小化，在（Mac 顶部状态栏，Windows 底部托盘）即可找到打开。

如果 Axure 内同时打开了多个 Axure 文档，需要在客户端单选需要上传的文件；

👇

如果该文档没有上传过，且对应的项目中未通过【蓝湖 Axure 客户端】上传过 Axure 文档，在【文档】处输入文件名称后，点击上传，即可将该 Axure 上传到蓝湖 Web 端；

👇

如果该文档没有上传过，项目中有其他已经上传过的 Axure 文档，可以在【文档】处输入名称，上传一个新的文档；

或者，也可让该文档对项目中其他文档进行版本迭代，从【文档】的下拉菜单中选择“文档名称”，再点击【上传】即可。

👇

如果该文件上传过，当文档有修改/更新时，【蓝湖 Axure 客户端】会为你自动识别文档名称，点击上传，即可在蓝湖查看最新版本的文档，新版本文档即可对原版本进行覆盖，原版本自动成为历史版本。

👇

P.S.如果在 Axure 上有对元素进行的说明，上传到蓝湖之后，在进行过说明的元素右上角有一个蓝色图标，点击后，即可查看针对这个元素的页面说明。

👇

Axure 文档绑定设计图分组之后，点击该文档页面，即可跳转到其对应的设计图分组，无缝连接 Axure 文档和设计图。

👇

上传的 Axure 文档页面名称与设计图分组名称一致时，即可自动绑定；

绑定成功后，在蓝湖的 Axure 文件列表上，该页面名称旁将显示【跳转到设计图】图标，点击该图标，即可跳转到绑定的设计图分组。

👇

P.S.如果设计图分组名称修改后，文件列表页对应的 Axure 文档页面名称后，未出现【跳转到设计图】图标，点击文档列表右下角的【刷新】图标即可。

👇

如果你是首次添加 Word、PDF、链接格式的文档到蓝湖，在蓝湖画布页左上角的导航栏中选择【产品】，进入产品文档添加页，即可添加相关文档；

👇

此后，在产品文档展示页，在左侧的文档列表中选择“新增文件”，即可进入产品文档添加页。

👇

上传：

进入产品文档添加页后，点击“上传”，选择需要上传的 Word / PDF 文档，即可将该文档上传至蓝湖 Web 端。

👇

更新：

点击文档切换列表该文档名称右侧的“更多”图标，选择“上传新版”，选择你需要更新的文件，即可上传最新版本的 Word / PDF 文件，原版本自动成为历史版本。

👇

进入产品文档添加页后，点击“上传”，粘贴链接地址，然后点击产品文档添加页最下端的“确定”，即可将该链接保存至蓝湖 Web 端。

👇

P.S.

文档打点评论功能当前支持以下格式文档： Axure / Word / PDF 。

在产品文档页面，点击上方的“评论”图标，或者使用快捷键“N”，即可在文档上@相关成员进行打点评论，被@成员还会及时收到通知。

👇

P.S.

适合 @ 工程师、设计师、设计总监、产品总监、测试工程师、市场运营等相关人员。

点击页面左上角的【评论与说明】图标，即可查看该 Axure 文档每一个版本当前页面上所有的评论信息。

👇

在打开的评论列表中，勾选【仅看当前版本】，只展示该 Axure 文档当前版本的所有评论信息，否则评论列表将展示针对该页面所有版本进行的打点评论。

👇

P.S.如果在该文档页面有”评论批注“，在页面左侧的”文档目录“的当前页面右侧会显示【当前页面有批注】图标。

👇

左键按住评论圆点拖拽到对应位置后，松开鼠标即可完成评论位置移动。

👇

P.S.

只有此评论的创建者才能移动评论位置。

点击评论右上角“更多”按钮，点击“编辑”图标，即可对评论进行修改；

👇

点击“删除”图标，点击“确定”，即删除此条评论。

👇

P.S.

只有此评论的创建者才能修改/删除.

P.S. ”文档历史版本管理“功能支持以下格式：Axure / Word / PDF 。

当文档有修改/更新时，在【蓝湖 Axure 客户端】，选择对应文档名称，点击上传，即可在蓝湖查看最新版本的文档，原版本自动成为历史版本。

点击 Axure 文档页面上方的“历史版本“按钮，即可查看相关的历史版本，选择“切换到此版本”可以进行切换。

👇

如果需要删除已上传的 Axure 文档，点击上方的【历史版本】，进入历史版本管理页之后，在左侧的文档版本列表中选择需要删除的版本，进入该版本后，点击右下角的【删除版本】，即可删除当前版本的 Axure 文档。

👇

将 Axure 文档上传到蓝湖之后，如果文档有修改更新，在该页面名称旁鼠标悬浮时会显示“版本对比”按钮；

👇

开启后，该页面新版本和旧版本有更新出将会用蓝色虚线框出，方便查看，避免文档变化细节的漏看。

👇

当 Word / PDF 格式产品文档有修改更新，点击该左侧的文档名称旁的”更多“图标，在打开的列表中，选择”上传新版“，即可该文档最新的版本上传到蓝湖，原版本自动成为历史版本。

👇

通过【蓝湖 Axure 客户端】将文档成功上传至蓝湖后，在该页面可以点击复制“分享链接”，发送给团队的其他成员进行查看。

👇

P.S.

如果该同事未加入该项目，此链接同时包含邀请，邀请其进入该项目，方便他自助查看项目内的相关文档和设计图信息。

如果你需要修改已上传文档的名称，点击文档名称旁的”更多“图标，选择【重命名】，即可对文档进行重命名。

👇

如果你需要删除已上传的文档，点击文档名称旁的”更多“图标，选择【删除】，即可删除该文档。

👇

如果你需要下载已上传的文档，点击文档名称旁的”更多“图标，选择【下载】，即可下载该文档。

P.S.

蓝湖支持 Word / PDF / Excel / PPT 格式的文档下载。

👇

解决办法：

上传过程中不能关闭 Axure 软件；

关闭翻墙 / VPN 之后再重新上传。

解决办法：

在 Axure 内，开启“自动备份设置”即可。

👇

👇

原因：

Axure 文件更换过其他的 Axure 版本。

解决办法：

把内容复制到新建的文档内再上传。

Axure 文档覆盖规:

Axure 文档是根据客户端上传时选择的 Axure 文档名称来进行覆盖的。

Word / PDF 格式文档覆盖规则:

Word / PDF 格式文档根据文件名称和在对应文档右侧的“更多”图标，选择“上传新版”上传覆盖。

蓝湖【设计规范云】是一款基于 Sketch 的客户端软件。旨在帮助互联网团队同步设计规范，保持设计一致性，提高设计效率。

✨P.S.此版本现仅支持 Sketch 60 以上版本。

下载安装好蓝湖【设计规范云】客户端后，打开软件，登录你的蓝湖账号；

点击蓝湖【设计规范云】左上角的团队名称旁的【下拉】图标，选择进入相关团队。

👇

点击规范名称旁的【下拉】图标，选择【新建规范】，输入“规范名称”，点击【确定】，即可新建规范。

👇

打开规范名称旁的【下拉】图标，点击要进入的规范名字，即可切换规范。

👇

进入要删除的规范，打开规范名称旁的【更多】图标，选择【删除】，即可删除规范。

👇

如果需要对规范进行重命名，进入要重命名的规范，打开规范名称旁的【更多】图标，选择【重命名】，输入新的名字即可。

👇

在蓝湖【设计规范云】客户端左侧规范库中，选中要新建文件夹的类型； 点击类型名称旁的【更多】图标，选择【新建文件夹】即可新建子分组。

👇

P.S.

1️⃣【新建文件夹】选项，还可以通过右键文件夹找到。

2️⃣ 每一个文件夹中，最多可新建两层子分组。

选中文件夹，直接将其拖拽到要移动到的位置，即可对目标进行移动，调整顺序。

P.S. 样式和组件不可以跨类型移动

分类不引导重命名，之后要去掉，要引导文件夹重命名 图和文本都要改哈~ 在蓝湖【设计规范云】客户端左侧规范库中，在规范类型下选中要重命名的文件夹；

点击文件夹名称旁的【更多】图标，选择【重命名】即可对分组内的文件夹进行重命名。

👇

如果需要删除规范库内添加的元素或文件夹，在蓝湖【设计规范云】客户端左侧规范库中，选中要删除的元素或文件夹，选择【删除】，即可删除该元素或文件夹。

👇

P.S.

1️⃣【删除】选项，还可通过右键文件夹找到。

2️⃣ 删除文件夹后，文件夹内所有内容都将被删除，且无法找回，请谨慎操作。

如果需要批量清除元素，在蓝湖【设计规范云】客户端左侧规范库中，选中要清除元素文件夹，选择【清除】，即可清除文件夹中的元素。

👇

✨P.S：

在蓝湖【设计规范云】，添加元素成功之后，即可同步设计规范给团队成员，团队成员可直接使用。

打开蓝湖【设计规范云】，并打开要添加至规范的 Sketch 文件；

在蓝湖【设计规范云】客户端左侧规范库中，选中【颜色】文件夹；

👇

然后在 Sketch 中选中带有颜色的形状，再点击蓝湖【设计规范云】右下角的【添加】按钮，即可选择添加选中形状的颜色。

【当前选中的形状包含的颜色】 和文件中已有的【文档颜色】和【全局颜色】直接点击【添加】按钮即可添加。

👇

在蓝湖【设计规范管理系统】客户端左侧规范库中，选中【文本样式】文件夹；

👇

点击右下角的【添加】按钮，Sketch 文件中已有的所有文本样式都会显示，可以选择单选或全选进行添加。

👇

在蓝湖【设计规范云】客户端左侧规范库中，选中【图层样式】类型；

👇

点击右下角的【添加】按钮，蓝湖会读取 Sketch 文件中已有的全部图层样式，选择想要添加的上传即可。

👇

✨P.S.

1️⃣ 图层样式包括的属性有：填充、边框、投影、模糊。

2️⃣ Sketch 中创建图层样式的方法：选中一个形状，在外观处创建图层样式。

在蓝湖【设计规范云】客户端左侧规范库中，选中【图标】类型；

👇

点击右下角的【添加】按钮，蓝湖会读取 Sketch 文件中已有的全部图层样式，选择想要添加的上传即可。

👇

P.S.蓝湖会保留插入元素的类型，图层、组、Symbol 均支持。

在蓝湖【设计规范云】客户端左侧规范库中，选中【组件】文件夹；

👇

然后在 Sketch 中选中要添加的组件，再点击蓝湖【设计规范云】右下角的【添加】按钮，即可添加选中的组件。

👇

✨P.S.组件内包含的嵌套关系，蓝湖会继续保留。

将添加好的设计规范同步到服务器之后，即可与团队成员共同使用、维护、完善该规范； 当客户端有变化时，蓝湖会自动同步规范；

如果自动同步无响应，可点击左上角的【手动同步】按钮进行同步。

👇

在 Sketch 中选中想要变换颜色的形状，点击蓝湖【设计规范云】中的颜色，即可将选中形状的填充应用该颜色。

👇

P.S. 颜色应用于描边：鼠标悬浮在蓝湖【设计规范管理系统】中的颜色上会出现小圆点，点击小圆点即可将颜色应用于描边。

在 Sketch 中选中想要变换样式的文本，点击蓝湖【设计规范云】中的文本样式，即可转变选中文本的文本样式。

👇

在 Sketch 中选中想要变换图层样式的形状，点击蓝湖【设计规范云】中的图层样式，即可将该形状应用该图层样式。

👇

将蓝湖【设计规范云】中添加的图标直接拖拽到 Sketch 中，即可使用。

👇

将蓝湖【设计规范云】中添加的组件直接拖拽到 Sketch 中，即可使用。

👇

✨P.S.

1️⃣ 在蓝湖【设计规范云】添加好元素后，蓝湖 Web 端对应的团队会实时同步规范。

2️⃣ 蓝湖端仅提供规范的预览。

点击规范名称旁的【更多】图标，选择【前往网页】，即可在 Web 端查看规范。

👇

颜色/文本样式/图层样式/图标/组件/元素备注

👇

在蓝湖【设计规范云】客户端，点击左上角的头像，选择【退出登录】即可退出登录。

👇

“Mac 提示：已损坏，打不开，您应将它移到废纸篓”

❤️ 解决办法：

1.在 LaunchPad 中找到“终端”程序，一般它会在“其它”文件夹中。

2.在“终端”程序中输入“sudo spctl --master-disable”，然后按回车键（return/enter 键），然后输入电脑系统的密码。

3.打开电脑的“系统偏好设置”→“安全与隐私”。在“通用”一览中，会看到“允许从以下位置下载的应用”的设置。这个时候应该已经有三个可选项：“App Store、App 和被认可的开发者、任何来源”。

4.如果这三个可选项：“App Store、App 和被认可的开发者、任何来源”是灰色的，不能选择。点击左下角的“锁”，然后再输入电脑系统密码。

5.选中“任何来源”，然后退出，重新打开之前安装的软件 App 就可以使用了。如果依旧不可以使用，重新安装一次就好。

❤️ 解决办法 1：

蓝湖【设计规范云】作为独立客户端，需要 Sketch 内的插件配合（正常会随客户端自动安装）；如遇到规范无法使用，则手动在插件列表内找到【 Plugins —蓝湖设计规范云】即可完成激活。

👇

❤️ 解决办法 2： 重新启动电脑

蓝湖【设计规范云】客户端所有功能在左下角显示【已连接成功】，则可以正常使用。

👇

如果组件中包含 symbol 多层嵌套的情况，蓝湖会一起支持，调用组件内容后在 Sketch 右侧面板可自由修改为其它内容，修改后的组件如果不再次上传则不会影响规范库中的组件。

👇

👇

在组件制作过程中，如何让组件更好的【自适应】？

在 Sketch 内每个元素都可以设置【调整尺寸】，设置完成后，调整大组件的大小时，内部小组件的相对位置与大小会发生响应式变化。

👇

通过标注页左侧“添加批注”按钮，或快捷键 “N”，即可在设计图上打点标记，或拖拽区域标记。

批注内容支持 @ 项目内成员用户名，被 @ 的成员会收到通知；

适合 @ 工程师、设计总监、产品总监等设计审核人员，他可以直接回复你哦~

👇

点击设计图详情页左侧工具栏上“批注”图标，即可查看该设计图上所有的批注信息。

👇

查看完批注之后，可以标记为“已读”；

👇

💌 被标记为“已读”的批注，可以在查看批注列表左上角选择“已读”找到。

批注的修改/删除只有此批注创建者可以操作。

点击批注右上角“更多”按钮，点击“编辑”图标可对批注进行修改；

点击“删除”图标，即删除此条批注。

👇

点击设计图详情页左侧工具栏上“显示/隐藏批注”图标，即可选择是否显示设计图上批注信息。

👇

每次通过 Ps 或 Sketch 插件上传版设计图，如果该设计图有修改或更新，将自动添加一个最新版本，原设计图变为一个历史版本。（上传请见上传设计图教程）

👇

在连线页添加成状态图，设计图详情页左侧标签可切换。

👇

在画布页绘制跳转逻辑连线；

在设计图详情页，单击左下角“上一页/下一页”图标，即可按连线顺序快速切换设计图。 （无连线时，按设计图更新时间切换）

👇

单击设计图任意地方，即可打开设计图标注信息面板，查看该设计图元素大小、描边、颜色、投影、圆角、字体、字号、边距等信息。

单击空白处，可关闭标注面板。

👇

同步 Sketch 内的原型将会呈现在右侧属性区，选中跳转元素后，右侧属性区有【跳转页面】和【跳转动画】两种属性。

点击后即可快速跳转到目标页 。

👇

💌 点击右上角【设置】，可选择数值保留小数还是取整显示。

工程师通过在设计图上选择多个元素，就可以同时查看多个元素的标注信息，再也不用挨个点击了。

如果你是 Windows 系统：按住 Ctrl 键，鼠标左键多选元素，即可完成【标注多选】；

如果你是 Mac 系统：按住 Cmd 键，鼠标左键多选元素，即可完成【标注多选】。

利用蓝湖【百分比标注】进行开发，工程师只需按百分比适配页面，界面就能在不同尺寸的手机、电脑上避免布局紊乱、内容叠加等问题。

单选标注元素，或者【标注多选】元素；

按住 Alt 键，即可查看所选元素所占对应图层的百分比，也能查看占整张设计图所占的百分比。

点击标注面板右上方三角图标，打开标注单位列表，根据需要选择标注单位。

该单位是指在设计图尺寸不改变的情况下更换不同的设备显示设计尺寸。

👇

🎓 很多人问为什么我改的单位越大 显示的数值越小？

dp 的意思

从 MDPI 到 XXXHDPI 每单位物理尺寸的像素数越来越大。

也就是说

mdpi 时 1dp = 1px

xxxhdpi 时 1dp = 4px

mdpi 时 1px = 1dp

xxxhdpi 时 1px= 0.25dp

dp=pt

所以屏幕分辨率高了需要的物理尺寸就是 PX 换算比就会增大

◆ 标注单位：

鼠标单击标注数值即可自动复制。

👇

可在标注面板上，通过点击色块来切换颜色模式：16 进制、RGB、RGBA。

👇

点击设计图详情页左侧工具栏中的“分享”按钮，复制链接，即可分享给团队同事。

👇

点击切图图标，即可下载该图标的多倍切图；

👇

点击设计图详情页左侧工具栏中的“下载切图 ”，可以一键下载本页面所有的切图，可以选择多倍数。

👇

💌 点击右上角【设置】，可以选择隐藏切图虚线框。

👇

✨PS：

① 如何同时一键下载多张设计图的全部切图？

在画布页面，按住 Shift + 鼠标左键选择多张设计图，或者，鼠标右键拖拽可框选设计图 ;

框选后，右键菜单，选择【下载切图】，即可同时一键下载多张设计图内的全部切图。

👇

② 如何多选下载单张设计图内的切图？

在蓝湖标注详情页，单击切图，在右侧“切图下载栏“中点击”查看所有切图“，即可进入“多选切图”页面，该页所有切图将会标红显示；

👇

在“多选切图”页面，勾选需要下载的切图，点击“下载切图”，即可成功多选下载切图。

👇

在标注页面的切图下载按钮下方，选择【开启切图压缩】;

点击【下载切图】，就可以将无损压缩的切图下载下来。

开发以编程语言规范对切图进行重命名后，再进行下载、使用，更高效。

在多选切图页，找到需要修改名称的切图，当鼠标靠近左侧“多选切图菜单栏”中的切图名称时，即会出现“重命名”图标，点击该图标即可对切图进行重命名。

👇

在 Sketch 上制作的交互原型上传到蓝湖 Web 端后，在蓝湖标注页面可以查看跳转逻辑；

按住 Shift 键即会出现【跳转热区】，鼠标左键点击【跳转热区】跳转至链接页面。

👇

在【设计】页，点击最上面的【交互原型】图标，即可进入【交互原型】页面。

👇

第一步：在设计图上拖拽绘制出跳转区域，该区域大小方向可调节；

第二步：将跳转区域与目的页面连接。

👇

点击左上方【设为起始页】图标，即将本页面的设计图设置为原型起始页。

👇

在原型设置页面，固定设计图的顶部底部之后，在演示原型时，固定的顶部底部，都会显示在演示界面的上下两端。

在设计图的左侧的顶部/底部，皆有一个可以上下拉动的滑块，将滑块移动到某一位置，即可固定设计图的顶部/底部；

演示时，滑块移动到的位置，即可固定在演示设备的顶/底部。

👇

点击原型页左侧的“演示”按钮，即可预览并操作制作好的原型。

👇

还可以选择设备类型进行预览、操作，蓝湖现在支持以下四种设备类型。

👇

也可点击右下方“在手机上预览”，下载蓝湖手机端 App，直接在手机上预览和操作原型。

👇

项目类型会影响演示原型的预览，APP 类型的项目预览时会有手机边框；

Web 类型的项目 设计图会直接平铺展示。（5 秒后会自动隐藏左侧菜单，点击无跳转的区域后，菜单再次显示）

返回来源页。

比如：若页面 a、页面 b、页面 c、等多个页面都可以跳转至同一个页面 e，则页面 e 的返回键可直接链接到右侧设计图列表中的“返回”，即从哪个页面进入，便返回至哪个页面。

点击原型预览界面左侧的“分享”按钮，直接复制原型链接；

发送给同事，同事在电脑端、手机端都可以直接打开预览和操作。

👇

在 Sketch 49（及以上版本）中做好的交互原型，通过蓝湖插件上传设计图后，该 Sketch 中的原型会直接同步至蓝湖。 （Sketch 插件的版本需要是 0.94 以上 插件下载链接）

上传设计图后，点击画布上方“交互原型”图标，即可查看 Sketch49 做好的交互原型。👇

👇

可以直接在 PC 端演示原型、分享原型；

也可以通过蓝湖 APP 演示原型、分享原型。

只有该团队的超级管理员才有权限修改团队名称。

在首页左侧功能栏中选择【管理团队】；

👇

进入团队管理页面，点击右上角【设置】，选择【更改团队名称】，

或直接点击最上方【团队名称】旁的【修改】图标，即可修改该团队名称。

👇

点击首页左侧团队名称旁的【更多】图标，选择【创建新团队】； 👇

👇

填写“团队名称”，点击【创建】即可创建一个新的团队。

点击首页左侧最上面的团队名称旁的【拓展图标】，就能展开你所在的所有团队，选择需要切换的团队名称即可；

👇

只有该团队的超级管理员有权限移交团队。

在首页左侧功能栏中选择【管理团队】 。

👇

进入团队管理页面，点击右上角【设置】，选择【移交团队】；

👇

在成员列表中选择团队移交的成员名称，点击【确定】，即可成功移交团队。

被移交成员自动成为超级管理员，原超级管理员自动降级为管理员。

👇

在首页左侧功能栏中选择【管理团队】；

👇

进入团队管理页面，点击右上角【设置】，选择【退出团队】即可退出该团队。

👇

★ 注：超级管理员需将团队移交出去才能退出团队。

只有该团队的超级管理员有权限解散团队。

在首页左侧功能栏中选择【管理团队】；

👇

进入团队管理页面，点击右上角【设置】，选择【解散团队】；

👇

输入你的“登录密码”，点击【确定】即可。

👇

💌 解散团队后，该团队的所有内容将被删除，且不可恢复，请慎重操作 ☠。

只有该团队的超级管理员及管理员有权限添加团队成员。

在首页左侧功能栏中选择【添加成员】；

👇

设置该成员的身份（权限）；

点击【生成邀请链接】；

复制“邀请链接”分享给你的同事即可。

👇

只有该团队的超级管理员及管理员有权限移除团队成员。

在首页左侧功能栏中选择【管理团队】；

👇

进入团队管理页面，找到你要删除的成员，点击最右侧的【设置】图标；

打开后，在弹出的成员权限管理界面，点击左下角的【删除成员】，选择【确定】，即可将该成员从团队中移除。

👇

✨PS：移除该成员后，其创建的项目仍保留。

只有该团队的超级管理员及管理员有权限进行成员分组管理。

在首页左侧功能栏中选择【管理团队】，进入团队管理页面。

👇

1️⃣ 创建分组

点击团队管理页面左侧的【创建分组】图标，输入分组名称，点击【确定】，即可创建一个新的分组。

👇

2️⃣ 删除分组

点击分组名称旁的【拓展】图标，选择【删除】，点击【确定】，即可删除该成员分组。

✨PS：成员分组删除后，不会将该分组内的成员移除该团队。

👇

3️⃣ 更改分组名称

点击分组名称旁的【拓展】图标，选择【重命名】，输入修改后面的名字，点击【确定】即可修改分组名称。

👇

4️⃣ 分组内添加成员

找到需要添加到分组内的成员，将其拖拽到合适的分组即可。

👇

✨PS：成员移动到了错误的分组怎么办？

将其拖拽到合适的分组即可。

只有该团队的超级管理员及管理员有权限进行成员分组管理。

在首页左侧功能栏中选择【管理团队】，进入团队管理页面。

👇

进入团队管理页面，找到你要调整参与项目的成员，点击最右侧的【设置】图标；

👇

打开后，勾选下方【所参与的项目】，即可调整该成员参与的项目。

👇

1️⃣ 更改成员权限

只有该团队的超级管理员及管理员有权限更改成员权限。

在首页左侧功能栏中选择【管理团队】；

👇

进入团队管理页面，找到你要更改权限的成员，点击最右侧的【设置】图标，

打开后，点开【成员权限】右侧的拓展图标，在下拉列表中选择该成员权限即可。

👇

2️⃣ 成员权限说明

P.S. 超级管理员自动参与团队内的每一个项目，管理更高效~

点击首页左侧上方的【新建】，选择【新建项目】；

👇

输入项目名称，选择项目类型，点击【确定】，即可新建项目。

👇

只有该团队的超级管理员及管理员才有权限删除项目。

在首页，将鼠标移至项目卡片上，点击右下角出现的“设置”图标，选择【删除】

删除后不可找回，请谨慎操作。☠

👇

只有该团队的管理员以上权限才可修改项目名称。

在首页，将鼠标移至项目卡片上，点击右下角出现的“设置”图标，选择【设置】；

👇

进入项目设置页面，点击“名称”后的编辑按钮即可修改。

👇

💌 通过画布右上方的“更多”图标，也可以进入项目设置页。

只有该团队的超级管理员及管理员才有权限切换项目类型。

在首页，将鼠标移至项目卡片上，点击右下角出现的“更多”图标，选择【设置】；

👇

进入项目设置页面，可以重新选择项目类型。

👇

💌 通过画布右上方的“更多”图标，也可以进入项目设置页。

只有团队的超级管理员才有权限跨团队转移项目。

点击项目卡片上的【设置】图标，选择【移动至团队】 ，选择转移目标团队，即可将该项目成功转移至目标团队。 👇

只有团队的超级管理员和管理员才有管理项目文件夹的权限。

如果团队的项目比较多，可以新建文件夹，对项目进行分组管理。

👇

点击首页左侧上方的【新建】，选择【新建文件夹】；

输入项目文件夹名称，点击【确定】，即可新建项目文件夹。

👇

✨PS：【项目文件夹】内项目为空，才能进行删除

方法一：点击项目文件夹右下角的【设置】图标，选择【删除】，即可删除该文件夹；

👇

方法二：点击左侧项目文件夹名称旁的【更多】，选择【删除】，即可删除该项目文件夹。

方法一：点击项目文件夹右下角的【设置】图标，选择【重命名】，输入新的名称，即可修改项目文件夹的名称；

👇

方法二：或者点击左侧项目文件夹名称旁的【更多】，选择【重命名】，输入新的名称，即可修改项目文件夹的名称；

👇

方法一：将项目直接拖拽到文件夹上，或左侧的文件夹名称内，即可将该项目移动至该项目文件夹；

（推荐该方法）

👇

✨PS：如何将项目转移到其他文件夹？

方法一：拖拽项目到左侧对应的【项目文件夹】内，即可将项目转移到其他文件夹。

方法二：点击【项目卡片】右下角的设置图标，选择【移动至文件夹】，选择合适的文件夹，即可将该项目纳入该文件夹。

👇

只有该团队的超级管理员及管理员才有权限添加项目成员。

在首页，将鼠标移至项目卡片上，点击右上角出现的“更多”图标，选择【设置】；

👇

进入项目设置页面，点击项目成员身份（权限），选择【移除项目】即可。

👇

★ 注：移除项目成员，该成员只是不能参与此项目，他仍留在团队中。如需从团队中删除成员，请参看“移除团队成员”。

★ Ps：通过画布右上方的“更多”图标，也可以进入项目设置页。

👇

隐藏的黑科技，是蓝湖的一些隐藏的选项与功能。

点击进入项目画布，点击右上方“设置”按钮，选择【隐藏的黑科技】，可以看到一些隐藏的选项和功能。

👇

默认状态下，鼠标移至画布上设计图、文字卡片时，边缘处出现蓝色边框。

打开此项开关，当鼠标滑至某张设计图或文字卡片时，边缘处替换为较深的灰色阴影。

👇

默认状态下，缩放画布需使用“Crtl+鼠标滚轮”；

打开此项开关，使用“鼠标滚轮”即可缩放画布。

默认状态下，框选设计图需使用“Shift+鼠标左键”；

打开此项开关，使用“鼠标左键”即可框选设计图。

默认状态下，在画布上无法修改设计图名称；

打开此项开关，鼠标滑过设计图名称即可出现“修改”按钮，点击此按钮可以修改设计图名称。

👇

默认状态下，最新上传的设计图会出现在画布最上方，但是拖拽至其他地方后，很难分辨出哪几张设计图是最新上传的。

打开此项开关，最近 3 小时内或最新上传的 10 张设计图会被颜色标记出来。

👇

默认状态下，选中一个分区时，其他分区内容依旧会显示；

打开此项开关，选中一个分区时，其他分区内容会隐藏，有利于页面加快响应速度。

默认状态下，分区列表只显示【分区名称】；

打开此项开关，分区列表中【分区名称】后面会显示该分区下设计图数量。

👇

在蓝湖首页左侧工具栏下载蓝湖手机 APP；

点击登录页右下角切换到私有登录页面；输入你的蓝湖账号、密码以及私有服务器地址，登录蓝湖。

👇

输入蓝湖帐号、密码即可登录；

进入【团队】——【项目】，即可查看该项目下所有设计图。

👇

点击设计图，进入设计图详情页，点击左下方【打点评论】，还能 @相关成员，即可以在设计图上创建“批注评论”，可以查看该设计图的批注评论，也可以创建批注评论。

点击右上方【全部评论】，即可查看该设计图所有的批注评论。

👇

点击设计图右上方【分享】，可以将设计图直接分享给同事进行预览和评论。

👇

点击设计图列表页，点击右上方【预览原型】，即可预览并操作该项目的原型。

👇

自检方法：

👇

4.系统帐号有特殊字符（新建个系统名称规范的帐号 再使用插件上传）

自检方法 :

1.关闭代理（翻墙）

2.在非大陆地区尝试使用代理上传

3.尝试更换网络（如共享手机热点网络给电脑）上传

重启 Photoshop 软件；

如果还不行，在蓝湖网页左下角，联系客服清晰描述你的问题。

1.电脑操作系统是什么？

2.Ps 的版本是多少？

3.遇到什么情况？

4.你的重现流程？

原因: 你当前的设计图是按 1 倍像素密度绘制的，高清屏预览需要 2 倍的像素密度。

如果需要在高清屏上查看，两个方法：

方法 A：我们适配了高清屏预览，画布内右下角百分比 200%时，图是清晰的。缺点：视觉看起来是小了一倍。

方法 B：在 ps 内 图像>画布大小,单位是百分比，调整成 200%，然后用蓝湖上传 自检方法。

原因: 你当前的设计图是按 1 倍像素密度绘制的，高清屏预览需要 2 倍的像素密度。

★ 解决办法

在私有服务器地址登录系统管理员账号后，在新标签页输入 私有地址/admin ，即可登录后台系统；

登录成功后顶部菜单栏会展示所有操作选项。

👇

P.S. 通过每个页面的【Export】，可以导出该页面的所有列表信息。

点击上方菜单栏的【用户】，即可进入用户管理页面；

找到你需要进行管理的成员账号，点击账号前的【✏️】图标，即可进入成员账号管理页面。

👇

P.S. 1.如果页面内成员账号很多，可以通过【Search】搜索框快速查找账号。

2.在成员账号管理页面，可以查看该账号的团队和项目信息。但除账号和密码之外，其他信息不建议随便操作修改，以免引起不必要的问题发生。

进入该成员的账号管理页面后，在 Password Hash 输入框内，清除并输入新的密码，点击页面底部的“Save”按钮即可修改该成员的密码。

👇

在 Email 输入框内，清除并输入新的邮箱，填写完成后点击页面底部的“Save”按钮即可修改账号。

P.S.如果要修改邮箱，密码也需要一起修改。

👇

找到你需要删除的成员账号，点击账号前的【删除】图标，即可将该成员移除。

点击上方菜单栏的【权限】，即可进入权限编辑页面，该页面主要用来管理无用的权限。

P.S.【Search】搜索框可以搜索筛选 [Name] 和 [User] Title 下的内容。（例：搜索（member）会展示所有为 member 的权限。）

👇

列表内 [Team] 为空的帐号可以进行删除，以释放权限名额;

List 多选框可勾选多个权限，然后点击 With selected -- Delete 删除选中项。

P.S. 系统管理员 sys_admin 为该后台系统帐号不可删除，否则将无法登录后台，该账号不占用权限名额。

在【团队】和【项目】内，可以查看目前的所有团队和项目的信息。

👇

点击【✏️】图标可以查看团队和项目内的人数和创建时间（但不要修改任何数据）

P.S.【Search】搜索框可以按团队和项目的名称进行筛选。