一、上传设计稿

目前支持 Sketch 插件上传、Adobe XD 插件上传、Adobe PS 插件上传、Figma 插件上传、Axure 插件、Axure HTML 压缩包上传、本地上传,共七种方式将设计稿上传至 CoDesign,一键即可与项目成员共享设计稿。项目成员可在 CoDesign 在线查看及管理设计稿、获取标注信息、评论设计稿及获取 Sketch 或 Adobe XD 源文件。

· 插件上传

Sketch、Adobe XD、Adobe PS、Figma、Axure 插件安装: 插件下载地址

· 本地上传

. 添加本地设计图

点击画布页上方的「添加」-> 「从本地上传」,选择需要上传的图片,即可将本地设计图上传到 CoDesign。

图

. 拖拽上传图片

将图片拖拽到 CoDesign「设计画布」页,即可将图片上传到 CoDesign。

图

注意:CoDesign 支持上传 PNG、JPG、GIF 格式的本地图片,此上传方式不能自动标注。

· Sketch 源文件上传

不依赖 Sketch 插件可直接在工作台上传 Sketch 源文件,在线解析后的 Sketch 画板会按照内页面关系进行自动编组,如网页端已存在相同画板,该画板会被覆盖。

1)点击顶部工具栏的 Sketch 文件上传,选择需要上传的设计稿源文件。

图

2)设计稿上传成功后,会自动进行在线解析;特殊字体在解析过程中会因缺失字体无法渲染,系统将会使用替代字体完成画板渲染,具体字体信息请以标注信息面板为准。

图

解析完毕后,设计稿就成功上传到 CoDesign 设计稿项目内了。

★目前在线解析 Sketch 文件仍处于 Beta 阶段,如上传文件画板数量过多(50个)以上,或画板尺寸较大(5000x5000)以上,可能会出现文件解析时间较长的情况,请耐心等待。遇到问题可通过 意见反馈 进行反馈

· Axure HTML 压缩包上传

在设计稿分组中,选择并上传 Axure 文件压缩包,其中 Axure 文件的上传方式有两种:

第一种:新建/打开空白分组 -> 选择「本地上传 Axure HTML 演示压缩包」 -> 「上传」。

图

第二种:新建/打开分组 -> 点击左上角的 Axure 图标 -> 点击右侧面板(+)号图标 -> 选择「本地上传 Axure HTML 演示压缩包」进行上传。

图

tips:直接拖拽 Axure 本地文件压缩包至右侧菜单栏,也可完成上传步骤。

· 预览 Axure 文件

上传成功后会有弹窗提示「上传成功」,此时点击右侧菜单文件即可打开新的窗口,预览Axure文件。

图

· 管理 Axure 文件

在 Axure 文件列表中,选中 Axure 文件,出现「┇」后点击,可进行「替换」「重命名」「删除」操作。

图

· 通过设计稿分享链接预览 Axure 文件

1) 分享 Axure 文件:在 Axure 文件绑定的设计稿分组中,点击右上角的「分享」 ->「复制分享链接」,即可将链接分享给团队成员。

图

2) 团队成员预览 Axure 分享文件: 点击设计稿分享链接 -> 右上角「 Axure 文件」图标 -> 打开想预览的「 Axure 文件」即可。

图

二、设计稿的预览与管理

在线管理及预览设计稿,无需打开设计软件,更便捷。

画布视图支持快速浏览设计稿全貌,可添加逻辑连线、文字备注和状态图,清晰展示设计稿页面关系,交互流程。

列表视图支持清晰预览编组下的设计稿页面,对编组下及单设计稿编辑、排序、搜索。

画布视图与列表视图同时支持查看设计稿源文件、支持展示项目成员在分组的更新记录及浏览记录、支持编组操作及设计稿一键分享。

· 画布视图预览与管理

· 设计稿列表预览

画布视图的 hover 列表模式下,支持画板缩略图展示;单击列表中的画板,即可快速定位画板,并将画板缩放至 fit 尺寸。

图

· 快捷键预览设计稿

预览画布视图设计稿时,支持快捷键操作。具体操作可点击左下角的快捷键按钮查看。

图

· 查看历史记录

「历史记录」包含浏览记录和更新记录。浏览记录为浏览过该分组的成员名称及时间,更新记录将展示成员增删/更新画板等操作。

