好的设计要多分享，5款优秀在线原型设计案例

APP类

1、外卖送餐APP-UberEats

UberEats是继Uber主应用推出后五年来发布的首个独立送餐应用，在能够使用UberEats的城市中，Uber每天将与数家餐厅进行合作，向其用户提供食品，而送餐的任务还是由Uber的驾驶员来完成，其完成一单服务通常只需要几分钟。就像使用打车服务一样，用户可以通过智能手机追踪其所订食品的送递进度。

这类APP中用的最多的组件就是图片，可以设计出图片轮播、滚动区等效果来展示丰富的图片素材。

在这款原型中，我用了面板、内容面板以及选项卡等常用组件完成了图片轮播等交互效果，同时也为页面跳转的交互增加了动画，从而让页面之间的交互更加流畅，以及更接近真实APP的效果。

                        

2、电影资料库-IMDb APP

IMDb（Internet Movie Database）隶属于亚马逊公司，是一个关于电影演员、电影、电视节目、电视明星和电影制作的在线数据库，包括了影片的众多信息、演员、片长、内容介绍、分级、评论等。对于电影的评分目前使用最多的就是IMDb评分。

本例子界面源自IMDb的移动端APP设计，风格简洁而严谨，兼具资料库类型产品的理性和电影产业的时尚感。

                        

本模板在原生APP的设计上进行了一些改动，保证视觉效果的同时，让整体交互更简洁。模板复现了IMDb移动端中随处可见的水平滚动效果，还加入了视频播放、下拉菜单、Tab选项卡、评分条、开关等多种预置组件。

本例子包含闪屏、主功能、专栏文章、资源集合、影视详情、视频播放、评分、评论及设置等实用界面，可以轻松在创建设计感和交互性兼具的社区类型的APP设计。

                        

小程序类

点餐小程序-书亦烧仙草

书亦烧仙草是一款基于微信生态的点单小程序，用户能在小程序中下单支付，继而到店自取。

                        

相较于APP，小程序的功能相对简洁且开发成本低，通过模版化的设计可以帮助团队搭建页面，快速迭代上线。

本次例子共24个页面，包含了从线框开始到最终的UI设计，使用了轮播、弹窗等柔和的交互方式，使用的组件包含包括面板、内容面板、选项卡等常用组件，展示基本的页面跳转。

                                             

网页类

1、智慧校园平台

这是一款数字化校园管理平台的高保真设计模板。软件提供一站式数据管理服务，能够管理老师和学生基本信息，以及提供一系列管理应用。例子中将展示可视化数据图，教师和学生的信息管理、人员出勤，课程安排、成绩查询等页面的流程。

                        

模板提供了12个设计页面，使用了列表/选项卡/分段控件、面板、内容面板等组件，演示了页面中及页面间的交互效果。所有元素还可以智能生成标注，项目协作时成员添加的评论，所有成员都可查看与回复，同时支持@项目成员查看评论。 

                        

2、游戏视频平台-Twitch

Twitch海外著名的面向视频游戏的实时流媒体视频平台，具有非常个性的朋克元素设计，在年轻群体中拥有相当好的口碑。

                        

本次例子共10个页面，使用最高频的一些原型功能：弹窗，顶部固定，滚动区，内容切换等。使用的组件包括列表、面板、内容面板、选项卡等。

使用该款例子可以学习如何在设计中创建游戏视频、娱乐直播等类型的网页原型，同时也可以作为设计时的灵感来源。

                        

例子清晰简洁，没有使用过于复杂的原型构建技巧，便于新手用户借鉴和参考。 

更多原型案例请点击：https://www.mockplus.cn/example/rp