原型設(shè)計(jì)：百詞斬單詞翻轉(zhuǎn)還原效果實(shí)現(xiàn)

1 評(píng)論 12999 瀏覽 13 收藏 4 分鐘

最近無意間被百詞斬官網(wǎng)首頁的頁面效果所吸引，當(dāng)我們選擇一個(gè)不認(rèn)識(shí)的單詞時(shí)，單詞會(huì)進(jìn)行翻轉(zhuǎn)，并顯示為圖片狀態(tài)，并且會(huì)在一段時(shí)間后還原為單詞狀態(tài)。依照官網(wǎng)的樣式，根據(jù)自己的理解繪制了一個(gè)組件翻轉(zhuǎn)還原的原型。

百詞斬官網(wǎng)：

我繪制的原型與官網(wǎng)的唯一不同之處在于，百詞斬官網(wǎng)是鼠標(biāo)懸停的效果，而我使用的單擊圖片的效果：

以下為我制作該原型的步驟：

（1）創(chuàng)建組件

組件主要包括兩類：一是圖片組件，二是單詞組件，圖片采用截圖的方式，單詞則選擇三個(gè)300*260的矩形元件。將圖片和單詞的大小進(jìn)行統(tǒng)一，并在其中輸入單詞內(nèi)容即可，并按照?qǐng)D片在上，單詞在下的規(guī)則放置于頁面中央。

（2）翻轉(zhuǎn)和還原效果實(shí)現(xiàn)

首先，復(fù)制三個(gè)頁面，并對(duì)四個(gè)頁面進(jìn)行命名，分別為：home、crawl、despise、spray四個(gè)頁面:。home頁面作為初始狀態(tài)，并與其他三個(gè)頁面建立連接。

以crawl單詞的翻轉(zhuǎn)效果為例，當(dāng)單擊crawl單詞時(shí)，跳轉(zhuǎn)到crawl頁面。

將圖片一和單詞一的動(dòng)效均設(shè)置為垂直翻轉(zhuǎn)顯示，需要注意的是一定要將單詞組件和圖片組件均設(shè)置為垂直翻轉(zhuǎn)效果。

頁面在翻轉(zhuǎn)后會(huì)顯示圖片組件內(nèi)容，我們只需在默認(rèn)狀態(tài)里，將單詞組件置底，這樣就可以顯示在翻轉(zhuǎn)之后顯示圖片組件的內(nèi)容。

翻轉(zhuǎn)效果實(shí)現(xiàn)后的一定時(shí)間內(nèi)會(huì)回歸到初始的單詞狀態(tài)狀態(tài)，我們采用原型設(shè)計(jì)的狀態(tài)功能進(jìn)行實(shí)現(xiàn)，添加一個(gè)新的狀態(tài)在全局狀態(tài)中添加定時(shí)器。將默然狀態(tài)中的定時(shí)器鏈接到狀態(tài)二中，將狀態(tài)二中的單詞頁面置頂并將定時(shí)器鏈接到home頁面，定時(shí)器均設(shè)置為0.1秒，這樣就完成了圖片翻轉(zhuǎn)和還原的效果，其他兩個(gè)頁面的實(shí)現(xiàn)方法與crawl一致。

以上就是實(shí)現(xiàn)組件翻轉(zhuǎn)還原的過程，以上僅僅是我個(gè)人對(duì)于原型設(shè)計(jì)的一些理解，若有不足，還望指正！

 

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

題圖來自 Pexels，基于 CC0 協(xié)議

更多精彩內(nèi)容，請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App