图

· 查看源文件

画布视图/列表视图下,点击右上角内容栏「源文件」,可查看及下载该分组中的源文件。

图

图

图

· 列表视图预览与管理

列表视图可清晰预览编组下设计稿页面,支持对设计稿页面进行编组、排序,搜索。

. 设计稿排序

将画板直接手动拖拽至对应的编组下。

图

. 设计稿重命名

选择需要重命名的单个设计稿,出现「┇」后点击「重命名」 -> 输入名称 ->「确定」。

图

· 查看历史记录

「历史记录」包含浏览记录和更新记录。浏览记录为浏览过该分组的成员名称及时间,更新记录将展示成员增删/更新画板等操作。

图

· 查看源文件

点击右上角内容栏的「源文件」,可查看及下载该分组中的源文件。

图

· 单个设计稿查看与管理

画布/列表视图下预览点击设计稿,即可查看画板详情页;画板详情页支持画板列表和图层列表展示,图层列表可通过图层折叠按钮展开或收起。

图

· 快捷键查看设计稿

在画板详情页中点击上方图标,可按需进入批注/评论/原型/演示等模式。不同模式下的快捷键操作不同,其中,批注模式下的快捷键操作为:

图

评论&原型模式的快捷键操作为:

图

· 查看历史版本

在画板详情页中,点击右上方的「历史版本」,可切换查看该设计稿的所有历史版本,便于检查设计稿修改情况。

图

图

三、切图标注

通过 CoDesign 插件上传的设计稿将自动生成标注信息,无需设计师一个个手动导出切图,开发工程师点击任意元素,可查看标注信息,快捷复制样式代码。

· 查看自动标注

在列表/画布模式下,单击设计稿进入画板详情页,默认进入标注模式。点击右侧折叠按钮,即可展开设计稿标注信息面板。

点击图层列表中的图层,即可查看该图层的元素位置、尺寸、不透明度、颜色、阴影、代码等信息。切换评论/原型/演示模式或点击折叠按钮后,即可关闭标注面板。

图

通过 CoDesign 插件上传的设计稿,还可通过鼠标左键进行图层穿透,或鼠标右键查看图层树的形式,查看不同图层的标注信息。

图

· 标注百分比

利用「标注百分比」进行开发,工程师只需按百分比适配页面,界面就能在不同尺寸的手机、电脑上避免布局紊乱、内容叠加等问题。

单选标注元素,按住 Alt 键,即可查看所选元素所占对应图层的百分比,也能查看占整张设计图所占的百分比。

图

· 切换标注像素

点击标注面板上方的「平台」,可展开设置界面,按需选择平台、单位、自定义倍率、自定义宽度和数字格式。该像素单位是指在设计图尺寸不改变的情况下更换不同的设备显示的设计尺寸。

(注意:若原设计稿宽度为 1000,自定义倍率设置为 2 时,标注面板的宽度为 2000)

图

· 复制标注信息

在标注面板的设置界面完成设置 -> 单击元素 -> 点击标注面板中的「复制代码」即可复制。

图

· 切换颜色模式

可在标注面板上,可通过点击色块或点击颜色的下拉菜单,切换颜色模式:16 进制、RGB、RGBA。

图

· 下载切图

下载单张设计稿的切图时,可进入画板详情页 -> 标注面板中的「页面切图」 -> 全选或勾选切片 -> 选择图片格式&平台 -> 下载。

(注意:JEPG/Webp/SVG格式的切图均可压损画质,PNG格式的切图暂不支持压缩画质)

图

在画布视图中下载多张设计稿的切图时,可在画布中 Shift + 鼠标左键框选/点选画板,或在左侧的画板列表中 Shift+鼠标单击 多选画板 -> 鼠标右键 ->「下载切图」 ->选择图片格式&平台 -> 一键下载所有切图。

图

在列表视图中下载多张设计稿的切图时,可点选画板->右上角的「下载切图」 ->选择图片格式&平台 -> 一键下载所有切图。

图

· 分享切图与标注

CoDesign 支持分享单张设计稿、多张设计稿及整个分组的设计稿。点击右上角的「分享」 -> 开启「允许查看标注、切图」及其他操作 -> 「复制分享链接」 -> 即可直接分享给他人。

