25種新興交互設計

  　　一、導航

　　1，Google+導航的隱藏功能

　　Google+作為google進入社交領域的第一個產品，在交互方式有很多亮點，比如在導航的擴展性上，可以把不常用的標簽拖放到“更多”中，從而使導航界面更簡潔，這個操作進行時的效果也很精致、流暢。

　　2，導航hover

　　案例一：你選中某個導航標簽時，並不是改變該標簽的字體顏色或將字體加粗，而是點亮該標簽的背景。

　　案例二：選中的標簽上會滴下一滴牛奶，並停留在那裡，告知你的當前位置。(當然，這是一個關於牛奶的網站)。

　　3，具有親和力的圖形化導航

　　如果你比較關注近來的導航設計的話，不難發現，越來越多的導航采用了圖標，代替了原有的文字鏈，並且擴大了單個標簽的點擊區域，這是在手機、平板電腦越來越普及的情況下，采取的優化設計，這樣的導航可以同時適應PC端、移動端，節省了設計成本。

　　4，活潑的輔助導航

　　越來越多的國外網站運用側邊欄導航來輔助浏覽頁面，方便用戶到達想關注的區域。不過使用這些側邊欄，需要注意頁面的情況，避免其淹沒在繁雜的頁面元素之中，成為用戶眼中的“牛皮癬”。

　　二、Hover交互

　　案例一：鼠標移到元素上時，會有流暢的動態效果，而不是僅僅改變顏色。

　　案例二：這個元素其實是焦點圖切換中的控件，當用戶將鼠標移到切換按鈕上時，能看到下一張圖片的縮略圖。

　　在進行hover狀態的設計的時候，可以參考以上案例，關注細節，為用戶打造更流暢的交互動作。

　　三、反饋設計

　　案例是一個用戶的訂閱操作，設計師利用了極小的空間，做出了訂閱、取消訂閱等完整的交互細節。

　　四、Hover展現更多

　　這種鼠標hover展現更多信息的設計很受人青睐，它達到了視覺效果美觀跟功能實用的微妙平衡，設計師為了視覺效果可以先把內容優先級較低的內容隱藏，等鼠標移入時再將其顯示出來。

　　五、照片展示

　　圖片中的圓點代表的是圖片、視頻等內容，而且圓點的位置也隱喻著這些照片的拍攝位置。這種交互方式將內容跟現實位置結合在了一起，更能吸引用戶，獲得用戶的認可。

　　六、評論模塊

　　在這個音樂網站中，設計師將每首歌曲的評論跟歌曲的時間維度相結合，你可以對歌曲的某一句、甚至某個詞進行評論，並用小頭像的形式進行展示。這樣的設計，是針對用戶的特殊需求而設計的，但這種交互形式值得我們借鑒到其他地方。

　　七、仿真展示

　　案例來自於電子商務網站，T恤被掛在衣架上進行展示，鼠標移動時，衣服會朝相應方向移動，這種設計是取材於現實生活，拉近了網絡跟現實的距離，流暢的交互、豐富的細節讓用戶有實體店購物的感覺。

　　八、信息展示

　　這兩張圖屬於同一個案例，只是展示了不同維度的信息。當信息有變動時，圖上會有實時的更新，告知用戶具體內容。這種設計是基於信息可視化的理論進行的，通過簡單的效果來呈現復雜的信息。

　　九、三維視角

　　這個案例是三維視角的交互，用戶進入頁面後，會有4個選項，隨著用戶鼠標的移動，會自動選擇某個選項。這樣炫酷的設計的原因跟網站的主題有一定的關系(UFC格斗網站)，帶給用戶較強的沖擊感。

　　十、3D效果

　　這個案例為了追求視覺沖擊力使用了3D效果，但是也不缺乏實用性，交互流暢，不影響信息讀取。

　　十一、時間指示

　　在某些按時間切換圖片的模塊，可采用此方式,給用戶心理預期，這樣切換的時候用戶會比較容易接受，同樣的設計可以應用到焦點圖切換、頁面切換、頁面加載等模塊。

　　十二、metro信息展示

　　同級別的信息展示時，可以將其歸類整理，以便獲得較好的視覺效果，信息展開後，將其他“豆腐塊”移動到下方，進行下一級別的信息展示，達到效果跟功能的平衡。

　　十三、信息預覽

　　針對同等級的大批量信息，可以采用這種縮略模式，利用hover狀態呈現信息的主要內容，由用戶決定下一步操作，達到空間的合理利用。

　　十四、復選式信息篩選

　　通過頁面頂部的操作模塊，可以頁面的信息進行多重篩選，直觀、方便，比單一的下拉框式篩選功能更加豐富。

　　十五、浮層中的多重信息展示