Axure学习简记
JimmyQin Lv3

这是2023年的第一篇博文,希望会是又一个很好的的开始。

概述

Axure RP(以下简称Axure),是最近在学习的一款很有意思的设计软件。几天的学习中,有为其提供的全新的开发视角而感到惊喜,有为自己冥思苦想的逻辑解决方案而兴奋,也有为其功能上的诸多局限而生发的不少诧异,甚至还有给我造成的很大程度的迷惑与迷茫。正值寒假的开端,浅浅总结一下Axure软件学习的经验,权当作期末作业的延伸版本。

Axure RP是一款快速原型设计工具,RP是Rapid Prototyping(快速原型)的缩写。

简单来说,就是在实际的互联网产品上线之前,需要拟订一份大致的草稿,这个设计过程可以由Axure来完成。在接触这款软件之前,我并没有“原型设计”的概念,总是简单地认为如APP开发,依靠UI/UX和前后端的分工便可以实现直接从需求到落地,而现在才逐渐意识到,在成熟的大型企业中,原型的反复考量包括“产品经理”的岗位必不可少,原型设计也有其存在的重要意义。毕竟,专业分工越细致,打磨出优秀产品的概率就会更大。

回到软件本身,Axure提供了平面的创作区域,这意味着它基本可以胜任网页、桌面端程序、移动端APP以及小程序的原型设计。打开Axure界面,我们会发现软件本身的功能并不多,实际体验后则会发现其核心功能更是屈指可数。从这一点来看,Axure大概是我学习过的最“简单”的软件了。为什么这么说呢?下面我来带大家一起使用和分析一下Axure的工作过程,就会得出答案。

我使用的软件版本是Axure RP 9,官网最新版本是RP 10,学校教程中演示的则是RP 8版。版本间的差异不算很大,由于10版本改为了订阅付费制故弃用,而9版本升级了负空间并优化了页面布局,所以选择了它。

软件操作介绍

打开Axure,首先是选取已保存文件或新建文件的欢迎窗口,这属于是创作型软件的标配。新建空白文件进入主界面后,在缺省设置下,软件布局可分为“顶部”“左边”“中间”“右边”四个分区。

image

基本布局

  • 首先,顶部区域分为两块:①是符合Windows - Win32 apps标准的“菜单栏”,这也是许多软件的必备菜单,囊括程序的设置及大部分功能。②是软件的“工具栏”,包含了:选择模式切换、连接(连线)功能、自由绘制插入和视图与排版等常用工具。在工具栏下方还有“样式工具栏”,主要控制元件与文字等的样式。这一部分操作与“右边”的样式面板作用重合,个人认为并不能达到方便操作的目的,因此推荐关闭“样式工具栏”以此扩大可视创作面积(关闭的唯一坏处,舍弃了“隐藏”按钮)。
  • 左边区域,包含“页面面板”(字面含义:不同的页面)、“概要面板”(显示当前页面下的所有元件,和元件间的层叠关系;该面板和Photoshop中的图层面板逻辑完全一致)、“母版面板”和“元件库面板”(Axure的两大特色功能,稍后详述)。
  • 中部区域,有当前开启页面的标签页、标尺、以及一大块空白创作区域。创作区域是一块支持负空间(RP 9版本以上)的无限大画布。不过实测画布并不是无限大,能够显示的范围在x和y方向的±20000px,当然这完全满足全部设计场景了。
  • 右边区域,包含“样式面板”(调整元件及文字的样式(样式仅限于给定的基本参数))、“交互面板”(Axure又一重点特色功能,后详述)、“说明面板”(为页面及元件添加说明,类似代码中的注释)。

现在看起来已经比较简单了,相比Rhino密密麻麻几百个小按钮和AutoCAD啥也没有纯靠快捷键的两个极端来说,Axure非常易于上手。但目前还不够简洁,我们再更进一步提取核心用法和特色功能。

核心功能

用非常通俗的话来概括:【使用Axure就是在不断“摆放”矩形和文本,再稍微进行一点“操作”把页面和页面连接起来。】 软件内我们需要理解的概念有:①页面,②元件,③样式,④交互,⑤母版。

