左侧的卡片是没有缓动的，右侧的是带有缓动...
采集 评论
查看来源 shejidaren.com
郜小丫Cassie从橘子·葵
转采于2022-02-21 14:41:05
左侧的卡片是没有缓动的，右侧的是带有缓动的，看起来会自然很多。
渐快与渐慢在现实世界中，大多数物体都遵循着缓动运动规律。也就是说，物体的运动并不会瞬间开始或瞬间结束，就像一个物体自由落体，也是一开始很慢后面才变会变快。
UI-规范
郜小丫Cassie
多字段行内编辑示例 多字段行内编辑 注：在『多字段行内编辑』的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要『巧用过渡』原则中的『解释刚刚发生了什么』来消除这种视觉影响。
标签页示例 标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。
拖放图片/文件示例 拖放图片/文件
拖放列表示例 利用拖放# 拖放列表示例 拖放列表示例 状态一：鼠标悬停该行时，出现可移动的『图标』； 状态二：鼠标悬停在该『图标』时，指针变为『手型』，点击即可进行拖动； 状态三：拖动到可放置区块，出现蓝色描边，告知用户该区块可放置该对象。 拖放列表 只能限制在一个维度（上/下或者左/右）进行拖放。
不区分主次的示例 在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。
推荐示例 特例：在执行某些无法『撤销』的操作时，可以点击『删除』后，出现 Popconfirm 进行二次确认，在当前页面完成任务。
推荐示例 足不出户 能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。 变化盲视（Change Blindness） ：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》 心流（Flow） ：也有别名以化境 (Zone) 表示，
对比 对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。 注：要实现有效的对比，对比就必须强烈，切不可畏畏缩缩。
挤压和拉伸被应用于侧边栏
左侧的卡片是没有缓动的，右侧的是带有缓动的，看起来会自然很多。 渐快与渐慢在现实世界中，大多数物体都遵循着缓动运动规律。也就是说，物体的运动并不会瞬间开始或瞬间结束，就像一个物体自由落体，也是一开始很慢后面才变会变快。
在界面中，重要的交互也会通过一些夸张的动画来引起用户的注意。谷歌设计规范中的FAB按钮就是一个很好的例子，FAB按钮在不动的时候也比较能引起注意，因为它通常会带有比较鲜明的颜色，并且是独立悬浮在界面元素之上的。当它被点击时，FAB的动画被放大，把整个界面都占满，使得它完全占据用户的注意力。
在界面中，呈现方式能够决定元素的。 比如现在有一个基于兴趣的音乐APP，对这个应用来说，最重要的事就是让动画引导用户选择他们所喜欢的音乐。因此，有必要将类似的操作与其他元素分开编排，有目的的引导用户。
当一个按钮被按下时，就可以理解为受到了挤压，通过控制按钮的挤压和拉伸，我们可以很轻易的做好一个按钮的交互动画。除了按钮之外，这种原则也可以应用于UI中的任何交互元素上。
右边的过渡动画显得太过于漫长，繁琐
悬停的交互通常会暗示这个按钮是可以点的 当我们把鼠标悬停在元素上时，元素会提供反馈，表明它是可以点击的，并且在点击时，又会有一些别的反馈。
在有水平滚动界面里，通常在交互时会显示下一个元素的部分内容。这其实是一个很好的例子，因为它是在告知用户下一步的一些信息。
在界面中，可以使元素在停止之前超过它们原本的位置，使得元素运动更加自然。（译者注：大白话就是我们常说的回弹效果。） 界面有一定的回弹，会显得更加自然。
对于支付这么重要功能的按钮，通过夸张的动效引起用户的注意
气泡确认框 目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
交互设计之（二）搜索框设计-UI中国-专业用户体验设计平台
同采自
shejidaren.com
该采集也在以下画板
加载更多
推荐给你的采集
采集
峰言风语采集到醉美身材

95

峰言风语 采集到
醉美身材
采集
l0XI4gBo晓风残月采集到皇室

7

l0XI4gBo晓风残月 采集到
皇室
采集
静候好戏采集到人像

泽捻知

610

静候好戏 采集到
人像
采集
weibo.com
Lily名字十七画采集到场景素材

摄影 · 极简主义

445

Lily名字十七画 采集到
场景素材
采集
雨ˋ滴滴答答采集到二次元

416

雨ˋ滴滴答答 采集到
二次元
采集
weibo.com
Lily名字十七画采集到场景素材

极简主义摄影。

361

Lily名字十七画 采集到
场景素材
该采集待公开
采集
惜朝采集到绘画

205

惜朝 采集到
绘画
采集
meigongyun.com
伊岚分享采集到png素材

冬日冷色调圣诞手绘花卉系列元素 Scandi Fest collection

335

伊岚分享 采集到
png素材
采集
behance.net
顺物荣枯采集到主题活动

夏日逃离/SUMMER MUSIC FESTIVAL : 夏日逃离音乐会 | Summer...

69

顺物荣枯 采集到
主题活动
采集
hidepink采集到素材–街景小场景

33

hidepink 采集到
素材–街景小场景
采集
melodySixi采集到祛湿

湿气-微营销海报

22

melodySixi 采集到
祛湿
该采集待公开
采集
pixiv.net
〃梦落雨`笑╰︶采集到二次元美图

しぶりん

214

〃梦落雨`笑╰︶ 采集到
二次元美图
采集
pinterest.com
罗菩堤rowe采集到【色谱】装修配色

#Coastal #Colors Fashionable Coastal Living R...

27

罗菩堤rowe 采集到
【色谱】装修配色
采集
xiachufang.com
Dora爱幻想采集到面包片

如何做超厚的沼三明治~详细tip！牛油果鸡蛋午餐肉三明治~

1141

Dora爱幻想 采集到
面包片
采集
海盐荔枝的夏日采集到动漫

动漫

62

海盐荔枝的夏日 采集到
动漫
采集
mp.weixin.qq.com
菓仔fish采集到练习

【绘画参考】Hong SoonSang 的角色设定图（人物设计必学）

389

菓仔fish 采集到
练习
采集
alpha.wallhaven.cc
菇凉&采集到地产配图

General 1920x1080 Greece hotels mountain swim...

90

菇凉& 采集到
地产配图