UI——day19.Axure和 Adobe XD介绍

  1. Axure基础

    一.Axure是什么?

    AXURE RP是一个专业的快速原型图设计工具。

    二.原型图目的是什么?

    1. 为了沟通最初的产品设想
    2. 原型图展示的是功能内容及粗线条的布局,而不是视觉设计

    三.不同的人用来做什么?(人物设定)

    1. 产品经理、交互设计师︰原型图一般是产品经理、交互设计师来绘制

    2. U设计师:需要具备快速准确阅读原型图的能力

    3. 开发人员:了解用户如何与产品进行交互

      e.g:

      UI——day19.Axure和 Adobe XD介绍_第1张图片

    四.界面

    ①菜单栏

    ②工具栏重要功能:

    1. 选择模式
    2. 连接模式
    3. 预览和发布

    ③页面导航

    ④元件库

    1. 库添加:https://www.axureshop.com/ 选择Axure元件库

    ⑥母版管理

    1. 跟PPT母版一个概念

    ⑦页面/元件属性

    ⑧动态面板

  2. Axure交互动画

    —、原型图的两种展示形式

    1. 低保真原型图―设计师开发人员
    2. 高保真原型图—甲方

    二、四种交互效果

    1. 页面左右滑动
    2. 弹窗
    3. 轮播图
    4. 链接

    三.Axure交互用例

    重点右侧:

    UI——day19.Axure和 Adobe XD介绍_第2张图片

  3. XD基础

    软件下载:装过PS的朋友都知道Adobe cloud active里面可以免费下载

    一.Adobe XD CC是什么?

    Adobe Experience Design cc是基于矢量用于WEB、移动应用设计原型的用户体验设计的工具。集线框图,视觉设计,交互设计,原型制作,预览和共享轻松切换于一体的一个强大的工具。它跨平台支持 Win10macOS

    二.Adobe XD CC的优势在哪里?

    Adobe XD的对手主要是Skech和Axure,它们都是付费软件,而Adobe XD免费,且有超越趋势。

    XD CC可以与Adobe Photoshoplllustrator等无缝协作,并且可以支持导入Sketch源文件,从而快速开发出产品原型。

    三.界面介绍

    1. 导航栏

      设计模式

      原型模式

      缩放

      播放和分享

      UI——day19.Axure和 Adobe XD介绍_第3张图片

    2. 工具栏

    3. 检查器

      对齐工具
      重复网格和布尔运算

      位置尺寸
      文字属性

      外观属性

    4. 工作区

    四.操作方式

    剪贴蒙版的两种方式:

    1. 直接把图像拖进形状里
    2. 先把图片拖进画板,在两个一起选中,右击选择“带有形状的蒙版”

    UI——day19.Axure和 Adobe XD介绍_第4张图片

  4. XD交互动画

    1. 设计与原型模式:

      设计模式只做设计,原型模式做交互

    2. 画板及其内容的复制:

      选中画板名字,按住alt键复制

    3. 画板的新建:

      选中画板工具,在右边选择适合的设备尺寸(注意:新建画板的时候不要选中已存在的画板,不然画板工具就是对该存在的画板进行操作)

    4. 交互的注意事项:

      一.只有存在两个页面及以上才能发生交互

      二.每一种状态就是一个画板,状态间隔越短,动画越细腻

    Axure和XD的滚动条样式
    XD:直接拉伸长的画板

存在的画板进行操作)

  1. 交互的注意事项:

    一.只有存在两个页面及以上才能发生交互

    二.每一种状态就是一个画板,状态间隔越短,动画越细腻

Axure和XD的滚动条样式
XD:直接拉伸长的画板

Axure:两层动态面板的嵌套,最外层的动态面板右击选择“滚动条”>“自动显示垂直滚动条”

你可能感兴趣的:(UI设计,ui设计)