中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

拖動(dòng)看起來(lái)似乎很簡(jiǎn)單，就是抓住某個(gè)元素把它放到另一個(gè)地方而已，實(shí)際上拖放時(shí)，還需要注意很多問(wèn)題。本文作者對(duì)利用拖放設(shè)計(jì)進(jìn)行了分析，希望能給你帶來(lái)一些幫助。

上一篇講了web界面設(shè)計(jì)中的「頁(yè)內(nèi)編輯」，本篇講「利用拖放」。

利用拖放 Drag and Drop：拖動(dòng)似乎很簡(jiǎn)單，就是抓住某個(gè)元素把它放到另一個(gè)地方而已。實(shí)際上在拖放期間，需要處理許多特定的狀態(tài)，這些微狀態(tài)我們稱之為趣味瞬間（interesting moment）。

一、趣味瞬間

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

1. 拖放事件

在整個(gè)拖動(dòng)期間有很多事件發(fā)生，如何選擇并運(yùn)用這些事件給用戶反饋是關(guān)鍵。至少可以利用15個(gè)事件來(lái)提示用戶：

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)（通常標(biāo)準(zhǔn)是移動(dòng)3像素）。
5. 拖動(dòng)離開(kāi)原始位置：拖動(dòng)重新進(jìn)入原始位置或包含它的容器。
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ū)域。
11. 拖動(dòng)懸停于有效目標(biāo)：可拖動(dòng)對(duì)象暫停于有效目標(biāo)之上，但用戶沒(méi)有釋放鼠標(biāo)。此時(shí)有效放置目標(biāo)會(huì)突然打開(kāi)，以示可以接受上方對(duì)象。?????????????????
12. 拖動(dòng)懸停于無(wú)效目標(biāo)：可拖動(dòng)對(duì)象暫停于無(wú)效目標(biāo)之上，但用戶沒(méi)有釋放鼠標(biāo)。?
13. 放置被接受：可拖動(dòng)對(duì)象位于有效目標(biāo)之上，而且放置已被接受。?
14. 放置被拒絕：可拖動(dòng)對(duì)象位于無(wú)效目標(biāo)之上，而且放置已被拒絕。????????
15. 放置在父容器上：在個(gè)別情況下，不同位置會(huì)有不同的含義。??

2. 相關(guān)元素

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

• 頁(yè)面
• 光標(biāo)
• 工具提示條
• 拖動(dòng)對(duì)象（或?qū)ο蟮哪承┎糠郑?/li>
• 拖動(dòng)對(duì)象的父容器
• 放置目標(biāo)?

3. 趣味瞬間網(wǎng)格

使用趣味瞬間網(wǎng)格可以表達(dá)任何復(fù)雜的交互。它就是一個(gè)備忘錄，可以確保不遺漏交互期間需要處理的任何情況。

左側(cè)一列是相關(guān)元素，上方一行是需要處理的瞬間，每個(gè)交叉點(diǎn)就是想要實(shí)現(xiàn)的行為。具體實(shí)例請(qǐng)繼續(xù)往下看。???

二、拖放的用途

如果運(yùn)用得當(dāng)，拖放是一種非常強(qiáng)大的手段。以下是適用拖放的情況：?????????????拖放模塊、拖放列表、拖放對(duì)象、拖放操作、拖放集合。

三、拖放模塊

拖放最大的用途是允許用戶按照自己的意愿把對(duì)象直接放在頁(yè)面的相應(yīng)位置上。典型的模式就是在頁(yè)面上拖放模塊。

在拖動(dòng)期間，必須告訴用戶如果放開(kāi)被拖動(dòng)對(duì)象會(huì)發(fā)生什么結(jié)果，有兩種常用方法：

1. 占位符目標(biāo)
2. 插入目標(biāo)

比如使用占位符表示放置目標(biāo)。始終在可能發(fā)生放置的地方放一個(gè)線框。當(dāng)模塊被拖動(dòng)移出原來(lái)的位置時(shí)，原位置顯示虛線框占位符。當(dāng)目標(biāo)被拖動(dòng)到相應(yīng)位置時(shí)，占位符立即填充于該位置。

如keynote中對(duì)于幻燈片的拖動(dòng)，當(dāng)模塊被拖動(dòng)移出原來(lái)的位置時(shí)，原位置顯示線框占位符。

當(dāng)拖動(dòng)至目標(biāo)位置附近時(shí)，目標(biāo)位置顯示占位符，后續(xù)模塊依次往后移。??????????????

當(dāng)釋放釋放鼠標(biāo)后，目標(biāo)被“吸入”相應(yīng)的位置。

但是這種插入方式有一個(gè)弊端，占位符目標(biāo)會(huì)導(dǎo)致頁(yè)面內(nèi)容突然的上移或者下挫。用戶在鼠標(biāo)釋放后會(huì)感覺(jué)位置有偏差。???????????????????????????????

