神刀安全网

Adobe XD系列教程: 强大的Repeat Grid功能

Adobe XD系列教程: 强大的Repeat Grid功能

Adobe近日推出用户体验(UX)工具Experience Design CC公开预览版早已家喻户晓,该软件整合了Photoshop和Illustrator,可以帮助UX设计者快速设计和建立手机App和网站的原型,包含线框稿、视觉设计、互动设计、原型制作、预览和共享等功能。目前Adobe XD只有MAC版本的,Win版本后续也会更新跟进的~~

同时Adobe XD有线框稿、视觉设计、互动设计、原型制作、预览和共享等功能,在单一产品中提供UX设计者一套基本的工具,来提升设计者的生产力,此外,也整合Photoshop、Illustrator和Sketch,用户可以直接在XD中复制和贴上Photoshop CC和Illustrator CC的文件。

今天我们深入的解析下,XD当中很大的一个创新点”Repeat Gridd-批量处理信息功能“,强大到令人感动~~

我们进行原型设计的过程中,经常遇到批量处理同类信息的情况,那么在XD当中,就针对这一痛点,做了一个比较好的解决方案,比如我们处理下面的一个图形,快速复制几个一样的图形,操作起来就很简单

Adobe XD系列教程: 强大的Repeat Grid功能

第二步:点击右上角的Repeat Grid,得到下面的状态,可以看到原型的四周下面和右边多了个手柄,这个时候就可以拖动他进行复制

Adobe XD系列教程: 强大的Repeat Grid功能

Adobe XD系列教程: 强大的Repeat Grid功能

第四步:拖动手柄,就可以进行快速复制

Adobe XD系列教程: 强大的Repeat Grid功能

Adobe XD系列教程: 强大的Repeat Grid功能

第五步:鼠标移入每个元素中间,拖动鼠标,就可以改变他们的之间的间距

Adobe XD系列教程: 强大的Repeat Grid功能

Adobe XD系列教程: 强大的Repeat Grid功能

第六步:批量更改形状及颜色

Adobe XD系列教程: 强大的Repeat Grid功能

Adobe XD系列教程: 强大的Repeat Grid功能

快速进行批量替换遮罩图片

点击右上角的repeat grid,快速复制多个圆形,然后拖去对应数量的图片,放入任何一个图形

Adobe XD系列教程: 强大的Repeat Grid功能

Adobe XD系列教程: 强大的Repeat Grid功能

Adobe XD系列教程: 强大的Repeat Grid功能

设计实战环节

快速批量复制、修改信息

第一步:点击已经成组的信息块,然后点击右上角Repeat Grid进行纵向复制,如下图所示

Adobe XD系列教程: 强大的Repeat Grid功能

Adobe XD系列教程: 强大的Repeat Grid功能

Adobe XD系列教程: 强大的Repeat Grid功能

第二步:更改信息块之间的间距,如下图所示

Adobe XD系列教程: 强大的Repeat Grid功能

第三步:更改标题颜色,只需要点击其中一个进行更改即可 Adobe XD系列教程: 强大的Repeat Grid功能

第四步:点击菜单栏的Object,改变标题的图层顺序 Adobe XD系列教程: 强大的Repeat Grid功能

Adobe XD系列教程: 强大的Repeat Grid功能

第五步:替换图片,将需要更改的图片拖入其中一个即可替换成功

Adobe XD系列教程: 强大的Repeat Grid功能

Adobe XD系列教程: 强大的Repeat Grid功能

第六步:批量改变图片大小,拖动手柄即可

Adobe XD系列教程: 强大的Repeat Grid功能

对于Adobe XD 高级教程及技巧,设计夹会持续更新,大家可以关注设计夹的公众号: sezign ,每周也会分享给大家滴~~

本教程的视频教程:http://v.youku.com/v_show/id_XMTUxMjE3ODMwOA==.html#paction

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Adobe XD系列教程: 强大的Repeat Grid功能

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