引子

這是第一次使用axure8實(shí)現(xiàn)的例子，之前的auxre8版本似乎有點(diǎn)問題，輸出的html文件總是不能正常顯示，新的beta版本這次好像是改進(jìn)了，最近重新安裝了一下。

先點(diǎn)擊這里來看看demo效果。(內(nèi)有源文件下載)

這次帶來的是iphone6的體驗(yàn)效果，主要實(shí)現(xiàn)了以下幾種交互：

1. 待機(jī)黑屏狀態(tài)下，電源鍵和Home鍵的操作
2. 屏幕顯示時(shí)背景圖片的縮放效果
3. 鎖屏狀態(tài)下的解鎖
4. 密碼解鎖操作
5. 主界面圖標(biāo)的縮放效果
6. 系統(tǒng)菜單彈出效果

為了協(xié)調(diào)各種操作場(chǎng)景，每一種操作和效果都使用了較多的事件處理，這個(gè)例子里充分使用了組件樣式設(shè)置、動(dòng)態(tài)面板的使用，組件的隱藏和顯示、移動(dòng)效果、縮放效果、函數(shù)/變量的使用。下面說明一下幾個(gè)交互場(chǎng)景中的關(guān)鍵內(nèi)容，以供交流學(xué)習(xí)：

1、待機(jī)黑屏狀態(tài)下，電源鍵和Home鍵的操作

1）黑屏的樣式：使用了黑色背景，加上一個(gè)三角形部件，三角形的填充色為白色漸變，體現(xiàn)屏幕的高光。

2）屏幕外殼：從網(wǎng)上搜索了一個(gè)iphone6的外殼，ps稍微處理一下，去掉四周的雜色

3）給電源鍵和Home鍵處添加熱點(diǎn)(就沒有使用圖形按鈕了)，處理單擊事件。

2、屏幕顯示時(shí)背景圖片的縮放效果

我們知道iphone在鎖定狀態(tài)下，按電源鍵或Home鍵，顯示主屏幕后，主屏的背景的圖片會(huì)有一種縮放效果?？s放效果在axure8版本之前不太好處理（只能使用動(dòng)態(tài)面板的背景圖方式），axure8版本里提供了setSize方法，配合動(dòng)畫效果就可以實(shí)現(xiàn)縮放效果。

3、鎖屏狀態(tài)下的解鎖

iphone的滑動(dòng)解鎖效果的出現(xiàn)讓大家眼前一亮，一些新的app都經(jīng)常使用這種交互，就連密碼驗(yàn)證也開始使用這種方式了。加上滑動(dòng)解鎖時(shí)的文字上的光照效果，看起來很酷炫。

這里使用了部件的顯示/隱藏事件+移動(dòng)方法，實(shí)現(xiàn)滑動(dòng)解鎖動(dòng)畫。有一個(gè)小技巧需要說明一下，就是光照效果是在文字的背后的，這是如何實(shí)現(xiàn)的呢？

我們使用了在背景圖上摳下文字鏤空區(qū)域，將背景圖保存成png格式（帶有透明背景區(qū)域），再使用PS制作一個(gè)背景透明發(fā)光效果的png圖片，最后在axure里，將發(fā)光效果的圖片放在背景圖的鏤空文字后面，循環(huán)移動(dòng)發(fā)光效果的圖片。

鎖屏界面上的時(shí)間顯示，使用了系統(tǒng)的函數(shù)，獲取小時(shí)和分鐘數(shù)，處理小時(shí)和分鐘時(shí)，對(duì)小時(shí)和分鐘小于10的情況下，數(shù)字前補(bǔ)齊了0，這樣顯示格式為00:00，都是兩位，保證了美觀。

3、密碼解鎖操作

在鎖屏界面，向右滑動(dòng)界面，顯示出輸入4位密碼的界面，輸入4位數(shù)字（這里隨便輸入4位）即可進(jìn)入主界面。也可以刪除當(dāng)前輸入的密碼，密碼刪除完會(huì)自動(dòng)退會(huì)到鎖屏主界面

4、主界面圖標(biāo)的縮放效果

當(dāng)用戶解鎖完成，進(jìn)入主界面時(shí)，iphone的各個(gè)應(yīng)用圖標(biāo)以動(dòng)態(tài)的效果顯示到桌面上。使用了移動(dòng)效果從屏幕外部移動(dòng)到桌面上

5、系統(tǒng)菜單彈出效果

無論在鎖屏狀態(tài)，還是進(jìn)入主界面，向上滑動(dòng)時(shí)，會(huì)彈出系統(tǒng)菜單（菜單里的各個(gè)子項(xiàng)沒有繼續(xù)處理），再次單擊系統(tǒng)菜單會(huì)下向收起隱藏。

小結(jié)：

這個(gè)例子只是簡(jiǎn)單實(shí)現(xiàn)了iphone6的鎖屏及主界面的交互效果，麻雀雖小，五臟俱全哦，其實(shí)用到了axure里的很多知識(shí)點(diǎn)，是一個(gè)綜合應(yīng)用的例子。

axure8新增的設(shè)置部件大小、旋轉(zhuǎn)等增強(qiáng)了動(dòng)畫的實(shí)現(xiàn)效果，但是如何通過代碼設(shè)置部件的背景色、透明度等樣式屬性？期待以后肯定也能支持這樣的功能。

本次例子的主要缺點(diǎn)：在交互動(dòng)畫效果中，滑動(dòng)效果沒有和下個(gè)界面之間做到無縫的連貫，例如向右滑動(dòng)的過程中，左側(cè)密碼輸入顯示的界面沒有同步顯示（如果不使用動(dòng)態(tài)面板，其實(shí)也可以做到這種效果，但移動(dòng)過程中的漸變模糊效果無法達(dá)到）。

其它不足之處，還望各位指正。

本文由 @Axure原型設(shè)計(jì)工場(chǎng)?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。