「阅读」Web界面设计
时间：2023-06-04 15:06:02 | 来源：网站运营
时间：2023-06-04 15:06:02 来源：网站运营
「阅读」Web界面设计：这几天在整理作品集，发现之前随手写的表单实践一文巨烂无比，所以决定回炉重搞。不过那篇文章里提到的《Web界面设计》 一书，倒是本很不错的书。
此篇文章，我主要想跟大家分享下，我在设计 Web 端的自定义表单需求的时候，从此书学到的知识。（不知道现在还有多少人做过类似「自定义表单」这类的需求... 其实整个交互很简单，就是用户从左方拖拽控件到屏幕中央的手机内，然后在右方设置控件属性）
PS：发现这本书真的非常幸运。在设计此需求的时候，想找一些关于 Web 端设计的书籍来看（因为读书的时候，做的都是移动端的设计，知识相对薄弱）。然后我随手在豆瓣搜索「Web」 ，以为没多大希望... 谁知道一搜就搜到了好书...
----------------------------------------------------------------------------------------------------------
一、疑问
在设计 Web 端的自定义表单的时候，我发现拖放看似很简单。但事实上，拖放过程涉及了大量细节。比如：
- 用户怎么知道可以拖动？
- 拖放对象的目的是什么？
- 在哪里可以或不可以放置拖动的对象？
- 通过什么视觉元素来表示拖动能力？
- 拖动期间，怎样表示有效和无效的放置目标？
- 是否允许用户拖动实际的对象？
- 还是只允许用户拖动实际对象的幻影？
- 整个拖动与放置期间，要对用户给出哪些视觉反馈？
幸运的是，我在《Web 界面设计》一书的第二章中得到了答案。此书将用户拖放操作的特殊状态称为趣味瞬间（Interesting Moment）。
二、事件
书中提到，趣味瞬间是由15个事件与6个相关元素组合而成。这15个事件分别是：
1.
页面加载：在所有操作发生之前，可以预告拖放功能。例如，可以在页面上显示一条提示信息，告诉用户可以拖放某些元素。
2.
鼠标悬停：鼠标指针悬停在可拖动的对象上方。
3.
鼠标按下：在可拖动对象上按下鼠标键。
4.
拖动启动：鼠标开始移动。(在对象被拖动3像素或鼠标按下超过0.5秒时启动拖动。)
5.
拖动离开原始位置：可拖动对象离开了原来的位置或包含它的容器。
6.
拖动重新进入原始位置：可拖动对象又进入了原来的位置。
7.
拖动进入有效目标：可拖动对象位于有效的放置目标上方。
8.
拖动退出有效目标：可拖动对象离开有效的放置目标。
9.
拖动进入无效目标：可拖动对象位于无效的放置目标上方。
10.
拖动进入非特定目标：可拖动对象位于放置目标和非放置目标之外的区域。取决于是否将有效目标之外的区域全都看成无效目标。
11.
拖动悬停于有效目标：可拖动对象暂时停驻于有效目标之上，但用户没有释放鼠标。此时，有效的放置目标通常会突然打开。例如，拖动并在一个文件夹上方暂停，文件夹会打开以示可以接受上方对象。
12.
拖动悬停于无效目标：可拖动对象暂时停驻于无效目标之上，但用户没有释放鼠标。这个事件有用吗？也许可以在此时对用户给出反馈，说明为什么下面不是一个有效目标。
13.
放置被接受：可拖动对象位于有效目标之上，而且放置已经被接受。
14.
放置被拒绝：可拖动对象位于无效目标之上，而且放置已经被拒绝。此时用不用把被拖动对象移回原处？
15.
放置在父容器上：拖动对象时的位置一般来说不会有什么特殊之处，不过在个别情况下，不同位置会有不同的含义。
三、元素
在上述的每个事件发生时，都可以在视觉上操作一些相关元素，这些元素包括：
- 页面（例如，在页面上显示静态消息）
- 光标
- 工具提示条
- 拖动对象（或拖动对象的某个部分，例如模块的标题区）
- 拖动对象的父容器
- 放置目标
四、组合
最后，将这些事件与元素放进一个表格中，就会得到：
每一个事件与元素的交叉点，都是可实现的行为。而上表就像一个备忘录，可以确保不遗漏交互期间需要处理的任何情况。但是，考虑到简洁的需求，我们不一定需要为每一个交叉点都设计一个行为。同时，在设计行为的时候，我们还需要考虑该行为是否适合拖放。
五、结论
《Web界面设计》中也提到，适合拖放的情况有以下五种：
1. 拖放模块（重新排列页面上的模块）
2. 拖放列表（重新排列列表项的顺序）
3. 拖放对象（改变对象间的从属关系）
4. 拖放操作（在被放置对象上执行操作，比如：拖动上传功能）
5. 拖放集合（通过拖放操作集合，比如：购物车功能）
如果你设计的界面是属于以上几种，那么拖放操作会是很好的选择。
在线咨询
