博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序的原型设计尝鲜
阅读量:5824 次
发布时间:2019-06-18

本文共 768 字,大约阅读时间需要 2 分钟。

hot3.png

"小程序”来了,大世界要变了?微信小程序可能是近期业绩最火的话题之一了。

 

这个根植于微信流量巨无霸的应用,将对应用市场、对微商、电商、对企业的开发成本、获客成本将产生深远影响?将制造出绕开Google Play和AppStore的另一大App体系?将实现“知人性”的PM张小龙先生的“用后即走”的轻量App之梦?将秒杀传统的App?

 

虽有海量追捧者趋之若鹜,但也有冷静人士淡定的白眼。但无论如何,腾讯这步棋子既然落在了棋盘上,绝不能悔棋,更不可能半途而废,你我这样神经敏感的PM、UX,不尝鲜是不可能的。

 

说动就动,查找到微信小程序的设计规范后,让我们开始吧。造大梦的事儿还是让大佬们去干吧,咱们干点实在的。

 

干活儿首先得挑个工具,我这里使用了Mockplus,近期国内的一款比较流行的原型设计。比较顺手,线框、交互都能胜任。

 

首先尝试做WeUI的界面元素吧。经过一会儿的折腾,搞成了一套(好在WeUI的界面元素比不是太多)。有了这个,之后就方便了。

 

2af1348f-c734-4ab7-925e-e70dfbc15c34.png

 

在提示和上传页面中,我使用了交互,点击“成功提示”按钮,弹出提示。点击“上传”按钮,完成进度条的走动。

 

操作很简单:在Mockplus中选中按钮,直接拖拽到准备弹出的提示框上,设置“显示/隐藏”,并在消失时做了延迟处理。提示框的默认显示状态,设为“不可见”。

 

e038fb93-a825-44e8-9438-db51169eb7db.png

 

至于进度条的走动,是设置每个进度轨道的“调整尺寸”的交互(设置宽度变化),多拖拽几次鼠标,设置链接就好了,如图:

 

b81a0cf6-4e23-4d5e-a1a1-b3d52e76b2c9.png

 

好了,让我们来看看效果。点这里看我的成果:

 

 

52278dfa-deef-4766-a270-b57f418e565f.png

 

这个尝试到此暂时结束,页面不多,算是个半成品。但在制作时,我边做边琢磨微信在设计中的一些理念:简约、准确、易用。这个伟大的产品之所以在国内能够深入人心,还是有些道理的。

转载于:https://my.oschina.net/u/2008098/blog/754407

你可能感兴趣的文章
CentOS最小化安装系统开启网卡
查看>>
互联网+升级到智能+ 开启万物智联新时代
查看>>
Nginx + Tomcat (java )服务器部署
查看>>
Linux文本编辑器之Nano
查看>>
【原】IOS中KVO模式的解析与应用
查看>>
EntityFramework Core迁移时出现数据库已存在对象问题解决方案
查看>>
urb传输的代码分析【转】
查看>>
理解 QEMU/KVM 和 Ceph(3):存储卷挂接和设备名称
查看>>
一道算法题的一种O(n)解法
查看>>
ABP理论学习之NHibernate集成
查看>>
反射之动态创建对象
查看>>
隐马尔可夫模型学习小记——forward算法+viterbi算法+forward-backward算法(Baum-welch算法)...
查看>>
[MFC] CList
查看>>
[Android Pro] 完美Android Cursor使用例子(Android数据库操作)
查看>>
4 张 GIF 图帮助你理解二叉查找树
查看>>
c++中sizeof的分析
查看>>
线程间操作无效: 从不是创建控件的线程访问它的解决方法
查看>>
hdu 1236 排名
查看>>
【爆牙游记】黄山归来不看岳-日出。
查看>>
PHP面向对象深入研究之【继承】,减少代码重复
查看>>