① 页面:页面的概念可以用Windows程序中的“窗口”或者网站的独立html文件来理解。同时,页面上承载的元件之间又有很好理解的图层逻辑。
② 元件:Axure中提供给我们的创作素材,可以随便摆。
③ 样式:元件的外观,包括颜色、阴影、字体等。
④ 交互:制作仿真原型(高保真)的关键,用于为元件添加功能,比如超链接。
⑤ 母版:事先做好的页面。在其它页面中需要时,可当作一个独立的元件插入。

因此,用软件内概念重新叙述上面这句话:【使用Axure就是在页面上布局元件,并调整元件样式,再添加元件交互实现如页面跳转的效果。(母版可以减少重复作业)】

页面、样式和母版是三个显而易见的概念,而元件是一组集合,交互则是一种功能。

元件看似很多,实际上极少,因为Axure中相同功能不同样式的预设被当作了不同的元件。实际上,以功能来划分,元件仅包括:①矩形、②文本、③线、⑤热区、⑥动态面板、⑦内联框架、⑧中继器、⑨表单元件集合。我没有把什么图片、按钮、占位符单独拿出来做一类别,这是因为如图片可以视作矩形用图片作为填充颜色,其它的以此类推。

再谈交互,这是Axure最核心最关键的、使得软件价值升华的功能。交互用以实现原型应对用户操作的反馈,比如click或hover事件;交互还能实现简单的动画效果;交互还可以为原型赋予逻辑判断能力,为Axure设计带来一份编程思维。

看到这里感觉似乎还不错,Axure应该是简单好用的吧?
那到底好不好用呢?

实践出真知。

作业实践

太巧了,期末作业有一项Axure交互设计,由于我比较少交白卷,便赶紧在前几周边学边做,完成了一份拙劣的设计。我们一块来看看:

题目要求

作业的题目是这样的:

交互设计作业,参照腾讯会议界面,设计红蜘蛛的界面,尺寸按一般平板的尺寸自定义,老师用家里的IPAD扫码查看。
红蜘蛛软件设计教师界面,教师界面主要功能包括但是不限于以下几项:
1.传送作业文件电子稿给学生;
2.学生提交作业显示界面,那么教师红蜘蛛界面应该可以看到;
3.查看学生的屏幕,允许一屏显示1、4、9和16位学生的窗口;
4.点学生上台功能,意思是让学生自主分享屏幕到投影仪,并操作演示,但不影响教师的电脑;
5.可以将学生分类,比如按作业进度分类。同时可以设置学生图标可修改,比如将学习状态和学习效果好的学生图标设定为学霸图标,或者在屏幕设置优秀学生区域,可将优秀学生拖拉进框,以示奖励。
6.接受学生举手提问的功能;
7.其他你们认为的需求……
学生界面包括,但不限于以下几项:
1.改名(教师电脑上将显示真名)
2.提交作业界面
3.举手提问
4.申请上台演示

嗯,多多少少有点奇怪。事情的前情是这样的,学校计算机教室里安装有局域网控制软件,但是软件界面丑的离谱、功能排布更是全无逻辑,这引起了艺术与设计学院各位小伙伴的生理不适,已经到了再多看一眼就会爆炸的程度。便以这个为题布置作业学一下Axure软件。回想一下从小学到大学,机房的控制软件安装率几乎是100%,确实没见过哪家开发商做到符合现代审美。这么说可能不太直观,下面上图:

image

……

我找的这张图是目前在市面上销售的最新版控制软件,不能说没有设计风格,但是的确又丑又不合理,不便用户操作。

作业展示

最后我上交的作业是这样的:
(您可以选择观看视频或者访问链接查看设计)


演示网站:点我访问


image
image
image
image
image
image
image
image
image

不得不说,我的设计中有非常多不合理的地方以及未能实现的效果。
请允许我,在开始自我反思和继续精进学习之前,先吐槽一下Axure的一些问题。

其他思考

