蓝湖使用教程

1.团队管理

• 01

  修改团队名称 只有该团队的超级管理员才有权限修改团队名称。 在首页左侧功能栏中选择【管理团队】； 进入团队管理页面，点击右上角【设置】，选择【更改团队名称】，或直接点击最上方“团队名称”，即可修改该团队名称。

• 02

  创建新团队 在首页 左侧功能栏中选择【切换/创建团队】； 打开后，选择【创建团队】； 填写“团队名称”，点击【创建】即可创建一个新的团队。

  

• 03

  多团队间切换 在首页左侧功能栏中选择【切换/创建团队】； 打开后，选择需要切换的团队名称即可。

  

• 04

  退出团队 在首页左侧功能栏中选择【管理团队】； 进入团队管理页面，点击右上角【设置】，选择【退出团队】即可退出该团队。 ★注：超级管理员需将团队移交出去才能退出团队。

• 05

  移交团队 只有该团队的超级管理员有权限移交团队。 在首页左侧功能栏中选择【管理团队】 ； 进入团队管理页面，点击右上角【设置】，选择【移交团队】； 在成员列表中选择团队移交的成员名称，点击【确定】，即可成功移交团队。 被移交成员自动成为超级管理员，原超级管理员自动降级为管理员。

• 06

  解散团队 只有该团队的超级管理员有权限解散团队。 在首页左侧功能栏中选择【管理团队】； 进入团队管理页面，点击右上角【设置】，选择【解散团队】； 输入你的“登录密码”，点击【确定】即可。 ★注：解散团队后，该团队的所有内容将被删除，且不可恢复，请慎重操作。

• 07

  添加团队成员 只有该团队的超级管理员及管理员有权限添加团队成员。 在首页左侧功能栏中选择【添加成员】； 方式一：链/ 接邀请 设置该成员的身份（权限）； 点击【生成邀请链/ 接】； 复制“邀请链/ 接”分享给你的同事即可。 方式二：邮箱邀请 在【邮箱】栏中输入要邀请同事的邮箱； 设置这些成员的权限； 最后点击【发送邀请】； 被邀请成员会收到邀请邮件，只需点击邮件中的邀请链/ 接即可。

• 08

  移除团队成员 只有该团队的超级管理员及管理员有权限移除团队成员。 在首页左侧功能栏中选择【管理团队】； 进入团队管理页面，找到你要删除的成员，点击最右边成员身份，在下拉列表中点击【删除成员】即可。

• 09

  团队成员权限说明

  

2.项目管理

• 01

  创建项目 点击首页左上方蓝色按钮【创建新项目】； 输入“项目名称”，选择项目类型，点击【确定】即可。

• 02

  修改项目名称 只有该团队的超级管理员及管理员才有权限修改项目名称。 在首页，将鼠标移至项目卡片上，点击右上角出现的“更多”图标，选择【设置】； 进入项目设置页面，点击“名称”后的编辑按钮即可修改。 Ps：通过画布右上方的“更多”图标，也可以进入项目设置页。

• 03

  切换项目类型 只有该团队的超级管理员及管理员才有权限切换项目类型。 在首页，将鼠标移至项目卡片上，点击右上角出现的“更多”图标，选择【设置】； 进入项目设置页面，可以重新选择项目类型。 Ps：通过画布右上方的“更多”图标，也可以进入项目设置页。

• 04

  添加项目成员 只有该团队的超级管理员及管理员才有权限添加项目成员。 在首页，将鼠标移至项目卡片上，点击右上角出现的“更多”图标，选择【设置】； 进入项目设置页面，点击蓝色“添加成员”图标； 方式一：【邀请小伙伴进入项目】，即添加已经加入团队，却未参与该项目的同事。 直接选择成员名片，点击【邀请】即可。 方式二：【从团队外邀请】，即邀请还未加入团队的新成员。 ①通过链/ 接邀请 设置该成员的（身份）权限； 点击【生成邀请链/ 接】； 复制“邀请链/ 接”分享给你的同事即可。 ②通过邮箱邀请 在【邮箱】栏中输入要邀请同事的邮箱，多个邮箱中间用“逗号”隔开； 设置这些成员的权限； 输入验证码，最后点击【发送邀请】。被邀请成员会收到邀请邮件，只需点击邮件中的邀请链接即可。 Ps：通过画布右上方的“更多”图标，也可以进入项目设置页。

