拖放列表示例 利用拖放# 拖放列表示例 ...
采集 评论
查看来源 ant.design
郜小丫Cassie从橘子·葵
转采于2022-02-21 14:41:24
拖放列表示例
利用拖放#
拖放列表示例
拖放列表示例
状态一：鼠标悬停该行时，出现可移动的『图标』；
状态二：鼠标悬停在该『图标』时，指针变为『手型』，点击即可进行拖动；
状态三：拖动到可放置区块，出现蓝色描边，告知用户该区块可放置该对象。
拖放列表
只能限制在一个维度（上/下或者左/右）进行拖放。
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
该采集也在以下画板
加载更多
推荐给你的采集
采集
pinterest.com
罗菩堤rowe采集到【色谱】装修配色

#Coastal #Colors Fashionable Coastal Living R...

27

罗菩堤rowe 采集到
【色谱】装修配色
采集
惜朝采集到绘画

205

惜朝 采集到
绘画
采集
alpha.wallhaven.cc
菇凉&采集到地产配图

General 1920x1080 Greece hotels mountain swim...

90

菇凉& 采集到
地产配图
采集
mp.weixin.qq.com
菓仔fish采集到练习

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

389

菓仔fish 采集到
练习
采集
静候好戏采集到人像

泽捻知

609

静候好戏 采集到
人像
采集
xiachufang.com
Dora爱幻想采集到面包片

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

1141

Dora爱幻想 采集到
面包片
采集
pixiv.net
〃梦落雨`笑╰︶采集到二次元美图

しぶりん

214

〃梦落雨`笑╰︶ 采集到
二次元美图
采集
behance.net
顺物荣枯采集到主题活动

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

69

顺物荣枯 采集到
主题活动
该采集待公开
该采集待公开
采集
雨ˋ滴滴答答采集到二次元

416

雨ˋ滴滴答答 采集到
二次元
采集
峰言风语采集到醉美身材

95

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

7

l0XI4gBo晓风残月 采集到
皇室
采集
weibo.com
Lily名字十七画采集到场景素材

摄影 · 极简主义

446

Lily名字十七画 采集到
场景素材
采集
melodySixi采集到祛湿

湿气-微营销海报

22

melodySixi 采集到
祛湿
采集
weibo.com
Lily名字十七画采集到场景素材

极简主义摄影。

360

Lily名字十七画 采集到
场景素材
采集
hidepink采集到素材–街景小场景

33

hidepink 采集到
素材–街景小场景
采集
meigongyun.com
伊岚分享采集到png素材

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

335

伊岚分享 采集到
png素材
采集
海盐荔枝的夏日采集到动漫

动漫

61

海盐荔枝的夏日 采集到
动漫