axure
- 原型工具
软件工程导论
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设计网页)
大前端工程师 (将设计图->网页)
- 为什么学习axure
1)理论铺垫
块元素,行内元素,表单,布局
2)软件开发路线
承上启下,团队协作,后端
3)职业规划
程序员 5年->产品经理/管理层(商务)/架构师(框架搭建)/非技术岗位
4)必备技术
-
产品转换过程
rp -> psd -> html/css/js -> 网页 -
如何使用
注:软件应用
1) 官方软件(官网)
2) 英文原版
3) 归档 (使用英文)
应用:
1) 鼠标点击
2) 键盘/触摸板 -
文件创建以及归档
ctrl+N(创建) ctrl+S(保存) -
元件(标签,元素) -> 盒子(box)
-
布局
使用块元素进行布局,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 -
前端三要素:
html 结构
css 样式
Javascript(JS) 交互 -
样式添加(style)
-
元件(组件 -> 标签)
1)基础元件2)表单元件
3)表格元件
4)图标元件
-
交互
*事件机制三要素:
事件源
事件处理函数
事件对象
事件类型:
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>
-
B/S架构
-
数据驱动
备忘录(列表信息)
let arr = [“周六做作业”,“周日看电影”,“周一上课”];
==>视图
<ul>
循环遍历arr
每次拿到一个元素显示一个li
</ul>
-
axure 后台页面设计(模态框),rplib 元件库
母版:(header/footer)
组件库 antdesgin(react)
elementui(vue) -
PS需要学习的相关工具
测量 -> 选框工具
取色 -> 滴管
切片 ->
其他:抠图、设计、去背景色。。