文档章节

微信小程序的原型设计尝鲜

jongde
 jongde
发布于 2016/10/04 10:58
字数 591
阅读 46
收藏 0

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

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

 

 

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

 

 

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

 

http://run.mockplus.cn/Tnr9w9TyUKjXeDeR/index.html

 

 

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

© 著作权归作者所有

jongde
粉丝 8
博文 260
码字总数 323940
作品 0
成都
私信 提问
加载中

评论(1)

请勿吸烟
请勿吸烟
mockplus工具真棒
小程序 大假期,技术猿国庆假期的正确打开方式…

明天(10月1日)就是国庆黄金7天假了。作为技术猿,除了美美的睡一觉好像也没啥别的事了。与其窝在家里玩手机刷朋友圈,不如做个小程序玩玩。 微信小程序开发正当时,没有内测资格不要紧。这...

凝小紫
2016/09/30
5.8K
11
前端资源系列(3)-微信小程序开发资源汇总

微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者工具 - 官方 Egret Wing 3.2.x 支持微信...

xzavier
2018/08/27
0
0
番茄工作法小程序

番茄工作法小程序开发项目,类似Tide,但我们现在只是想先做一个prototype,所以只有5个页面,原型图已有,需要具体的开发人员,要求熟悉小程序开发,有过相关案例,沟通时会发送相关资料。...

zb1499513330954
2017/07/16
6
0
番茄工作法小程序

番茄工作法小程序开发项目,类似Tide,但我们现在只是想先做一个prototype,所以只有5个页面,原型图已有,需要具体的开发人员,要求熟悉小程序开发,有过相关案例,沟通时会发送相关资料。...

zb1499513330954
2017/07/16
43
0
你的年目标实现了吗,记一次开发微信小程序

前言:这是笔者第一次开发小程序,此前一直有打算自己做一个,并且能够上线使用,但一直找不到灵感,加上还需要服务器端、数据库等技能,所有一直没能实现。后来偶然看到微信小程序云开发(有...

雾空
2018/12/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring使用ThreadPoolTaskExecutor自定义线程池及实现异步调用

多线程一直是工作或面试过程中的高频知识点,今天给大家分享一下使用 ThreadPoolTaskExecutor 来自定义线程池和实现异步调用多线程。 一、ThreadPoolTaskExecutor 本文采用 Executors 的工厂...

CREATE_17
今天
5
0
CSS盒子模型

CSS盒子模型 组成: content --> padding --> border --> margin 像现实生活中的快递: 物品 --> 填充物 --> 包装盒 --> 盒子与盒子之间的间距 content :width、height组成的 内容区域 padd......

studywin
今天
7
0
修复Win10下开始菜单、设置等系统软件无法打开的问题

因为各种各样的原因导致系统文件丢失、损坏、被修改,而造成win10的开始菜单、设置等系统软件无法打开的情况,可以尝试如下方法解决 此方法只在部分情况下有效,但值得一试 用Windows键+R打开...

locbytes
昨天
8
0
jquery 添加和删除节点

本文转载于:专业的前端网站➺jquery 添加和删除节点 // 增加一个三和一节点function addPanel() { // var newPanel = $('.my-panel').clone(true) var newPanel = $(".triple-panel-con......

前端老手
昨天
8
0
一、Django基础

一、web框架分类和wsgiref模块使用介绍 web框架的本质 socket服务端 与 浏览器的通信 socket服务端功能划分: 负责与浏览器收发消息(socket通信) --> wsgiref/uWsgi/gunicorn... 根据用户访问...

ZeroBit
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部