编者按:自学设计时有哪些方法可以帮你飞速进步?想学设计前应该掌握哪些自学方法?本文总结了2个步骤,帮你快速成长。

这篇文章教你透过现象看本质,把优秀案例的底层逻辑摸清楚,拿来为自己所有!

文章分两部分:

  1. 如何收集交互案例
  2. 如何理解设计中的“借鉴”——探寻设计本质

一、交互案例收集 2 步走

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

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

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

(一)持续收集、定期整理

设计师快速成长有哪些秘诀?我总结了这2个步骤!

1. 持续收集

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

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

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

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

设计师快速成长有哪些秘诀?我总结了这2个步骤!

花瓣搜索

2. 定期整理

跟着我念:

素材不整理相当于废材!

素材不整理相当于废材!

素材不整理相当于废材!

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

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

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

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

用什么工具?

我推荐:eagle( https://cn.eagle.cool/

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

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

编者注:不想付费的同学,也可以试试这款国产平替:

设计师快速成长有哪些秘诀?我总结了这2个步骤!

eagle 官网介绍图

怎么用 eagle 整理图片?

分类→打标签

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

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

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

首先,颗粒度尽可能细

哪种颗粒度算细?

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

设计师快速成长有哪些秘诀?我总结了这2个步骤!

其次,标签不用太规范。

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

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

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

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

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

设计师快速成长有哪些秘诀?我总结了这2个步骤!

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

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

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

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

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

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

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

设计师快速成长有哪些秘诀?我总结了这2个步骤!

为什么会觉得设计就是抄,你抄我我抄你?

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

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

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

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

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

举个例子。

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

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

设计师快速成长有哪些秘诀?我总结了这2个步骤!

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

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

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

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

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

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

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

轻量化

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

主次关系

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

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

设计师快速成长有哪些秘诀?我总结了这2个步骤!

那我们怎么运用呢?

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

设计师快速成长有哪些秘诀?我总结了这2个步骤!

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

以上。

欢迎关注作者的微信公众号:馊面包

设计师快速成长有哪些秘诀?我总结了这2个步骤!

收藏 36
点赞 34

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。