0
点赞
收藏
分享

微信扫一扫

从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~

7dcac6528821 2022-03-22 阅读 122

嗨,欢迎来到《摹客互联网工坊》第一期~

前不久,小摹联手南京艺术学院工业设计学院交互系,推出了“摹客互联网工坊”活动,给高校的莘莘学子们带去了数节线上视频课程,取得了不错的成果。

从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_原型

课后,同学们积极参与产品原型设计,​通过摹客RP​产出了一批优质的原型素材,让从业多年的小摹都直呼专业!

今天,小摹就先挑选了几款​视觉新颖的作品

一起来看看作者的分享吧~

从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_模板_02​​

《传奇永不熄灭》原型

从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_原型_03​​

(作者:乐乐侠/既有日光)

​​https://www.mockplus.cn/example/rp/100085​​

设计​灵感

从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_模板_04   记得英雄联盟S11中国战队 EDG 获得全球总冠军的高光时刻吗?回顾 LPL(中国赛区)四年三冠的历程,我们也成长了不少,以此原型来记录我们璀璨的青春!

制作​步骤


  • Step 1

查找整理 LPL(中国战队)的夺冠历程,确定好了设计方向和视觉风格。
从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_产品经理_05

  • Step 2:

把游戏中的经典场面作为设计重点,​通过内容切换​逐步进行交互还原。


从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_模板_06


  • Step 3:

设定剧情场景开头,​通过页面间的相互切换​来提升用户的代入感,让其更具趣味性。


从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_原型_07


  • Step 4:

营造页面氛围,​加入一些动效素材​,来提高用户的兴趣。


从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_产品经理_08


  • Step 5:

最后以夺冠场景收尾,点燃游戏爱好者的情绪。


从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_原型_09


使用​感受



摹客RP中组件化的交互非常方便直白,交互方式比同类产品更可视化,能轻松制作大量炫酷效果,印象最深刻的就是状态的动态效果,触发条件非常好用。  从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_模板_10


从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_原型_11

《云游钟山》原型

​​从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_产品经理_12​​

​​https://www.mockplus.cn/example/rp/100084​​

(作者:圆心/Limbo)


设计灵感



从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_产品经理_13   一棵树,一条路,一座城,树是梧桐树,城是南京城。”以梧桐叶为触发源,带领体验者云游钟山风景区,了解景点故事,获取神秘礼物。

制作​步骤


  • Step 1

我们敲定的主题是​“宣传钟山风景区”​,希望让更多人足不出户就体验旅游的乐趣。 


从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_原型_14


  • Step 2:

首先我们了整理钟山各景点的故事,为了增添趣味,还在景点​设置了神秘礼物!
从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_模板_15


  • Step 3:

设定剧情场景开头,通过交互效果提升用户的代入感,让页面更加具有趣味。


从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_产品经理_16


  • Step 4:

为了让用户有更强的沉浸感,我们​设置了打卡体系​,用点亮的形式增加交互体验。

从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_原型_17


  • Step 5:

游玩之后还可以选择自己喜欢的景点生成独家海报,增强用户体验。


从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_原型_18


使用​感受

摹客RP的整体功能分布清晰,但有时候会出现数值上的偏差;插入视频这个功能很实用,建议可以加长插入视频的时长;描边调节区间太小,在调节的时候会有点不方便,建议可以优化。  从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_产品经理_19


从 0 到 1,高校“王者”手把手教你做原型设计中最靓的崽~_原型_20

打个总结


感谢南京艺术学院的同学们积极参与,并且将​摹客协作平台作为课堂成果展示平台​,应用于校内苹果 IOS 产教协同育人项目体验中心。

另外,我们也会虚心采纳授课期间给到摹客的建议,不断优化产品体系。

最后。我们也为每位参与本次活动的同学​免费赠送了摹客互联网设计系列产品的企业版免费使用权​,帮助同学们提升产品设计能力!


下期见啦~


举报

相关推荐

0 条评论