搜索引擎現在越來越注重圖像搜索了找都，很多搜索引擎都有自己的圖庫，比如百度廊酣，搜狗能耻，360等，但大家可以發(fā)現亡驰，不管什么平臺的圖庫晓猛，它的交互方式都差不多，都是圖像幻燈片切換式的相冊凡辱，相比于上一章的《axure8.0快速入門新手教程：電子相冊》戒职，這章的圖庫對圖像的展示方式更加便捷直觀。以下為如何制作圖庫原型的步驟
第一步：準備好8張大的風景圖
第二步：拖拉擺放好相關控件
1煞茫、一個750X450的動態(tài)面板放在上方帕涌，命名為“大圖面板”，并添加state1~state8八個面板狀態(tài)续徽，每個面板狀態(tài)放一張風景圖，大小都拉至750X450亲澡。
2钦扭、一個750X150的動態(tài)面板放在下方，命名為“小圖視窗面板”床绪，在該面板的state1面板狀態(tài)中的（0,0）和（750,0）這兩個位置都放置一個高為150的垂直線客情，分別命名為“左邊界”和“右邊界”，同時也要在（0,0）的位置放置一個高150寬適當（放的下8張小圖即可）的動態(tài)面板癞己，命名為“小圖面板”膀斋。
3、在“小圖面板”的state1面板狀態(tài)中痹雅，等距放置8張150X90的小圖仰担，每張小圖上方再放置一個150X150的灰框透明底的矩形。
4绩社、在“小圖視窗面板”的兩邊都放置一個40X150的白色矩形摔蓝，文本分別為“<”和“>”赂苗，并且分別命名為“左移”和“右移”。
第三步：為“左移”和“右移”添加鼠標單擊時用例
點擊“左移”時贮尉，相對移動“小圖面板”x軸-300的距離拌滋，動畫為線性，時間為500毫秒猜谚，右側大于等于“右邊界”的x軸坐標败砂；
點擊“右移”時，相對移動“小圖面板”x軸300的距離魏铅，動畫為線性昌犹，時間為500毫秒，左側小于等于“左邊界”的x軸坐標沦零。
第四步：設置“小圖面板”state1中每個透明矩形的交互樣式
設置所有的透明矩形選項組均為“小圖”祭隔，所有的透明矩形交互樣式中的“鼠標懸停”路操，“鼠標按下”和“選中”均為藍色邊框疾渴。
第五步：設置“小圖面板”state1中每個透明矩形的鼠標點擊時用例
點擊哪一個透明矩形，就切換“大圖面板”到相對應的面板狀態(tài)屯仗，并設置該透明矩形為選中狀態(tài)搞坝。
點擊預覽，然后點擊左移魁袜，右移桩撮，或者小圖，就可以看到圖庫的效果了峰弹。同時也可以隨時關注我的個人博客：http://weidublog.com店量，因為工作過程中有很多這些axure原型設計小技巧的例子，所以我會堅持分享下去鞠呈，希望對大家有幫助融师，你們對我的關注就是我的動力。
效果圖：axure原型設計之圖庫
更多原型案例：http://weidublog.com/index.php/2017/03/20/181/
作者：維度
