image

12-27-09

MyDay Client Application UI Demo HoverBox

悬停框，是现在我们已经习惯使用的一种交互方式了。自从N+1年前初次用于下载软件后，这种交互方式充分地体现了快速添加内容的优势。

于是我就想，那MyDay是否可以支持悬停框？能让我们在浏览某个网页时，遇到希望搜集的信息归类到某个人，某件事下？ 或者QQ里收到联系方式，能不能拖动内容，快速地添加到 MyDay 里呢？

传统的悬停框如下图所示：

image

这样的设计，虽然很简洁。但是更多的功能需要邮件，而当拖拽文件进入的时候，没有任何反映，只能等完成拖拽后，再弹出具体的对话框。

这样的设计，要是只是下载软件，那还好。因为目的只有一个：下载。 但是MyDay如果要根据不同的功能决定弹出的对话框呢？

例如，如果我们拖入一张图片进入悬停框，我们可能有几个目的：

  • 把这个图片设为一个人或者一件事的照片。
  • 把这个图片当成一节Log添加到一个人或者一件事下。

对于这样的情况，传统的悬停框就失去了其优势。于是我们就想，能不能改进传统的悬停框模式？

于是我改进了下悬停框，如下设计：

下图是正常情况下的悬停框，和其他软件一样。

image

当我们选择一张图片，拖进框内的时候，出现了九宫格。每一个格子对应一个功能（每个彩虹的地方，可以替换，实验用彩虹代替）。

image

然后继续移动鼠标到某一个功能上时，高亮对应的功能，完成拖拽的时候最终实现对应的功能。

  image

当然，对于不同的类型，拖入进去，可以显示不同的功能。例如下面我们拖入一段html文本进入，会看到这样的效果：

image

下面是视频操作演示：

Posted by yx.shawn » Diary

Leave a Comment