京東，天貓，淘寶等等這些電商的商品主圖都會有放大器的功能，用戶只需要將鼠標(biāo)移到主圖上就可以將圖片放大查看細(xì)節(jié)。這種放大器方便用戶更加深入地了解圖片中的信息，從而一定程度保障了用戶對商品的知情權(quán)。這一章我就教教大家如何使用axure原型工具制作圖片放大器。

第一步：拖拉擺放好相關(guān)的控件

1. 一張300X200的圖片，命名為“小圖”；
2. 一個150X100的矩形，黃底黃邊，并設(shè)置不透明度為30%，初始狀態(tài)設(shè)置為隱藏，命名為“放大鏡”，放置在“小圖”的右下角；
3. 一個300X200的動態(tài)面板，初始狀態(tài)設(shè)置為隱藏，命名為“放大窗口”，放置在小圖右邊，并在state1面板狀態(tài)中放置一張600X400的圖片，命名為“大圖”。

第二步：添加頁面載入時用例

在用例中設(shè)置全局變量OnLoadVariable為【大圖寬度/小圖寬度】，即大小圖的寬度比例。

第三步：為“放大器”添加鼠標(biāo)移動時用例

用例中有兩個動作：

1、絕對移動“放大器”，x軸移動到【鼠標(biāo)的x坐標(biāo)-“放大鏡”寬度的一半】，y軸移動到【鼠標(biāo)的y坐標(biāo)-“放大鏡”高度的一半】，并且左側(cè)、右側(cè)、頂部和底部的邊界分別為“小圖”的左側(cè)、右側(cè)、頂部和底部。

2、絕對移動“大圖”，x軸移動到【（“小圖”左側(cè)-“放大鏡”左側(cè)）*OnLoadVariable】，y軸移動到【（“小圖”頂部-“放大鏡”頂部）*OnLoadVariable】。

第四步：為“小圖”添加鼠標(biāo)移動時用例

該用例與“放大鏡”的鼠標(biāo)移動時用例一樣，直接復(fù)制過來就行。

第五步：為“小圖”添加鼠標(biāo)移入時用例

用例中只有兩個動作，一個是顯示“放大鏡”，另一個是顯示“放大窗口”。

OK，點(diǎn)擊預(yù)覽，鼠標(biāo)在圖片上移動即可以看到效果。

在工作過程中，有很多這些axure原型設(shè)計小技巧的例子，所以我會堅持分享下去，希望對大家有幫助，你們對我的關(guān)注就是我的動力。

• 效果圖：axure原型設(shè)計之放大器
• 附件下載：放大器rp文件

作者：維度。個人博客：http://weidublog.com/

本文由 @維度 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載