文档章节

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

jongde
 jongde
发布于 2016/11/01 21:47
字数 1214
阅读 151
收藏 0

艺术虽然分为独立的各个领域,但是总有相通之处。UI/UX设计也是一种艺术,就像美术一样,UI/UX的设计也需要大量的临摹其他优秀作品来提高自己的水平。

不过俗话说:“照猫画虎”,如果你临摹的对象不合适,很有可能只得其形而不得其意。那么,到哪里去寻找合适的临摹素材,做到“照虎画虎”?其实很多知名软件的新动向,都值得我们去参考,比如微信小程序的设计工具:WeUI。

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

我们先在这里看一下效果。因为这里选取的只是几个具有代表性的页面,所以并不涉及页面间跳转的设置,各位看官还请在左侧的控制面板中自行切换页面。

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

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

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

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

我们还是拖拽“成功提示”的这个链接点到“已完成”的区域,选择交互命令“点击时” > "显示/隐藏",在下方的参数面板中,设置需要做一些改动,这里我们选择“隐藏”,然后在“延迟”的选项中输入“1500”,相当于延迟了1500毫秒,也就是1.5秒。这样就可以在点击“成功提示”的1.5秒后使“已完成”自动消失了。

同样的方法,我们设置到“数据加载中”即可。

嗯,就这样。我们来看这个页面的下半页。

这里的组件,看上去好像都是一个,其实……它不是一个组件在战斗,看到这里是不是清楚了很多?

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

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

第三页的交互其实和第一和上半部分的交互效果基本是相同的,只不过这里红色的图标设置过显示之后就不再设置隐藏,第二页和第四页主要是关注组件的样式,希望可以给大家提供一些参考。

怎么样?这样一来,自动消失和进度条的交互命令是不是已经学会了呢?例子项目里还有很多的模板,下一次在向大家介绍其他有用的功能吧。

© 著作权归作者所有

jongde
粉丝 8
博文 260
码字总数 323940
作品 0
成都
私信 提问
微信公众号开发C#系列-12、微信前端开发利器:WeUI

1、前言 通过前面系列文章的学习与讲解,相信大家已经对微信的开发有了一个全新的认识。后端基本能够基于盛派的第三方sdk搞定大部分事宜,剩下的就是前端了。关于手机端的浏览器的兼容性问题...

NET快速开发框架
05/28
0
0
bosenger/VuxAxure

VuxAxure 起源 之前公司的产品有用过Vux的Vue框架,体验还不错,使用的范围也比较广,而且是基于WeUI做的优化,所以在微信中使用也符合WeUI的样式。所以决定做一套Vux的Axure组件库,既可以方...

bosenger
04/14
0
0
WeUI 2.0.0 发布,微信 Web 应用设计 UI 库

WeUI 2.0.0 发布了,上个版本(1.1.3)在去年六月底发布。WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。 新...

段段段落
05/06
7.5K
2
微信小程序开发之——weui-wxss的使用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/SundayAaron/article/details/53607838 概述: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设...

SundayAaron
2016/12/13
0
0
WeUI 为微信 Web 服务量身设计

https://github.com/weui/weui WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 pr...

hi30059478
2016/02/06
7
0

没有更多内容

加载失败,请刷新页面

加载更多

MongoDB系列-在复制集(replication)以及分片(Shard)中创建索引

关注我,可以获取最新知识、经典面试题以及微服务技术分享   在使用MongoDB时,在创建索引会涉及到在复制集(replication)以及分片(Shard)中创建,为了最大限度地减少构建索引的影响,在副本...

ccww_
17分钟前
12
0
SAP HANA数据库multi container模式JDBC链接connection refused

报错如下信息 com.sap.db.jdbc.exceptions.JDBCDriverException: SAP DBTech JDBC: Cannot connect to jdbc:sap://xxx.xxx.xxx.xxx:30015 [Cannot connect to host xxx.xxx.xxx.xxx:30015 [C......

flash胜龙
42分钟前
27
0
c++ 虚基类

c++ 虚基类 p556

天王盖地虎626
48分钟前
83
0
k8s删除Terminating状态的命名空间

背景: 我们都知道在k8s中namespace有两种常见的状态,即Active和Terminating状态,其中后者一般会比较少见,只有当对应的命名空间下还存在运行的资源,但是该命名空间被删除时才会出现所谓的...

Andy-xu
59分钟前
70
0
seata源码阅读笔记

seata源码阅读笔记 本文没有seata的使用方法,怎么使用seata可以参考官方示例,详细的很。 本文基于v0.8.0版本,本文没贴代码。 seata中的三个重要部分: TC:事务协调器,维护全局事务和分支...

东都大狼狗
今天
44
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部