原型設(shè)計(jì)
愿景訴求
解決目前頁(yè)面調(diào)整交互反人類谐腰。目前頁(yè)面調(diào)整功能存在一下幾點(diǎn)問題：
- 預(yù)覽圖不能快速滾動(dòng)胁黑。
- 預(yù)覽圖不能拖拽排序
- 不好退出頁(yè)面調(diào)整狀態(tài)
設(shè)計(jì)圖描述
為了適應(yīng)用戶固有習(xí)慣僻澎，我們結(jié)合了Powerpoint和Keynote的導(dǎo)覽圖功能貌踏，重新設(shè)計(jì)了聲享的頁(yè)面導(dǎo)覽。
將原來的調(diào)整頁(yè)面按鈕提示改為頁(yè)面導(dǎo)覽窟勃，與slidebar中其他的功能保持一致形式祖乳，點(diǎn)擊后彈出slide-panel，同時(shí)在畫布上形成mask遮罩層秉氧，點(diǎn)擊遮罩層退出頁(yè)面導(dǎo)覽模式眷昆。
頁(yè)面導(dǎo)覽設(shè)計(jì)
如圖所示的為新的頁(yè)面導(dǎo)覽設(shè)計(jì)圖
- 進(jìn)入頁(yè)面導(dǎo)覽模式的時(shí)候，應(yīng)盡量保持當(dāng)前頁(yè)面在導(dǎo)覽圖中居中顯示谬运，并且高亮底色隙赁。
- 鼠標(biāo)hover在頁(yè)面預(yù)覽圖上的時(shí)候，有綠色外發(fā)光效果梆暖。
- 點(diǎn)擊右鍵出現(xiàn)菜單伞访，目前設(shè)計(jì)有四個(gè)選項(xiàng)。如果復(fù)制頁(yè)之后轰驳，需要選擇要粘貼的位置的上面或者下面的頁(yè)厚掷，右鍵喚出菜單后復(fù)制按鈕下多出兩個(gè)按鈕，分別是级解，在上方粘貼和在下方粘貼冒黑。
- 調(diào)整頁(yè)面順序方法：只調(diào)整一個(gè)頁(yè)面的時(shí)候，拖拽單獨(dú)的預(yù)覽圖調(diào)整勤哗；調(diào)整多個(gè)頁(yè)面的時(shí)候抡爹，按住command（mac）或者ctrl（windows）后鼠標(biāo)點(diǎn)選頁(yè)面預(yù)覽圖，之后拖拽芒划。拖拽的時(shí)候冬竟，希望可以做到頁(yè)面預(yù)覽圖跟隨按住的鼠標(biāo)欧穴，移動(dòng)到瀏覽器上方和下方區(qū)域的時(shí)候，滾動(dòng)條可以跟隨泵殴。
寫碼前的調(diào)研
原生的scrollbar有點(diǎn)丑涮帘，目前調(diào)研vue-perfect-scrollbar可以使用替換。
對(duì)于拖拽的功能笑诅，可以使用vue-drag-and-drop-list實(shí)現(xiàn)调缨。考慮到高峰的調(diào)整圖層也需要類似功能吆你，所以建議將這兩部分的拖拽調(diào)整順序統(tǒng)一下弦叶，提升用戶體驗(yàn)。
對(duì)于右鍵菜單早处，可以使用vue-context-menu實(shí)現(xiàn)湾蔓。
