Axure的基本使用

axure

1. 原型工具

软件工程导论
1）可行性分析（boss）
技术储备 -> 利润
2）需求分析（产品经理 -> 报价功能）
1.手绘
2.PS：使用难度大，专业性强
3.axure/墨刀：使用难度小，封装了很多元件
4.html：复杂度，返工成本高
3）产品设计（忽略）
设计师 ps 【美术生】
psd -> 吸管 、切片、测量
4）网页开发阶段（静态网页）
psd/rp -> html、css、js
5）数据对接
数据库 -> JavaEE 数据服务 -->html

产品经理 （需求分析->使用axure绘制产品雏形）
ui设计师 （根据axure设计网页）
大前端工程师 （将设计图->网页）

2. 为什么学习axure

1）理论铺垫
块元素，行内元素，表单，布局
2）软件开发路线
承上启下，团队协作，后端
3）职业规划
程序员 5年->产品经理/管理层（商务）/架构师（框架搭建）/非技术岗位
4）必备技术

1. 产品转换过程
   rp -> psd -> html/css/js -> 网页

2. 如何使用
   注：软件应用
   1) 官方软件（官网）
   2) 英文原版
   3) 归档 （使用英文）
   应用：
   1) 鼠标点击
   2) 键盘/触摸板

3. 文件创建以及归档
   ctrl+N（创建） ctrl+S（保存）

4. 元件（标签，元素） -> 盒子（box）

5. 布局
   使用块元素进行布局，box 盒子 , div 块元素【盒子模型】
   属性：width height background color
   border
   border-left
   border-radius（圆角）
   border-width -> 1px
   border-color -> red
   border-style
   padding
   margin
   行级布局
   box
   列级布局
   float / flex / position

6. 前端三要素：
   html 结构
   css 样式
   Javascript（JS） 交互

7. 样式添加（style）

8. 元件（组件 -> 标签）
   1)基础元件

   2）表单元件

   3）表格元件

   4）图标元件

9. 交互

*事件机制三要素：
事件源
事件处理函数
事件对象
事件类型：
click
mouseover <-> mouseleave
mouseenter <-> mouseout

按钮事例：

let one = document.getElementById('one')
one.onclick = function (event){
    event
    window.herf = "https://www.baidu.com";
}

<button  id='one'>跳转到百度</button>

10. B/S架构

11. 数据驱动

    备忘录（列表信息）

    let arr = [“周六做作业”,“周日看电影”,“周一上课”];

==>视图

<ul>
      循环遍历arr
          每次拿到一个元素显示一个li
 </ul>

12. axure 后台页面设计（模态框），rplib 元件库
    母版：（header/footer）
    组件库 antdesgin(react)
    elementui(vue)

13. PS需要学习的相关工具
    测量 -> 选框工具
    取色 -> 滴管
    切片 ->
    其他：抠图、设计、去背景色。。