axure组件—图片组件

│蕃茄仔

上一次我们讲到了axure组件和工作区，主要是讲述了组件库和工作区的描述和规则，还讲组件库和工作区分别比喻成了仓库和车间。讲完了仓库的规则，我们现在和之后的一段时间就讲讲仓库的每一个零件的用途，因为只用知道了每个零件的用途，才能更好的使用它们。那么今天我们先从图片组件开始。

    图片组件是axure里面用途最广的组件之一，因为现在的网站均是图片为王的架构，自然我们在设计网页原型时用到图片组件的情况就很多。图片组件常规的操作包括了载入，优化，调整大小，切割图片，和图片的交互功能—悬停。下面我们通过操作案例给大家细细介绍这个操作流程：

    1.图片的载入。

   
    大家看图，axure将图片的载入过程分为三步，采用了拖拽，双击鼠标就可完成，非常的方便：
      
    ① 将图片组件拖拽到工作区
    ② 双击组件
    ③ 双击合适图片或者选中点击打开
    ④ 载入图片时会询问是进行优化，从笔者的工作经验来看，我们一般是不会选中优化的，因为优化后图片相对模糊，如果用于制作网页原型，略显粗糙。
   
           

    ⑤载入图片时会提醒是否自动调整图片大小。组件默认的像素是50*50，如果你想要载入的图片就这么大，就选择“否”，如果是不是，则选择“是”。
     

    2. 图片尺寸大小调整



    ①选中图片。
    ②修改红框里面的w和h（即宽和高的值）
    注意：axure默认是将w和h显示在工具栏的，如果你的显示器分辨率低于或者只有1024*768，x、y、w、h均没有显示出来，不过工具栏末尾有个倒小三角，大家可以点击出现以上的四个值。以笔者的工作经验，如果在试用axure时电脑分别率过低，可以试着通过试图—工具栏—常用这个去掉勾选，因为这些常用功能你一定要会采用快捷键完成（我是被逼出来的，以前的工作环境没现在这么好，显示器分辨率低）。

    只要你学会以上的操作流程，axure的图形组件你已经会用了，但是要说到试用起来得心应手，你还得学以下两个功能。

    1.图片切割。
    选中图片，单机右键，选择分割图片，学过ps的朋友一定对这个得心应手，没学过也不要紧，很简单，多操作几次就可以了。
     

    图片可以横切竖切，想怎么切就怎么切，但是不要问我怎么斜切；其实初学者使用分割图片是最好的，初学者可以将某个优秀网站的网页整个截图下来，载入axure，然后将网页分割，放入相应的组件，这一来一回的模仿，很快就入门了。

    2.悬停图片设置。
    悬停图片设置是图形组件在交互上的补充，很是好用；例如，我们看到某个网页，你把鼠标移入图片时，图片的颜色变了，或者换成另一个图片；基础不扎实的朋友一定会以为那是用动态面板做的，其实用悬停图片做，简单方便。悬停图片有很多种用途，现在我举一个最常用的例子。
   
    ①选择已经载入的图片，编辑悬停图片，导入另一个图片。
     
   
    ②导入成功后，左上角会有一个小矩形，一半黑色，一半白色说明这个图片下面藏着另一个图片。导出原型后，当鼠标移入后，就会把该图片下面的图片显示出来，移走后，又恢复原来的图片。具体效果就不导出来给大家看了，算是给大家留个练习题吧。
   

    好了，今天的教程就到这，明天继续，明天的课程是文本面板，也是最常用的组件之一。

    本文转载至 方哥免费axure教程 http://blog.sina.com.cn/s/blog_7db0f7ca0101e940.html

尹广磊

图片要使用附件上传上来，不然无法显示外链的图片。