Adobe XD 基础教程+操作演示

2年前发布

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

写文章的速度跟不上XD更新的速度...本来还想做个基础界面翻译,XD的7月份更新就已经是中文版了。

一、首先介绍一下XD是什么


XD是adobe家的一款可以快速创建UI/UX的应用,用户可以在 Mac 和 Windows 10系统免费安装和使用,现已经支持Ps和Sketch文件的导入。


官方网址https://www.adobe.com/cn/products/xd.html 软件的获取和基础教程都有。不过官方教程都是英文版的,对于英文不好的同学可能不是特别友好。



二、XD的好处


1.文件小 对于PS动辄上百兆的文件,XD是非常轻便了,整套文件几十个画板,最后才几十兆的大小。


2.Mac 和 Windows 10系统兼容。相对于Sketch只能Mac系统使用,XD的使用平台相对更宽放一些,用户使用门槛相对较低。


3.一键裁切图。使用PS进行切图工作一般是安装插件,XD却可一键切出各平台iOS、Android、web所需切图,省时省心。



三、软件界面


1.启动页面

页面上展示了几种画板类型,根据项目类型选择相应的画板,或者自定义画板大小。在XD中是使用一倍图进行设计,由于XD是矢量设计软件,所以导出@2x、@3x也不会模糊不清。使用一倍图设计的另一个好处就是对应开发逻辑分辨率,开发同事可以直接使用,不需要再进行px和pt/dp的单位换算。


了解基础知识(Explore the basics)提供了一个基础教程,可以根据提示来进行操作,熟悉软件,学习基础操作。之前做了一个这部分的翻译和演示,不过目前XD已经是全中文版本,翻译out了演示还可以看看。《Adobe XD入门教程翻译+演示》


用户界面套件(UI Kits)提供了一些系统组件可以下载直接使用,More UI Kits有一些大神的设计源文件可以拿来学习。


2.软件初始界面

选择初始画布类型,点击进入初始界面。下图标示了工具栏和属性栏。


3.基本工具使用

选择工具:选择移动页面元素,快捷键v;双击形状可添加/移动/删除锚点,调整贝塞尔曲线。

矩形工具:创建页面矩形元素,快捷键r;可在属性栏设置大小/旋转/颜色/透明度/圆角/边界/阴影/模糊等属性。

椭圆工具:创建页面圆形元素,快捷键e;属性同上,按住shift 画出正圆;按住shift+alt从中心画正圆(类似ps)。

直线段工具:创建线段元素,快捷键l;最近新增了描边属性和虚线功能。

钢笔工具:快捷键p;类似ps/ai中的钢笔工具,但是功能不如ps/ai完善。


文字工具:快捷键t,直接点击输入为点文本,滑动区域框输入为区域文本;可互相转换。最近新增的段落间距功能觉得很实用。


画板工具:快捷键a,有各种设备的预设画板,可以在画板属性设置栅格系统和网格系统,进行辅助设计。


4.资源面板使用 (快捷键cmd+shift+y)

在资源面板中可以集中管理模型资源和符号。通过“资源”面板重复使用和编辑资源。创建符号,这样对一个实例做出的编辑便会反映到整个项目中。在8月份更新中“资源”面板可以整理颜色、字符样式和符号。只需进行拖动,即可在列表视图中重新排列其顺序。


最后Thanks!!!

有时间会再做一下交互部分的演示~

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

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

    文章信息

    • 文章标签

    没有新消息