小程序交流群:528215729,加入和小伙伴们一起探讨开发疑难、运营idea吧

admin

admin

发表于 2017-09-25 12:19:09

摘要:这对北京小情侣开发了款小众的原型设计工具,我用它五分钟做了一个「王者荣耀群排行」,你信吗? (微信小程序开发 - 微信 小程序外包开发-微信小程序 开发教程-微信小程序开发者社区,尽在 www.mntuku.cn)

这对北京小情侣开发了款小众的原型设计工具,我用它五分钟做了一个「王者荣耀群排行」,你信吗?

先看张动图:




作为资深低头族,上面这种操作效果你一定不陌生。没错,说的就是滑动列表。那么,你知道这种效果是怎样实现的吗


作为靠写稿吃饭的加班狗,这么高端的前端实现方式造君当然一窍不通,不过,最近造君发现一款在线原型设计工具,可以寥寥几步就能完全实现这一效果。


不信你看:




很炫酷有没有?本当に待丝噶?!



上面图中造君使用的原型制作工具叫xiaopiu,「滑动列表」只是xiaopiu众多炫酷功能的其中之一。作为一款原型设计工具,xiaopiu的特点在于无需安装,直接打开网站就能体验软件级的操作体验;丰富的资源共享库,涵盖组件、页面、项目,用户可以直接下载,快速表达自己的想法,避免重复造轮子。


与Axure等原型设计工具相比,xiaopiu算是款小众产品,虽然如此但xiaopiu交互更多,使用门槛更低,受众更广,更关键的是,xiaopiu这款产品现在已拥有5款主流小程序的完整资源库,并且还有高保真版本,真是原型工具里的一股泥石流。


今天造君就给大家说说这个工具。


俗话说,天下App一大抄,看你会抄不会抄


上面说到,xiaopiu作为一款小众的设计工具,最大的特点就是基于网页,无需下载,在浏览器(推荐Chrome)输入网址:http://www.xiaopiu.com/,创建项目即可开始设计。


作为产品狗,你也许对下面这种专业的设计页面并不陌生,组件齐全,功能齐整。虽然强大,可一般人根本玩不转



再来看看xiaopiu的云资料库(确定这不是PS?):


(xiaopiu页面库)


(xiaopiu组件库)


(xiaopiu项目库)


尼玛~ 这不就是赤果果的「模板」吗?!


xiaopiu覆盖了市场上几乎所有主流App的产品原型,想做什么类型的产品直接把同类产品的全部组件、页面down下来,再根据自己的需要改改就完事儿了!(原来产品经理都是这么干活的啊~)


更有意思的是,前不久,xiaopiu上线了5款小程序资料包(分低保真和高保真两种),分别是——王者荣耀群排行、朝夕日历、轻芒杂志、摩拜单车、腾讯自选股



每一个资料包,打开以后都是这样的:


(xiaopiu的高保真「摩拜单车」小程序页面)


这样的:


(xiaopiu的高保真微信小程序组件库)


以及这样的:


(xiaopiu的低保真bilibili App页面)

总之就是一个字儿,全!想用哪个,下下来直接下载套用!(对,就是那个红按钮)



比如造君,就下载了「王者荣耀群群排行」的页面,十分钟做了一个带着正统峡谷风的「小程序模板排行榜」,虽然丑了点(不要点开大图了,2333)



不过造君已经决定过几天让我们产品经理拿着这个原型,做一个实际的模板排行给大家看看。(产品经理:泥垢了~)


像玩积木一样设计小程序


除了无需下载,xiaopiu模块化的操作体验也是一大亮点。所有资源分为:组件库、页面库和项目库


想要开始设计有两种方法。第一种是:登录后进入个人主页 ,选择工作台 > 项目,点击「创建新项目」。



第二种是:登录后,进入「精选广场」或「他人主页」,选择喜欢的项目,点击「下载」按钮即可下载项目到自己的工作台


