XD 学习笔记

本贴最后更新于 1566 天前,其中的信息可能已经时移世异

XD 学习笔记

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

目前 APP 信息架构

拥有.png

参考案例

一款天气应用 APP

XD 学习

主要功能及区域介绍
SharedScreenshot.jpg
SharedScreenshot1.jpg

  • 新建画板
    3.jpg

  • 圆角设置

  • 宽高及填色
    渐变色(类似 ps 和 ai 的渐变条)

  • 投影

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

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

    4.jpg

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

  • 多图片
    重复网格 + 导入

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

  • 重复网格
    调整间距等

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

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

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

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

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

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

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

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

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

  • 交互动效

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

  • 导出

  • 制作 GIF 演示动画

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

简单总结

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

成果——初版

SharedScreenshot.jpg

  • 设计
    111 引用 • 796 回帖 • 1 关注
  • XD
    1 引用 • 2 回帖
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    90 引用 • 383 回帖

相关帖子

2 回帖

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • someone
    作者

    哈哈哈,没办法,好记性不如烂笔头

  • 其他回帖
  • Lee981265

    我想起了我刚开始学 ps 的时候 😄