• 05

  移除项目成员 只有该团队的超级管理员及管理员才有权限移除项目成员。 在首页，将鼠标移至项目卡片上，点击右上角出现的“更多”图标，选择【设置】； 进入项目设置页面，点击项目成员身份（权限），选择【移除项目】即可。 ★注：移除项目成员，该成员只是不能参与此项目，他仍留在团队中。如需从团队中删除成员，请参看“移除团队成员”。 Ps：通过画布右上方的“更多”图标，也可以进入项目设置页。

• 06

  删除项目 只有该团队的超级管理员及管理员才有权限删除项目。 在首页，将鼠标移至项目卡片上，点击右上角出现的“更多”图标，选择【删除】。

3.画布的使用

• 01

  上传设计图 通过蓝湖 Ps 插件或 Sketch 插件一键上传设计图。（详情请见插件教程）

• 02

  移动设计图 鼠标左键长按设计图不放，可随意移动； 鼠标右键可框选多张设计图，随意拖拽移动。 移动设计图之后，点击画布右下角“撤销”图标，即可撤销操作。

• 03

  框选设计图 01.按住 Shift + 鼠标左键选择多张设计图， 02.鼠标右键拖拽可框选设计图 框选后，可以选左对齐、右对齐、居中对齐等自动对齐选项，排列设计图。

• 04

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

  

• 05

  删除设计图 选中要删除的设计图，右键菜单，或使用快捷键 “delete” 键即可删除该设计图及其所有相关状态页、历史版本、批注等内容。 删除设计图之后，点击画布右下角“撤销”图标，即可撤销操作。

  

• 06

  复制设计图 选中需要复制的设计图/文字卡片，右键菜单； 或使用快捷键“ Ctrl / Cmd + C ”； 即可复制该设计图及其所有相关状态页、历史版本、批注等内容/文字卡片。

  

• 07

  设计图重命名 选中需要重命名的设计图，右键菜单，即可对该设计图进行重新命名。

  

• 08

  设置项目封面 选中需要设置为项目封面的设计图，右键菜单，即可将该设计图设置为项目封面。

  

• 09

  设计图树状连线 鼠标左键分别点击两张设计图，便可在它们中间绘制一条跳转逻辑连线。

• 10

  文字卡片 点击画布上方【＋】图标，选择【文字卡片】，或使用快捷键 “T”，单击画布空白处，即可创建“文字卡片”。 文字卡片大小可根据需求随意调整。

• 11

  搜索设计图 点击画布上方“搜索”图标，输入设计图名称即可。 Ps：设计图搜索功能支持拼音。

  

• 12

  设计图分组 点击画布左侧工具栏【添加分组】，或使用快捷键“G”； 点击选择要添加至分组的设计图，然后【确定】 输入“分组名称”，点击【确定】即可。

• 13

  编辑分组 点击左侧分组列表中，分组名称旁边的“编辑”按钮，进入分组编辑模式； ①分组添加/删减设计图 在画布上，选择放进分组的设计图，即将设计图添加至该分组； 将原来选中的设计图的“√”点掉，即将该设计图移出该分组。 ②修改分组名称 点击左上角分组名称旁边的“编辑”按钮，输入分组新名称即可。 ③修改分组排序 在左侧分组列表中，鼠标左键选中分组名称拖拽到合适位置。 ④删除分组 点击右上角的“删除”按钮即可删除分组。

• 14

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

• 15

  拖拽整块画布 鼠标左键长按画布空白处，可快速拖拽画布； 或长按“空格”键，进入抓手模式，点击画布任意地方都可以拖拽画布。

• 16

  设计图的状态图 我们经常会遇到同一页面、但表现不同情况的设计图 (例如无网络、未登录等状态下)，我们把这些图拖拽合并为状态图，就可以大大地方便团队理解和查看。 ① 添加状态图 把是状态图的设计图拖拽至设计图的上方覆盖，即可生成状态图，设计图右侧标签可切换。 ② 取消状态图 拖拽任意一个子标签出来（非第一个耳朵）即可取消。 ③ 删除状态图 选中右侧标签后，按“delete”即可删除该状态图。

