蓝湖使用教程

“蓝湖”产物设计协作平台，实现了一张画板展示页面跳转逻辑、设计图汗青版本办理、打点评论、主动标注、建造高保真交互原型、团队共享网盘等功能。

东西/原料

蓝湖
Ps
Sketch

1.团队办理

点窜团队名称
只有该团队的超等办理员才有权限点窜团队名称。在首页左侧功能栏中选择【办理团队】；
进入团队办理页面，点击右上角【设置】，选择【更改团队名称】，或直接点击最上方“团队名称”，即可点窜该团队名称。
建立新团队
在首页左侧功能栏中选择【切换/建立团队】；
打开后，选择【建立团队】；
填写“团队名称”，点击【建立】即可建立一个新的团队。
多团队间切换
在首页左侧功能栏中选择【切换/建立团队】；
打开后，选择需要切换的团队名称即可。
退出团队
在首页左侧功能栏中选择【办理团队】；
进入团队办理页面，点击右上角【设置】，选择【退出团队】即可退出该团队。
★注：超等办理员需将团队移交出去才能退出团队。
移交团队
只有该团队的超等办理员有权限移交团队。在首页左侧功能栏中选择【办理团队】；
进入团队办理页面，点击右上角【设置】，选择【移交团队】；
在当作员列表中选择团队移交的当作员名称，点击【确定】，即可当作功移交团队。被移交当作员主动当作为超等办理员，原超等办理员主动降级为办理员。
闭幕团队
只有该团队的超等办理员有权限闭幕团队。在首页左侧功能栏中选择【办理团队】；
进入团队办理页面，点击右上角【设置】，选择【闭幕团队】；
输入你的“登录暗码”，点击【确定】即可。
★注：闭幕团队后，该团队的所有内容将被删除，且不成恢复，请稳重操作。
添加团队当作员
只有该团队的超等办理员及办理员有权限添加团队当作员。在首页左侧功能栏中选择【添加当作员】；
体例一：链/ 接邀请设置该当作员的身份（权限）；点击【生当作邀请链/ 接】；复制“邀请链/ 接”分享给你的同事即可。
体例二：邮箱邀请在【邮箱】栏中输入要邀请同事的邮箱；设置这些当作员的权限；最后点击【发送邀请】；被邀请当作员会收到邀请邮件，只需点击邮件中的邀请链/ 接即可。
移除团队当作员
只有该团队的超等办理员及办理员有权限移除团队当作员。在首页左侧功能栏中选择【办理团队】；
进入团队办理页面，找到你要删除的当作员，点击最右边当作员身份，鄙人拉列表中点击【删除当作员】即可。
团队当作员权限申明

2.项目办理

建立项目

点击首页左上方蓝色按钮【建立新项目】；

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

点窜项目名称
只有该团队的超等办理员及办理员才有权限点窜项目名称。在首页，将鼠标移至项目卡片上，点击右上角呈现的“更多”图标，选择【设置】；
进入项目设置页面，点击“名称”后的编纂按钮即可点窜。
Ps：经由过程画布右上方的“更多”图标，也可以进入项目设置页。
切换项目类型
只有该团队的超等办理员及办理员才有权限切换项目类型。在首页，将鼠标移至项目卡片上，点击右上角呈现的“更多”图标，选择【设置】；
进入项目设置页面，可以从头选择项目类型。
Ps：经由过程画布右上方的“更多”图标，也可以进入项目设置页。
添加项目当作员
只有该团队的超等办理员及办理员才有权限添加项目当作员。在首页，将鼠标移至项目卡片上，点击右上角呈现的“更多”图标，选择【设置】；
进入项目设置页面，点击蓝色“添加当作员”图标；
体例一：【邀请小伙伴进入项目】，即添加已经插手团队，却未介入该项目标同事。直接选择当作员手刺，点击【邀请】即可。
体例二：【从团队外邀请】，即邀请还未插手团队的新当作员。 ①经由过程链/ 接邀请设置该当作员的（身份）权限；点击【生当作邀请链/ 接】；复制“邀请链/ 接”分享给你的同事即可。
②经由过程邮箱邀请在【邮箱】栏中输入要邀请同事的邮箱，多个邮箱中心用“逗号”离隔；设置这些当作员的权限；输入验证码，最后点击【发送邀请】。被邀请当作员会收到邀请邮件，只需点击邮件中的邀请链接即可。
Ps：经由过程画布右上方的“更多”图标，也可以进入项目设置页。
移除项目当作员
只有该团队的超等办理员及办理员才有权限移除项目当作员。在首页，将鼠标移至项目卡片上，点击右上角呈现的“更多”图标，选择【设置】；
进入项目设置页面，点击项目当作员身份（权限），选择【移除项目】即可。
★注：移除项目当作员，该当作员只是不克不及介入此项目，他仍留在团队中。如需从团队中删除当作员，请参看“移除团队当作员”。 Ps：经由过程画布右上方的“更多”图标，也可以进入项目设置页。
删除项目
只有该团队的超等办理员及办理员才有权限删除项目。在首页，将鼠标移至项目卡片上，点击右上角呈现的“更多”图标，选择【删除】。

