一个有趣的APP原型设计(简直不能太真实!)

qinzhiqiang 07-15 8:37 894次浏览

一个有趣的APP原型设计(简直不能太真实!)

设计一款APP的时候,经常会听到,要先设计一个原型。

在最初设计布局结构阶段,制作一个只有黑白线框的低保真原型。页面中应有哪些东西,大致占用多少地方,出现图片、视频之类的,用占位符来把地方填充。

一个有趣的APP原型设计,简直不能太真实!

确认好页面布局,就需要整理布局与布局之间最基本的交互方式。

点了这个按钮,手指滑动会出现、跳转什么东西,会弹出什么提示,窗口。

一个有趣的APP原型设计,简直不能太真实!

而高保真的原型,就是上面低保真的高配版。

不仅完善了页面的配色,原有的占位符都换成了正式的素材资源,页面中每个元素都有对应的规范尺寸,而且基本交互都可以完整的运行,已经非常接近成品的模样,让人一看就知道这个APP应该是做什么的。

一个有趣的APP原型设计,简直不能太真实!

通常,这些都是由产品经理来完成的工作。那其他人想了解制作原型,该怎么办?

位于哥伦比亚的伊瑟丝大学(Icesi University),为了给交互媒体设计的学生讲解UI设计的交互知识,找到了一种非常有意思的方式——制作“纸上原型”APP,交互什么的,所有的工作都在纸上完成!

一个有趣的APP原型设计,简直不能太真实!

把交互的弹窗与页面背景都独立出来,在旁边移动纸张,或者折叠,进行交互!

一个有趣的APP原型设计,简直不能太真实!
一个有趣的APP原型设计,简直不能太真实!

开屏图,是不是有一种小时候收到圣诞贺卡的感觉

一个有趣的APP原型设计,简直不能太真实!
一个有趣的APP原型设计,简直不能太真实!

有一种偷看密码的感觉

一个有趣的APP原型设计,简直不能太真实!

左滑右滑,非常顺畅

一个有趣的APP原型设计,简直不能太真实!
一个有趣的APP原型设计,简直不能太真实!

各种操作都是没问题

一个有趣的APP原型设计,简直不能太真实!
一个有趣的APP原型设计,简直不能太真实!
一个有趣的APP原型设计,简直不能太真实!

咻—— 划过去

一个有趣的APP原型设计,简直不能太真实!

评分条

一个有趣的APP原型设计,简直不能太真实!
一个有趣的APP原型设计,简直不能太真实!

这个按钮,看起来很有触感啊!

一个有趣的APP原型设计,简直不能太真实!
一个有趣的APP原型设计,简直不能太真实!

滑动删除

一个有趣的APP原型设计,简直不能太真实!

太好玩了!

一个有趣的APP原型设计,简直不能太真实!

真是非常佩服这个创意!

全部页面的交互逻辑都搞清楚,视觉风格也确定好之后,就可以开始在电脑前制作电子版原型了,感受一下这个跳转线条

一个有趣的APP原型设计,简直不能太真实!
一个有趣的APP原型设计,简直不能太真实!
一个有趣的APP原型设计,简直不能太真实!

这线条是不是有点眼熟啊?

一个有趣的APP原型设计,简直不能太真实!
  • 暂无推荐