移动互联时代，UI交互设计别困在2010

　　去年五月份测那个社交APP的新版本，我原以为就是常规的UI走查，结果被开发那句“你懂个屁交互”怼得差点掀桌子。那天下午三点，测试机在桌上震得嗡嗡响——开发刚甩过来个安装包，说“按你们提的修改了弹窗动画”。我接过手机时，窗外正下暴雨，雨水顺着玻璃往下淌，像谁把墨汁倒进了水里。

　　打开APP，首页那个“消息提醒”的弹窗，我盯着看了十八秒——不是因为设计多惊艳，是它根本没按需求改。需求里明确写了“弹窗从底部滑入，停留三秒后淡出”，结果现在还是从中间炸开，停留两秒就消失。我截图发给开发，他秒回：“我本地测的好的啊。”配了张截图，背景是他电脑桌面的二次元壁纸，右下角还露出半截泡面桶。

　　我抓起测试机冲到他工位，把手机怼到他显示器前：“你自己看！这动画时长够读半首诗吗？”他瞥了一眼，皱眉：“哦，可能我本地缓存没清。”说完低头敲键盘，手指在键盘上敲得啪啪响，像在砸核桃。我站在旁边等了五分钟，他突然抬头：“对了，你用的哪个版本？我传的是测试分支。”

　　我差点没憋住脏话——测试分支？需求文档里白纸黑字写着“主分支修改”！我转身回工位，路过产品经理的座位，她正举着手机和运营吵架，声音大得整个办公室都能听见：“这个按钮颜色必须改！用户反馈说像垃圾广告！”我路过时瞥了一眼，她手机屏幕上是个亮粉色按钮，确实像极了路边小广告的“点击领取”。

　　回到座位，我重新拉了主分支的代码，编译，安装，再测——弹窗还是从中间炸开。我盯着屏幕，突然想起上周测另一个功能时，开发也说过“我本地好的”。那次是登录页的输入框，他在本地测的时候能正常显示占位符，到了测试环境就变成乱码。后来查了半天，发现是他本地缓存了旧版的CSS文件。

　　这次会不会也是类似的问题？我打开Chrome开发者工具，准备查动画的CSS属性，结果发现弹窗的动画类名根本没在代码里——需求里写的“slide-in”类，实际用的是“pop-up”。我截图发给开发，他回：“哦，那个类名我改了啊，设计说‘slide-in’太老土，要‘pop-up’才有动感。”

　　我差点把键盘砸了——设计说改你就改？需求文档是摆设吗？我翻出需求文档，把“弹窗从底部滑入”那行标红，发到项目群里：“@所有人，弹窗动画类名必须按需求走，‘slide-in’是标准命名，‘pop-up’是十年前的写法！”群里安静了三秒，然后产品经理回：“设计说‘pop-up’更符合移动端交互趋势。”

　　我盯着屏幕，突然想起上周五下班时，设计在工位上刷抖音，视频里是个UI教程，主播正说：“现在流行‘pop-up’动画，比‘slide-in’更有活力！”设计当时还点头，嘴里念叨：“对，下次就用这个。”

　　所以，问题根本不是技术实现，是有些人还活在2010年的交互设计里？移动端都迭代多少代了，还在用“更有活力”“更符合趋势”这种虚头巴脑的词？我原以为大家至少会看点最新的设计规范，结果发现，很多人连Material Design的更新都没跟进——上周测另一个功能时，开发居然问我：“这个FAB按钮应该放右下角还是右下角偏上？”我差点笑出声：“Material Design明文规定，FAB必须放右下角，偏上是2015年的写法！”

　　那天晚上，我加班到九点，把所有弹窗的动画类名都改回“slide-in”，又写了段自动化脚本，专门检查类名是否符合规范。第二天开发找我，说：“你改的类名导致动画不流畅。”我打开他的代码，发现他在CSS里写了“transition: all 0.2s”——需求里明确写了“transition: transform 0.3s”。

　　我指着代码：“这就是你说的‘不流畅’？把‘all’改成‘transform’，时长调到0.3秒，不就解决了？”他挠头：“哦，我忘了需求里写了这个。”我叹了口气——有些人不是不会改，是根本没看需求。

文章配图，仅供参考

　　现在每次测UI，我都先查两件事：一是类名是否符合最新规范，二是动画时长是否符合用户习惯。至于开发说的“我本地好的”，我已经不信了——本地环境再干净，也抵不过生产环境的复杂性。就像上周五，测试环境全绿，生产环境一上线，弹窗直接卡死——后来查是缓存问题，开发本地根本没测缓存场景。

　　所以，别再说“我本地好的”了，真想证明自己，先把需求文档看三遍，再把自动化脚本跑十遍。移动端的交互设计，早不是“能点就行”的时代了——用户要的，是“点得舒服”。

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!