成都網(wǎng)站建設(shè)公司

交互設(shè)計(jì)，表現(xiàn)出來(lái)的呈現(xiàn)方式可謂是多種多樣，

不過(guò)你只要掌握好了以下三點(diǎn)的使用技巧，同樣可能輕松打造出良好的交互設(shè)計(jì)效果。

1.響應(yīng)

對(duì)即將產(chǎn)生交互內(nèi)容的區(qū)域提供給操作者一種響應(yīng)機(jī)制。

參考實(shí)例：

不同的內(nèi)容有很多響應(yīng)的處理方法，

比如：鏈接加個(gè)下劃線，圖片鏈接變換下外邊框顏色，

鼠標(biāo)劃過(guò)某區(qū)域，變化下背景色，同時(shí)出現(xiàn)一些隱性的操作按鈕，如刪除操作等。

注意：忌諱因?yàn)槟硡^(qū)塊產(chǎn)生響應(yīng)，而讓其它區(qū)塊邊界產(chǎn)生生硬的錯(cuò)位。

補(bǔ)充：提示音也是一種響應(yīng)。

比如：用iPhone發(fā)送郵件，發(fā)送成功后會(huì)聽(tīng)到“嗖…”的一聲。

另一個(gè)參考實(shí)例：

2.過(guò)渡過(guò)程或轉(zhuǎn)場(chǎng)效果

對(duì)即將產(chǎn)生的交互變化，提供一個(gè)過(guò)渡過(guò)程或轉(zhuǎn)場(chǎng)的效果。

過(guò)渡過(guò)程，如：延時(shí)移動(dòng)、淡入淡出等。

轉(zhuǎn)場(chǎng)效果，如：滑動(dòng)、門(mén)開(kāi)關(guān)、縮放、翻轉(zhuǎn)等。

參考實(shí)例：

點(diǎn)擊某個(gè)封面，延時(shí)移動(dòng)給操作者帶來(lái)一個(gè)很好的引導(dǎo)閱讀過(guò)程。

注意：要頻繁處理的操作，過(guò)渡過(guò)程耽誤時(shí)間的同時(shí)，還可能造成誤點(diǎn)擊。

過(guò)渡效果有時(shí)候還可以減少不必要的態(tài)度變更提醒：

比如，刪除郵件后不需要顯示郵件已刪除。

而是點(diǎn)擊刪除后，該條內(nèi)容閃爍一下（響應(yīng)），然后逐漸消失，

因?yàn)槟阋呀?jīng)真實(shí)的看到了刪除的過(guò)程，所以不必再顯示郵件已刪除的狀態(tài)變更提醒。

3.移位

在不彈層、彈窗情況下的內(nèi)容移位。合理的運(yùn)用頁(yè)面內(nèi)容的展開(kāi)、收起。

操作者在即將產(chǎn)生交互的地方，就近通過(guò)這種方式就完成了輕便的操作。

參考實(shí)例：

下邊的展開(kāi)與收起

點(diǎn)擊下邊地址中的視頻播放，同樣可以看到視頻右側(cè)文字內(nèi)容的移位效果。

我們總結(jié)出來(lái)結(jié)論，所有交互過(guò)程不外乎包括以下三個(gè)要素：

1. 響應(yīng)：可以引起觸發(fā)的區(qū)域提供響應(yīng)變化

2. 過(guò)程效果：讓人的視線一直保持連貫

3. 移位：不必要彈出新頁(yè)面時(shí)，通過(guò)伸展原區(qū)域的大小完成小的功能交互，以達(dá)到用最小的視覺(jué)變化完成交互任務(wù)的目的。

注意：過(guò)渡過(guò)程和移位在Web開(kāi)發(fā)實(shí)現(xiàn)上，可能大量應(yīng)用到Js庫(kù)，非必要時(shí)可以盡量減少使用。