Axure如何設計日期選擇框

前篇經驗分享了axure有關設計時候選擇框的方式，與時候分歧的是日期選擇框涉及的是選擇日期。這里再為大師介紹關于日期選擇框的設計方式。

東西/原料

Axure 9

方式/步調

1
起首我們在Axure中拖動一個矩形作為日期選擇呈現，定名為日期選擇框，并按需設計結果，這里我設計懸停及選中為淺藍色
2
接著拖動一個矩形框作為承載日期的底部面板，在樣式中設計暗影結果
3
接著建造相關日期，相關箭頭可以在阿里巴巴矢量圖標庫找到。
1、拖動兩個矩形作為年和日期擺放，用兩種箭頭作為年和月的調整，即點擊雙箭頭跳上一年下一年的結果，單箭頭跳換上個月下個月的結果。同時為箭頭設置懸停結果
4
接下來設計日期，不屬于本月的時候字體較屬于本月的更灰些，同時鼠標移至對應日期時字體變為藍色結果
5
之后將有關日期的組歸并轉換為動態面板，并設置為埋沒
6
在日期選擇框中設計事務交互，當點擊時切換顯示動態面板并標的目的下滑動、埋沒動態面板并標的目的上滑動。如圖
7
接下來設計選中相關日期時，日期選擇框文本變為選中日期的時候，以1號為例，新建單擊交互事務，
1、當點擊時日期選擇框為當前年代（即一起頭用來暗示2019年12月的矩形）文本值加上選中的日期。
2、動態面板標的目的上滑動埋沒
3、設計完事務后點擊預覽沒問題之后將1號上的事務復制黏貼到其他可選擇的日期上
4、之后點擊預覽，可以看見根基的日期選中結果完當作
8
接下來我們要設計關于年和月的切換。關于這部門的思緒大致如下：
因為每一年每個月所對應的日期都是紛歧樣的，所以需要操縱動態面板成立多個狀況，當點擊時設置動態面板切換到對應的狀況即可。有樂趣的伴侶可以思慮一下若何設計。
9
因為Axure演示原型時不需要這么精確，所以我們可以點擊相關箭頭時使文本釀成對應文本就行，可是問題在于我們沒法子知道當前點擊時需要釀成什么文本，點擊了幾多次。所以要操縱全局變量來實現這個結果。
10
回到年代的矩形框，我們先新建兩個全局變量，一個作為年，一個作為月，然后默認年為2019，月默認為12。
11
關于箭頭<的邏輯如下：
當點擊<時，
1、判定當前月是不是1月，若是是1月，全局變量year減一，全局變量month值為12月。
2、若是不是1月就全局變量month減一
關于年代的文本值為year年month月
12
關于箭頭>的邏輯如下：
1、若是當前月為12月，全局變量year加一，全局變量month值為1月
2、若是當前月不是12月，則全局變量month加一
關于年代的文本值為year年month月
13
關于箭頭《的邏輯比力簡單，點擊時全局變量year-1即可，最后再設置關于年代的文本值為year年month月。
箭頭》同理，點擊時全局變量year+1即可，最后再設置關于年代的文本值為year年month月。如下圖
14
最后再點擊預覽，根基的日期選擇器交互結果就完當作了

發表于 2019-12-19 23:06
閱讀 ( 1010 )
分類：其他類型

Axure如何設計日期選擇框

東西/原料

方式/步調

你可能感興趣的文章

相關問題

0 條評論

作家榜 ?

推薦文章