Axure的基本使用

最新推荐文章于 2024-07-31 19:46:07 发布

原创最新推荐文章于 2024-07-31 19:46:07 发布 · 528 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Axure

Axure 专栏收录该内容

0 篇文章

订阅专栏

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需要学习的相关工具
测量 -> 选框工具
取色 -> 滴管
切片 ->
其他：抠图、设计、去背景色。。