声享图层调整模块——原型设计、构思

原型设计

愿景诉求

解决目前页面调整交互反人类。目前页面调整功能存在一下几点问题：

1. 预览图不能快速滚动。
2. 预览图不能拖拽排序
3. 不好退出页面调整状态

设计图描述

为了适应用户固有习惯，我们结合了Powerpoint和Keynote的导览图功能，重新设计了声享的页面导览。

将原来的调整页面按钮提示改为页面导览，与slidebar中其他的功能保持一致形式，点击后弹出slide-panel，同时在画布上形成mask遮罩层，点击遮罩层退出页面导览模式。

页面导览设计

如图所示的为新的页面导览设计图

• 进入页面导览模式的时候，应尽量保持当前页面在导览图中居中显示，并且高亮底色。
• 鼠标hover在页面预览图上的时候，有绿色外发光效果。
• 点击右键出现菜单，目前设计有四个选项。如果复制页之后，需要选择要粘贴的位置的上面或者下面的页，右键唤出菜单后复制按钮下多出两个按钮，分别是，在上方粘贴和在下方粘贴。
• 调整页面顺序方法：只调整一个页面的时候，拖拽单独的预览图调整；调整多个页面的时候，按住command（mac）或者ctrl（windows）后鼠标点选页面预览图，之后拖拽。拖拽的时候，希望可以做到页面预览图跟随按住的鼠标，移动到浏览器上方和下方区域的时候，滚动条可以跟随。

写码前的调研

原生的scrollbar有点丑，目前调研vue-perfect-scrollbar可以使用替换。

对于拖拽的功能，可以使用vue-drag-and-drop-list实现。考虑到高峰的调整图层也需要类似功能，所以建议将这两部分的拖拽调整顺序统一下，提升用户体验。

对于右键菜单，可以使用vue-context-menu实现。