照虎画虎——简单WeUI模板UX设计学习

虽然造型艺术分为不同的行业和职业，但总有相似之处。UI/UX设计方案也是一种造型艺术。UI/UX设计方案和工艺美术一样，必须模仿其他经典作品才能提升水平。

但正所谓“画瓢”，如果你模仿的对象不合适，很可能只能塑造而没有意义。那么，哪里能找到合适的临摹材料来保证“照虎画虎”呢？其实很多著名手机软件的新发展都值得我们借鉴，比如WeUI，一个小程序的设计工具。

首先大家一定要认准WeUI的模板。其实找到这一条并不难。在Mockplus的新项目中，有很多世界各地优秀app的模板，WeUI就在其中。这个模板虽然只有几页，但也可以说是简明扼要。UX设计的所有要素都包含在这里。自然，你也可以在手机微信的海量软件开发平台上找到本案的所有文本文档。

我们先来看看这里的实际效果。由于这里只选择了几个符号页面，所以不涉及页面间自动跳转的设置。请在左侧 *** 作面板中独立切换页面。

这个模板的关键是在第一页的底部打开这个模板。让我们实际看看这个页面是如何设计的。

基本的组件放置很少讲，关键是交互。起初，在前半页，中间的黄色区域实际上是两个重叠的“组”。这两组分别符合两个条件:完成和数据加载。点击“成功提醒”，会出现“已完成”d出框，1.5秒后完全淡化。点击“加载中提醒”，数据加载中的d出框引起同样的交互手势。好了，你已经看到实际效果了，那么，接下来的问题就是:如何完成？

这种实际效果的实际效果是自动d出和淡出的。其实也不是太难。用“照片”、“外观”、“单行文字”组成这个“成品”。然后，选中该零件，右键打开菜单，选择“组装成组”，在右侧属性控制面板中撤销该组的可见选项。

接下来的交互设置:拖拽“成功提醒”到这个黄色区域，选择“当你点击”>“显示信息/隐藏”的交互命令，然后打开正下方的主参数控制面板，选择“显示信息”。只需点击显示消息“已完成”的实际效果。那么如果出现的组设置为自动淡化呢？其实也不是很难。只要稍微修改一下上一步的实际 *** 作，就可以完全自动消失。

或者将“成功提醒”的连接点拖动到“已完成”区域，选择交互指令“当你点击”>:“显示信息/隐藏”，在正下方的主参数控制面板中，必须修改设置。这里可以选择“隐藏”，然后在“延迟时间”选项中输入“1500”，相当于1500ms的延迟时间，也就是1.5秒。这样点击“成功提醒”后1.5秒“已完成”会自动消失。

同理，可以设置为“数据加载”。

嗯，就是这样。各位，好像这一页的后半部分。

这里的组件看起来好像都是一个整体，但事实上...这不是战斗的一部分。看到这里是不是清楚多了？

然后是交互设置。如果把这个祖母绿矩形框变成一个“活的”时间线会怎么样？这里说明中的“调整规范”，在为每一个外观设置“调整规范”的整个过程中，一定要记住进行两次调整。第一，这里是“定”，需要选择外观部分合适的发展方向。然后是“实施时间”。这部分一定要调整，否则你的外观部分会在一瞬间长大，体现不出很好的视觉冲击力。

这里的“提交”按钮只是一个简单的点击组件显示信息的方式，由此不可见的组件的其他交互设置这里不讨论。

实际上，第三页的交互与第一页和上半部分的交互是基于相同的实际效果，只是在设置了显示信息后，这里的亮红色标志没有被隐藏。第二页和第四页主要是关注零件的样式，希望给大家看一些参考。

怎么样？这样看来，你是不是已经学会了自动淡入淡出和时间轴的交互指令了？新案例项目中也有很多模板。下次再给你详细介绍其他有效的功能吧。