• 17

  分享画布 点击右上角“分享按钮”； ①选择【画布和标注】 分享给团队成员，可查看标注、原型等项目内容； 直接复制链/ 接，分享给团队成员即可。 ②选择【仅画布】 分享给客户等团队外部人员，仅可查看画布内容； 复制链/ 接及密码，分享给客户等外部人员即可，他们无需加入团队，每次通过密码查看。

4.上传设计图 （Sketch 插件）

• 01

  安装自动标注插件 在项目画布左侧工具栏中，可下载蓝湖 Sketch 插件，安装成功后，请重启 Sketch。

  

• 02

  登录 打开 Sketch【Plugins】——【蓝湖】上传设计图； 使用快捷键“cmd + ctrl + E ” 上传全部设计图， “cmd + L ” 上传所选设计图。 输入蓝湖账号、密码登录； 选择设计图对应的团队与项目，点击【确定】 。

  

• 03

  选择当前设计尺寸的倍数 ‘当前设计’选项是切图缩放的基准。 例如： 750 的设计图内有 100x100 px 的切图，此时选 iOS@2x 上传，在蓝湖网页上下载 @2x 的切图得到的结果是 100x100 px； 如果上传时选 iOS@1x 上传，则网页下载 @2x 的切图结果为 200 x 200px。 所以当前设计的选项一定要选择正确，例子里的数值并不是固定值，只是参考，以设计图的设计倍率为准。

  

• 04

  设置切图 方法 ①： 选中图标后，点击右下角【Make Exportable】； 文件夹列表图标上，会出现一个切刀； 至此切图设置完成。 ★注：此方法切图导出后 不包含透明边距。 方法 ②： 选中图标后， 点击右下角【Make Exportable】，然后点击上面的切刀按钮； 此时会在页面上生成一个“切图区域”； 这个切图区域可自定义调整大小，切图区域的大小就是最后导出时图标的大小。 至此切图设置完成。 ★注：这种方法切出的图片会带有背景颜色，如想去除背景颜色，把你的图标和切图绑定成组，然后在右侧工具栏将【Export group contents only】勾上即可。 方法③：（建议使用此方法） 在工具栏内找到“切刀”工具，或使用快捷键“S”，可以在页面内随意创建、拖拽切图范围（同方法二）； 切图设置完成后，无需导出，直接上传设计稿，切图会一并上传，可供团队成员一键下载。

• 05

  设计图上传 打开蓝湖插件，可一键上传当前 page 内全部的 Artboard，也可以上传选中的 Artboard。

5.上传设计图 （Photoshop 插件）

• 01

  安装自动标注插件 在项目画布左侧工具栏中，可下载蓝湖 Ps 插件，安装成功后，请重启 Photoshop 注：蓝湖 Ps 插件仅支持 Photoshop CC2015 及以上版本 。

  

• 02

  登录 打开Ps【窗口】——【扩展功能】——【蓝湖】； 输入蓝湖账号、密码登录； 选择设计图对应的团队与项目，点击【确定】。

  

• 03

  选择当前设计尺寸的倍数 当前设计选项是切图缩放的基准。 例如： 750的设计图内有 100 x 100px 的切图，此时选 iOS@2x 上传，在蓝湖网页上下载 @2x 的切图得到的结果是 100x100px； 如果上传时选 iOS@1x 上传，则网页下载 @2x 的切图结果为 200 x 200px。 所以当前设计的选项一定要选择正确，例子里的数值并不是固定值，只是参考，以设计图的设计倍率为准。

  

• 04

  设置切图 选中切图的图层，或图层组，点击【标为切图】即可； 数值是可选的，如果不填数值，默认使用当前图标内容的大小； 如果大小不是自己想要的，可自定义修改。 PS：不勾选“显示切图区域”即可隐藏切图区域，该切图区域隐藏后，不影响切图的上传。

