XD 学习笔记

XD 学习笔记

简单说，因需求而需要学习了使用 XD 设计 UI。我需要设计一个一个工具型的 APP，基础第一版包含天气和一句话日记的功能。那么就不废话了，开始学习设计。

目前 APP 信息架构

参考案例

一款天气应用 APP

XD 学习

主要功能及区域介绍

• 新建画板
  

• 圆角设置

• 宽高及填色
  渐变色（类似 ps 和 ai 的渐变条）

• 投影

• 钢笔工具
  alt 调整一端锚点，双击调整任意锚点

• 符号（包含颜色、字符样式、组件）
  特点：
  制作一个设计好的元素，将其加入到组件中可以方便下次复用
  改变某一个元素，其他复用的也会随之改变

  

• 蒙版
  例子：制作头像
  更方便的制作头像：先做好几何图案，然后打开文件把头像拖入即刻

• 多图片
  重复网格 ＋ 导入

• ps、ai 导入
  使用导入功能或者在 ps、ai 中做好复制粘贴到 XD

• 重复网格
  调整间距等

• 间距测量
  按住 alt 键显示该元素（可以不只一个元素）距上下左右的距离

• 复制整个画板
  等距离粘贴且其上的元素位置不变

• 预览视图
  ctrl1 放大一百倍
  ctrl2 放大二百倍

• 文本
  文字设置
  文本框的使用

• 布尔运算
  简单使用
  查找并修改：针对某一个对象或者是整个群体

• 对齐
  多个元素间左右对齐、间距间平均对齐、横纵向内容间距的平均对齐

• 栅格系统
  在画板页面
  格数选择、侧边调整、单独调节上下左右

• 网格系统
  在画板页面
  确定所需大小

• 标记输出、锁定、隐藏
  在图层页面、旁边三个选择
  标记输出：此元素被单独切下输出
  
  

• 交互动效

• 录制视频存成动图
  win 平台：window+G

• 导出

• 制作 GIF 演示动画

参考：Adobe XD 25 步从零到动效输出

简单总结

XD 还是挺好学的，现在基础软件会操作了，那就可以开始愉快的设计了

成果——初版