问题:
一、 元件样式调整项较少。【难受程度:★☆☆☆☆】
也许这并不能算是一个缺点,虽然可调参数少,但是有限制也可以为快速输出和规范化助力。就Axure追求的快速设计而言,样式参数少能提高效率,但相反也为创意制造了障碍。
二、 元件库资源少。【难受程度:★☆☆☆☆】
本来以为Axure元件库能作为便于传播的一大优势,可惜中文互联网上元件库素材并不多。还有个值得注意的现象,大厂似乎开始边缘化Axure的地位。比如我在设计中使用的来自阿里巴巴的Ant Design库,最新版本是Ant Design 5.1.2,而对于Axure的支持则停留在了3.9.x,似乎已经有一两年时间没有维护了,官网最新的页面也没有有关Axure的信息呈现。这一点比较引人深思。
三、 界面。【难受程度:★★☆☆☆】
Axure界面从8到9到10一直在不断轻量化,总体来讲还算好用,但是在体验上有点小问题。如界面布局自定义程度不高,9在窗口自定义方面有了一定的进步,但还是不太满意,很多常用按钮和不常用按钮摆在一起,不能单独提出来。右边面板很挤,特别是中继器的表格,如果有大量数据需要编辑就会十分局促。
四、 快捷键。【难受程度:★★★☆☆】
这软件竟然不能自定义快捷键!太离谱了,还好鼠标拖拽的操作比较多,基本能够适应。但是部分固定的快捷键还是会影响操作。比如在选中任意元件,此时输入数字会修改元件透明度(和PS一致),经常会造成误触。刚开始的时候我经常不小心按到0,一度造成我以为原件不翼而飞的窘况。
五、 中文适配。【难受程度:★★★★☆】
Axure官方并未适配中文。我有比较不好的习惯,就是英文软件使用汉化包。但是Axure中文社区为软件制作的汉化包实在是一坨稀饭,翻译有一些错误和不完全的地方,容易造成误解。比如刚开始使用交互功能的时候,我一直分不清“鼠标点击”和“Mouse Click”的区别,后来切换回英文原版我才知道原来是“Mouse Down”按下和“Mouse Click”单击的区别。
六、动画能力孱弱。【难受程度:★★★★☆】
Axure的动画依靠交互功能实现,但是功能非常单一,比如路径动画只能实现“经过”和“到达”的效果。动画速度不能用曲线调节,默认给了几个常用预设,比较呆板,甚至不如PowerPoint的预设多。
七、毫无批量修改能力。【难受程度:★★★★★】
最令人崩溃的负面特性,在编辑大量交互时,已有设置的复用局限性极大,基本只能依靠复制粘贴,从而导致几何倍增长的工作量。这个问题比较严重而且不好描述,我尝试过很多办法都没能很好的解决。我个人有一个Axure程序设计的思路:可以把元件交互配置项导出为如.yaml这样的数据串,这样就方便了批量的编辑不只限于软件本身。不过这样做可能需要把Axure软件整个底层推倒重做,而且与软件本身的理念不符,估计是绝不会用上我的方法了。


讲了这么多Axure的缺点,现在客观一点,来谈一谈它的优势吧。

Axure RP is the only UX tool that gives UX professionals the power to build realistic, functional prototypes.

这是Axure官网首页的介绍,看起来Axure非常自信,特别是为自己的交互功能而骄傲。的确,Axure输出html格式,就意味着它可以和JavaScript、CSS、HTML5等进行结合,从而实现更多高级的功能,有时候真的能给人一种直接对接数据库就能上线的感觉了,同时也意味着它和在线设计软件截然不同的传播与交付方式,这些都是同类设计软件所不具备的能力。但这也加大了Axure的在这一部分的使用难度,合理安排逻辑、函数、响应式、触屏适配等,非常需要相关知识的配合。在网上看到有些大神拿Axure来制作小游戏和复杂动效,真的是把软件功能使用到极致了。Axure因为其特性,其实也可以有其他用途,比方说制作说明文档等等,如果熟练操作,也还比较好用。

结语

完成作业的时候我一直很纠结,Axure操作这么麻烦,为了实现想要的演示效果,要折腾很多参数,完成很多重复性的工作,还得学习和应用大量的周边知识。有这么多的时间,倒不如直接交付开发开始debug好了。现在细想,Axure的定位和意义到底在哪里?可能根本就不是雕琢炫酷的UI表现,更多是想法和逻辑的快速呈现。Axure的的确确用宽大的画板、舒适的辅助线、可视化的逻辑表达、拟真的html输出,很好地胜任了原型设计的工作,同时也兼容JS的高级玩法,拥有了更多的可能性。作为普通用户,我们在使用时取其精华、用其长处,不必纠结某一功能,而是为自己整体的设计服务,就非常接近完美了。


附言

Axure学习参考:
https://www.bilibili.com/video/BV1ba411m7NY/
https://www.bilibili.com/video/BV1hU4y1L77u/


image

 评论