微信小程序于2017年1月9日凌晨正式上线,经过一年多的发展 定制小程序 ,小程序用户规模已超过4.7亿(数据来自QuestMobile微信小程序洞察报告),其商业价值也日益凸显。因此,越来越多的开发者投入到小程序的怀抱中。在开发方面,小程序原型是必不可少的。通过交互式原型小程序开发设计,我们可以快速展示我们的产品概念和想法。
相比传统APP,我对小程序的评价是:“麻雀虽小,五脏俱全”。只保留应用APP中最重要的核心功能,真正做到小巧精致。所以我们在做设计的时候,也会和APP的设计有很大的不同。
首先我们来看看下面两个应用,说说APP和小程序设计的异同。
商城每日生鲜APP与微信小程序界面对比
首先,小程序给人的第一印象就是界面非常简洁,也非常符合小程序的设计要求。其中,小程序界面以悬浮图标的形式直接替代了APP界面中以大卡片形式展示的新人红包。从程序中删除。此外,APP界面中的“会员”底部菜单页面已直接从小程序中移除。还有一个很大的不同:在APP中,通过横向滚动商品,可以直接切换到不同类别的商品,而在小程序中小程序开发设计,则只能通过点击上方的商品类别来切换到不同的商品。
小红书APP与微信小程序界面对比
在我看来,小程序界面极其简洁,非常符合大众审美。 APP底部有5个菜单(Home-Mall-Photo-Message-Me),在小程序(Home-Mall-My)中直接缩减为3个。在APP商店页面,产品以实物图标的形式分为不同的类别。但在小程序中,没有引导和功能划分,用户只能看到和搜索产品,产品以卡片垂直排列的形式展示。这样的设计感觉很清爽不臃肿。
通过以上两个应用的分析,我们可以总结出小程序的设计规范。
1.灯光设计
总的来说,小程序相对于App来说,是简化的,只突出了核心功能。
2. 应该使用水平滚动吗?
目前大部分小程序都没有使用这种方法,但也有像豆瓣评分这样的小程序(见下图原型示例)在使用。
3.均匀度
从以上两个应用的角度来看,颜色、图标和应用内部是一致的。小程序中应减少banner图和物理图标的使用,有利于简化页面小程序开发设计 小程序开发设计 ,统一颜色。
4. 底部导航栏
小程序底部导航栏一般配置为2-5,我们可以多使用顶部导航栏和浮动按钮。
下面推荐几个超实用的小程序原型设计模板,是小编使用简单快速的原型制作工具——Mockplus制作的。只要能灵活复用,就能快速设计出自己的小程序。
1.交通 – 来自汽车的准确实时公共交通
这款软件被誉为“公交神器”,可以帮助用户实时查询公交位置。打开这个小程序,你可以定位你的位置,显示附近的公交车到站信息,还可以链接某站某某公交车,在“最近使用”中查看你最近看过的公交线路。
模板包含附近路线、最近使用、收藏、路线规划等核心页面。
动态图:
在线演示
2.社交-微信原型组件分享-WeUI
本原型的主要页面有:图标页面、按钮页面、表单页面、提示信息页面等,主要参照微信小程序设计指南制作,其中的组件可以灵活复用。
动态图表:
在线演示
3.社区-豆瓣评分
本小程序提供电影查询和评分公告,包括已上映电影的电影信息查询。无需登录和注册。该模板包含电影、我的、电影详情和评分显示等核心页面。
动态图:
在线演示
4.微信官方-小程序示例
主页面:小程序组件列表页面、小程序界面列表页面、小程序组件页面、小程序界面页面等
动态图表:
在线演示
5.旅游-携程
进入小程序后,用户可以根据酒店、机票、火车票、公交车票进入相应的导航,然后就可以根据自己所在城市查询酒店、机票、火车票、公交车票了以及他们想到达的城市。
动态图:
在线演示
模板包含小程序的入口页面、首页、酒店列表页面、微信登录页面、预订页面等。
以上小程序原型设计模板下载Mockplus即可打开、查看、修改。欢迎交流。
设计+协作,Mock就够了!
免费使用
发现、改变
探知、求新
共享,感恩一路相伴
昱远品牌形象已完成全面升级
点击访问新官网