恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
半天学会Axure绘图
0.0°
2020-03-02 原创文章 教程 举报 1861 12 4 1

懒人学习大法,半天掌握Axure的绘图功能,快速入门Axure。学习其他绘图软件,相关思路也可以进行参考。


关于绘图工具,除了常用的Sketch,但因为有的团队习惯使用Axure,为方便沟通于是阁主也不得不开始学习。学好之后作为画一些简单的原型图还是挺有帮助的。

但工具的学习不能占用设计师太多的时间,我们需要做的就是最短的时间内,掌握能应对工作需求的那部分功能,将更多的时间留在去想怎样提高业务价值和思维沉淀的事情上。

Axure最大的好处就是它有跳转的动效,但不是所有人都会用它,今天我们讲讲最常用的绘图功能,能让大家在半天的时间内就能学会使用。

如果你有PS或者Sketch的使用经验,那么上手就会快很多。阁主也是在一晚上的时间内学会,并直接用于项目中的。

关于交互图的绘制,我们常用的工具分为新建画板、形状工具、文字工具、图片处理、跳转链接、导出文件的标注。任何其他的绘图软件也基本是这个思路。

但在这之前,得学会使用组件库,组件库会大大提高我们的效率,类似于sketchsymbol库。



一、导入组件库

点击library“+”号,选择本地文件就可以导入相应的组件库,如下图所示。


阁主除了使用Axure自带的组件元素之外,用的最多的就是ant design的全套组件库,后台回复“Axure组件”即可得到相应的组件库下载地址。


二、新建画布

Axuresketch不同之处在于,Axure的画板是直接建好的,固定的白色区域,sketch是要自己建的。但Axure可以建子页面,如下图所示。作用就是标识出页面与页面之间的关系,这个优点是比较赞的,特别是应用于PC的界面设计。



三、形状

1.绘制
左上角插入(如下图)里面可以选择插入的形状工具,或者按快捷键R进行绘制矩形,快捷键O进行绘制圆形,快捷键P使用钢笔工具。
2.排列和编组
排列对齐的方式方式顶部工具栏有如下图,最常用的就是Option+Command+C垂直居中对齐Option+Command+M水平居中对齐
快捷键Com+G进行群组,Shift+Com+G取消群组


3.布尔运算
选择两个图形之后,右键,可以对两者图形进行合并、剪切等等的运算规则,Axure当然也有,如上图

四、文字

文字包括字体、字号、颜色、行距、字体间距等,在右侧,与sketch和PS的相似度很高,如下图。



五、图片

1.导入图片
阁主最常用的方式就是将文件夹的图片直接拖到画布中去,网页上的图片的话直接Com+C加Com+V是起作用的(但这种方式不适合文件夹的图片),当然还有其他方式,综合理解程度比较高,费脑筋。

2.裁剪图片
最常用的就是裁剪了,右键选择裁剪图片,将虚线的区域选中自己想要的内容,双击图片进行确定就OK了。



六、跳转链接
工具在左上角,当工具靠近需要链接的主体时,上下左右会出现4个节点,将跳转的线链接到目标的节点上,如下图,则无论怎样移动目标主体,跳转线都会跟随一起进行移动。




七、导出功能

1.导出HTML格式
选择“发布”-“生成HTML文件”,快捷键Shift+Com+O,就可以导出整套含有各个页面的文件了。


2.导出图片
如下图操作,选择“文件”-“导出图片”,但只能导出1个页面的图片。


以上就是Axure最常用的绘图功能,常用的快捷键如下(基本上也适用于其他绘图软件,如Sketch或PS,大同小异):
矩形——R
圆形——O
钢笔工具——P
锁定图层——Com+K
解锁图层——Com+Shift+K
垂直居中对齐——Option+Command+C
水平居中对齐——Option+Command+M
群组——Com+G
取消群组——Shift+Com+G
复制——Com+C
粘贴——Com+V
粘贴属性——Com+Option+V
连接工具——E
生成HTML文件——Shift+Com+O


总结一下,想要新学会一款新的工具软件,思路是:
1.先想好要用工具来干什么,选一个工作中的案例来实践,解决工作中的问题是学习效率最高的方式;
2.复用以前学的软件的思路,绘图的PS、sketch、Axure可以互相学,动效的Flinto、Principle、Propie,甚至绘图和动效制作的可以相互复用;
3.内容离不开新建画布、形状、文字、图片(有的会有视频)、跳转、导出等元素以及流程拆分的思路,要提高效率就要去找现成的组件库去进行运用。


往期精彩文章
《关于交互设计的思维抽象》
《好的交互文档其特点》
《在家办公是要写日报的》
《B端设计之导航》
《Lottie - 让动画的实现变得如此简单》


作者简介:Sophia的玲珑阁,一枚爱折腾,爱健身的妹纸。

职场设计技能,更多教程抢先就看,请关注作者的微信公众号:Sophia的玲珑阁

Powered by Froala Editor

更新:2020-03-02

收藏

12人已收藏

Sophia的玲珑阁

从创业公司到大厂,分享实用的互联网设计技巧和职场经验。

  • 142

    作品

  • 389

    粉丝

  • 7

    关注

  • 作为设计师,我是如何一步步找到业务增量的
  • 情绪是魔鬼,但要原谅自己
  • 2020年打工人4条总结出炉
  • 提升屏效可实施性最强的4大方法
相关标签
教程

    猜你喜欢

      2020-03-02 原创文章 教程 举报 1861 12 4 1

      半天学会Axure绘图

      0.0°

      你确定要举报半天学会Axure绘图

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年03月02日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      12
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录