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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

原创文章,作者:yanz kontol,如若转载,请注明出处:https://www.iamue.com/17944/

(0)
yanz kontolyanz kontol
上一篇 2016-10-17
下一篇 2016-10-18

相关推荐

  • 简单易用的交互设计工具:摩客串串Chinco

    今天给大家介绍一款简单实用的原型交互演示设计工具—摩客串串Chinco。 为什么要介绍这款产品呢? Chinco是继国产原型设计软件Mockplus之后,由摩客团队独立设计开发又一个面向设计师的产品,主要使用者就是咱们的UI…

    2016-01-06
  • Mockplus原型交互跟我做之2- 旋转的风车

    再来看一个小例子,我们做一个旋转的风车。蛮漂亮,是吧? 这里只用到“旋转”交互命令。

    2016-01-18
  • 【Mockplus教程】界面闪烁花屏怎么办?

    在个别笔记本电脑上,运行Mockplus桌面版出现软件界面闪动或者界面出现黑色块。 在这种情况下,请更新您的显卡驱动程序,问题一般可解决。 或者,如果你有多个显卡,尝试切换到集成显卡。 如何切换显卡:http://ask…

    Mockplus 2015-08-12
  • [Mockplus教程]创建

    新建页面可以使用三种方式来实现: 1 点击右边页面树顶部的“+”按钮; 2 在右边页面面板空白处右击,在弹出菜单中选择“新建页面”; 3 直接使用快捷键Ctrl+Enter(MAC系统为Command+Enter)。 下面为三种方式新建页面…

    Mockplus 2015-09-18
  • 【Mockplus教程】MAC 安全提示无法安装怎么办?

    在 Mac 上安装时可能会出现上图中的提示导致无法安装。 这个时候,只需要按住 Control 键,然后点按该程序的图标,选择打开。就可以安装了。

    2015-08-12
  • 【Mockplus教程】表格

    Mockplus对于表格的控制,采用的是通过文字来控制外形和数据的方法。稍微熟悉后,你会发现,这种方式可以很快地组装表格。 如图,这里是一个表格: 双击这个表格,进入编辑,看到如下的文字: 好像很难? 别急,我…

    Mockplus 2015-10-17
  • [官方]mockplus视频教程:10分钟玩转mockplus

    官方出品教程,10分钟快速了解一下mockplus软件操作基础。 视频免费播放地址

    2015-06-30
  • [Mockplus教程]如何批量导入图片到收藏夹中?

    有项目打开时,定位到“我的收藏”的“图片”选项,在下拉菜单选择“批量导入图片”, 根据提示选择导入图片。 完整演示如下:

    Mockplus 2015-09-18
  • 【Mockplus教程】备注

    每个页面都可以添加备注信息,打开需要添加或者查看备注信息的页面, 在页面节点上面鼠标右击,弹出菜单中选择“页面属性”一项,如下图: 在弹出的对话框中,即可查看备注或者编辑备注,编辑好备注之后点击“应用”按…

    Mockplus 2015-08-31
  • 【Mockplus教程】怎样在Mockplus中使用图片轮播?

      1、创建移动项目 2、从交互分类中添加一个图片轮播组件 3、点击图片轮播组件上小工具条上的图片选择按钮 4、选择一张或多张图片。(这里只会把对话框中勾选中的图片加载到图片轮播组件中,可以点击每张图片上…

    2015-10-28