為了盡可能保持頁(yè)面的穩(wěn)定，可以只移動(dòng)一個(gè)插入目標(biāo)來(lái)指明放置模塊。

如powerpoint中對(duì)于幻燈片的拖動(dòng)，當(dāng)模塊被拖動(dòng)移出原來(lái)的位置時(shí)，原位置前方顯示紅色插入條。

當(dāng)拖動(dòng)至目標(biāo)位置附近時(shí)，紅色插入條實(shí)時(shí)展示將要插入的具體位置，此時(shí)頁(yè)面整體的布局不變，僅僅是依靠插入條來(lái)指明將要插入的位置。???

當(dāng)釋放釋放鼠標(biāo)后，目標(biāo)被“吸入”相應(yīng)的位置。

四、拖放列表??

重排列表項(xiàng)和重排模塊非常相似，但只能限制一個(gè)維度上（上下或左右）。拖放列表是重排列表項(xiàng)的方法。??????????????????????

如微信公眾號(hào)的拖動(dòng)配置菜單：

1）鼠標(biāo)懸停和按下時(shí)

變化為帶手型光標(biāo)，背景色改變，并且輕微的像素位移抖動(dòng)效果，提示可以拖動(dòng)：

2）拖動(dòng)啟動(dòng)

原位置顯示出一塊白色矩形框占位符：

3）拖動(dòng)懸停于有效目標(biāo)

當(dāng)鼠標(biāo)滑過(guò)目標(biāo)位置的中心點(diǎn)后，目標(biāo)位置原內(nèi)容（菜單4）向上移動(dòng)，新空出一塊白色矩形框占位符：

4）放置被接受

目標(biāo)被“吸入”新放置位置，原位置和現(xiàn)位置白色矩形占位框都消失：

有一點(diǎn)值得注意，當(dāng)占位符切換到新位置，怎樣確定占位符目標(biāo)?根據(jù)什么來(lái)確定用戶想要把對(duì)象格到哪里？鼠標(biāo)位置、被拖動(dòng)對(duì)象的邊界、被遮住對(duì)象的邊界，都可以用來(lái)確定模塊新位置。此處例子中就是采用鼠標(biāo)與被遮住對(duì)象的中心點(diǎn)來(lái)確定的。

除了拖放之外，置頂/置底和設(shè)置默認(rèn)也是比較常見(jiàn)的移動(dòng)列表的方式。

如網(wǎng)易郵箱列表的郵件置頂功能，將某個(gè)郵件從列表的下方快速排序于最上方：?

淘寶收貨地址列表，原默認(rèn)地址顯示在列表最上方。

設(shè)置默認(rèn)地址后，新的默認(rèn)地址排序在最上面。

5）拖動(dòng)透鏡

當(dāng)有些情況不方便拖動(dòng)時(shí)，如拖動(dòng)對(duì)象非常小，可以在拖動(dòng)期間提供拖動(dòng)透鏡。

如iPhone為方便用戶編輯文本時(shí)拖動(dòng)插入條，提供了拖動(dòng)透鏡。

五、拖放對(duì)象

拖放的另一種常見(jiàn)用途是修改對(duì)象之間的從屬關(guān)系。如果對(duì)象間的關(guān)系可以形象化的表示出來(lái)，那么就可以使用拖放。

如XMind中，可以使用拖動(dòng)對(duì)對(duì)象的從屬關(guān)系進(jìn)行重排：?

如果在過(guò)程中能將對(duì)象的關(guān)系形象表達(dá)出來(lái)，那么拖放是實(shí)現(xiàn)對(duì)象關(guān)系改變的自然選擇。

1）拖動(dòng)反饋：拖動(dòng)啟動(dòng)

當(dāng)鼠標(biāo)發(fā)生移動(dòng)時(shí)拖動(dòng)啟動(dòng)，如下圖，當(dāng)啟動(dòng)拖動(dòng)時(shí)，拖動(dòng)對(duì)象及其下屬的關(guān)系會(huì)同時(shí)被收起，跟隨拖動(dòng)對(duì)象一起被拖動(dòng)重排。

2）拖動(dòng)反饋：放置目標(biāo)

當(dāng)放置目標(biāo)有效時(shí)：被拖動(dòng)對(duì)象文字下方會(huì)出現(xiàn)藍(lán)色塊，且會(huì)從放置目標(biāo)的上一級(jí)拉出一條藍(lán)色線。這種反饋方式是同時(shí)修改被拖動(dòng)對(duì)象和放置目標(biāo)的視覺(jué)樣式。

當(dāng)放置目標(biāo)無(wú)效時(shí)：不展示拖動(dòng)對(duì)象與放置目標(biāo)的從屬關(guān)系，也不展示目標(biāo)位置的色塊占位符。

六、拖放集合

拖放的另一種用途是集中一批對(duì)象到某個(gè)特定位置。如Mac桌面上的廢紙簍，選中對(duì)應(yīng)項(xiàng)并集中保存到一個(gè)集合列表中。