(注意:在「允许查看标注、切图」的前提下,对方需登陆 CoDesign 后才可查看切图与标注。)

图

四、分享设计稿

CoDesign 支持分享单张设计稿、多张设计稿及整个分组的设计稿。其中,分享链接可设置按需设置「密码保护」、「允许评论」和「允许查看标注、切图」

(注意:若未开启密码保护,则所有获得链接的用户都可查看设计稿,请注意内容保密性。)

· 分享分组的设计稿

第一种:鼠标移动至分组 -> 点击出现的「┇」 -> 「分享」-> 按需进行分享设置 -> 「复制分享链接」 -> 即可分享给他人。

图

第二种:在画布/列表视图下 -> 点击右上角的「分享」-> 按需进行分享设置 -> 「复制分享链接」 -> 即可分享给他人。

图

· 分享单个/多个设计稿

在画布视图/列表视图/画板详情页下 -> 点选想分享的设计稿 -> 点击右上角的「分享」-> 按需进行分享设置 -> 「复制分享链接」 -> 即可分享给他人。

图

· 设计稿的分享管理

CoDesign 支持设计稿的分享管理,从项目级把控分享风险。详细记录分享人、分享时间以及分享的画板内容,还可关闭/修改分享设置。

在分组的界面中点击右上角的「设置」->「分享管理」->可进行查看/设置/关闭的操作。

(注意:对已分享的设计稿可按需重新设置「密码保护」、「允许评论」和「允许查看标注、切图」。)

图

五、搜索设计稿

CoDesign 支持通过使用搜索功能,快速搜索定位画板、分组及文件夹,帮助你快速找到设计稿。

不管是在分组界面,还是画布/列表视图下,点击右上角的「搜索」-> 输入画板/分组/文件夹的名称,即可找到对应设计稿。

图

六、设计稿评论

在设计稿的详情页中,点击上方的「评论」即可进入「评论模式」,项目成员及「允许评论」的被分享者,即可在设计稿上打点标记,添加撰写评论、修改、删除、回复评论,评论时支持@项目成员;消息中心会提醒相关评论。

图

· 评论列表

评论列表中的评论,将按设计稿的版本及评论时间排序;点击评论,设计稿将同步切换至对应版本,便于检查设计稿修改情况。

图

图

· 评论确认

CoDesign 支持评论确认功能,评论状态分为「已确认」及「未确认」,已确认的评论,按钮将自动置灰,便于区分设计稿反馈,及时对设计稿的反馈进行处理;在评论列表右上角可直接切换查看「全部」、「确认」及「未确认」的设计稿。

图

七、文字备注

在设计稿画布视图中,支持添加文字备注,撰写辅助设计说明、开发注意事项,让协作信息传递更全面。

点击画布上方的「备注」图标 ->单击画布任意位置 ->创建「文字卡片」。

图

画布视图上的文字备注可依据设计稿页面文字备注的逻辑关系、操作流程进行编组。

选择要添加至编组的文字备注 ->右键点击「添加至编组」 ->输入「编组名称」 ->点击「确定」即可。

图

八、状态图

设计稿页面可能有多种状态,或有相关逻辑/流程关系,需要聚合查看或管理。而 CoDesign 满足设计稿状态图的创建、查看、管理(调整顺序、删除、解散),便于团队成员查看理解。

· 创建状态图

第一种:在画布视图中,选中画板 ->单击将画板拖拽移至另一画板上方 ->松开鼠标即可创建状态图;

图

第二种:shift + 鼠标单击 点选或框选画板后 ->右键选择「合并为状态图」的形式创建;

图

第三种:在画布视图左侧的画板列表中,shift + 鼠标单击 点选或框选画板后 ->鼠标右键出现菜单栏 ->选择「合并为状态图」。

图

· 查看状态图

状态图的标签为画板名称,点击画板左侧标签或点击设计稿列表中的画板,即可切换视图;选中标签后拖拽还可调整设计稿状态图中的画板顺序。

图

· 管理状态图

若需调整状态图的画板,可单击选择画板后鼠标右键,在菜单中选择「脱离状态图」,即可将选中的画板脱离状态图;

图

图

点击状态图后右键,在菜单中选择「解散状态图」,即可解散状态图。

