本文主要介紹了用Axure制作高保真天氣APP以及色彩主題切換~

一、效果展示：

原型體驗(yàn)地址：https://p5eysh.axshare.com/#c=2

二、操作分析

1. 點(diǎn)擊index頁面的上箭頭按鈕，天氣詳情上滑出現(xiàn)在屏幕底部，中間的信息移動(dòng)到右上角，上箭頭上移變成下箭頭。
2. 天氣詳情，點(diǎn)擊左右箭頭可以查看未來9天的天氣。
3. 點(diǎn)擊右上角的更多頁面，進(jìn)入色彩主題設(shè)置頁面。
4. 選擇一個(gè)喜歡的主題，點(diǎn)擊保存，天氣APP主題發(fā)生相應(yīng)的變化。

三、關(guān)鍵元素

動(dòng)態(tài)面板。

四、實(shí)現(xiàn)步驟

4.1 準(zhǔn)備階段

1.首先拖入一個(gè)動(dòng)態(tài)面板，設(shè)置其寬高為375*667，設(shè)置兩個(gè)state，分別取名為“天氣”、“設(shè)置”。

2.進(jìn)入天氣頁面，拖入一個(gè)動(dòng)態(tài)面板，取名為“背景1”，設(shè)置4個(gè)state，分別為state 1~state 4。分別進(jìn)入這4個(gè)頁面，拖入一個(gè)375*667的矩形，取消矩形邊框，設(shè)置矩形圓角半徑為12，分別為在state1 ~state 4中的矩形填充如下圖所示的漸變色（可依據(jù)自己喜歡的顏色自定義喲）。

3.在天氣頁面，拖入文本標(biāo)簽和icon，擺放至如下圖所示的位置，icon可在iconfont阿里元件庫中下載使用~這里設(shè)置的MonDay的字體大小為22,“28”字體大小為68。

4.在天氣頁面，拖入一個(gè)375*501的矩形，取消邊框，設(shè)置背景色為透明。然后拖入文本標(biāo)簽和對(duì)應(yīng)的icon，做成氣候條件、日落日出、風(fēng)條件三項(xiàng)詳細(xì)信息，拖入兩個(gè)動(dòng)態(tài)面板，分別叫做9天的預(yù)測(cè)和點(diǎn)點(diǎn)點(diǎn)（比較隨意，哈哈哈~），最后將此步驟添加的元件組合，如下圖所示：

5.將步驟4中的組合取名“詳情”，將詳情（組合）設(shè)為隱藏。這就完成了天氣頁面的準(zhǔn)備工作。

6.進(jìn)入設(shè)置頁面，復(fù)制步驟2所說的背景1（動(dòng)態(tài)面板）到該頁面，修改名字為背景2。

7.拖入一個(gè)本文標(biāo)簽，輸入文字“設(shè)置”，字號(hào)20 ，顏色白色，放置在背景2的左上角。設(shè)置的左邊放置一個(gè)設(shè)置icon，右上角拖入一個(gè)關(guān)閉icon。

8.拖入一個(gè)300*336的無邊框的矩形，填充白色，圓角半徑：12，設(shè)置陰影（x:0，y:5，模糊：20，默認(rèn)灰色）。拖入一個(gè)文本標(biāo)簽，輸入“請(qǐng)選擇一個(gè)主題”，字號(hào)14，黑色，加粗，放在這個(gè)矩形的左上角。

9.拖入4個(gè)125*92的無邊框的矩形，圓角半徑：12，分別填充如下圖所示的顏色。拖入四個(gè)打鉤icon，分別取名為1~4，填充白色，處理第一個(gè)默認(rèn)顯示，其余設(shè)為隱藏。拖入一個(gè)按鈕，輸入保存，按鈕填充顏色設(shè)為透明，邊框字體設(shè)為白色，圓角半徑設(shè)為：12，如下圖所示：

到此準(zhǔn)備工作就算結(jié)束啦~下面開始設(shè)置交互~

4.3 交互設(shè)置

（1）首先回到天氣頁面，對(duì)下面的上箭頭進(jìn)行交互設(shè)置。如下圖所示：

（2）然后為9天的預(yù)測(cè)上面的左右按鈕設(shè)置交互：

（3）右上角的更多icon設(shè)置交互：

（4）進(jìn)入設(shè)置頁面，為右上角的關(guān)閉按鈕設(shè)置交互：

（5）然后是主題色彩矩形設(shè)置交互：

（6）最后是為保存按鈕設(shè)置交互：

交互設(shè)置完畢，點(diǎn)擊預(yù)覽~~~

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

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