编者按:自学设计时有哪些方法可以帮你飞速进步?想学设计前应该掌握哪些自学方法?本文总结了2个步骤,帮你快速成长。
这篇文章教你透过现象看本质,把优秀案例的底层逻辑摸清楚,拿来为自己所有!
文章分两部分:
- 如何收集交互案例
- 如何理解设计中的“借鉴”——探寻设计本质
为什么要收集交互案例呢?
你产出方案的上限不会超过你的眼界,就跟审美的道理一样的,说俗气点:没见过好东西是设计不出好东西的。
所以交互案例的收集非常重要且十分必要。集案例的目的是为了能用得上,所以收集交互案例有两个非常重要的动作必须做:
(一)持续收集、定期整理
1. 持续收集
交互设计和视觉设计一样,随着时代的发展和用户设备的更换,交互方式也会日新月异,旧的设计表达方式放在“当下”不仅仅是过时,更可能会阻碍用户对产品的理解和操作,所以需要我们持续收集。
收集交互素材有两种方式:日常积累和主动挖掘。
日常积累即平时玩手机或电脑的时候看到不错的设计就截图保存,千万不要只靠自己的大脑记忆,当时你可能觉得自己记住了,但是第二天你就忘得一干二净,比如你还记得你昨天吃了什么吗?
主动挖掘即拿出整块时间专门来做案例的收集,我比较常用的网站是花瓣,直接搜索关键词就能出来很多结果,适合精准查找。
花瓣搜索
2. 定期整理
跟着我念:
素材不整理相当于废材!
素材不整理相当于废材!
素材不整理相当于废材!
收集固然重要,但是整理比收集更重要,这涉及到我们在后续工作中是否能快速匹配到合适的方案。
素材的整理我只分享一种方式,也是我从事设计工作以来一直在用的整理方式——打标签。
给每一张图片打标签,大到信息架构产品功能,小到按钮状态都打上标签,过程虽然繁琐了点,但是等你做需求的时候就会发现这就是一个资源大宝库,极大减少了你的调研时间,提升工作效率和方案质量。
下面我从工具和打标签方法来展开讲讲。
用什么工具?
我推荐:eagle( https://cn.eagle.cool/ )
有多好用?我推荐给了我所有认识的设计师,创始人很厉害,产品、设计、开发全能,真真是我的偶像~
软件交互就不夸了,使用时极少遇到困扰我的点,感人肺腑的是,在这个啥啥软件都要按年付费的时代,eagle 收费方式居然是买断制!你敢信?学生还可以用教育优惠还可以打 7 折,我都感动哭了。
编者注:不想付费的同学,也可以试试这款国产平替:
eagle 官网介绍图
怎么用 eagle 整理图片?
分类→打标签
我的建议是先给图片按照端分个大类,例如 PC 软件和移动端软件,然后再给图片打上细分标签。具体打标签的方法我就不介绍了,太基础了,我主要讲讲打标签的范围。
标签怎么打才能尽可能把图片中的交互设计案例给标注出来呢?
两个建议:颗粒度尽可能细、不用太规范
首先,颗粒度尽可能细
哪种颗粒度算细?
看看下图,我有五百多个标签,只要是界面上有的,我基本上都打上标签。不要觉得麻烦,等你用的时候就知道有多好用。
其次,标签不用太规范。
导航栏、播放器、弹窗……这些标签是不是很规范?当然了,你可以用这些规范的标签。
但是对于一些比较抽象的描述你也可以用不规范的标签,比如弹窗有出现在界面中间的弹窗,也有从页面底部上滑而来的弹窗,那么针对从页面底部上滑的弹窗,我就一律打上“上拉弹窗”的标签。
其实你会发现不规范的标签你反而使用得更多,为什么?
因为不规范的标签更符合你的心智模型,当你对界面中的一个元素打标签的时候,你的第一感觉就是你对这个元素的心智模型,比如上述案例中的上拉弹窗,我第一眼看到后,我最朴素的认知就是这是一个上拉的弹窗,所以我就打一个“上拉弹窗”的标签,等我工作的时候需要调研上拉弹窗的时候,只需要搜索上拉就可以出现系列结果。
记住,一切工具都是服务于人的,只要能够提高你的效率,野路子也不是不可以。
方法就介绍完了,其实方法很简单,难的是日复一日的坚持。
到现在为止我已经收集了七千多张图片,平均每张图片打上三到四个标签,一段时间会花一些时间来清理时间久远的设计图。
看到这里可能就会有人问了,收集这么多图片可以帮助提升工作效率,是因为可以有现成的方案抄吗?
关于这个问题,我也很想分享一些我的看法。
前段时间和一位刚毕业的交互设计师聊天,他说感觉设计好像就是你抄我我抄你,言语间对设计所做的事情颇有些失望。
我也和他说了说我的看法。
为什么会觉得设计就是抄,你抄我我抄你?
因为大部分人只看到了事情的表象,如果一个界面中你看到的只是按钮的状态变化,界面的跳转,那你永远只能看到表象,拿到优秀案例也只能照猫画虎,久而久之,就容易产生搬运工思维,觉得自己没价值。
就像我们看待自己的工作一样,虽然我经常开玩笑说摆烂躺平,但是我内心深处非常热爱我的工作,注意是“我的”工作,“我的”工作不是公司的需求,而是我对一个设计方案的整体思考付出以及最后上线用户使用,还有也是更重要的是我从设计中获得的快乐,不要把快乐寄托在公司身上。
情绪这玩意永远向内求,才不容易失望,如果看不到这一层,长此以往会比较痛苦。
底层逻辑是向外寻求资源,向内寻求快乐。
分析交互设计案例也一样,抓住优秀案例背后的底层逻辑,学会了它的底层逻辑后,我们模仿的就是它的思路,解决问题的思路。
举个例子。
比如知乎直播间的投票交互。
当我们看到下图的设计的时候,先用我们的主观想法来分析一下,为什么要用小卡片来承载投票,又为什么要做折叠呢?
用小卡片承载投票,很明显,优势在于面积小交互轻量,不会影响用户观看直播。
而把小卡片做折叠道理也是一样的,投票后看到了结果,投票这一任务就已经完成,对用户而言就不那么重要了,折叠成更小的卡片既能保留投票查看入口,又能弱化投票的视觉存在减少对直播的干扰。
以上是表象,如何把底层逻辑提炼出来?
关注此交互方式解决了什么问题。
虽然我们不是内部人员,无法结合实际业务分析,但是也能从界面中略知一二,就这“一二”也是有价值的。
我们看看这个卡片解决了什么问题呢?
两个关键词:轻量化、主次关系。
轻量化
除了小卡片,常规的弹窗也能承载投票,但是这些弹窗可就相对更笨重一些,对用户的填写压力也会更大,那么可能就会降低用户的填写率。
主次关系
直播间最重要的是视频内容,能不遮挡就不遮挡,搞清楚主次关系了,设计方案就好办了,只要满足目的的设计方案都不会有太大问题。
看,从这个小卡片中提炼出来的不是卡片的折叠,而是轻量化和主次关系。
那我们怎么运用呢?
举个例子,现在有一个页面需要加一个快捷提问功能,假如设计目标是让这个板块在页面比较轻量化地展示,并且在本页面展示。目标确定了,下面就根据目标去匹配设计方案,现在就可以把知乎的卡片的轻量化处理方式拿来试试,使用浮层+折叠的方式来达到轻量化的目的。
最后还想谈谈我关于设计方案的看法,其实方案也就是所谓的答案有很多,但是精准的问题却不多,其实设计的关键点不在于找答案,而在于定位问题,只有问题定位准了,答案也就是水到渠成的事情。
以上。
欢迎关注作者的微信公众号:馊面包
复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。
发评论!每天赢奖品
点击 登录 后,在评论区留言,系统会随机派送奖品
2012年成立至今,是国内备受欢迎的设计师平台,提供奖品赞助 联系我们
AI绘画创意与实战
已累计诞生 655 位幸运星
发表评论 已发布4条
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