Adobe xd cc设计、原型打包二合一
2018年的IXDC大会上Adobe爸爸发布一款轻量的设计、交互软件Adobe Xd cc,解救了多软件切换设计的复杂流程。
在全链路的设计概念出来以后,设计师们都在积极的补充上下游的知识技能,补充交互的知识,补充前端的知识~
扑进知识的海洋里面无法自拔,学完ps学Sketch,然后再学principle,还有Axure pr等着你。在软件的学习适应中已经疲于奔命,直到2018年的IXDC大会上Adobe爸爸发布一款轻量的设计、交互软件Adobe Xd cc,可以免费获取。(免费链接:https://www.adobe.com/cn/products/xd.html?promoid=D8F91S27&mv=other)最棒的是支持跨平台使用。有mac版本和win版本,还能打开Photoshop 、Sketch编辑 文件,是不是很棒。
现在我们来看一下Xd相对老牌设计软件Sketch做了哪些改进。
1.默认启动界面
在界面层级,Xd采用的上下结构的布局。
Xd采用左右结构布局的原因,全新软件第一次发布,易用性是快速推广的关键因素,新手引导显得尤为重要,大空间留给引导教程板块。
Sketch采用了左右结构的布局。
Sketch将大空间留给了模版文档与新建,基于Sketch的用户较多为老用户,在模版文档与新建板块模版做了按钮切换新建与模版的设计。在新建板块可以直接访问最近文件。


在交互层级,Xd采用的是鼠标悬浮响应设计,反馈更快速友好。Sketch是点击响应设计。
2.操作界面
Xd依旧是延续了Adobe的设计基因,延续了左边工具栏右边属性栏的设计,这样的设计让从ps和ai过来的用户能在操作界面上快速适应。在菜单栏的位置可以切换设计模式和交互模式。更为重要的是取消图层概念,所见即所得的模式更为贴近ai的设计步骤,在界面上更为的轻量。

Sketch在窗口的分布上,采用的是顶部工具栏、左边页面图层栏、右边属性栏的设计。在编组和图层操作上比较像Photoshop的设定。从ps过来的使用者在操作上比较容易理解,在界面布局上需要时间适应。
3.功能
1.组件复用
在设计中组件的复用可以节省很多重复设计的时间,在Sketch中有组件的概念。即把需要复用的图层组件化,再拖放至画板中编辑,同一个组件复制出来的图层组在组件库中修改编辑,画板中的文件组即相同改变。在后期修改上是非常快捷的功能。

Xd在减轻重复劳动的设计上,有做大的改变,即重复网格功能。选定好画板上的内容点击右侧属性栏面板上的重复网格功能拉动手柄便会自动填充网格内容,调整粉色区域可以调节网格间距。

2.图片填充
在设计中,图片素材的应用的是非常频繁的。在Sketch中图片填充有2种途径。
第一种,直接拖放图片到画板,底层蒙版做出想要的形状。

第二种,绘制一个形状然后在属性面板中找到填充选项,单击进入选择图案填充,在这里Sketch提供了4种填充样式(填充、适应、拉伸、平铺),2种填充途径都是单次操作,无法复用,当出现批量条目需要修改头像和图片时,只能一张一张图片进行更换。

在Xd中的图片填充功能显得快捷很多,选中形状直接从电脑本地拖放一张图片到形状上即完成了图片的填充,配合重复网格还可以一次拖放多张图片完成多个填充。也可以手动选择多个形状一次拖放多张图片填充。这样的改进减少了很多需要重复设计的工作,设计效率有明显提高。

4.交互功能
当下的设计,UI和UX是接触很频繁的工作内容,有时部门结构不够完善时UI需要肩负部分的交互工作,UX也需要懂得UI的设计,两者之间的界线在某些条件下是模糊的。在产品的设计过程中,时常需要动态的原型展示。这个需求在Sketch中满足了画板的跳转连接,但是没有动态的效果编辑功能,需要导出文件到principle中编辑交互流程和动态效果。需要同时用到2款软件,在便捷性上体验是不佳的。


在Xd中是原型模式的切换,却换到原型模式之后可以对交互流程进行跳转编辑和动态设置。移动设备可以通过usb和app连接到Xd同步预览体验设计稿。

总的来说,Xd的推出在UI和交互之间搭起了一座轻量便捷的桥梁。







































