文章分两部分：

1、如何收集交互案例

2、如何理解设计中的“借鉴”——探寻设计本质

1、交互案例收集 2 步走

为什么要收集交互案例呢？

你产出方案的上限不会超过你的眼界，就跟审美的道理一样的，说俗气点：没见过好东西是设计不出好东西的。

所以交互案例的收集非常重要且十分必要。集案例的目的是为了能用得上，所以收集交互案例有两个非常重要的动作必须做：

持续收集、定期整理

1）持续收集

交互设计和视觉设计一样，随着时代的发展和用户设备的更换，交互方式也会日新月异，旧的设计表达方式放在“当下”不仅仅是过时，更可能会阻碍用户对产品的理解和操作，所以需要我们持续收集。

收集交互素材有两种方式：日常积累和主动挖掘。

日常积累即平时玩手机或电脑的时候看到不错的设计就截图保存，千万不要只靠自己的大脑记忆，当时你可能觉得自己记住了，但是第二天你就忘得一干二净，比如你还记得你昨天吃了什么吗？

主动挖掘即拿出整块时间专门来做案例的收集，我比较常用的网站是花瓣，直接搜索关键词就能出来很多结果，适合精准查找。

花瓣搜索👇🏻

2）定期整理

跟着我念：

素材不整理相当于废材！

素材不整理相当于废材！

素材不整理相当于废材！

收集固然重要，但是整理比收集更重要，这涉及到我们在后续工作中是否能快速匹配到合适的方案。

素材的整理我只分享一种方式，也是我从事设计工作以来一直在用的整理方式——打标签。

给每一张图片打标签，大到信息架构产品功能，小到按钮状态都打上标签，过程虽然繁琐了点，但是等你做需求的时候就会发现这就是一个资源大宝库，极大减少了你的调研时间，提升工作效率和方案质量。

下面我从工具和打标签方法来展开讲讲。

用什么工具？

我推荐：eagle（https://cn.eagle.cool/）

有多好用？我推荐给了我所有认识的设计师，创始人很厉害，产品、设计、开发全能，真真是我的偶像~

软件交互就不夸了，使用时极少遇到困扰我的点，感人肺腑的是，在这个啥啥软件都要按年付费的时代，eagle收费方式居然是买断制！你敢信？学生还可以用教育优惠还可以打7折，我都感动哭了。

哈哈哈，感觉自己像广告植入，真的好用惨了~

eagle官网介绍图👇🏻

怎么用eagle整理图片？

分类→打标签

我的建议是先给图片按照端分个大类，例如PC软件和移动端软件，然后再给图片打上细分标签。具体打标签的方法我就不介绍了，太基础了，我主要讲讲打标签的范围。

标签怎么打才能尽可能把图片中的交互设计案例给标注出来呢？

两个建议：颗粒度尽可能细、不用太规范

首先，颗粒度尽可能细

哪种颗粒度算细？

看看下图，我有五百多个标签，只要是界面上有的，我基本上都打上标签。不要觉得麻烦，等你用的时候就知道有多好用。

其次，标签不用太规范。

导航栏、播放器、弹窗……这些标签是不是很规范？当然了，你可以用这些规范的标签。

但是对于一些比较抽象的描述你也可以用不规范的标签，比如弹窗有出现在界面中间的弹窗，也有从页面底部上滑而来的弹窗，那么针对从页面底部上滑的弹窗，我就一律打上“上拉弹窗”的标签。

其实你会发现不规范的标签你反而使用得更多，为什么？

因为不规范的标签更符合你的心智模型，当你对界面中的一个元素打标签的时候，你的第一感觉就是你对这个元素的心智模型，比如上述案例中的上拉弹窗，我第一眼看到后，我最朴素的认知就是这是一个上拉的弹窗，所以我就打一个“上拉弹窗”的标签，等我工作的时候需要调研上拉弹窗的时候，只需要搜索上拉就可以出现系列结果。

记住，一切工具都是服务于人的，只要能够提高你的效率，野路子也不是不可以。

方法就介绍完了，其实方法很简单，难的是日复一日的坚持。

到现在为止我已经收集了七千多张图片，平均每张图片打上三到四个标签，一段时间会花一些时间来清理时间久远的设计图。

看到这里可能就会有人问了，收集这么多图片可以帮助提升工作效率，是因为可以有现成的方案抄吗？

关于这个问题，我也很想分享一些我的看法。

2、如何理解设计中的“借鉴”——探寻设计本质

前段时间和一位刚毕业的交互设计师聊天，他说感觉设计好像就是你抄我我抄你，言语间对设计所做的事情颇有些失望。

我也和他说了说我的看法。

为什么会觉得设计就是抄，你抄我我抄你？

因为大部分人只看到了事情的表象，如果一个界面中你看到的只是按钮的状态变化，界面的跳转，那你永远只能看到表象，拿到优秀案例也只能照猫画虎，久而久之，就容易产生搬运工思维，觉得自己没价值。

就像我们看待自己的工作一样，虽然我经常开玩笑说摆烂躺平，但是我内心深处非常热爱我的工作，注意是“我的”工作，“我的”工作不是公司的需求，而是我对一个设计方案的整体思考付出以及最后上线用户使用，还有也是更重要的是我从设计中获得的快乐，不要把快乐寄托在公司身上。

情绪这玩意永远向内求，才不容易失望，如果看不到这一层，长此以往会比较痛苦。

底层逻辑是向外寻求资源，向内寻求快乐。

分析交互设计案例也一样，抓住优秀案例背后的底层逻辑，学会了它的底层逻辑后，我们模仿的就是它的思路，解决问题的思路。

举个例子。

比如知乎直播间的投票交互。

当我们看到下图的设计的时候，先用我们的主观想法来分析一下，为什么要用小卡片来承载投票，又为什么要做折叠呢？

用小卡片承载投票，很明显，优势在于面积小交互轻量，不会影响用户观看直播。

而把小卡片做折叠道理也是一样的，投票后看到了结果，投票这一任务就已经完成，对用户而言就不那么重要了，折叠成更小的卡片既能保留投票查看入口，又能弱化投票的视觉存在减少对直播的干扰。

以上是表象，如何把底层逻辑提炼出来？

关注此交互方式解决了什么问题。

虽然我们不是内部人员，无法结合实际业务分析，但是也能从界面中略知一二，就这“一二”也是有价值的。

我们看看这个卡片解决了什么问题呢？

两个关键词：轻量化、主次关系。

轻量化

除了小卡片，常规的弹窗也能承载投票，但是这些弹窗可就相对更笨重一些，对用户的填写压力也会更大，那么可能就会降低用户的填写率。

主次关系

直播间最重要的是视频内容，能不遮挡就不遮挡，搞清楚主次关系了，设计方案就好办了，只要满足目的的设计方案都不会有太大问题。

看，从这个小卡片中提炼出来的不是卡片的折叠，而是轻量化和主次关系。

那我们怎么运用呢？

举个例子，现在有一个页面需要加一个快捷提问功能，假如设计目标是让这个板块在页面比较轻量化地展示，并且在本页面展示。目标确定了，下面就根据目标去匹配设计方案，现在就可以把知乎的卡片的轻量化处理方式拿来试试，使用浮层+折叠的方式来达到轻量化的目的。

最后还想谈谈我关于设计方案的看法，其实方案也就是所谓的答案有很多，但是精准的问题却不多，其实设计的关键点不在于找答案，而在于定位问题，只有问题定位准了，答案也就是水到渠成的事情。

以上。