如何用蓝湖做自动标注 ?

目录:

一.下载安装蓝湖插件

1.用 Sketch 做的设计图

2.用 Photoshop 做的设计图

二.一键上传设计图

1.用 Sketch 做的设计图

2.用 Photoshop 做的设计图

三.蓝湖“自动标注”

正文:

蓝湖【自动标注】让设计师们告别繁琐的【手动标注】,非常地方便且人性化。

只需要安装蓝湖 插件,将做好的设计图上传之后,就可以完整而清晰地将设计图中每个元素的尺寸、位置、颜色、间距、字号等样式信息自动同步到蓝湖,团队内的工程师等同事可以随时查看、随时评论,如果设计图出现改动和更新,蓝湖也能自动添加新版本。

如果你对蓝湖自动标注的具体操作步骤有疑问,看看这篇文章一定能非常顺手地使用蓝湖做自动标注。

使用蓝湖对设计图进行“自动标注”,只需三步:

一.下载安装蓝湖插件

蓝湖插件同时支持 Windows 和 Mac 操作系统,且支持 Photoshop cc2015 和 Sketch 45 及以上版本。

注册蓝湖账号后,进入首页。

(蓝湖首页)


1.用 Sketch 做的设计图:

在项目画布左侧工具栏中,点击【相关下载】,选择【Sketch 插件】,即可下载蓝湖 Sketch 插件,安装成功后,请重启 Sketch。

(下载蓝湖 sketch 插件地址)

2.用 Photoshop 做的设计图:

在项目画布左侧工具栏中,点击【相关下载】,选择【Photoshop 插件】,即可下载蓝湖 Photoshop 插件,安装成功后,请重启 Photoshop。

(下载蓝湖 Photoshop 插件地址)

二.一键上传设计图

1.用 Sketch 做的设计图:

登陆

打开 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 格式的切图,还能避免切图不对应等意外情况发生 。 

开启快速上传模式:

★ 注意:

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

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

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

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

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

三.蓝湖“自动标注”

1.查看标注

设计图上传成功后,登录“蓝湖” Web 端,进入设计图详情页。

单击设计图任意地方,即可打开设计图标注信息面板,查看该设计图任意元素大小、边距、颜色等信息。 单击空白处,可关闭标注面板。 

右侧属性区有【跳转页面】和【跳转动画】两种属性,方便查看设计图标注。 

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

2.复制标注信息

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

3.切换标注单位

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

★ 标注单位:

★ PS: 切换标注单位时,列表内着重显示设计图当前上传尺寸。 

4.切换颜色模式

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

5.分享标注

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

6.设计图切换

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

在设计图详情页,单击左下角“上一页/下一页”图标,即可按连线顺序快速切换设计图。 

7.添加设计图版本

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

8.状态图切换

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

当你的同事查看了你的设计图,可以直接在标注页对设计图进行批注,非常方便。

具体操作步骤如下:

1.添加批注

通过标注页左侧“添加批注”按钮,或快捷键 “N”,即可在设计图上打点标记,或拖拽区域标记。批注内容支持 @ 项目内成员用户名,被 @ 的成员会收到邮件或微信通知。

适合 @ 工程师、设计总监、产品总监等设计审核人员,他还可以在微信里直接回复你的批注哦~

记得第一次通知前,请同事在他的此页面绑定一下微信,即可支持在手机上收到 @ 通知,点击通知即可在微信中直接预览设计图和批注内容,随时随地、非常方便!

2.修改/删除批注

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

点击批注右上角“更多”按钮,点击“编辑”图标可对批注进行修改; 点击“删除”图标,即删除此条批注。 

3.查看批注

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

4.隐藏批注

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

除了自动标注,蓝湖还有自动切图、快速制作高保真交互原型、同步 Sketch Prototyping 并支持共享、设计图树状连线、设计图在线讨论、设计图历史版本管理、等功能,等你来探索。

                                                       蓝湖,互联网团队最完美的工作方式。

                                                              蓝湖地址:LanhuApp.com

                                                         不用下载,注册就可以免费使用啦!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容