当前位置: 主页 > 视频 >
Axure教程:天气APP及色彩主题的切换
发布日期:2021-12-30 01:01   来源:未知   阅读:

  1.首先拖入一个动态面板,设置其宽高为375*667,设置两个state,分别取名为“天气”、“设置”。

  2.进入天气页面,拖入一个动态面板,取名为“背景1”,设置4个state,分别为state 1~state 4。分别进入这4个页面,拖入一个375*667的矩形,取消矩形边框,设置矩形圆角半径为12,分别为在state1 ~state 4中的矩形填充如下图所示的渐变色(可依据自己喜欢的颜色自定义哟)。

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

  4.在天气页面,拖入一个375*501的矩形,取消边框,设置背景色为透明。然后拖入文本标签和对应的icon,做成气候条件、日落日出、风条件三项详细信息,拖入两个动态面板,分别叫做9天的预测和点点点(比较随意,哈哈哈~),最后将此步骤添加的元件组合,如下图所示:

  5.将步骤4中的组合取名“详情”,将详情(组合)设为隐藏。这就完成了天气页面的准备工作。

  6.进入设置页面,复制步骤2所说的背景1(动态面板)到该页面,修改名字为背景2。

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

  8.拖入一个300*336的无边框的矩形,填充白色,圆角半径:12,设置阴影(x:0,y:5,模糊:20,默认灰色)。拖入一个文本标签,输入“请选择一个主题”,字号14,黑色,加粗,放在这个矩形的左上角。

  9.拖入4个125*92的无边框的矩形,圆角半径:12,分别填充如下图所示的颜色。拖入四个打钩icon,分别取名为1~4,填充白色,处理第一个默认显示,其余设为隐藏。拖入一个按钮,输入保存,按钮填充颜色设为透明,边框字体设为白色,圆角半径设为:12,如下图所示:

  本文由 @ lily_wan 原创发布于人人都是产品经理。未经许可,禁止转载

  九天的预测和点点点的动态面板是咋做的呢?方便的话发个原型到邮箱吧?,谢谢

  不好意思,没有说清,文章开篇的那个GIF图片是用什么工具做的?看着的挺清晰的,我用了许多工具把视频转成GIF图片,都失线

  听到很多言论说在中国程序员是吃青春饭的,那么产品经理呢,也吃青春饭吗?

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立9年举办在线+期,线+场,产品经理大会、运营大会20+场澳门马正版免费资料,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。分享下做好一个硅藻泥加盟的小知识点