UI——day19.Axure和 Adobe XD介绍

1. Axure基础

   一.Axure是什么？

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

   二.原型图目的是什么？

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

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

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

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

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

      e.g:

      

   四.界面

   ①菜单栏

   ②工具栏重要功能：

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

   ③页面导航

   ④元件库

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

   ⑥母版管理

   1. 跟PPT母版一个概念

   ⑦页面/元件属性

   ⑧动态面板

2. Axure交互动画

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

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

   二、四种交互效果

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

   三.Axure交互用例

   重点右侧：

   

3. XD基础

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

   一.Adobe XD CC是什么？

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

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

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

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

   三.界面介绍

   1. 导航栏

      设计模式

      原型模式

      缩放

      播放和分享

      

   2. 工具栏

   3. 检查器

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

      位置尺寸
      文字属性

      外观属性

   4. 工作区

   四.操作方式

   剪贴蒙版的两种方式：

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

   

4. XD交互动画

   1. 设计与原型模式：

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

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

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

   3. 画板的新建：

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

   4. 交互的注意事项：

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

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

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

存在的画板进行操作）

4. 交互的注意事项：

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

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

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

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