想要制作一個(gè)日期選擇框，該怎么制作選擇日期的效果呢？平時(shí)我們查看電子日歷的時(shí)候，可以根據(jù)年份月份日期也發(fā)生改變，并可以點(diǎn)擊選擇日期，該怎么實(shí)現(xiàn)這個(gè)效果呢？下面我們就來看看詳細(xì)的教程。

原型設(shè)計(jì)工具Axure RP Pro 8.1特別版 中文漢化特別版(附漢化包+注冊碼+安裝教程)

• 類型：輔助設(shè)計(jì)
• 大?。?/span>90.5MB
• 語言：簡體中文
• 時(shí)間：2018-05-24

查看詳情

1、首先我們在Axure中拖動一個(gè)矩形作為日期選擇呈現(xiàn)，命名為日期選擇框，并按需設(shè)計(jì)效果，這里我設(shè)計(jì)懸停及選中為淺藍(lán)色

2、接著拖動一個(gè)矩形框作為承載日期的底部面板，在樣式中設(shè)計(jì)陰影效果

3、接著制作相關(guān)日期，相關(guān)箭頭可以在阿里巴巴矢量圖標(biāo)庫找到。拖動兩個(gè)矩形作為年和日期擺放，用兩種箭頭作為年和月的調(diào)整，即點(diǎn)擊雙箭頭跳上一年下一年的效果，單箭頭跳換上個(gè)月下個(gè)月的效果。同時(shí)為箭頭設(shè)置懸停效果

4、接下來設(shè)計(jì)日期，不屬于本月的時(shí)間字體較屬于本月的更灰些，同時(shí)鼠標(biāo)移至對應(yīng)日期時(shí)字體變?yōu)樗{(lán)色效果

5、之后將有關(guān)日期的組合并轉(zhuǎn)換為動態(tài)面板，并設(shè)置為隱藏

6、在日期選擇框中設(shè)計(jì)事件交互，當(dāng)點(diǎn)擊時(shí)切換顯示動態(tài)面板并向下滑動、隱藏動態(tài)面板并向上滑動。如圖

7、接下來設(shè)計(jì)選中相關(guān)日期時(shí)，日期選擇框文本變?yōu)檫x中日期的時(shí)間，以1號為例，新建單擊交互事件，當(dāng)點(diǎn)擊時(shí)日期選擇框?yàn)楫?dāng)前年月（即一開始用來表示2019年12月的矩形）文本值加上選中的日期。動態(tài)面板向上滑動隱藏。設(shè)計(jì)完事件后點(diǎn)擊預(yù)覽沒問題之后將1號上的事件復(fù)制黏貼到其他可選擇的日期上。之后點(diǎn)擊預(yù)覽，可以看見基本的日期選中效果完成。

8、接下來我們要設(shè)計(jì)關(guān)于年和月的切換。關(guān)于這部分的思路大致如下：因?yàn)槊恳荒昝總€(gè)月所對應(yīng)的日期都是不一樣的，所以需要利用動態(tài)面板建立多個(gè)狀態(tài)，當(dāng)點(diǎn)擊時(shí)設(shè)置動態(tài)面板切換到對應(yīng)的狀態(tài)即可。有興趣的朋友可以思考一下如何設(shè)計(jì)。

9、由于Axure演示原型時(shí)不需要這么準(zhǔn)確，所以我們可以點(diǎn)擊相關(guān)箭頭時(shí)使文本變成對應(yīng)文本就行，但是問題在于我們沒辦法知道當(dāng)前點(diǎn)擊時(shí)需要變成什么文本，點(diǎn)擊了多少次。所以要利用全局變量來實(shí)現(xiàn)這個(gè)效果。

10、回到年月的矩形框，我們先新建兩個(gè)全局變量，一個(gè)作為年，一個(gè)作為月，然后默認(rèn)年為2019，月默認(rèn)為12。

11、關(guān)于箭頭<的邏輯如下：當(dāng)點(diǎn)擊<時(shí)，

1）判斷當(dāng)前月是不是1月，如果是1月，全局變量year減一，全局變量month值為12月。

2）如果不是1月就全局變量month減一

關(guān)于年月的文本值為year年month月

12、關(guān)于箭頭>的邏輯如下：

1）如果當(dāng)前月為12月，全局變量year加一，全局變量month值為1月

2）如果當(dāng)前月不是12月，則全局變量month加一

關(guān)于年月的文本值為year年month月

13、關(guān)于箭頭《的邏輯比較簡單，點(diǎn)擊時(shí)全局變量year-1即可，最后再設(shè)置關(guān)于年月的文本值為year年month月。箭頭》同理，點(diǎn)擊時(shí)全局變量year+1即可，最后再設(shè)置關(guān)于年月的文本值為year年month月。如下圖

14、最后再點(diǎn)擊預(yù)覽，基本的日期選擇器交互效果就完成了

以上就是Axure設(shè)計(jì)日期選擇框的教程，希望大家喜歡，請繼續(xù)關(guān)注腳本之家。

相關(guān)推薦：

Axure中繼器怎么制作穿梭框效果?

axure怎么制作頁面標(biāo)簽切換的效果?

Axure模型怎么添加角標(biāo)? axure四分之一圓角標(biāo)的做法

最新評論