图

九、逻辑连线

添加逻辑连线,可以更清晰准确地交代页面关系、交互流程,同时支持在连线上添加文字,逻辑描述更准确。

点击画布页上方的「连线」图标 ->鼠标左键点击设计稿 ->任意选择四个点 ->点击连接的另一张设计稿。便可在它们中间绘制一条跳转连线,该连线可一对多展示设计稿关系。

图

十、制作交互原型

上传到 CoDesign 的设计稿可创建交互原型,在设计稿上任意拖拽创建热区,该热区大小方向可调节,自由选择跳转的目的页面,且可选点击触发或鼠标悬停触发两种跳转方式。

· 制作原型

进入画板详情页后,点击上方的「原型」  ->在设计稿上双击或拖拽创建交互热区  ->点击左侧画板列表中的目标画板或在右侧的「跳转目标页面」中选择画板  ->选择「单击触发」或「鼠标悬停触发」的触发方式即可。

图

创建成功后,在热区中,Shift +鼠标单击,即可跳转至目标画板。可按需开启「设为演示首页」开关。

图

· 原型演示

点击画板详情页上方的「演示」按钮,即可预览并操作制作好的原型。演示设备默认为桌面设备,点击左侧的演示设备可切换「演示设备类型」、「 显示方向」和「适配方式」。

图

点击左侧的「分享」按钮,按需开启密码保护,通过此方式分享的设计稿,被分享者仅可查看设计稿和体验交互原型。

图

通过左侧的操作栏,还可对演示原型进行更多操作。

图

十一、文件夹管理

CoDesign 共有五个层级分类结构:团队、项目、文件夹、分组和编组,各自对应不同的使用场景。作为参考,您可以使用文件夹来区分大的迭代版本,便于项目内的分类管理。

图

· 新建文件夹

设计稿模块下,点击「新建」 ->新建文件夹 ->输入「文件夹名称」 ->点击「确认」即可。

图

· 分组加入文件夹

将设计稿分组直接拖拽到文件夹,或选择设计稿分组 ->出现「┇」后点击「移动到」 -> 选择文件夹->「移动」,即可完成文件夹分类管理。

图

· 解散文件夹

点击文件夹 ->出现「┇」后点击「解散」 -> 文件夹内所有分组将会被移出。

图

· 删除文件夹

点击文件夹 ->出现「┇」后点击「删除」 -> 勾选「文件夹内所有分组、设计稿、源文件及历史版本将永久删除」 及「该文件夹下所有分享、关联关系将永久失效」 ->「删除」。

图

十二、编组操作

编组是分组功能的分支,支持多个层级,能更系统、清晰地管理海量设计图。 目前设计稿由插件上传到编组功能仍在优化中,可在上传文件后,在 CoDesign web 端内进行编组管理。

· 画布视图

· 新建编组

通过插件上传设计稿后,进入分组后切换至「画布视图」,框选或「Shift+鼠标左键」点选设计稿-> 鼠标右键 ->「添加至编组」 ->「新建编组」 ->输入编组名称 ->「确定」。

图

· 画板移动到编组

画布视图下,鼠标框选或「Shift+鼠标左键」点选设计稿-> 鼠标右键 ->「添加至编组」 ->选择编组即可移动到对应编组。

图

· 列表视图

· 新建编组

通过插件上传设计稿后,进入分组后切换至「列表视图」,点击画板左侧 ->出现编组的分割线 ->输入编组名称 -> 「Esc」确认操作 ->分割线后的画板都会移动至创建的新编组中。

图

· 移动至编组

列表视图下,勾选画板 ->点击右上角的「移动到编组」 ->在下拉菜单中选择对应的编组 ->即可移动到编组。

图

或是单击单个画板 ->拖拽至对应编组的分割线内 ->即可移动到编组。

图

· 插件端

在 PS 插件、 Figma 插件、Sketch 插件、XD 插件中上传设计稿时,直接创建或者选择对应的编组选项上传。

图

十三、源文件管理

通过本地上传的设计稿,需要手动上传源文件;通过 Sketch、Adobe XD 上传的设计稿所有版本的源文件都会自动备份,在列表/画布视图的右上角内容栏点击「源文件」,可查看及下载该设计稿内源文件。

图

咨询反馈