Adobe XD入门教程翻译+演示

2年前发布

翻译文章 / UI / 教程
是石头吖 翻译,如需商业用途或转载请与是石头吖联系,谢谢配合。

对XD软件explore the basics模块,进行了翻译以及操作演示;后续会持续更新关于XD的基础教程。

就按照XD Tutorial这个文件的步骤来一一演示吧


1.预览当前设计

点击右上角的播放按钮,打开预览窗口。这是可以交互的,你可以点击运行他。


2.创建一个画板

选择左侧面板里的画板工具,在右侧长方形的内部点击,你就可以创建一个画板了!切换到选择工具(左侧面板)拖拽和放置下面的这个蓝色的logo到画板上。双击画板,使用右侧画板中的填充颜色工具,你可以设置背景颜色。


3.选择一个图像文件

从你的电脑上任意选择一张图片拖拽到左侧的这个home面板上的灰色圆上面。图片会被这个圆自动裁切,去自适应图形。


4.扩展博客列表

在Latest Adventures下选择这个已经成组的矩形,点击右侧面板的Repeat Grid工具向下拖拽把手,制作一个列表,通过拖拽两个元件之间的粉色区域调整元件的距离。


多张图片上传小技巧:从电脑上选择多张图片,一起把他们拖拽到Repeat Grid上,表格会自动更新你的所有图像。


5.让他滚动起来


通过点击画板名字"Gear"选择这个画板;在右侧面板中找到“Scrolling”下拉选择“Vertical”垂直;把画板底部中间的圆圈下拉使画板变长,在原型演示的时候就会滚动起来。(这里进行了一个操作前后的演示对比)


6.制作交互原型

点击上面左侧的原型按钮切换到原型制作模式。

选择“Gear”画板底部的蓝色“Next Article”按钮然后拖拽蓝色箭头到“Adventure”画板。

现在将“Adventure”画板的返回箭头链接到“Gear”画板上。


7.分享你的原型以获得反馈

现在可以返回到演示窗口,看看你的工作。

当你完成了你的工作,你可以通过右上角的分享按钮去创建一个可分享的链接。(目前中国区注册的账户无法使用这个功能)

最后依旧是Thanks!!

25
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    文章信息

    • 文章标签

    没有新消息