在七月，ProtoPie成功举办了其首次 Dribbble Playoff 竞赛。我们收到了来自世界各地设计师提交的大约 150 个原型，其中很多都非常令人印象深刻。在如此激烈的比赛中，我们的评委费了很大劲才选出获胜者。她就是 ProtoPie 首届 Dribbble Playoff 的冠军：Khonok Lee！
这是 Khonok 制作的获奖原型（视频中的日历原型）。
大奖得主：Khonok Lee - YouTube
当我们最初查看这个原型时，我们以为 Khonok Lee 是一位拥有丰富交互设计经验的资深设计师。结果她其实是一位只有一年工作经验的初级设计师。我们聊了聊她毕业后如何开启设计师职业生涯，以及她是如何成为原型设计冠军的。
让我们深入了解一下 Khonok 目前为止的成长历程。
请介绍一下你自己。
Khonok：嗨！我是 Khonok，很荣幸能和大家分享我的经历。我的设计生涯从很小的时候就开始了，因为我在学校上过计算机课。那时我最先学习了 Photoshop 和 Flash，并开始对设计工具产生兴趣。所以我自学了 Photoshop、After Effects 和 ProtoPie 等工具，还在大学期间发表过相关论文。之后，我成为了一名从事数字产品的 UI 设计师。
是什么鼓励你成为一名 UI 设计师的？
Khonok：我从小就很喜欢设计，但当时很难获取关于 UI 设计的信息。大学三年级时我开始系统学习设计。那时我在听本地设计社区的播客，深受启发，并最终把“成为一名 UI 设计师”当作自己的使命。那天晚上我兴奋得睡不着！
如果说平面设计属于艺术的一部分，那么 UI 设计则需要理性。这意味着我们要考虑用户需求、功能、策略以及更多因素。我觉得自己是一个相当理性的人（尽可能做到理性），所以 UI 设计真的很打动我——我可以深入并解决问题，为用户创造更好的体验。
当想法与理性发生冲突时你会怎么做？
Khonok：我目前在做企业级产品。为了匹配公司需求，始终要进行“优先级之战”。公司总是希望在盈利相关方面降本增效。所以我们会做功能性和便利性更强的设计体验，而不是花哨、只图好看的设计。当想法与理性确实发生冲突时——这通常发生在功能与设计之间——我会与产品经理一起协作。我们总是回到核心，看看用户最优先的需求是什么。
我在工作中不可能时时刻刻都保持创造力，所以我通过这次 Dribbble Playoff 比赛做了一些很有趣的东西！
你认为什么是好 设计？
Khonok：我个人偏好简洁的设计。但风格不能作为“好设计”的标准。我认为好设计应该从用户需求出发，传达产品信息，并恰当地提供功能。能够在限制条件下最大化自身优势的设计，就是很棒的设计。
你在设计时通常如何获得灵感？
Khonok：灵感并不是一次性的体验，而是经验的积累。每天我都会看 Dribbble、Pinterest 和 Muzli 上的设计。我也会经常体验新产品，并关注最新设计趋势。作为设计师，了解外部正在发生什么并对新事物保持开放，真的非常重要。
包含耳机和手机界面的彩色平面设计精选
你给想进入 设计领域的人有什么建议？
Khonok：你应该找到属于自己的“色彩”，并为职业生涯确定一些方向。刚开始时，中国教授设计的学校并不多。所以如果你想成为设计师，就要灵活一些，寻找其他方式，比如课程、自学、训练营等，通过超越传统路径的方式来教育和提升自己。
你为什么选择 ProtoPie 作为你的交互设计 工具？
Khonok：我是通过一个很受欢迎的中文 UX 播客《UX Coffee》了解 ProtoPie 的。一位知名设计师提到 ProtoPie 是他的主要交互原型工具。幸运的是，我还在 Dribbble 上找到很多用 ProtoPie 制作的原型。所以我想试试 ProtoPie，自己做出既可交互又逼真的原型。ProtoPie 同时支持 macOS 和 Windows 这一点对我非常有用。
最吸引我的是，它有非常丰富的功能可以表达交互设计想法，而且都非常易用。在这次采访的第二部分，我会更多分享我的交互设计思路，以及我是如何把它们变成原型的。
赢得首届 ProtoPie Dribbble Playoff 的历程
你是如何自学使用 ProtoPie 的？
Khonok：我在 ProtoPie 官网找到了很多学习资料。许多教程和文档都整理得非常清晰。其中我强烈推荐 Design & Code 的 Meng To 制作的课程。它包含了为初学者精心设计的内容，从基础一直覆盖到高级技能。这是 ProtoPie 课程链接，如果你需要更多资源，请访问 ProtoPie 官网！
展示高保真原型课程的在线学习平台落地页
你是如何为 Dribble playoff 设计原型的？
Khonok：这不是我工作中必须做的事，所以我不需要考虑特定产品。我只是想发挥创意并享受这场比赛，因此我专注于纯粹有趣的交互想法，以及如何高效地表达它们。比如，我从黑胶唱片获得了灵感。我思考了唱片的使用方式，想象了播放唱片时的场景，并做出了这个原型——Music Player。我认为这个过程是练习设计的好方法！
Music Player 原型 - YouTube
来自 Khonok 原型设计的一些技巧与教程！
Calendar，Dribbble Playoff 的获奖原型
用户正在体验移动端日历原型
试用 Calendar
是什么启发你制作这个原型？
Khonok：我做这个原型是为了让浏览日历或日程更加方便。我通过多指手势实现了这个原型。这种交互非常棒，而且是在其他设计工具里做不出来的！它通常用于照片，但如果你把它应用到其他场景，可能会创造出一些创新作品。
Music Player
用户正在体验音乐播放器原型
试用 Music Player
这些交互非常流畅，你是如何实现 的？
Khonok：首先，我把交互拆分成更小的部分。仔细看你会发现，黑胶上反射光的方向和位置并没有变化。黑胶本身并没有旋转，真正变化的只有中间的星形图像！你现在看出来了吗？
滑动卡片时，你会看到黑胶和封套是一起移动的。我通过 ProtoPie 里的多个触发器和响应来实现。首先，我给卡片应用了 Drag 触发器。然后添加 Move 响应，让卡片在我触摸时左右移动。接着我添加了 Chain 触发器，把卡片、黑胶和封套的位置关联起来。这样当我改变卡片位置时，其他组件也会一起移动。最后，我使用 3D Rotate 响应让卡片改变角度；再加上 Scale 响应，卡片会变小。由于我提前用了 Chain 触发器，卡片在移动时就会同时改变这些属性！
ProtoPie Studio 中 Chain 功能截图
你原型里通过触碰黑胶来调节时间的设计灵感来源于 什么？
Khonok：我参考了 DJ 常见的手势，并把它们应用到原型中。触碰黑胶时会产生 3D 角度变化，所以看起来就像我正在拿着唱片！
用户正在体验音乐播放器原型
Audiobook
展示有声书原型中不同交互的 GIF
试用 Audiobook
你是如何做出翻页交互的？
Khonok：一点都不难！只要把手指运动与每一页关联起来，就会非常容易实现！
首先，我用 After Effects 制作了书页图像并转换为 PNG。通过图像重复就形成了动画。所以我把 PNG 文件导入 ProtoPie，并按顺序排列。
ProtoPie Studio 中的 PNG 文件列表
接下来，我在右下角添加了 Rectangle 组件，并将透明度设置为 1%。然后我给它应用了触发器和响应。
小说封面页
通过添加 Chain 触发器，我把 Rectangle 组件与每个 PNG 图像的透明度关联起来。接着，我给每张图添加了 Opacity 响应。到这里你就可以开始翻页了，只需向左拖动！
ProtoPie Studio 中的不透明度图层列表
希望我的经历能对每一位读到这篇文章的人有所帮助！如果你热衷于制作高交互原型，而且无需代码，那就访问 ProtoPie 官网并免费开始制作原型吧。
另外，ProtoPie 还提供教育支持，也就是向学生、教师和学校免费提供 ProtoPie 使用权限！如果你感兴趣，点击这里申请即可。不要错过免费体验 ProtoPie 的机会！