3.画布的利用

上传设计图

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

移动设计图

鼠标左键长按设计图不放，可随意移动；鼠标右键可框选多张设计图，随意拖拽移动。

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

框选设计图

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

下载设计图

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

删除设计图
选中要删除的设计图，右键菜单，或利用快捷键 “delete” 键即可删除该设计图及其所有相关状况页、汗青版本、批注等内容。
删除设计图之后，点击画布右下角“撤销”图标，即可撤销操作。
复制设计图
选中需要复制的设计图/文字卡片，右键菜单；或利用快捷键“ Ctrl / Cmd + C ”；即可复制该设计图及其所有相关状况页、汗青版本、批注等内容/文字卡片。
设计图重定名
选中需要重定名的设计图，右键菜单，即可对该设计图进行从头定名。
设置项目封面
选中需要设置为项目封面的设计图，右键菜单，即可将该设计图设置为项目封面。
设计图树状连线
鼠标左键别离点击两张设计图，便可在它们中心绘制一条跳转逻辑连线。
文字卡片
点击画布上方【＋】图标，选择【文字卡片】，或利用快捷键 “T”，单击画布空白处，即可建立“文字卡片”。文字卡片巨细可按照需求随意调整。
搜刮设计图
点击画布上方“搜刮”图标，输入设计图名称即可。
Ps：设计图搜刮功能撑持拼音。
设计图分组
点击画布左侧东西栏【添加分组】，或利用快捷键“G”；点击选摘要添加至分组的设计图，然后【确定】输入“分组名称”，点击【确定】即可。
编纂分组
点击左侧分组列表中，分组名称旁边的“编纂”按钮，进入分组编纂模式；
①分组添加/删减设计图在画布上，选择放进分组的设计图，即将设计图添加至该分组；将本来选中的设计图的“√”点失落，即将该设计图移出该分组。
②点窜分组名称点击左上角分组名称旁边的“编纂”按钮，输入分组新名称即可。
③点窜分组排序在左侧分组列表中，鼠标左键选平分组名称拖拽到合适位置。
④删除分组点击右上角的“删除”按钮即可删除分组。
设计图全览
利用快捷键“F”，即可全览画布上所有的设计图。
拖拽整块画布
鼠标左键长按画布空白处，可快速拖拽画布；
或长按“空格”键，进入抓手模式，点击画布肆意处所都可以拖拽画布。
设计图的状况图
我们经常会碰到统一页面、但表示分歧环境的设计图 (例如无收集、未登录等状况下)，我们把这些图拖拽归并为状况图，就可以年夜年夜处所便团队理解和查看。
① 添加状况图把是状况图的设计图拖拽至设计图的上方笼盖，即可生当作状况图，设计图右侧标签可切换。
② 打消状况图拖拽肆意一个子标签出来（非第一个耳朵）即可打消。
③ 删除状况图选中右侧标签后，按“delete”即可删除该状况图。
分享画布
点击右上角“分享按钮”；
①选择【画布和标注】分享给团队当作员，可查看标注、原型等项目内容；直接复制链/ 接，分享给团队当作员即可。
②选择【仅画布】分享给客户等团队外部人员，仅可查看画布内容；复制链/ 接及暗码，分享给客户等外部人员即可，他们无需插手团队，每次经由过程暗码查看。

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

