专栏首页无原型不设计好的设计要多分享,5款优秀在线原型设计案例
原创

好的设计要多分享,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个页面,使用最高频的一些原型功能:弹窗,顶部固定,滚动区,内容切换等。使用的组件包括列表、面板、内容面板、选项卡等。

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

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 纸上原型设计 VS 桌面原型工具设计,你更喜欢谁?

    纸上原型设计,作为传统的原型设计方式,简单快速,成本低廉,为大部分设计师所喜爱。而桌面原型工具设计,作为伴随电脑科技发展而出现的原型设计方式,快速全面,高效保真...

    用户1372273
  • 设计师升职加薪必须知道的10个设计网站

    设计行业经过几年的发展,已经进入到了相对成熟的时期。这无疑会对设计师有更高的要求和挑战。

    奔跑的小鹿
  • 强烈推荐!2018最受欢迎的8款产品原型工具

    工欲善其事必先利其器。作为一名产品经理,如何才能快速地设计一款产品?一款优秀的产品原型工具必不可少。如何才能选择一款适合自己的原型工具呢?小编特意整理了8款工具...

    奔跑的小鹿
  • 网页设计太麻烦

    Bootstrap作为针对响应式设计和移动优先的前端web开发,是当下最流行的设计框架之一。使用 免费的Bootstrap UI工具包让原型设计和网页设计变得更...

    奔跑的小鹿
  • 设计师的日常--你要知道的25个UI/UX设计网站

    如果你像我一样,总是花很多时间试图找到一个最好的模式,最好用的工具和最漂亮的颜色。当然,每位设计师的需求不同,所谓“完美”的标准也不一样。但是如果能有一份资源...

    奔跑的小鹿
  • UI设计资源收集

    听说国内的网盘最近要整改,所以上传了一份到Google云盘,素材的原始链接文件如果丢失,可以 参考这里 进行下载。

    续写经典
  • 0设计经验,如何找到一份UX设计师的工作?

    UX (User Design) 设计师作为全球最受欢迎的高薪工作之一,截止至2017年,一名高级用户体验设计师的年薪已平均高达86,071美元,这也是为什么广...

    用户1372273
  • 当推荐遇到社交:美图的推荐算法设计优化实践

    在美图公司社交战略部署下,推荐算法存在多方面的挑战,为了解决这些挑战,我们团队从工具和算法两个方面分别开展了工作。

    机器之心
  • 【招贤纳士】我们邀您加入腾讯WeTest的大家庭

    ? 金三银四求贤季,不断创新并快速迭代的腾讯WeTest一直渴求更多优秀的人才可以加入其中。 作为腾讯官方推出的一站式品质开放平台,WeTest拥有十余年品质...

    WeTest质量开放平台团队
  • 【赶紧收藏】22款设计师必备色彩工具,轻松打造别样的“视觉诱惑”

    色彩,作为网页或App设计的重要视觉元素之一,不仅能够帮助UI/UX设计师有效地展示和突出界面或产品相关信息和功能, 而且还能够轻松自然的流露和传达设计师相应情...

    奔跑的小鹿
  • 拍拍贷第四届魔镜杯大赛-冠亚季军方案梳理

    这是即2019腾讯广告算法之后,又一场数据竞赛。这次比赛以互联网金融信贷业务为背景,帮助选手了解相关业务。

    Coggle数据科学
  • 如何设计一款赏心悦目的后台系统界面?

    相信大部分人看到这个标题时,第一反应都是这样。因为在我们的认知里,后台系统主要是自己人看的,因此界面只需要功能齐全好用就行了,并不需要那么好看。但是随着技术的发...

    奔跑的小鹿
  • UI设计:掌握这6点,轻松0到1

    非科班出身能成为UI设计师吗? 答案是肯定的。世上无难事,只怕有心人。只要找对方法、坚持不懈,即便是零基础也能学好UI设计。 那么零基础学习UI设计,需要...

    奔跑的小鹿
  • UI设计:掌握这6点,轻松0到1

    答案是肯定的。世上无难事,只怕有心人。只要找对方法、坚持不懈,即便是零基础也能学好UI设计。

    奔跑的小鹿
  • 产品经理最小技能集指南之设计

    https://blackboxofpm.com/mvpm-minimum-viable-product-manager-e1aeb8dd421

    mixlab
  • GO笔记之为什么要学习GO

    之类问题经常出现在眼前。以前学语言时倒没怎么关心过这类问题。今年公司由于新业务需要开始全面从PHP转型到Golang。所以我学习它也就是为了工资。额?不能这么俗...

    波罗学
  • 网页设计有难题?12款网页设计模板给你灵感!

    作为网页设计师,你的作品就是你专业水平的最好体现方式。所以,无论是参加面试还是个人作品展示,你的网页模型是否能让人眼前一亮,是否能在交互设计或视觉设计方面突出任...

    奔跑的小鹿
  • 2018最佳网页设计:就是要你灵感爆棚!!!

    2018已然过半,网页设计涌现了一些新的设计趋势,例如破碎网格设计,动态或不规则文字排版设计,流体特效应用等。也同时延续着2017和2016,甚至更早的网页设计...

    奔跑的小鹿
  • 【招贤纳士】我们邀您加入腾讯WeTest的大家庭

    金三银四求贤季,不断创新并快速迭代的腾讯WeTest一直渴求更多优秀的人才可以加入其中。

    WeTest质量开放平台团队

扫码关注云+社区

领取腾讯云代金券