「閱讀」Web界面設(shè)計(jì)

時(shí)間：2023-06-04 15:06:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-06-04 15:06:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

「閱讀」Web界面設(shè)計(jì)：這幾天在整理作品集，發(fā)現(xiàn)之前隨手寫(xiě)的表單實(shí)踐一文巨爛無(wú)比，所以決定回爐重搞。不過(guò)那篇文章里提到的《Web界面設(shè)計(jì)》 一書(shū)，倒是本很不錯(cuò)的書(shū)。



此篇文章，我主要想跟大家分享下，我在設(shè)計(jì) Web 端的自定義表單需求的時(shí)候，從此書(shū)學(xué)到的知識(shí)。（不知道現(xiàn)在還有多少人做過(guò)類(lèi)似「自定義表單」這類(lèi)的需求... 其實(shí)整個(gè)交互很簡(jiǎn)單，就是用戶從左方拖拽控件到屏幕中央的手機(jī)內(nèi)，然后在右方設(shè)置控件屬性）



PS：發(fā)現(xiàn)這本書(shū)真的非常幸運(yùn)。在設(shè)計(jì)此需求的時(shí)候，想找一些關(guān)于 Web 端設(shè)計(jì)的書(shū)籍來(lái)看（因?yàn)樽x書(shū)的時(shí)候，做的都是移動(dòng)端的設(shè)計(jì)，知識(shí)相對(duì)薄弱）。然后我隨手在豆瓣搜索「Web」 ，以為沒(méi)多大希望... 誰(shuí)知道一搜就搜到了好書(shū)...



----------------------------------------------------------------------------------------------------------

一、疑問(wèn)

在設(shè)計(jì) Web 端的自定義表單的時(shí)候，我發(fā)現(xiàn)拖放看似很簡(jiǎn)單。但事實(shí)上，拖放過(guò)程涉及了大量細(xì)節(jié)。比如：

• 用戶怎么知道可以拖動(dòng)？
  
• 拖放對(duì)象的目的是什么？
  
• 在哪里可以或不可以放置拖動(dòng)的對(duì)象？
  
• 通過(guò)什么視覺(jué)元素來(lái)表示拖動(dòng)能力？
  
• 拖動(dòng)期間，怎樣表示有效和無(wú)效的放置目標(biāo)？
  
• 是否允許用戶拖動(dòng)實(shí)際的對(duì)象？
  
• 還是只允許用戶拖動(dòng)實(shí)際對(duì)象的幻影？
  
• 整個(gè)拖動(dòng)與放置期間，要對(duì)用戶給出哪些視覺(jué)反饋？

幸運(yùn)的是，我在《Web 界面設(shè)計(jì)》一書(shū)的第二章中得到了答案。此書(shū)將用戶拖放操作的特殊狀態(tài)稱(chēng)為趣味瞬間（Interesting Moment）。

二、事件

書(shū)中提到，趣味瞬間是由15個(gè)事件與6個(gè)相關(guān)元素組合而成。這15個(gè)事件分別是：



1. 頁(yè)面加載：在所有操作發(fā)生之前，可以預(yù)告拖放功能。例如，可以在頁(yè)面上顯示一條提示信息，告訴用戶可以拖放某些元素。



2. 鼠標(biāo)懸停：鼠標(biāo)指針懸停在可拖動(dòng)的對(duì)象上方。



3. 鼠標(biāo)按下：在可拖動(dòng)對(duì)象上按下鼠標(biāo)鍵。



4. 拖動(dòng)啟動(dòng)：鼠標(biāo)開(kāi)始移動(dòng)。(在對(duì)象被拖動(dòng)3像素或鼠標(biāo)按下超過(guò)0.5秒時(shí)啟動(dòng)拖動(dòng)。)



5. 拖動(dòng)離開(kāi)原始位置：可拖動(dòng)對(duì)象離開(kāi)了原來(lái)的位置或包含它的容器。



6. 拖動(dòng)重新進(jìn)入原始位置：可拖動(dòng)對(duì)象又進(jìn)入了原來(lái)的位置。



