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

泽捻知

612

静候好戏 采集到
人像
采集
雨ˋ滴滴答答采集到二次元

418

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

摄影 · 极简主义

445

Lily名字十七画 采集到
场景素材
采集
behance.net
顺物荣枯采集到主题活动

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

69

顺物荣枯 采集到
主题活动
采集
melodySixi采集到祛湿

湿气-微营销海报

22

melodySixi 采集到
祛湿
该采集待公开
采集
hidepink采集到素材–街景小场景

33

hidepink 采集到
素材–街景小场景
采集
pixiv.net
〃梦落雨`笑╰︶采集到二次元美图

しぶりん

215

〃梦落雨`笑╰︶ 采集到
二次元美图
采集
weibo.com
Lily名字十七画采集到场景素材

极简主义摄影。

361

Lily名字十七画 采集到
场景素材
采集
pinterest.com
罗菩堤rowe采集到【色谱】装修配色

#Coastal #Colors Fashionable Coastal Living R...

27

罗菩堤rowe 采集到
【色谱】装修配色
采集
峰言风语采集到醉美身材

95

峰言风语 采集到
醉美身材
该采集待公开
采集
mp.weixin.qq.com
菓仔fish采集到练习

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

389

菓仔fish 采集到
练习
采集
l0XI4gBo晓风残月采集到皇室

7

l0XI4gBo晓风残月 采集到
皇室
采集
meigongyun.com
伊岚分享采集到png素材

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

335

伊岚分享 采集到
png素材
采集
xiachufang.com
Dora爱幻想采集到面包片

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

1151

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

动漫

62

海盐荔枝的夏日 采集到
动漫
采集
alpha.wallhaven.cc
菇凉&采集到地产配图

General 1920x1080 Greece hotels mountain swim...

90

菇凉& 采集到
地产配图
采集
惜朝采集到绘画

206

惜朝 采集到
绘画