微信小程序-目标追踪-原型设计

先看看微信官方文档的微信小程序设计指南-链接,熟悉下官方的设计指南总是没有错的,不指望自己设计的多么完美,至少和微信的风格差不多就好。

官方文档还提供了一套可供Web设计和小程序使用的基础控件库,说是为方便设计师进行设计,同时提供方便开发者调用的资源。咱们还是先使用原生的组件来攒一个简单的小程序吧。先实现功能,在研究美化的事情。

先纸笔勾画一波:

先是首页-打卡页,头部显示当前周的七天,今日下方有小点点来指示;中间就是展示需要今天打卡的所有目标。

ce8e4514e15231f59a5d42798c3ded7b687.jpg

而后是目标页,点击下方的目标按钮进来是目标列表页。

37d1094ad114be44c1b087ff6471d838b3b.jpg

而后是目标添加和修改页,在目标列表页点击添加按钮或者目标打开记录页点击编辑按钮会跳到此页面。

99b8b1ee87dee2d9936b76aaae84a11cf76.jpg

最后是目标打卡记录页,在目标列表页点击某个目标即可到达此页面。

6fe99f86194a73f23d484a752a29a5fa51a.jpg

为了显得高大上一点,我们使用axure来辅助做原型设计。好久之前用过一次,现在早就忘了,正好借这个机会回顾一下。由于篇幅过长,已经整理到另一篇文章中,链接

下载一些微信的组件库,找了一个免费的:链接,加到axure的library中。

然后就是搭积木环节,当然积木搭完了之后还得加一些事件,让其有交互的功能,最终成品如下:

2e153bec02d90c1c069423c059c1ca46f53.jpg

eb81054e10e75e1aac23326148827912a70.jpg

2c18751afd07f3f679cda383bde88a5c20c.jpg

04412217f5b56cb52b279f16a415d107c3b.jpg

发布到了axure share上了,链接,密码是123456,可以访问后点击看看。

f9a18cf2f885ab8e8de7c68307721beb48f.jpg

8cd31adf7bafed51405df491d33cb1011dd.jpg

b42a6cf3d54996c2bfe680291f5cc8183ef.jpg

3f288dd0fc378053d5184f3a57349518521.jpg

7ab4ad023325784c6ba3b2613235b26ab58.jpg

是不是看起来像样了?

 

转载于:https://my.oschina.net/u/3301706/blog/3095950

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值