聚焦客户

5

阅读时间

14个重新构想日常界面的交互式原型

由 ProtoPie 5.0 季后赛获胜者制作的原型

阿德里亚娜·迪亚兹, 社交媒体经理

7月,我们在 Dribbble 上举办了设计竞赛“ProtoPie 5.0 Playoff”,参赛者需要创建一种新的交互设计来改进日常界面。在短短两周内,我们收到了来自全球不同国家和地区的近 150 份作品。

参赛者的创意让评委们目不暇接,这些原型也都各具特色。多位评委审阅了所有提交的原型,最终经过艰难评选选出了最优秀的 14 份作品。

下面,你可以看到这 14 个最佳原型,并亲自体验。

🏆 大奖 得主

Calendar Animation,作者 Khonok Lee


calendar animation prototype gif


作者:Khonok Lee

来自中国的 Khonok Lee 重新设计了一款日历应用,通过捏合操作扩展日程显示范围,用户无需直接点击即可查看日程详情。你还可以用手指直接拖动日程范围来调整时间。交互非常简洁直观。(Pie 链接) (Dribbble 投稿)

🏆 3 名亚军

Mocky App,作者 Ahmed Amr


web application prototype tool gif


作者:Ahmed Amr

创作者使用 ProtoPie 制作了一个 Web 应用原型工具,让设计师可以在样机中为设计添加动画。(Pie 链接) (Dribbble 投稿)

Signal Pong,作者 Edmund Boey


signal pong mobile app game prototype gif


作者:Edmund Boey

游戏 UI 设计师也可以使用 ProtoPie 制作游戏原型,以提升用户体验。你也可以亲自试试 (Pie 链接) (Dribbble 投稿)

Email App Interaction,作者 Briandito Priambodo


email app prototype gif


作者:Briandito Priambodo

创作者将普通邮件与收藏邮件区分开来,用户可以通过同时选择多封邮件来批量选择或阅读收藏邮件。(Pie 链接) (Dribbble 投稿)

🏆 10 强入围者

Finance App Visual Interaction 2.0,作者 Arpit Agrawal


finance app prototype gif


作者:Arpit Agrawal

白色背景搭配华丽多彩的银行卡布局,整体界面简洁清晰。在查看银行卡背面信息时,创作者还加入了来回翻转的动态效果。(Pie 链接) (Dribbble 投稿)

Payment App — Split a Bill Flow,作者 Vikram Singh


payment app prototype gif


作者:Vikram Singh

点击菜单后,画面会从小变大再切换到下一个场景,非常吸引用户注意!快来看看这炫酷的动画 (Pie 链接) (Dribbble 投稿)

THE OFFICE,作者 Junhyuk Jang


mobile card game app prototype gif


作者:Junhyuk Jang

这件作品是一个办公室主题的卡牌对战游戏原型。快来玩吧 (Pie 链接) (Dribbble 投稿)

Node Player,作者 Migue Nodos


music player for iphone prototype gif


作者:Migue Nodos

一款面向 iOS 设备的极简播放器。从整体 UI 布局到实用性都简洁便捷。(Pie 链接) (Dribbble 投稿)

Coffee Machine App Prototype,作者 Kalpesh Prithyani


coffee machine mobile app prototype gif


作者:Kalpesh Prithyani

通过视频实现咖啡流入杯中的顺滑动画。除了图片和视频,ProtoPie 还支持导入 Adobe XD 和 Figma 文件。(Pie 链接) (Dribbble 投稿)

Whack-a-mole,作者 Kang Changmo


interactive mobile game app prototype gif


作者:Kang Changmo

互动打地鼠游戏!你能拿到多少分?(Pie 链接) (Dribbble 投稿)

Ride App Showcase,作者 Ariunbold Ankhaa


作者:Ariunbold Ankhaa

这是一款可交互的打车应用,你可以通过添加输入图层来使用设备原生键盘。(Pie 链接) (Dribble 投稿)

FastMath game,作者 Eugeny Entweihen


mobile math game app prototype gif


作者:Eugeny Entweihen

学数学也能很有趣!这是培养儿童数学能力的好方法。(Pie 链接) (Dribbble 投稿)

Yoga Timer,作者 Max A. Acres


timer app prototype gif


作者:Max A. Acres

在倒计时中加入了时间进度条的动态效果,能更直观地显示时间进程。整体界面简洁明了,功能也非常实用。你不仅可以设置时间,还可以设置重复次数。(Pie 链接) (Dribbble 投稿)

Sparrow Notes App,作者 Jiaxin Z.


notes mobile app prototype gif


作者:Jiaxin Z.

除了左右拖动卡片外,还可以在屏幕底部设置进度条。看看它是如何制作的 (Pie 链接) (Dribbble 投稿)