官方用户指南:文档教程
其它同类型软件:Sketch、Axure。
一 概念
Adobe XD:一站式 UX/UI(用户体验/用户界面)设计平台。
可以进行移动应用和网页设计与原型制作。高效准确的完成静态编译或者框架图到交互原型的转变。
二 使用前准备
可以下载素材库(用户界面套件),直接打开使用,提高设计效率:可在软件界面点击下载。
UI 设计常用的网站:
- UI 设计工具类网站:
- 统一的图标:http://www.iconfont.cn/ 。补充:图标复制插件(浏览器扩展) Axhub Icons,下载链接
- 配色网站:https://colorhunt.co/
- 推荐配色:https://coolors.co/app/
- 背景生成:https://coolbackgrounds.io/
- 图片库:https://www.pexels.com/
三 使用
- 基本使用:
iOS 设备不同分辨率需要一倍图、二倍图、三倍图来适配,一般用一倍图来制作,用偶数的尺寸。
输入好后点击进入,然后先保存一下。(图中自定义尺寸为国内习惯)
常用快捷键:
放大缩小:按住 ctrl + 鼠标滚轮
框选:按 z + 鼠标选择
全部显示:ctrl + 0
- 实战:制作一个登陆界面。
查看设计规范(颜色、字体等)。
选中内容后,选取颜色,保存使用。
加一个模糊背景。记得左下角调出显示图层面板。将图片拖进去,双击调整大小。右边面板下方设置对象模糊。
修整模糊的边缘:复制一份,矩形框选,设置背景模糊,调节参数。
选中对象,按 alt 查看坐标边距。添加文字图片等。(tips:移动元素时可以将背景模糊和背景图锁定。)如图:
添加手机导航栏,从官方素材库添加。选择需要的在左边设计中复制,粘贴到自己的项目中。
手机导航栏部分,右键选择取消符号分组,将电量数字改为点文本(区域文本不会缩放),然后可以进行缩放。
补充:换背景:先把背景模糊隐藏,然后覆盖图片,再打开。
制作完成,如图:
- 原型:选择 “设计” 左边的 “原型” 来做原型设计。