看完上千个交互设计神作后,我总结了这5个设计技巧,免费赠你

首先 , 我想大家会有这样的问题:什么是微交互 (micro-)?
来自 UXPin(一款在线可交互原型制作工具)的给出了如下定义:“微交互是在交互设备上的单一交互流程的细节优化 。”
可能不是太容易理解 , 那就多看几遍吧 。
在进入正题之前 , 有一点我要先声明一下 , 接下来我要分析的 UI 动效都是出自非常牛逼的大神之手 。我非常尊敬他们和他们的作品 , 他们非常乐意分享他们的经验和未完成的稿件 。不过在我分析作品的时候不少设计师的态度都非常差 。这可不是我的风格 。我都是用严肃的眼光去看待设计的 , 但是会用娱乐性的方式表达我的观点 。如果我碰巧说了些不中听的话 , 还请多多包涵 。
让我们开始吧!
一、看在手绘板的份上 , 克制一下自己
设计师就像一朵含苞待放的花儿一样需要精(Jin)心(Qian)的照顾和呵护 , 但在设计高质量的微交互时 , 在你完稿前都充满着摧残 。
动效设计是个尝试新想法并验收成果的好途径 。下面这个作品出自(一位在字型、排版、色彩以及动效方面特别牛逼的人)之手 , 一起来看看 。
下面我们一帧一帧地来分析:
1、首先能最直观的感受到的是图片的“3D翻动”效果 , 这在我看来是完全没必要的 , 甚至是违法的(开个玩笑 , 只是确保你还在看) 。在这个作品中 , 如果把任何一个多余的动效去掉来简洁的表述的话会是一个不错的想法 。
2、其次 , 你可能注意到了预览流中的图片是被裁剪过的 , 而在编辑界面中是原图尺寸 。在实际应用中这显然是不可行的 。
3、第三点 , 可以注意到顶部导航栏的图标过渡的时间特别特别地长 。第一次看会觉得很棒 , 但是看久了就会很烦 。微交互要迅速 , 要简洁 , 要有明显地速度变化 , 持续时间最多在300~400毫秒 。
4、看完了这些之后 , 咱们再来看看底部 , 这里两个图标并不是同时出现 , 这意味着一个错误的交互叙述流程(多余地强调)和理解时间的延长 。
总结:
动效设计时会有许许多多这样的参数需要考虑 。你需要明确哪些可以用、哪些不可以用、哪里可以再简短、哪里不用花太多精力 , 并从中获取清晰易用的经验 。这并不是说你不能天马行空加上一些有趣的细节 , 只是说这些细节可能会让整体显得很累赘 。
小技巧:
去掉多余的部分 。时刻提醒自己这些细节动效是不是保持了简洁的微交互 , 还是让交互体验变糟了?
关键词:
克制
二、不要为了效果而牺牲叙述
交互叙述流程()在用户体验中非常重要 , 一部分是因为这与使用者的预期相关 , 连贯的交互叙述流程不会超出使用者的认知负荷;另一部分是因为这与我们大脑收集和理解信息大致模式相关 。此外这还与我们的心智模式有关联 。总之 , 交互叙述流程很重要 。
(一位强壮的动画设计师)的这个作品为我们呈现了一个非常“好”的例子 。
看到这个动效的第一感觉是不是很诡异 , 以为是在线条上输入文字 , 然而却弹出了一个隐藏式的文本框 。这种点按-弹出-输入的交互叙述流程挺让人心烦的 , 或许是想看上去酷炫一点吧 。然而这种交互叙述流程打断了我们输入信息时的预期流程 。我们不得不停下来去面对这样的意外 , 调整好心态后才能继续操作 。