安装主动标注插件

在项目画布左侧东西栏中，可下载蓝湖 Sketch 插件，安装当作功后，请重启 Sketch。

登录
打开 Sketch【Plugins】——【蓝湖】上传设计图；利用快捷键“cmd + ctrl + E ” 上传全数设计图， “cmd + L ” 上传所选设计图。
输入蓝湖账号、暗码登录；选择设计图对应的团队与项目，点击【确定】。
选择当前设计尺寸的倍数
‘当前设计’选项是切图缩放的基准。
例如： 750 的设计图内有 100x100 px 的切图，此时选 iOS@2x 上传，在蓝湖网页上下载 @2x 的切图获得的成果是 100x100 px；若是上传时选 iOS@1x 上传，则网页下载 @2x 的切图成果为 200 x 200px。所以当前设计的选项必然要选择准确，例子里的数值并不是固心猿意马值，只是参考，以设计图的设计倍率为准。
设置切图
方式 ①：选中图标后，点击右下角【Make Exportable】；文件夹列表图标上，会呈现一个切刀；至此切图设置完当作。 ★注：此方式切图导出后不包含透明边距。
方式 ②：选中图标后，点击右下角【Make Exportable】，然后点击上面的切刀按钮；此时会在页面上生当作一个“切图区域”；这个切图区域可自界说调整巨细，切图区域的巨细就是最后导出时图标的巨细。至此切图设置完当作。 ★注：这种方式切出的图片会带有布景颜色，如想去除布景颜色，把你的图标和切图绑心猿意马当作组，然后在右侧东西栏将【Export group contents only】勾上即可。
方式③：（建议利用此方式）在东西栏内找到“切刀”东西，或利用快捷键“S”，可以在页面内随意建立、拖拽切图规模（同方式二）；
切图设置完当作后，无需导出，直接上传设计稿，切图会一并上传，可供团队当作员一键下载。
设计图上传
打开蓝湖插件，可一键上传当前 page 内全数的 Artboard，也可以上传选中的 Artboard。

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

安装主动标注插件

在项目画布左侧东西栏中，可下载蓝湖 Ps 插件，安装当作功后，请重启 Photoshop 注：蓝湖 Ps 插件仅撑持 Photoshop CC2015 及以上版本。

登录
打开Ps【窗口】——【扩展功能】——【蓝湖】；
输入蓝湖账号、暗码登录；选择设计图对应的团队与项目，点击【确定】。
选择当前设计尺寸的倍数
当前设计选项是切图缩放的基准。
例如： 750的设计图内有 100 x 100px 的切图，此时选 iOS@2x 上传，在蓝湖网页上下载 @2x 的切图获得的成果是 100x100px；若是上传时选 iOS@1x 上传，则网页下载 @2x 的切图成果为 200 x 200px。所以当前设计的选项必然要选择准确，例子里的数值并不是固心猿意马值，只是参考，以设计图的设计倍率为准。
设置切图
选中切图的图层，或图层组，点击【标为切图】即可；
数值是可选的，若是不填数值，默认利用当前图标内容的巨细；若是巨细不是本身想要的，可自界说点窜。
PS：不勾选“显示切图区域”即可埋没切图区域，该切图区域埋没后，不影响切图的上传。
设计图上传
选摘要上传的画板，也可选择全数画板（无画板选全数画板），点击【上传】即可。
设置好的切图，会跟从页面一同上传至蓝湖 Web 端，可看标注，并下载切图。注：蓝湖保举利用 Ps 画板东西，避免上传的多张设计图当作为设计图的汗青版本，未便于今后的点窜更新。
快速上传模式
快速上传模式是 v2.38 版新增的上传模式, 开启后可以更快的上传, 而且撑持矢量图层生当作 SVG 格局的切图,还能避免切图不合错误应等不测环境发生。
01.打开: Photoshop 首选项-增效东西-启用生当作器
02.在插件右上角的菜单中勾选"启用快速上传"
03.若是你有上传 SVG 的需求, 可以开启"导出 SVG", 若是不需要, 可以封闭它来晋升上传速度.
生当作 SVG
切图生当作 SVG 格局需要切图是矢量的图层, 如外形图层和文本图层, 智能对象不克不及生当作 SVG.

