向列表添加元素的三种交互方式

向已有的列表添加元素,是一个常见的操作,比如博客后台中需要向文章列表中添加一篇新文章,管理后台需要添加一位新用户等,比较常见的有以下三种交互:

跳转到新页面

在博客的文章列表页,通常在页面顶部都会有一个 “写文章” 的按钮,点击后页面会跳转到添加文章页,点击发布后展示该篇文章发布后的状态。比如 wordpress 的后台是这样:

add-article

需要输入的信息较多的时候,跳转到新页面的方式比较合适,新的页面有足够大的空间进行编辑,缺点就是因为这是一个新页面,加深了页面层级,需要添加对应的菜单让用户返回列表页。

弹出浮窗添加

点击添加按钮后页面弹出浮窗,信息在这个浮窗中填写,添加完成后列表中显示刚刚添加的条目。

add-album
这种方式更加直观,添加成功后列表立即显示了刚刚添加的条目,反馈比较即时,添加的条目信息较少的时候比较适用。

直接行内创建

如果添加和展示的内容比较少,所有信息在列表页都可以默认展示出来,那么就可以使用行内添加的交互方式,下图是 dnspod 中添加 dns 解析记录的交互:

add

这种交互相比浮窗的方式更加简洁,反馈最及时,但只适合较少的信息。但它也有一个缺点:列表本身不一定是按照添加时间倒序排序(比如是按首字母),添加记录时默认在第一行,那么当用户刷新整个页面时,这条记录就不一定显示在第一行了,如果这个列表有翻页,则有可能显示在后几页,用户就会觉得刚刚添加的记录不见了!实际它没有显示在原来的位置上而已,这也会引起用户的困惑。所以使用这种交互方式时,以添加时间顺序倒序排序比较合适。