• 05

  设计图上传 选择要上传的画板，也可选择全部画板（无画板选全部画板），点击【上传】即可。 设置好的切图，会跟随页面一同上传至蓝湖 Web 端，可看标注，并下载切图。 注：蓝湖推荐使用 Ps 画板工具，避免上传的多张设计图成为设计图的历史版本，不便于以后的修改更新。

• 06

  快速上传模式 快速上传模式是 v2.38 版新增的上传模式, 开启后可以更快的上传, 并且支持矢量图层生成 SVG 格式的切图,还能避免切图不对应等意外情况发生 。 01.打开: Photoshop 首选项-增效工具-启用生成器 02.在插件右上角的菜单中勾选"启用快速上传" 03.如果你有上传 SVG 的需求, 可以开启"导出 SVG", 如果不需要, 可以关闭它来提升上传速度.

  

• 07

  生成 SVG 切图生成 SVG 格式需要切图是矢量的图层, 如形状图层和文本图层, 智能对象不能生成 SVG.

6.标注详情页

• 01

  添加设计图版本 需安装蓝湖 Ps 或 Sketch 插件，通过 Ps 或 Sketch 插件上传设计图后，如设计图有修改或更新，再次上传会自动成为最新版本，原设计图自动成为历史版本。（设计图上传请见插件教程。）

• 02

  给设计图添加批注（含@成员） 点击设计图详情页左侧工具栏上“添加批注”图标，或使用快捷键“N”，即可在设计图上打点标记，或框选区域标记，并写下相应批注，同时可 @ 项目成员，被 @ 成员会及时收到通知。

• 03

  修改/删除批注 批注的修改/删除只有此批注创建者可以操作。 点击批注右上角“更多”按钮，点击“编辑”图标可对批注进行修改； 点击“删除”图标，即删除此条批注。

  

• 04

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

  

• 05

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

• 06

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

• 07

  查看设计图标注 单击设计图任意地方，即可打开设计图标注信息面板，查看该设计图任意元素大小、边距、颜色等信息。 单击空白处，可关闭标注面板。 右侧属性区有【跳转页面】和【跳转动画】两种属性，方便查看设计图标注。 PS. 点击右上角【设置】，可选择数值保留小数还是取整显示。

• 08

  查看 Sketch 原型 在Sketch上制作的交互原型上传到蓝湖Web端后，在蓝湖标注页面可以查看跳转逻辑； 按住 Shift 键即会出现【跳转热区】，鼠标左键点击【跳转热区】跳转至链接页面。

• 09

  切换标注单位 点击标注面板右上方三角图标，打开标注单位列表，根据需要选择标注单位即可。 标注单位参看下图，切换标注单位时，列表内着重显示设计图当前上传尺寸。

• 10

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

• 11

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

• 12

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

  

• 13

  下载切图 点击切图图标，即可下载该图标的多倍切图； 点击设计图详情页左侧工具栏中的“下载切图”，可以一键下载本页面所有的切图，可以选择多倍数。 PS. 点击右上角【设置】，可以选择隐藏切图虚线框。

  

7.交互原型

• 01

  制作跳转交互动作 第一步：在设计图上框选出跳转区域，该区域大小方向可调节； 第二步：将跳转区域与跳转页面链接。

• 02

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

• 03

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

• 04

  演示原型 点击原型页左侧的“演示”按钮，即可预览并操作制作好的原型。 也可点击右下方“在手机上预览”，下载蓝湖手机端 App，直接在手机上预览和操作原型。 项目类型会影响演示原型的预览，APP类型的项目预览时会有手机边框； Web类型的项目 设计图会直接平铺展示。

  

• 05

  分享原型 点击原型预览界面左侧的“分享”按钮，直接复制原型链/ 接，发送给同事，同事在电脑端、手机端都可以直接打开预览和操作。

  

• 06

  共享 Sketch 中绘制的原型 在 Sketch49（及以上版本）中做好的交互原型，通过蓝湖插件上传设计图后，该 Sketch 中的原型会直接同步至蓝湖。 上传设计图后，点击画布上方“交互原型”图标，即可查看 Sketch49 做好的交互原型。 可以直接在 PC 端演示原型、分享原型； 也可以通过蓝湖 APP 演示原型、分享原型。