蓝湖Axure是一款非常强大专业的产品设计图分享软件,该软件支持在线文档协同办公、支持文档自动分享、在线展示编辑文档、支持文档导入导出、编辑文档压缩、邮件发送等多种功能,可以帮助用户进行产品设计编辑,可以一键分享办公文档、设计图等操作;使用蓝湖Axure这款高效的产品设计协作软件,用户可以随时随地更新文档信息、查看历史版本、收集反馈信息,支持产品资料文件快速上传共享,可提高企业产品协作设计效率,降低团队协作成本,可以说是一款功能丰富且非常专业的多功能产品设计协作软件。
产品经理轻松表达需求
在线展示文档,团队查看更方便
支持在线评审,更新通知,自动备份
一个地方展现所有资源
汇总文档和设计,理解更轻松
按页面逻辑连线,展现逻辑更清晰
快速生成交互原型
强调产品交互的说明和备注
产品经理可以基于设计图发表意见
设计师更快交付设计图
自动标注设计图,从此不再低效手工
一键生成标注和切图,自动共享给同事
设计图管理
清晰展现设计图不同状态
设计图批注
打点标记进行评论, @相关成员可实时通知
自动保存历史版本
随时查看历史版本,支持自动备份源文件
工程师快速省心开发
查看标注
点击任意元素,即可查看标注信息
切图下载
一键下载,支持 JPG、PNG、SVG、WebP
自动生成代码
自动生成 CSS、iOS 和 Android 代码
小程序组件
可自动生成小程序代码
蓝湖设计规范云
同步设计规范,保持设计一致性,提高设计效率
无需导出 Axure HTML ,一键分享给同事,轻松在线查看
软件特色一键分享,无需发送
自动共享文档,在线展示 Axure 、Word,无需手动导出、压缩文档、发送附件
一个链接,无需更新
团队同事无需查收邮件、下载、解压,每次打开都是最新版本
历史改动,一目了然
保留所有历史版本,便于信息沉淀和查找,自动生成更新记录,改动一目了然
文档在线预览
一个地方汇总所有文档,支持 Confluence 等外部文档链接,支持绑定设计图,让文档和设计在一起
官方教程1. 产品文档共享
单击项目封面,即可进入蓝湖的项目页面,选择【产品】,进入 “产品文档共享页” 。
1.1 安装登录【蓝湖 Axure 客户端】
➡️(蓝湖【Axure 客户端】下载地址)
下载、安装好蓝湖【Axure 客户端】之后,登录你的蓝湖帐号和密码,将 Axure 文档共享至蓝湖,一步到位,从此告别重复打包文档、反复确认同事是否收到等繁琐环节。
✨P.S.
1.蓝湖【Axure 客户端】支持 Mac 和 Windows 系统。
2.如果你之前未使用过蓝湖,在蓝湖官网注册好帐号后,再登录【蓝湖 Axure 客户端】。
1.2【蓝湖 Axure 客户端】管理
- 切换/选择团队
登录你的蓝湖帐号,点击【蓝湖 Axure 客户端】左上角的团队名称,即可切换/选择团队。
- 切换/选择项目
点击项目列表旁的下拉图标,选择对应的项目名称,即可切换/选择项目。
在项目较多的情况下,可以点击项目列表左侧的 “搜索” 图标,输入项目名称,快速搜索项目。
点击项目列表右侧的 “+” ,输入项目名称,选择项目类型,即可在当前文件夹路径内新建项目。
-切换/退出项目
如果你需要切换/退出当前帐号,点击【蓝湖 Axure 客户端】右上角的 “设置” 图标,选择 “退出登录” 即可。
1.3上传 Axure 文档
在 Axure 内打开需要上传的文档,点击 Axure 右上角的 “预览”;然后打开【蓝湖 Axure 客户端】。
✨P.S.
如果【蓝湖 Axure 客户端】被最小化,在 Mac 顶部状态栏或 Windows 底部托盘即可找到打开。
如果 Axure 内同时打开了多个 Axure 文档,需要在客户端单选需要上传的文件。
如果该文档没有上传过,且对应的项目中未通过【蓝湖 Axure 客户端】上传过 Axure 文档,在【文档】处输入文件名称后,点击上传,即可将该 Axure 上传到蓝湖 Web 端。
如果该文档没有上传过,项目中有其他已经上传过的 Axure 文档,可以在【文档】处输入名称,上传一个新的文档;或也可让该文档对项目中其他文档进行版本迭代,从【文档】的下拉菜单中选择 “文档名称” ,再点击【上传】即可。
如果该文件上传过,当文档有修改/更新时,【蓝湖 Axure 客户端】会为你自动识别文档名称,点击上传,即可在蓝湖查看最新版本的文档,新版本文档即可对原版本进行覆盖,原版本自动成为历史版本。
✨P.S.
如果在 Axure 上有对元素进行的说明,上传到蓝湖之后,在进行过说明的元素右上角有一个蓝色图标,点击后,即可查看针对这个元素的页面说明。
1.4 Axure 绑定设计图分组
Axure 文档绑定设计图分组之后,点击该文档页面,即可跳转到其对应的设计图分组,无缝连接 Axure 文档和设计图。
上传的 Axure 文档页面名称与设计图分组名称一致时,即可自动绑定;绑定成功后,在蓝湖的 Axure 文件列表上,该页面名称旁将显示【跳转到设计图】图标,点击该图标,即可跳转到绑定的设计图分组。
✨P.S.
如果设计图分组名称修改后,文件列表页对应的 Axure 文档页面名称后,未出现【跳转到设计图】图标,点击文档列表右下角的【刷新】图标即可。
1.5 上传 Word / PDF / Excel / PPT / 外部文档链接格式文档
如果你是首次添加 Word、PDF、Excel、PPT、链接格式的文档到蓝湖,在蓝湖画布页左上角的导航栏中选择【产品】,进入产品文档添加页,即可添加相关文档。
此后,在产品文档展示页,在左侧的文档列表中选择 “新增文件” ,即可进入产品文档添加页。
- Word / PDF / Excel / PPT 格式文档
上传:
进入产品文档添加页后,点击 “上传” ,选择需要上传的 Word / PDF / Excel / PPT 文档,即可将该文档上传至蓝湖 Web 端。
更新:
点击文档切换列表该文档名称右侧的 “更多” 图标,选择 “上传新版” ,选择你需要更新的文件,即可上传最新版本的 Word / PDF 文件。
原版本自动成为历史版本。
- 外部文档链接
进入产品文档添加页后,点击 “上传” ,粘贴链接地址,然后点击产品文档添加页最下端的 “确定” ,即可将该链接保存至蓝湖 Web 端。
1.6 打点评论
文档打点评论功能当前支持以下格式文档: Axure / Word / PDF 。
- 添加评论
在产品文档页面,点击上方的 “评论” 图标,或者使用快捷键 “N” ,即可在文档上@相关成员进行打点评论,被@成员还会及时收到通知。
- 查看评论
点击页面左上角的【评论与说明】图标,即可查看该 Axure 文档每一个版本当前页面上所有的评论信息。
在打开的评论列表中,勾选【仅看当前版本】,只展示该 Axure 文档当前版本的所有评论信息,否则评论列表将展示针对该页面所有版本进行的打点评论。
如果在该文档页面有 “评论批注” ,在页面左侧的 “文档目录” 的当前页面右侧会显示【当前页面有批注】图标。
- 移动评论点位置
左键按住评论圆点拖拽到对应位置后,松开鼠标即可完成评论位置移动。只有此评论的创建者才能移动评论位置。
- 修改/删除评论
点击评论右上角 “更多” 按钮,点击 “编辑” 图标,即可对评论进行修改;点击 “删除” 图标,点击 “确定” ,即删除此条评论。
✨P.S. 只有此评论的创建者才能修改/删除.
1.7 历史版本管理
“文档历史版本管理” 功能支持以下格式:Axure / Word / PDF / Excel / PPT。
- Axure 文档
当文档有修改/更新时,在【蓝湖 Axure 客户端】,选择对应文档名称,点击上传,即可在蓝湖查看最新版本的文档,原版本自动成为历史版本。
点击 Axure 文档页面上方的 “历史版本” 按钮,即可查看相关的历史版本,选择 “切换到此版本” 可以进行切换。
如果需要删除已上传的 Axure 文档,点击上方的【历史版本】,进入历史版本管理页之后,在左侧的文档版本列表中选择需要删除的版本,进入该版本后,点击右下角的 【删除版本】,即可删除当前版本的 Axure 文档。
- Axure 文档版本对比
将 Axure 文档上传到蓝湖之后,如果文档有修改更新,在该页面名称旁鼠标悬浮时会显示 “版本对比” 按钮;
开启后,该页面新版本和旧版本有更新出将会用蓝色虚线框出,方便查看,避免文档变化细节的漏看。
- Word / PDF / Excel / PPT 格式文档
当 Word / PDF / Excel / PPT 格式产品文档有修改更新,点击该左侧的文档名称旁的 “更多” 图标,在打开的列表中,选择 “上传新版” ,即可该文档最新的版本上传到蓝湖,原版本自动成为历史版本。
1.8 分享链接
通过【蓝湖 Axure 客户端】将文档成功上传至蓝湖后,在该页面可以点击复制 “分享链接” ,发送给团队的其他成员进行查看。
✨P.S.
如果该同事未加入该项目,此链接同时包含邀请,邀请其进入该项目,方便他自助查看项目内的相关文档和设计图信息。
1.9 产品文档管理
- 重命名
如果你需要修改已上传文档的名称,点击文档名称旁的 “更多” 图标,选择【重命名】,即可对文档进行重命名。
- 删除
如果你需要删除已上传的文档,点击文档名称旁的 “更多” 图标,选择【删除】,即可删除该文档。
- 下载
如果你需要下载已上传的文档,点击文档名称旁的 “更多” 图标,选择【下载】,即可下载该文档。
蓝湖支持 Word / PDF / Excel / PPT 格式的文档下载。
- 文档覆盖规则
Axure 文档覆盖规则:
Axure 文档是根据客户端上传时选择的 Axure 文档名称来进行覆盖的。
Word / PDF 格式文档覆盖规则。
Word / PDF 格式文档根据文件名称和在对应文档右侧的 “更多” 图标,选择 “上传新版” 上传覆盖。
1.10 视频教程
2. 交互原型
在【设计】页,点击最上面的【交互原型】图标,即可进入【交互原型】页面。
2.1 在蓝湖上制作跳转交互
第一步:在设计图上拖拽绘制出跳转区域,该区域大小方向可调节。
第二步:将跳转区域与目的页面连接。
2.2 设置首页
点击左上方【设为起始页】图标,即将本页面的设计图设置为原型起始页。
在原型设置页面,固定设计图的顶部底部之后,在演示原型时,固定的顶部底部,都会显示在演示界面的上下两端。
在设计图的左侧的顶部/底部,皆有一个可以上下拉动的滑块,将滑块移动到某一位置,即可固定设计图的顶部/底部。
演示时,滑块移动到的位置,即可固定在演示设备的顶/底部。
点击原型页左侧的 “演示” 按钮,即可预览并操作制作好的原型。
还可以选择设备类型进行预览、操作,蓝湖现在支持以下四种设备类型。
也可点击右下方 “在手机上预览” ,下载蓝湖手机端 App,直接在手机上预览和操作原型。
项目类型会影响演示原型的预览,App 类型的项目预览时会有手机边框;Web 类型的项目,设计图会直接平铺展示。
5 秒后会自动隐藏左侧菜单,点击无跳转的区域后,菜单再次显示。
2.5 返回上一页
若页面 a、页面 b、页面 c、等多个页面都可以跳转至同一个页面 e,则页面 e 的返回键可直接链接到右侧设计图列表中的 “返回” ,即从哪个页面进入,便返回至哪个页面。
2.6 分享原型
点击原型预览界面左侧的 “分享” 按钮,直接复制原型链接。
发送给同事,同事在电脑端、手机端都可以直接打开预览和操作。
2.7 共享 Sketch 中绘制的原型
在 Sketch 60 及以上版本中做好的交互原型,通过蓝湖插件上传设计图后,该 Sketch 中的原型会直接同步至蓝湖。
Sketch 插件的版本需要更新至最新的版本。
Sketch 插件下载地址:https://lanhuapp.com/mac
上传设计图后,点击画布上方【交互原型】图标,即可查看 Sketch 做好的交互原型。
2.8 视频教程
设计师
1.上传设计图
通过蓝湖 Sketch 插件、 Photoshop 插件或者 Adobe XD 插件一键上传设计图。
1.1 Sketch 插件
1.1.1 安装插件
点击首页右上角的【下载】图标,打开后,即可下载蓝湖 Sketch 插件,安装成功后,请重启 Sketch。
➡️(下载蓝湖 Sketch 插件地址)
✨P.S.
由于 Sketch 未开发 Windows 版本,Windows 系统的同学暂时无法使用 Sketch。
1.1.2 登录
打开 Sketch【插件】→【蓝湖】上传设计图。
输入你的蓝湖账号、密码,登录蓝湖,选择设计图对应的团队和项目。
1.1.3 选择 “当前设计”
插件内 “当前设计” 是指当前设计图的大小,根据设计图大小选择对应倍数。
确定当前设计基于的设备是 iOS、 Android 还是 Web,再确定现在的设计图是基于几倍设计的,最后选择和设计图匹配的设备和倍数。
◆ 分类:
“iPhone、iPad、Apple Watch 这三种设备的界面设计” 属于—— 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 倍。
1.1.4 设置切图
通过蓝湖 Sketch 插件标记需要生成的切图,上传设计图后,在设计图详情页,工程师就可以一键下载多倍数切图文件。
建议使用【B.切片类型切图】方式进行切图,案例如下:
选中需要标记为切图的图标,点击 Sketch 右下角的 【Make Exportable】,然后再点击 Sketch 右下角的【切刀】图标,即可标记切图。
或者使用快捷键【S】,鼠标会显示成切刀工具,此时鼠标右键需要标记为切图的图标,即可标记切图。
2️⃣ 自定义切图尺寸
当设计图上的切图尺寸不合适的时候,可以自定义切图尺寸。 选中需要自定义尺寸的图标,在右上角的图标尺寸栏中,输入合适的尺寸,然后再将该图标的切图图层跟原始图层合并成一个分组,即可成功自定义切图。
✨P.S.
如果你标记的切图有背景图层,而此时你需要切图是透明背景,此时选中 Slice 层后,再在右侧菜单中勾选【Export group contents only】这个选项,即可得到是透明背景的切图。
1.1.5 上传设计图
方法一:
打开蓝湖插件,Sketch【插件】→【蓝湖】上传设计图,可一键上传当前 page 内全部的 Artboard,也可以上传选中的 Artboard。
方法二:
快捷键:
【Command + Ctrl +L 】上传当前 page 内全部画板;【Command + L 】上传所选画板。
上传完成后,可以通知指定的项目成员,被通知成员会及时收到邮箱的提醒,若绑定了微信,也会收到微信的提醒。
✨P.S.
设计图内切图较多会影响上传速度,请耐心等待,或取消不必要的切图,再次上传。
1.1.6 生成 SVG
插件右下角 “切图导出 SVG” ,勾选后上传的切图会自动生成 SVG 格式。
✨P.S.
1.需要被切图层是矢量的图层, 如形状图层和文本图层,图片图层不会输出 SVG 格式。
2.个别情况下有描边的矢量图标会导致导出错误,请把描边转为路径,后上传。
3.如果不需要使用 SVG 资源的时候,建议关闭 SVG 导出。
1.1.7 视频教程
1.2 Photoshop 插件
1.2.1 安装插件
点击首页右上角的【下载】图标,打开后,即可下载蓝湖 Photoshop 插件;安装成功后,请重启 Photoshop。
✨P.S. 蓝湖 PS 插件仅支持 Photoshop CC 2017 及以上版本。
➡️(下载蓝湖 Photoshop 插件地址)