蓝湖产品设计协作
这就是缘分 
想知道范例图第二个头像咋是我的头像。。。 
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
目录：
一.下载安装蓝湖插件
1.用 Sketch 做的设计图
2.用 Photoshop 做的设计图
二.一键上传设计图
1.用 Sketch 做的设计图
2.用 Photoshop 做的设计图
三.蓝湖“自动标注”
正文：
蓝湖【自动标注】让设计师们告别繁琐的【手动标注】，非常地方便且人性化。
只需要安装蓝湖 插件，将做好的设计图上传之后，就可以完整而清晰地将设计图中每个元素的尺寸、位置、颜色、间距、字号等样式信息自动同步到蓝湖，团队内的工程师等同事可以随时查看、随时评论，如果设计图出现改动和更新，蓝湖也能自动添加新版本。
如果你对蓝湖自动标注的具体操作步骤有疑问，看看这篇文章一定能非常顺手地使用蓝湖做自动标注。
使用蓝湖对设计图进行“自动标注”，只需三步：
一.下载安装蓝湖插件
蓝湖插件同时支持 Windows 和 Mac 操作系统，且支持 Photoshop cc2015 和 Sketch 45 及以上版本。
注册蓝湖账号后，进入首页。
（蓝湖首页）
1.用 Sketch 做的设计图：
在项目画布左侧工具栏中，点击【相关下载】，选择【Sketch 插件】，即可下载蓝湖 Sketch 插件，安装成功后，请重启 Sketch。
（下载蓝湖 sketch 插件地址：https://lanhuapp.com/mac/）
2.用 Photoshop 做的设计图：
在项目画布左侧工具栏中，点击【相关下载】，选择【Photoshop 插件】，即可下载蓝湖 Photoshop 插件，安装成功后，请重启 Photoshop。
（下载蓝湖 Photoshop 插件地址：https://lanhuapp.com/ps）
二.一键上传设计图
1.用 Sketch 做的设计图：
1.登陆
打开 Sketch【Plugins】——【蓝湖】上传设计图；
使用快捷键“cmd + ctrl + E ” 上传全部设计图， 或者“cmd + L ” 上传所选设计图。
输入蓝湖账号、密码登录；选择设计图对应的团队与项目，点击【确定】 。
2.选择当前设计尺寸的倍数
插件内 “当前设计” 是指当前设计图的大小，根据设计图大小选择对应倍数。
确定当前设计基于的设备是 iOS、 安卓 还是 Web, 再确定现在的设计图是基于几倍设计的，最后选择和设计图匹配的设备和倍数。
★ 分类：
iPhone、iPad、iWatch 这三种设备的界面设计 属于—— iOS；
安卓系统的界面设计 属于 —— 安卓；
网页类型的界面设计 属于 —— Web。
★ 例如：
375 x 667，属于 iOS 1x；
750 x 1334，属于iOS 2x；
1920 x 1080，（要区分是手机界面还是网页 ）手机建议选 安卓——-xxhdpi；网页选 Web 1x。
★ Web 类型：
1x,是常用尺寸，大家做的网页一般都是选1x；
2x 是指为特定的屏幕（4k屏）设计的尺寸，通常该尺寸会是正常网页的2倍。
3.上传
打开蓝湖插件，可一键上传当前 page 内全部的 Artboard，也可以上传选中的 Artboard。
2.用 Photoshop 做的设计图：
1.登陆
打开Ps【窗口】——【扩展功能】——【蓝湖】；
输入蓝湖账号、密码登录； 选择设计图对应的团队与项目，点击【确定】。
2.选择当前设计尺寸的倍数
插件内 “当前设计” 是指当前设计图的大小，根据设计图大小选择对应倍数。
确定当前设计基于的设备是 iOS、 安卓 还是 Web, 再确定现在的设计图是基于几倍设计的，最后选择和设计图匹配的设备和倍数。
★ 分类：
iPhone、iPad、iWatch 这三种设备的界面设计 属于—— iOS；
安卓系统的界面设计 属于 —— 安卓；
网页类型的界面设计 属于 —— Web。
★ 例如：
375 x 667，属于 iOS 1x；
750 x 1334，属于iOS 2x；
1920 x 1080，（要区分是手机界面还是网页 ）手机建议选 安卓——-xxhdpi；网页选 Web 1x。
★ Web 类型：
1x,是常用尺寸，大家做的网页一般都是选1x；
2x 是指为特定的屏幕（4k屏）设计的尺寸，通常该尺寸会是正常网页的2倍。
3.上传
选择要上传的画板，也可选择全部画板（无画板选全部画板），点击【上传】即可。
★ 注：蓝湖推荐使用 Ps 画板工具，避免上传的多张设计图成为设计图的历史版本，不便于以后的修改更新。
快速上传模式：
快速上传模式是 v2.38 版新增的上传模式，开启后可以更快的上传，并且支持矢量图层生成 SVG 格式的切图，还能避免切图不对应等意外情况发生 。
开启快速上传模式：
★ 注意：
1.v2.38 之前的版本不能通过插件内自动更新来获得快速上传功能,只能重新安装插件。
2.快速上传模式只能在 Photoshop CC 2017 以上版本使用。
1.打开: Photoshop 首选项-增效工具-启用生成器
2.在插件右上角的菜单中勾选"启用快速上传" 如果你有上传 SVG 的需求, 可以开启"导出 SVG",
3.如果不需要, 可以关闭它来提升上传速度.
三.蓝湖“自动标注”
1.查看标注
设计图上传成功后，登录“蓝湖” Web 端，进入设计图详情页。
单击设计图任意地方，即可打开设计图标注信息面板，查看该设计图任意元素大小、边距、颜色等信息。 单击空白处，可关闭标注面板。
右侧属性区有【跳转页面】和【跳转动画】两种属性，方便查看设计图标注。
★ PS. 点击右上角【设置】，可选择数值保留小数还是取整显示。
2.复制标注信息
鼠标单击标注数值即可自动复制。
3.切换标注单位
点击标注面板右上方三角图标，打开标注单位列表，根据需要选择标注单位即可。
★ 标注单位：
★ PS: 切换标注单位时，列表内着重显示设计图当前上传尺寸。
4.切换颜色模式
可在标注面板上，通过点击色块来切换颜色模式：16进制、RGB、RGBA。
5.分享标注
点击设计图详情页左侧工具栏中的“分享”按钮，复制链接，即可分享给团队同事。
6.设计图切换
在画布页绘制跳转逻辑连线；
在设计图详情页，单击左下角“上一页/下一页”图标，即可按连线顺序快速切换设计图。
7.添加设计图版
每次通过 Ps 或 Sketch 插件上传版设计图，如果该设计图有修改或更新，将自动添加一个最新版本，原设计图变为一个历史版本。
8.状态图切换
在连线页添加成状态图，设计图详情页左侧标签可切换。
当你的同事查看了你的设计图，可以直接在标注页对设计图进行批注，非常方便。
★ 具体操作步骤如下：
1.添加批注
通过标注页左侧“添加批注”按钮，或快捷键 “N”，即可在设计图上打点标记，或拖拽区域标记。批注内容支持 @ 项目内成员用户名，被 @ 的成员会收到邮件或微信通知。
适合 @ 工程师、设计总监、产品总监等设计审核人员，他还可以在微信里直接回复你的批注哦~
记得第一次通知前，请同事在他的此页面绑定一下微信，即可支持在手机上收到 @ 通知，点击通知即可在微信中直接预览设计图和批注内容，随时随地、非常方便！
2.修改/删除批注
批注的修改/删除只有此批注创建者可以操作。
点击批注右上角“更多”按钮，点击“编辑”图标可对批注进行修改； 点击“删除”图标，即删除此条批注。
3.查看批注
点击设计图详情页左侧工具栏上“批注”图标，即可查看该设计图上所有的批注信息。
4.隐藏批注
点击设计图详情页左侧工具栏上“显示/隐藏批注”图标，即可选择是否显示设计图上批注信息。
除了自动标注，蓝湖还有自动切图、快速制作高保真交互原型、同步 Sketch Prototyping 并支持共享、设计图树状连线、设计图在线讨论、设计图历史版本管理、等功能，等你来探索。
全部评论：22条
更多作品
发表评论