打造良好的交互設計效果發覺篇

　　交互設計，表現出來的呈現方式可謂是多種多樣，

　　不過你只要掌握好了以下三點的使用技巧，同樣可能輕松打造出良好的交互設計效果。

　　1.響應

　　對即將產生交互內容的區域提供給操作者一種響應機制。

　　參考實例：http://glyde.com

　　不同的內容有很多響應的處理方法，

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

　　鼠標劃過某區域，變化下背景色，同時出現一些隱性的操作按鈕，如刪除操作等。

　　注意：忌諱因為某區塊產生響應，而讓其它區塊邊界產生生硬的錯位。

　　補充：提示音也是一種響應。

　　比如：用iPhone發送郵件，發送成功後會聽到“嗖…”的一聲。

　　另一個參考實例：

　　2.過渡過程或轉場效果

　　對即將產生的交互變化，提供一個過渡過程或轉場的效果。

　　過渡過程，如：延時移動、淡入淡出等。

　　轉場效果，如：滑動、門開關、縮放、翻轉等。

　　參考實例：http://glyde.com

　　點擊某個封面，延時移動給操作者帶來一個很好的引導閱讀過程。

　　注意：要頻繁處理的操作，過渡過程耽誤時間的同時，還可能造成誤點擊。

　　過渡效果有時候還可以減少不必要的態度變更提醒：

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

　　而是點擊刪除後，該條內容閃爍一下(響應)，然後逐漸消失，

　　因為你已經真實的看到了刪除的過程，所以不必再顯示郵件已刪除的狀態變更提醒。

　　3.移位

　　在不彈層、彈窗情況下的內容移位。合理的運用頁面內容的展開、收起。

　　操作者在即將產生交互的地方，就近通過這種方式就完成了輕便的操作。

　　參考實例：http://gizmodo.com/

　　http://www.axure.org/demo 下邊的展開與收起

　　點擊下邊地址中的視頻播放，同樣可以看到視頻右側文字內容的移位效果。

　　http://www.cnn.com/2010/TECH/01/13/google.china.analysis/index.html

　　我們總結出來結論，所有交互過程不外乎包括以下三個要素：

　　1. 響應：可以引起觸發的區域提供響應變化

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

　　3. 移位：不必要彈出新頁面時，通過伸展原區域的大小完成小的功能交互，以達到用最小的視覺變化完成交互任務的目的。

　　注意：過渡過程和移位在Web開發實現上，可能大量應用到Js庫，非必要時可以盡量減少使用。

　　文章來源：MyKite‘s Blog 轉載請注明出處鏈接。