• 1.4_1 Axure RP 9 for mac 入门

    相关链接

    一、原型设计工具

    工具优点缺点官网
    在这里插入图片描述
    Axure RP    		国内通用
    快速编辑图像
    事件模拟    		付费
    设计师对接    		跳转
    在这里插入图片描述
    Adobe XD    		免费（部分功能）
    图形设计效果号
    插件丰富    		国内插件无法使用
    交互功能差    		跳转
    在这里插入图片描述
    墨刀    		免费
    在线原型设计
    手机预览    		文档通用性差
    图像编辑效果差    		跳转

    二、原型图

    原型图的作用
     1. 描述互联网产品设计的文档
     2. 项目中、与相关部门沟通需求的工具（研发，设计）
     3. 敏捷开发中，简化版的需求文档（PRD，MRD）

    原型图的种类
     1. 线框图：制作快速、低成本描述方案，给设计更多空间
     2. 高保真原型图：制作耗时，还原度高，保证设计效果
     3. 需求文档（PRD，MRD）：更多逻辑与业务说明，指导研发

    原型图设计流程
     1. 需求分析(版本功能列表) -> 功能拆分 -> 原型设计 -> 需求评审(原型图文档)

    原型图涉及人群

    在这里插入图片描述

    1.线框图 - 示例

    在这里插入图片描述

    2.高保真 - 示例

    要素：
     1. 形状、尺寸： 严格按照截图比例、参考线（静态）
     2. 色彩： 使用吸取颜色，注意渐变色（静态）
     3. 贴图： 寻找参考物、复制图片、截取，覆盖等（静态）
     4. 交互动作： 页面切换，响应范围，点击动效等（动态）
     5. 演示效果： 手机演示，原型托管，屏幕适配（动态）
    技巧：
     1. 会截图： 选取合适的参照物进行切割，不要重新发明轮子
     2. 使用搜索引擎：iconfont、百度

    在这里插入图片描述

    3.需求文档 - 示例

    在这里插入图片描述

    二、Axure界面

    需要Axure9 汉化版安装包（for mac）的可以私聊找我要网盘链接

    在这里插入图片描述

    P.S 元件库可以通过元件名称搜索，需要区分中英文版

    在这里插入图片描述

    • 快捷键：command(⌘) + - /+ ：绘图区缩小/放大
    • 调整位置：Axuere绘图区靠近某个边界、中心等会自动弹到对齐位置，如果该位置不是想要的，可以通过键盘方向键调整坐标，一次1个px（像素）

    三、Axure使用

    a. 快捷操作栏（上方）

    1.选择模式

    • 相交选中（元件全部在选择框内时才会选中）

    在这里插入图片描述
    在这里插入图片描述

    • 包含选中（元件全部在选择框内时才会选中）

    在这里插入图片描述
    在这里插入图片描述

    2. 对齐

    • step1.同时选中多个需要对齐的元件

    在这里插入图片描述

    左侧

    在这里插入图片描述

    居中

    在这里插入图片描述

    右侧

    在这里插入图片描述

    垂直

    在这里插入图片描述

    3. 自定义工具栏

    在快捷操作栏空白处，右击鼠标，可以自定义工具栏
    在这里插入图片描述
    在这里插入图片描述

    4. 显示样式工具栏

    默认不显示样式工具栏
    在这里插入图片描述

    在快捷操作栏空白处，右击鼠标，可以打开显示样式工具栏
    在这里插入图片描述

    b.元件库（左侧）

    1.读取元件库

    选择添加元件库
    在这里插入图片描述
     
    指定元件库文件文件 *.rplib 格式
    在这里插入图片描述
     
    等待加载
    在这里插入图片描述
     
    加载完毕
    在这里插入图片描述

    2.按钮

    • 单选按钮实现单选效果

    在这里插入图片描述

    c.绘图区（中间）

    1.回到原点

    点击回到坐标(0,0)位置
    在这里插入图片描述

    2.圆角

    在这里插入图片描述
    在这里插入图片描述

    3.切图

    • 右击图片，选择切割图片

    在这里插入图片描述

    • 选择切点

    在这里插入图片描述

    • 重复以上步骤，再次切割

    在这里插入图片描述

    • 完成切图

    在这里插入图片描述

    4.多图等比缩放

    在这里插入图片描述

    5.切换图形

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    6. 实现【置灰】效果

    • step1.准备一个同样大小的图形，调成灰色背景、透明度约50%

    在这里插入图片描述

    • step2.覆盖要置灰的图案（一般设置为隐藏，通过交互触发的方式，改变为显隐)

    在这里插入图片描述

    7. 线段-切割、曲线

    • step1.使用元件，水平线 or 垂直线

    在这里插入图片描述

    • step2.鼠标点击水平线，悬停时鼠标下面出现◼︎

    在这里插入图片描述

    • step3.鼠标双击水平线，悬停时鼠标下面出现+ （此时变为线段切割模式）

    在这里插入图片描述

    • step4.线段切割模式下：点击线段任意位置，点击位置会出现♦︎图案，表示线段新增了一个端点

    在这里插入图片描述

    • step5.可以多次切割，

    在这里插入图片描述

    • step6. 按住鼠标左键拖动，可以修改线段端点位置

    在这里插入图片描述

    • step7. 右击任意一个端点，可以选择【曲线、折线、删除】，选择曲线

    在这里插入图片描述

    • step8. 选择曲线后，该端点与相邻两个端点的连接方式变为曲线连接，可以通过调节棕色线段来调整曲线的弧度、和相邻两个端点之间连线弯曲的走向。

    在这里插入图片描述

    • step9. 调整曲线的弧度

    在这里插入图片描述

    • step10. 调整和相邻两个端点之间连线弯曲的走向

    在这里插入图片描述

    • step11. 点击任意其他绘图区，即可退出线段切割模式

    在这里插入图片描述

    8. 实现【轮播图】

    Axure动态面板教程（快速入门+轮播图案例）

    9.旋转

    • step1. 选中图片，放在图案角落，鼠标显示如下

    在这里插入图片描述

    • step2.按住command(⌘) ，图案会变为如下样式，再按住鼠标左键即可对图案进行旋转

    在这里插入图片描述

    • step3. 旋转效果

    在这里插入图片描述

    10.反选

    假如我想选中下图中的三条线段

    在这里插入图片描述

    比较简单的方式是，按住command(⌘) 或 shift(⇪)，依次点击每个线段

    在这里插入图片描述

    仍然选中下图中的线段，元素较多时，就需要用到反选技巧

    在这里插入图片描述

    • step1. 选择模式为包含模式，选中所有文字和线段

    在这里插入图片描述
    选中后效果如下：
    在这里插入图片描述

    • step2 选择模式为包含模式，按住command(⌘) 或 shift(⇪)，再选中所有文字（表示反选）

    在这里插入图片描述
    即可选中所有线段并操作
    在这里插入图片描述

    11.【阴影】实现浮雕效果

    通过图案叠放，调整阴影，实现浮雕效果
    在这里插入图片描述

    d.样式（右侧）

    1. 阴影

    外部阴影一般只加Y轴
    在这里插入图片描述

    四、预览问题

      只有谷歌浏览器Chrome会出现这个问题，谷歌浏览器默认最小字体为12px，当我们在高保真页面中设计的字体小于12px时，在谷歌浏览器中预览时就会出现字体变大（变为12px）的情况，导致页面失真。可以使用其他浏览器，或者设计时整体放大，让字体全部大于12px。

    示例：
    在这里插入图片描述
    使用chrome浏览器预览效果：
    在这里插入图片描述

    22/08/12

    M

  • 相关阅读:
    坐标西安 面试中电后端Java岗 被面试官狂问mybatis
    “音响”事件对国产豪华品牌车汽车厂商的警示
    1.servlet规范简单整理
    Leetcode刷题笔记--Hot71--80
    hrust工程化学习(六)----最近邻搜索
    计算机网络
    可视化图形原理
    JavaScript基础知识13——运算符：一元运算符，二元运算符
    如何入驻抖音本地生活服务商,附上便捷流程!
    Lock锁和AQS
  • 原文地址：https://blog.csdn.net/qq_43529621/article/details/126060821