Axure教程：气候APP及色彩主题的切换

一、效果展示：

二、操作剖析

点击index页面的上箭头按钮，景象详情上滑涌如今屏幕底部，中间的信息移动到右上角，上箭头上移变成下箭头。
景象详情，点击旁边箭头可以查看未来9天的景象。
点击右上角的更多页面，进入色彩主题设置页面。
选择一个喜好的主题，点击保存，景象APP主题发生相应的变革。

三、关键元素

动态面板。

四、实现步骤4.1 准备阶段

1.首先拖入一个动态面板，设置其宽高为375667，设置两个state，分别取名为“景象”、“设置”。

2.进入景象页面，拖入一个动态面板，取名为“背景1”，设置4个state，分别为state 1~state 4。
分别进入这4个页面，拖入一个375667的矩形，取消矩形边框，设置矩形圆角半径为12，分别为在state1 ~state 4中的矩形添补如下图所示的渐变色（可依据自己喜好的颜色自定义哟）。

3.在景象页面，拖入文本标签和icon，摆放至如下图所示的位置，icon可在iconfont阿里元件库中下载利用~这里设置的MonDay的字体大小为22,“28”字体大小为68。

4.在景象页面，拖入一个375501的矩形，取消边框，设置背景色为透明。
然后拖入文本标签和对应的icon，做成景象条件、早晚照出、风条件三项详细信息，拖入两个动态面板，分别叫做9天的预测和点点点（比较随意，哈哈哈~），末了将此步骤添加的元件组合，如下图所示：

5.将步骤4中的组合取名“详情”，将详情（组合）设为隐蔽。
这就完成了景象页面的准备事情。

6.进入设置页面，复制步骤2所说的背景1（动态面板）到该页面，修正名字为背景2。

7.拖入一个本文标签，输入笔墨“设置”，字号20 ，颜色白色，放置在背景2的左上角。
设置的左边放置一个设置icon，右上角拖入一个关闭icon。

8.拖入一个300336的无边框的矩形，添补白色，圆角半径：12，设置阴影（x:0，y:5，模糊：20，默认灰色）。
拖入一个文本标签，输入“请选择一个主题”，字号14，玄色，加粗，放在这个矩形的左上角。

9.拖入4个12592的无边框的矩形，圆角半径：12，分别添补如下图所示的颜色。
拖入四个打钩icon，分别取名为1~4，添补白色，处理第一个默认显示，别的设为隐蔽。
拖入一个按钮，输入保存，按钮添补颜色设为透明，边框字体设为白色，圆角半径设为：12，如下图所示：

到此准备事情就算结束啦~下面开始设置交互~

4.3 交互设置

（1）首先回到景象页面，对下面的上箭头进行交互设置。
如下图所示：

（2）然后为9天的预测上面的旁边按钮设置交互：

（3）右上角的更多icon设置交互：

（4）进入设置页面，为右上角的关闭按钮设置交互：

（5）然后是主题色彩矩形设置交互：

（6）末了是为保存按钮设置交互：

交互设置完毕，点击预览~~~

本文由 @ lily_wan 原创发布于大家都是产品经理。
未经容许，禁止转载

题图来自Unsplash，基于CC0协议