项目创建后即可进入工作区,xiaopiu工作区将整个页面分为了以下5块:顶部工具栏、左侧资源库、主视图区、右侧编辑区、底部动画编辑区。



  • 顶部工具栏:主要用于全局操作,比如redo(重做)和undo(撤销),历史记录,预览和进入代码模式等。

  • 左侧资源库:包含了组件库,页面库和图片库,在这里你可以找到你自己存储的所有资源和从别人那里引用的资源。

  • 主视图区:核心的创作区域,用户可以通过拖拽点击和快捷键等操作进行自由创作。

  • 右侧编辑区:包含了每个组件所有能编辑的属性,用户可以通过简单设置来编辑元素;同时也包含了页面设置面板,用于编辑页面信息。

  • 底部动画编辑区:用于编辑状态切换时的过渡动画。


在左侧资源库中可以找到你之前下载的资源:页面、组件、图片等,通过拖拽的方式即可完成你的设计。就像搭积木一样。



也可以通过拖拽资源库的页面来搭建一个新页面。



多视图模式」用来管理项目中的所有页面,比如新建页面、复制页面、排布页面和删除页面。



通过这样直观的操作,很快就能设计出一款小程序的基本功能原型。


设计进阶

查看页面代码

如果你懂点编程,那么xiaopiu还有更多功能可供你发挥,比如「代码编辑」功能。在页面库下原则一款小程序模板的页面,可以查看该页面的WXML代码,代码可以根据自己的需求修改或重写,让页面更好的实现自己的个性化需求


(「饿了么」首页WXML代码)


协同作业

在这一功能下,设计者可以邀请团队成员一起完成设计。点击「协作者」按钮,输入用户名或邮箱名邀请小伙伴。


进入项目后协作者们就可共同编辑啦,各自做自己负责的模块,在「单页面编辑模式」下还可以实时看到协作者的操作。


(此处添加项目协作者)


发布作品到精选广场

自己设计的作品没地方臭美怎么行?与其分享给朋友圈那些门外汉,或自己默默欣赏,何不把作品分享到xiaopiu作品库?



发布完成它就会出现在「精选广场」啦,页面库和组件库也是一样的操作喔~


一对前端小情侣的奋斗


看到这,想必你对xiaopiu真的很干星期~ 作为一款小众的原型设计工具,xiaopiu在设计和体验方面真可谓是良心。不过xiaopiu的开发者的故事也很有趣。


话说2015年年底,北京的一对小情侣张杨雪和李国锐从工作了两年的互联网公司辞职,出于对视觉和交互的兴趣,做了一款移动互联网原型设计产品——xiaopiu。在此之前他们是大学同学,同时又都是优秀的前端工程师。



兴许是因为过去在学校、工作中就多次合作,所以二人对于共同打造独立项目这件事充满了热情。2016年初,xiaopiu这个由二人自己垫付资金的项目正式启动,一个月后xiaopiu正式上线。


唉!又是人家的情侣,不说了,造君先去静一静。


内什么,看完这篇,现在就用它来设计个自己的小程序吧~





-THE END-



   橘子味的猫

微信: zcxjuzimao


 入群 | 合作 | 交流

长按二维码关注


后台回复关键词,获取热文


文章丨最全!| 小程序制作 外包 vs. 模版 到底怎么选?看了这篇你就不纠结了! | 科普 #9

关键词:选什么


文章 | 我没有吉他就唱不出歌,中山的「吉姆餐厅」玩起小程序,问你要不要来坐坐? | 案例 #5

关键词:胡桃里


文章 | 京东都用它的模版做小程序!商城+拼车?你想怎么搭配都能做到! | 模版 #28

关键词:28


文章 | 全国首个高校课堂小程序!华师可以用微信考勤签到了 ! | 快讯 #9

关键词:公车










如果你是:

a)小程序第三方模版开发者,有精品模版想要寻求报道;

b)如果你希望不用写代码/开发,也能拥有一款小程序;

请发送邮件至:baodao@zaochengxu.com



552阅读 | 0评论
你的回应