设计了一个登陆动画，却发现一个苦恼的问题

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 2637 days ago, the information mentioned may be changed or developed.

之前设计的发现动画没了，查了半天，发现原因竟然是登录成功和登录错误都几乎是瞬间完成，动画效果还没来及全部完成（ 0.3s ），既然网站速度太快，动画肯定想用也用不上了

之前做的动画效果是在提交的时候，“登陆 XX ”几个大字向上移动，如果登录错误，则退下来，并顺带错误信息也一块拉下来，就像插入钥匙然后拉抽屉一样，之前都用的好好的，现在用不上了还挺可惜的

还有就是同样的网速，各大网站登陆的速度并不快（ 0.5~1s ），这是怎么回事啊？

Supplement 1 · Mar 22, 2019

新做好的动画演示： https://v2ex.xtra.eu.org/t/547401

动画

错误

登陆

26 replies • 2019-03-22 14:09:17 +08:00

iyaozhen

Mar 19, 2019 via Android

一个登录请求和网速关系不大，数据量很少。0，主要是后端响应时间

fakeshadow

Mar 20, 2019

默认加个 timeout 好了

ksharp8

Mar 20, 2019

js settimeout

pinews

Mar 20, 2019

@fakeshadow
@ksharp8 这不成削足适履了么

opengps

Mar 20, 2019 via Android

要不设计成非登录过程靠边小尺寸显示，登录过程居中大尺寸显示

6260628

Mar 20, 2019

你这么描述问题注定苦恼

LancerComet

Mar 20, 2019

楼主你看你自己怎么定位动画
如果你是觉得动画是载入时间的补充那在系统响应很快的情况下确实没什么用
不过有很多产品对动画的定位是一种视觉需求，毕竟人对美是有要求的，这些产品的登录都是一瞬间，但仍然会把精美的登录动画播放完成，比如 Discord

jinliming2

Mar 20, 2019 via iPhone

我的理解：动画的本身应该是在耗时较长的动作用来做补充的。
如果网速较慢，延迟较高，那么在用户点击提交按钮后界面会有较长时间的“无响应”，这个时候使用动画来进行过渡就会比较好。
但如果系统速度足够快，那么强行显示动画也会有点多余，甚至会令用户反感，毕竟不管你动画做的多么炫酷，“加载中”的状态总是令人讨厌的。明明我的电脑配置非常高，网速也非常快，为什么就是得不到无缝的操作体验？
如果是转场动画，也就是一个界面切换到另一个界面，在这个过程中添加一个过渡效果也是可以的，但是动画要做到非常流畅并且动画时间越短越好，给用户一个反馈，但是还没等用户反应过来，动画就结束了。如果这个转场时间过长，那么就会给用户带来明显的延迟感，将原本应该直接打开的页面愣是改成了需要“加载中”的页面。

Orchild

Mar 20, 2019

用产品大家还是希望快速登陆吧，难不成还有人喜欢看半天动画~

Cheons

Mar 20, 2019 via Android

🤔你喜不喜欢 app 开屏广告？同理

kanata

Mar 20, 2019

既然后端速度很快，要不就 toast 一下喽。

megamilk

Mar 20, 2019

@jinliming2 这是交互设计知识吧？

Sapp

Mar 20, 2019

@jinliming2 但是你要考虑到，网速是个不可控的东西，百分之 90 的人登录都是一瞬间，但是就有那么百分之几的卡住了，如果你不给个动画，这个体验就很差了。所以这个解决方案就是要么延迟一下取消动画，每个人都能看到动画，但是不需要延迟太久，太久就拖沓了。要么就延迟播放动画，让网速好的人直接进去，网速差的看动画