APP类
- 外卖送餐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个页面,使用最高频的一些原型功能:弹窗,顶部固定,滚动区,内容切换等。使用的组件包括列表、面板、内容面板、选项卡等。
使用该款例子可以学习如何在设计中创建游戏视频、娱乐直播等类型的网页原型,同时也可以作为设计时的灵感来源。
例子清晰简洁,没有使用过于复杂的原型构建技巧,便于新手用户借鉴和参考。