![cd045ce5aab291c09ce06674d07ee3ca.png](https://i-blog.csdnimg.cn/blog_migrate/8b8ee0860b71ca6861d775ca5245c923.jpeg)
锵锵锵……(●'◡'●)……更新啦……
Axure制作的原型基本上就是元件组成的界面内容,很大程度上可以模仿出真实的效果,俗称“高保真”,当然跟真正系统是没发比的。但作为研发参考,或者给甲方爸爸展示是非常高效的一种原型啦。
元件库
Axure一般有三个自带的元件库,这些元件库中的元件已经可以满足设计要求。
![f4d73cdc93fe9918a3f047a067d633e8.png](https://i-blog.csdnimg.cn/blog_migrate/d14b51e2fb2d9c389d40441d4ed1c1ff.png)
除此之外,用户可以自己创建元件库,也可以从网上下载一些元件库加载进入,点击“+”号后,选择下载的元件库,打开后就将下载的元件库加载到元件中了:
![d3f614a8d0ecd78dcdda088860f418dd.png](https://i-blog.csdnimg.cn/blog_migrate/af04dc7e69fd0fa660318dc0b5d61e06.jpeg)
![5a74ce1d8413a848a68b9e8fe0f6cb88.png](https://i-blog.csdnimg.cn/blog_migrate/7129cae2dc4cd0b030e16a82d12ba561.png)
除了可以载入元件库,也可以自己创建元件库,创建元件库跟创建原型的方式基本相同,Axure会记录元件库中的样式、交互等,载入元件库后,就可以直接拖出元件使用,不用再进行样式、交互的设计,所以常用的比如输入框、按键、下拉框甚至是登录框组合等,都可以制作成元件,方便后面使用。
![5d7d4128e3ba68baaa09bdfdece59d7e.png](https://i-blog.csdnimg.cn/blog_migrate/807028f5d458e0a9874a6ab9ed35aa47.jpeg)
元件库除了元件之外还有一种,就是图片库,把常用的底图或者透明背景图放到库中方便使用:
![54bfe28829404c23ae2d857266f0953a.png](https://i-blog.csdnimg.cn/blog_migrate/ebac021f51ebe110d83cf3d597ce2c76.jpeg)
![70fa7b891a49811781166975ff2e8743.png](https://i-blog.csdnimg.cn/blog_migrate/8f5fac872c462ad74835702f81a5db38.png)
![af15f01d08f8dbd2cf6cdf66d53b3013.png](https://i-blog.csdnimg.cn/blog_migrate/96667ca716655cee5a1932e4d34939d2.png)
元件库的其他操作:
![f73b61211b72e68cfd10f09a926f6550.png](https://i-blog.csdnimg.cn/blog_migrate/1c11ae8ca4c45c785ebaf93e801ae01d.png)
获取元件库:打开官网推荐的元件库网页;
编辑元件库(图片库不可编辑):打开元件库,对里面的元件进行自由编辑;
打开源目录:打开元件库所在文件夹;
移除元件库:将库从Axure9移除。
元件
Axure中自带的元件有3中:
- Default:制作原型的基本元件库
- Flow:用于制作流程图的元件库
- Icons:图标库,包含一些常用图标
其中,制作原型用的基本上都是Default和Icons,其中Default中包含了形状元件、图片元件、文本元件、以及动态面板、中继器、内联框架等特殊元件。掌握了Default中的元件其他的都不在话下啦。
怎么使用元件呢?直接从库中将要使用的元件拖出即可,拖动就可以移动元件位置,如果有参考物,系统会启用智能参考线(红色),蓝色的线条是元件的边界,也是变换控件可以变换元件的大小和形状:
![18447b3155363105d3c1af0e3ae32cde.png](https://i-blog.csdnimg.cn/blog_migrate/34add5aa6e64f84134f0e68a8a1423d2.jpeg)
按住变换控件上的锚点,可以拖动变换元件,如果要在不改变元件形状的条件下改变大小,可以按住shift再拖动锚点;按住ctrl后,鼠标靠近锚点,可以看到鼠标变成一个环形的箭头,这个时候可以改变形状的角度。这些操作如果要求精确,可以直接再样式中进行(需选中元件):
![8e579557305adbf65a374e6a6735aeb4.png](https://i-blog.csdnimg.cn/blog_migrate/75b6b57f84c8448a9a2c4c04e50aa68b.jpeg)
还有填充、描边等样式调整,这些都很好理解,宝宝们自己试试就知道啦。
![7a90ef493875a46ce4a223af2d88782f.png](https://i-blog.csdnimg.cn/blog_migrate/f5dc153158ca7c4b386e29ad327d7275.jpeg)
所有元件的放置和样式设置都大同小异,这里就不多说了,我已经很啰嗦了……吐舌……
在工具栏中还有很多元件编辑和控制的工具,在后面使用过程中,我们来一一讲解。
![d9b0939df065329d79933e71d185345f.png](https://i-blog.csdnimg.cn/blog_migrate/6f22d267b73e0403ba56123c809be89b.png)
最后说下多元件的情况下,发现在工作区拖选择框总是会选中不需要的元件,可以将选择模式更改一下,可以选择接触即选中或者全部框住才选中:
![443190d2b64cc2406344f7730435cd0b.png](https://i-blog.csdnimg.cn/blog_migrate/f48b6e9f81e0025d61566dbe917cb6ab.png)
又或者,在概要中点击选则,多选时按住ctrl单击需要选中的元件;或者按住shift点击第一个要选择的元件和最后一个要选择的元件,则这两个元件和他们之间的元件将全部被选中。
如果直接在工作区按住chrl/shift点击元件都可以实现多选。
啊……肚子好饿,该吃午饭了……