怎么把原型图转成小程序代码

1、安装CodeFun插件，准备sketch素材。

2、打开sketch文件后，在顶部插件菜单，选择CodeFun的上传设计稿菜单。

3、在d框中登录账号，携唯竖并选择创建的项目和画板。

4、点山友击上传，等待上传完辩大成，即可把原型图转成小程序代码。

作品名称：订餐小程序（外卖+堂食扫码点餐）原型模板

当前版本：V1.0

软件版本：Axure RP 8

文件格式：RP

作品预览及获取链接： https://www.axureshop.com/a/1281049.html

作品介绍：

这是一款外卖点餐、堂食（扫码点餐）的微信小程序，

主要功能包括：友迅外卖以及堂食订餐、订单管理（堂食以及外卖）、我的（个人中心）以及积分商城四大模板

部分功能展好银此示如下：

浏览并获取更多原型作品和资源，欢迎访问纤纤露的官搏锋方店：

https://www.axureshop.com/shop/12906

主界面

这次我的测评希望可以尽可能地避免出现对于设计美感的主观讨论，为了达到这个目标，我特意用 Keynote 制作了三个应用主界面的「原型图」。

通过我做的「原型图」可以看出，三个应用都采用了顶部导航的设计，而其中共有的一个按钮是「添加新项目」这个使用频次最高的功能。其次，「最美时光」和「Daybox」都将「设置」按钮放在了顶部，而「Days Matter」则是将这个按钮放在了接下来我们会谈到的底部导航森皮栏中。除此之外，「最美时光」在顶部设置了一个「更多」按钮，用来展示最美系列的其他应用，「Days Matter」在顶部设置了一个「分类查看祥雀」按钮，可以呼出左边侧边栏，用来分类查看不同的倒数日、纪念日。

「最美时光」与「Daybox」仅仅有一个顶部导航，而「Days Matter」则非常复古地添加了一个底部导航栏，这在最近类似的轻应用中是很少见的。具体的功能我们放到后面去分析，至少双导航栏的设计占据了本属于倒数日列表的空间是毋庸置疑的，而且过多的元素排布会分散用户的注意力。

接下来让我们把目光转向主界面最重要的元素——纪念日展示，虽然都是列表的展示，但是仔细观察还是能发现其中的差别的。「Days Matter」与「Daybox」都是采用「一主多次」的排列方案：即给最重要的倒数日最大的展示空间，其他的倒数日则用窄列表排列；而「最美时光」则是采用「一视同仁」的排列方案。这两种方法各有利弊，一句话来说就是在「视线聚焦」与「更多的展示空间」之间做抉择，至于确定哪种方案更好，我的计划是是要调查用户到底需要记多少个倒数日以及倒数日之间到底有没有轻重之分，这个在后面我会设计一个实验来证明。

最后我们要关注的是一个细节，即如何区分「倒数」与「正数」。简单解释一下，在应用中我们一般要记两种日子，一种是倒数，比如「距离 X 的生日还有 XX 天」；另一种是正数，比如「距离我们第一次吃饭已经有 XX 天了」。在应用中如何区分这两种计数方式是我关心的一个点，因为这体现了这款应用是否够严谨。先让我们看「Days Matter」,用「已经」、「还有」两个中文词汇就轻松区分开了两种计数方式，从这点可以明显地看出应用的优势；「最美时光」的方式也很巧妙，用[+]来表示「正数」，没有符号则代表「倒数」，虽然会有一定的学习成本，仍可以此宴差算是一个「简约」的方案。表现最差的是「Daybox」，完全没有在这上面下功夫，单单从界面上根本无法区分「正数」与「倒数」，可以说是一个败笔哦。

---