7. 拖動(dòng)進(jìn)入有效目標(biāo)：可拖動(dòng)對(duì)象位于有效的放置目標(biāo)上方。



8. 拖動(dòng)退出有效目標(biāo)：可拖動(dòng)對(duì)象離開(kāi)有效的放置目標(biāo)。



9. 拖動(dòng)進(jìn)入無(wú)效目標(biāo)：可拖動(dòng)對(duì)象位于無(wú)效的放置目標(biāo)上方。



10. 拖動(dòng)進(jìn)入非特定目標(biāo)：可拖動(dòng)對(duì)象位于放置目標(biāo)和非放置目標(biāo)之外的區(qū)域。取決于是否將有效目標(biāo)之外的區(qū)域全都看成無(wú)效目標(biāo)。



11. 拖動(dòng)懸停于有效目標(biāo)：可拖動(dòng)對(duì)象暫時(shí)停駐于有效目標(biāo)之上，但用戶沒(méi)有釋放鼠標(biāo)。此時(shí)，有效的放置目標(biāo)通常會(huì)突然打開(kāi)。例如，拖動(dòng)并在一個(gè)文件夾上方暫停，文件夾會(huì)打開(kāi)以示可以接受上方對(duì)象。



12. 拖動(dòng)懸停于無(wú)效目標(biāo)：可拖動(dòng)對(duì)象暫時(shí)停駐于無(wú)效目標(biāo)之上，但用戶沒(méi)有釋放鼠標(biāo)。這個(gè)事件有用嗎？也許可以在此時(shí)對(duì)用戶給出反饋，說(shuō)明為什么下面不是一個(gè)有效目標(biāo)。



13. 放置被接受：可拖動(dòng)對(duì)象位于有效目標(biāo)之上，而且放置已經(jīng)被接受。



14. 放置被拒絕：可拖動(dòng)對(duì)象位于無(wú)效目標(biāo)之上，而且放置已經(jīng)被拒絕。此時(shí)用不用把被拖動(dòng)對(duì)象移回原處？



15. 放置在父容器上：拖動(dòng)對(duì)象時(shí)的位置一般來(lái)說(shuō)不會(huì)有什么特殊之處，不過(guò)在個(gè)別情況下，不同位置會(huì)有不同的含義。

三、元素

在上述的每個(gè)事件發(fā)生時(shí)，都可以在視覺(jué)上操作一些相關(guān)元素，這些元素包括：

1. 頁(yè)面（例如，在頁(yè)面上顯示靜態(tài)消息）
   
2. 光標(biāo)
   
3. 工具提示條
   
4. 拖動(dòng)對(duì)象（或拖動(dòng)對(duì)象的某個(gè)部分，例如模塊的標(biāo)題區(qū)）
   
5. 拖動(dòng)對(duì)象的父容器
   
6. 放置目標(biāo)

四、組合

最后，將這些事件與元素放進(jìn)一個(gè)表格中，就會(huì)得到：



每一個(gè)事件與元素的交叉點(diǎn)，都是可實(shí)現(xiàn)的行為。而上表就像一個(gè)備忘錄，可以確保不遺漏交互期間需要處理的任何情況。但是，考慮到簡(jiǎn)潔的需求，我們不一定需要為每一個(gè)交叉點(diǎn)都設(shè)計(jì)一個(gè)行為。同時(shí)，在設(shè)計(jì)行為的時(shí)候，我們還需要考慮該行為是否適合拖放。

五、結(jié)論

《Web界面設(shè)計(jì)》中也提到，適合拖放的情況有以下五種：



1. 拖放模塊（重新排列頁(yè)面上的模塊）



2. 拖放列表（重新排列列表項(xiàng)的順序）



3. 拖放對(duì)象（改變對(duì)象間的從屬關(guān)系）



4. 拖放操作（在被放置對(duì)象上執(zhí)行操作，比如：拖動(dòng)上傳功能）



5. 拖放集合（通過(guò)拖放操作集合，比如：購(gòu)物車(chē)功能）



如果你設(shè)計(jì)的界面是屬于以上幾種，那么拖放操作會(huì)是很好的選擇。