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

艺术虽然分为独立的各个领域，可是总有相通之处。UI/UX设计也是一种艺术，就像美术同样，UI/UX的设计也须要大量的临摹其余优秀做品来提升本身的水平。

不过俗话说：“照猫画虎”，若是你临摹的对象不合适，颇有可能只得其形而不得其意。那么，到哪里去寻找合适的临摹素材，作到“照虎画虎”？其实不少知名软件的新动向，都值得咱们去参考，好比微信小程序的设计工具：WeUI。

首先咱们须要找到WeUI的模板，其实想要找到这个，也并非很难，在Mockplus的例子项目中，有大量的国内外的优秀App的模板，WeUI也在这其中。虽然这个模板中页面有点少，不过也可谓言简意赅，UX设计中须要的元素，这里都有涉及到。固然，你也能够到微信的公众开发平台上找到这个例子的所有文档。

咱们先在这里看一下效果。由于这里选取的只是几个具备表明性的页面，因此并不涉及页面间跳转的设置，各位看官还请在左侧的控制面板中自行切换页面。

这个模板的重点是在第一个页面，下面打开这个模板，咱们来具体看一下这个页面是如何设计的。

基础的组件摆放就很少说了，主要看交互。首先来看上半个页面，中间黄色的区域实际上是两个重合放置的“组”，这两个组分别对应两种状况：已完成和数据加载中。点击“成功提示”，出现“已完成”提示框，并在1.5秒以后自动消失。点击“加载中提示”，数据加载中的提示框产生相同的交互动做。好的，效果咱们已经看到了，那么，问题来了：如何实现呢？

这种效果弹窗而且自动消失的效果其实并不难，用“图片”、“形状”和“单行文字”来组成这个“已完成”，而后选中这些组件，单击右键打开菜单，选择“合并为组”，而且在右侧的属性面板中取消这个组的可见选项。

接下来的交互设置：拖动“成功提示”到这个黄色的区域，选择“点击时” > “显示/隐藏”的交互命令，而后打开下方的参数面板，选择“显示”。这样就实现点击显示“已完成”的效果。那么若是设置这个出现的组自动消失呢？其实很简单，上一步的操做稍加改动，就能够实现自动消失了。

咱们仍是拖拽“成功提示”的这个连接点到“已完成”的区域，选择交互命令“点击时” > "显示/隐藏"，在下方的参数面板中，设置须要作一些改动，这里咱们选择“隐藏”，而后在“延迟”的选项中输入“1500”，至关于延迟了1500毫秒，也就是1.5秒。这样就能够在点击“成功提示”的1.5秒后使“已完成”自动消失了。

一样的方法，咱们设置到“数据加载中”便可。

嗯，就这样。咱们来看这个页面的下半页。

这里的组件，看上去好像都是一个，其实……它不是一个组件在战斗，看到这里是否是清楚了不少？

而后就是交互的设置了，若是把这些绿色的矩形变成“活”的进度条呢？在这里，命令中的“调整尺寸”，在完成对每一个形状分别的“调整尺寸”设置的过程当中，必定要记得作两个调整，首先是“固定到”这里，要选择形状组件正确的成长方向。而后是“执行时长”，这个位置必定要调整，否则你的形状组件会在一瞬间就长大了，不能体现出较好的视觉效果。

“上传”按钮这里只是一个简单的点击组件显示另外一个不可见组件的交互设置，这里就再也不多说了。

第三页的交互其实和第一和上半部分的交互效果基本是相同的，只不过这里红色的图标设置过显示以后就再也不设置隐藏，第二页和第四页主要是关注组件的样式，但愿能够给你们提供一些参考。

怎么样？这样一来，自动消失和进度条的交互命令是否是已经学会了呢？例子项目里还有不少的模板，下一次在向你们介绍其余有用的功能吧。