6.标注详情页

添加设计图版本

需安装蓝湖 Ps 或 Sketch 插件，经由过程 Ps 或 Sketch 插件上传设计图后，如设计图有点窜或更新，再次上传会主动当作为最新版本，原设计图主动当作为汗青版本。（设计图上传请见插件教程。）

给设计图添加批注（含@当作员）

点击设计图详情页左侧东西栏上“添加批注”图标，或利用快捷键“N”，即可在设计图上打点标识表记标帜，或框选区域标识表记标帜，并写下响应批注，同时可 @ 项目当作员，被 @ 当作员会实时收到通知。

点窜/删除批注

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

查看批注
点击设计图详情页左侧东西栏上“批注”图标，即可查看该设计图上所有的批注信息。
埋没批注
点击设计图详情页左侧东西栏上“显示/埋没批注”图标，即可选择是否显示设计图上批注信息。
状况图切换
在连线页添加当作状况图，设计图详情页左侧标签可切换。
查看设计图标注
单击设计图肆意处所，即可打开设计图标注信息面板，查看该设计图肆意元素巨细、边距、颜色等信息。单击空白处，可封闭标注面板。
右侧属性区有【跳转页面】和【跳动弹画】两种属性，便利查看设计图标注。
PS. 点击右上角【设置】，可选择数值保留小数仍是取整显示。
查看 Sketch 原型
在Sketch上建造的交互原型上传到蓝湖Web端后，在蓝湖标注页面可以查看跳转逻辑；按住 Shift 键即会呈现【跳转热区】，鼠标左键点击【跳转热区】跳转至链接页面。
切换标注单元
点击标注面板右上方三角图标，打开标注单元列表，按照需要选择标注单元即可。
标注单元参看下图，切换标注单元时，列表内着重显示设计图当前上传尺寸。
复制标注信息
鼠标单击标注数值即可主动复制。
切换颜色模式
可在标注面板上，经由过程点击色块来切换颜色模式：16进制、RGB、RGBA。
分享标注
点击设计图详情页左侧东西栏中的“分/ 享”按钮，复制链/ 接，即可分/ 享给团队同事。
下载切图
点击切图图标，即可下载该图标的多倍切图；
点击设计图详情页左侧东西栏中的“下载切图”，可以一键下载本页面所有的切图，可以选择多倍数。
PS. 点击右上角【设置】，可以选择埋没切图虚线框。

7.交互原型

建造跳转交互动作

第一步：在设计图上框选出跳转区域，该区域巨细偏向可调节；第二步：将跳转区域与跳转页面链接。

首页设置
点击左上方“设为首页”图标，即将本页面的设计图设置为原型肇端页。
返回上一页
若页面 a、页面 b、页面 c、等多个页面都可以跳转至统一个页面 e，则页面 e 的返回键可直接链接到右侧设计图列表中的“返回上一页”，即从哪个页面进入，便返回至哪个页面。
演示原型
点击原型页左侧的“演示”按钮，即可预览并操作建造好的原型。
也可点击右下方“在手机上预览”，下载蓝湖手机端 App，直接在手机上预览和操作原型。
项目类型会影响演示原型的预览，APP类型的项目预览时会有手机边框； Web类型的项目设计图会直接平铺展示。
分享原型
点击原型预览界面左侧的“分享”按钮，直接复制原型链/ 接，发送给同事，同事在电脑端、手机端都可以直接打开预览和操作。
共享 Sketch 中绘制的原型
在 Sketch49（及以上版本）中做好的交互原型，经由过程蓝湖插件上传设计图后，该 Sketch 中的原型会直接同步至蓝湖。上传设计图后，点击画布上方“交互原型”图标，即可查看 Sketch49 做好的交互原型。
可以直接在 PC 端演示原型、分享原型；也可以经由过程蓝湖 APP 演示原型、分享原型。