30 | 产品案例分析：Primer的扑克牌交互
邱岳
该思维导图由 AI 生成，仅供参考
00:00 / 00:00
1.0x
- 2.0x
- 1.5x
- 1.25x
- 1.0x
- 0.75x
- 0.5x
今天还是打算从几款应用出发，跟你分享一种目前很流行的交互形式，以及它在各种领域的应用。
这种交互方式看起来很像在玩儿扑克牌，所以我们就姑且管它叫扑克牌交互，这其实也是卡片设计的一种，所以单独拿出来说一说。
我们从 Google 出品的一个叫做 Primer 的说起，Material Design 是 Google 发布的设计规范，卡片是其中很重要的一个元素，所以我们可以看到 Google 官方的很多应用中都有卡片设计，Primer 就是其中之一。
自然接受的暗示
Primer 是一个技能学习类的应用，通过卡片去介绍和讲授一个独立的话题。它还会要求用户登录，以便做个性化推荐，说实话看到这个要求的时候我脑海中一闪而过，觉得 Google 就是这个时代的老大哥。
我们来看这个应用，结构非常直观简单，Lesson 和 Lesson Sets，Lesson 包含于 Lesson Sets 中，安排很直观、很好理解。一个课程中有说明性卡片和互动式的卡片，这些分类用户是不需要理解和区分的，很自然。
在整个课程推进的过程中，我们要做的就是读内容，翻卡片，卡片会随着手的方向被推走。可以看到有的卡片是一张，有的是一叠。如果我们去分析，会理解一叠是一个知识点，一张是一句话，但在用的过程中，我们很自然地就会接受这个暗示。
独特的信息展示
这里有一个我特别喜欢的交互和信息展示结构，是当我们两个手指缩放的时候，你可以看到完整的课程结构，当然有一些灰掉的是还没有看到的，不能点开看，要循序渐进；但这里把水平和竖直两个方向都利用起来。
我之前在不断探索各种可能的信息关系怎么展示的时候，我有一次做梦就梦到过一个类似的结构，但我梦到的是三个维度的，也就是还有纵向，后来看到 Primer 这个结构的时候，我还挺高兴的。
在我们不断学这些内容的过程中，还有一个值得关注的交互，就是这个 App 会拦住你不断翻卡的过程，让你去做题，这个交互很像是在学校上课考试。而且有一些题目其实是告知的过程，总之，通过让你做选择，强制你思考，而不是开自动挡一张张划卡。
类似的卡片应用
类似这种卡片的应用也很多，比如 Tinycards，这是一款教育类应用，正面是题目，反面是答案，利用卡片的正反面，可以背单词学东西。
Swiipe 则是利用卡片交互来读新闻，右划收藏，左划则不感兴趣，点进去就可以读到新闻的内容，整个过程也是基于卡片来制作的。SweatDeck 则是利用扑克牌健身，也是基于翻卡牌的交互，每个扑克牌都是你需要做的动作。还有 Tinder，跟 Swiipe 类似，是一款卡片交友的软件。
我们利用扑克牌的交互方式不断地推着用户做事，基于这样的架构，人的操作会非常自然，这样的交互下，内容也被划分零碎，用户接受起来不会有那么重的负担。同时，你也可以思考：自己平时熟悉的内容应用，如果改成扑克牌操作，跟现有的传统架构相比会有哪些差异。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
扑克牌交互是一种流行的交互形式，在各种应用中得到广泛应用。本文以Google的Primer应用为例，介绍了扑克牌交互的特点和应用。Primer是一个技能学习类的应用，通过卡片介绍和讲授一个独立的话题，结构直观简单，包含说明性和互动式卡片，用户可以通过翻卡片的方式学习内容。值得关注的是，当两个手指缩放时，可以看到完整的课程结构，利用水平和竖直两个方向展示信息。此外，应用还通过拦截用户翻卡片的过程，引导用户做题，强制思考，类似学校上课考试的交互方式。类似的卡片应用还有Tinycards、Swiipe、SweatDeck和Tinder，它们也利用扑克牌交互方式推动用户进行学习、阅读、健身和交友等活动。扑克牌交互方式使用户操作更自然，内容被划分零碎，减轻用户负担。读者可以思考将自己熟悉的内容应用改成扑克牌操作，与传统架构相比的差异。文章通过介绍Primer应用和类似应用，展示了扑克牌交互的特点和应用场景。
2018-01-2713人觉得很赞给文章提建议
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《邱岳的产品手记》，新⼈⾸单¥59
《邱岳的产品手记》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(10)
- 最新
- 精选
听天由己扑克牌式交互，目前最为知名就是 tinder 与它的中国版探探。目前我接触到的内容或是应用更多是在学习教育、新闻资讯以及社交网络，说起来 readhub 的卡片式设计也有异曲同工之妙。 关于这种交互形式，我个人猜想有以下几个因素： 一是需要用户极度专注内容，每一张卡片占据一屏，以上的应用可能满足用户场景，让用户直观掌握所有内容。 二是拖拽与左右滑动等手势操作符合移动端手机使用习惯，页面长度限定，却依旧交互友好。 三是拆分内容，阅读压力少了很多，而且容易激发用户的探索欲望，这和我们之前学习的 Fabulous 闯关进度很像。 感谢二爷的分享。作者回复: 总结得很赞
2018-01-2716- xxh现在留言邱老师还能看到吗？我是一个入行1年半的产品经理，平时工作中或者阅读中也会有一些产品感悟，但是感觉很零碎。想问问邱老师是怎么开始把自己的经验和感悟输出这样的有清晰分类的内容的，虽然我的经验还比较少，但是我很想做这种尝试，来帮助自己成长。还有，我也想定期地去体验和分析一些优秀的产品，想问问邱老师，都有哪些比较好的渠道，可以让我们触达这些产品。目前我体验新产品的渠道很单一，更多时候都是自己依据分类去appstore里面搜索，这其实会让我错过很多优秀的案例。希望邱老师可以看到。
作者回复: sorry 回复晚了。在后面的课程中有提到怎样找到新产品的渠道，有很多专门做这种新产品挖掘的产品和社区。另外，想要积累沉淀，可以尝试做一些输出，总结自己的经验，整理自己的 checklist，或者写下自己的阶段性决策依据，事后再来复盘。
2020-02-1110 
拾叔其实除了社交，咨询，教育，感觉招聘也可以用卡片，一个岗位一个卡片，卡片上是岗位的核心介绍，划到不同的方向，可以实现收藏，投递，查看详细等。 卡片的设计，比较立体化和游戏感，互动效果比完全静态页面体验要好，当然，仅限于某些领域作者回复: 我觉得岗位不一定会很合适，因为岗位可能是需要反复对比的
2018-02-015- 孤独的老米补个刀：https://medium.com/google-design/designing-a-ux-for-learning-ebed4fa0a798?source=linkShare-215fabb92882-1517059596 （需FQ）Making Learning Easy by Design，How Google’s Primer team approached UX
作者回复: 好赞！
2018-01-274 
GeekAmI嗯 探探也是。突然想到我司产品的一个feature可以利用此功能作者回复: 探探试用了半天没人理我就删了…
2018-01-292
show能想到的大概就是朋友圈，如果用卡片的形式，可以一个动态就在一张卡片上。这样的话看内容的时候精力就会更聚焦，对这个人或者事情可以更印象深刻。作者回复: 不过，不过以朋友圈的内容量来看，可能要翻好久
2018-01-272- 刘洋3课程安排合理2022-02-211
- 李三娟很好2023-02-27归属地：湖北
- 方薇非常好2022-10-19归属地：上海
- 陈东太郎很好2022-10-14归属地：上海
收起评论