一、導航
1，Google+導航的隱藏功能
Google+作為google進入社交領域的第一個產品，在交互方式有很多亮點，比如在導航的擴展性上，可以把不常用的標簽拖放到“更多”中，從而使導航界面更簡潔，這個操作進行時的效果也很精致、流暢。
2，導航hover
案例一：你選中某個導航標簽時，并不是改變該標簽的字體顏色或將字體加粗，而是點亮該標簽的背景。
案例二：選中的標簽上會滴下一滴牛奶，并停留在那里，告知你的當前位置。(當然，這是一個關于牛奶的網站)。
3，具有親和力的圖形化導航
如果你比較關注近來的導航設計的話，不難發現，越來越多的導航采用了圖標，代替了原有的文字鏈，并且擴大了單個標簽的點擊區域，這是在手機、平板電腦越來越普及的情況下，采取的優化設計，這樣的導航可以同時適應PC端、移動端，節省了設計成本。
4，活潑的輔助導航
越來越多的國外網站運用側邊欄導航來輔助瀏覽頁面，方便用戶到達想關注的區域。不過使用這些側邊欄，需要注意頁面的情況，避免其淹沒在繁雜的頁面元素之中，成為用戶眼中的“牛皮癬”。
二、Hover交互
案例一：鼠標移到元素上時，會有流暢的動態效果，而不是僅僅改變顏色。
案例二：這個元素其實是焦點圖切換中的控件，當用戶將鼠標移到切換按鈕上時，能看到下一張圖片的縮略圖。
在進行hover狀態的設計的時候，可以參考以上案例，關注細節，為用戶打造更流暢的交互動作。
三、反饋設計
案例是一個用戶的訂閱操作，設計師利用了極小的空間，做出了訂閱、取消訂閱等完整的交互細節。
四、Hover展現更多
這種鼠標hover展現更多信息的設計很受人青睞，它達到了視覺效果美觀跟功能實用的微妙平衡，設計師為了視覺效果可以先把內容優先級較低的內容隱藏，等鼠標移入時再將其顯示出來。
五、照片展示
圖片中的圓點代表的是圖片、視頻等內容，而且圓點的位置也隱喻著這些照片的拍攝位置。這種交互方式將內容跟現實位置結合在了一起，更能吸引用戶，獲得用戶的認可。
六、評論模塊
在這個音樂網站中，設計師將每首歌曲的評論跟歌曲的時間維度相結合，你可以對歌曲的某一句、甚至某個詞進行評論，并用小頭像的形式進行展示。這樣的設計，是針對用戶的特殊需求而設計的，但這種交互形式值得我們借鑒到其他地方。
七、仿真展示
案例來自于電子商務網站，T恤被掛在衣架上進行展示，鼠標移動時，衣服會朝相應方向移動，這種設計是取材于現實生活，拉近了網絡跟現實的距離，流暢的交互、豐富的細節讓用戶有實體店購物的感覺。
八、信息展示
這兩張圖屬于同一個案例，只是展示了不同維度的信息。當信息有變動時，圖上會有實時的更新，告知用戶具體內容。這種設計是基于信息可視化的理論進行的，通過簡單的效果來呈現復雜的信息。
九、三維視角
這個案例是三維視角的交互，用戶進入頁面后，會有4個選項，隨著用戶鼠標的移動，會自動選擇某個選項。這樣炫酷的設計的原因跟網站的主題有一定的關系(UFC格斗網站)，帶給用戶較強的沖擊感。
十、3D效果
這個案例為了追求視覺沖擊力使用了3D效果，但是也不缺乏實用性，交互流暢，不影響信息讀取。
十一、時間指示
在某些按時間切換圖片的模塊，可采用此方式,給用戶心理預期，這樣切換的時候用戶會比較容易接受，同樣的設計可以應用到焦點圖切換、頁面切換、頁面加載等模塊。
十二、metro信息展示
同級別的信息展示時，可以將其歸類整理，以便獲得較好的視覺效果，信息展開后，將其他“豆腐塊”移動到下方，進行下一級別的信息展示，達到效果跟功能的平衡。
十三、信息預覽
針對同等級的大批量信息，可以采用這種縮略模式，利用hover狀態呈現信息的主要內容，由用戶決定下一步操作，達到空間的合理利用。
十四、復選式信息篩選
通過頁面頂部的操作模塊，可以頁面的信息進行多重篩選，直觀、方便，比單一的下拉框式篩選功能更加豐富。
十五、浮層中的多重信息展示
在某些情況下，浮層中需要放置大量的信息，這些信息屬于同級別，又屬于不同類型，這時候，可以參考此案例中的信息展示方式，在浮層中以較好的效果處理這些信息。
十六、信息流內容數量控制
對同等級、同類別的信息進行信息流內容控制的時候，可以參考此設計模式，利用簡單的操作控制信息展示的數量，選取不同的設置時，下方的信息流可以根據實際情況改變樣式，讓信息流的樣式跟對應的設置形成心理映射，用戶形成習慣之后，能即刻明白該情況下的設置是什么。
十七、無線端手勢操作
案例一：模擬物理環境，賦予界面彈性屬性，界面切換更自然，效果也更豐富。
案例二：ipad上的應用程序Paper，用兩個手指順時針或逆時針旋轉，來替代“取消操作”和“恢復操作”按鈕。
十八、轉場動畫
目前web端產品的轉場基本還處于沒有情感化設計的階段，無線產品在這塊做的比較有借鑒性。上圖的案例都有人性化、操作感強的特點在其中。
十九、圖片查看
這種設計方式更接近現實中的場景，用戶很容易明白，并且點擊這些圖片會帶來不同的轉換效果(左移、右移、斜著飛入屏幕)，此外這種排列能讓用戶對處于特殊位置的圖片記憶更加深刻。
二十、多圖合一展示
通過這種方式，在一張圖上就可以展示多種相關商品，節省了大量的空間和資源，也將商品展示方式進行了創新。在電子商務網站上，這種設計的發揮空間很大。
二十一、Loading
對一成不變的loading的樣式稍作改進，就能超出用戶的預期，從而獲得用戶的好感，而跟網站主題相關的設計，會提升用戶對網站的忠誠度。
二十二、時間軸
在社交網站以外的網站上，時間軸也可以扮演十分重要的角色：以優秀的設計來引導用戶進行更方便的閱讀，達到更好的信息傳達目的。
二十三、推拉窗
用推拉窗來進行信息展示，它可以在同樣的空間內展示幾倍的信息，而且有主次之分，讓用戶有所關注。
二十四、單頁面網站
這種設計是將網站的所有內容都加載在一個頁面上，通過上下或左右滾動就能瀏覽完整個網站，這種技術極大地減少了網站的層級，避免用戶迷惑，提升了體驗。
二十五、新組件暢想
1，IE6升級提示
優勢概述：為用戶設計提供升級或替換更高版本的瀏覽器的提示，并盡可能的降低用戶對于提示的抵觸 情緒，加速IE6消亡
應用環境：使用 IE6瀏覽器打開相關網頁時
在設計中，我們遇到兩個問題，一、如何讓用戶聽到你要說什么。二、如何讓用戶按你所說的做。首先，我們提供用戶更趣味性的展現方式，用輕松一些的手 繪風格去取代生硬的提示框，用戶看到的，更像是一張手涂的卡片，這在一定程度上降低了對于同質化的彈窗提示或是彈出廣告的抵觸情緒，同時用口語化的提示 (親，你的IE6弱爆了!)去增加用戶的好奇心，如果用戶這時在想“你才弱爆了呢，給個理由先”，那么，我們的第一個問題就解決了。
對于解決第二個問題，我的理解是，能否戳到用戶的“痛處”;在用戶聽到你要說什么之后，理想的情況是直接去點擊下面的鏈接去升級或替換瀏覽器(當然 也有可能直接給你關了，對于這種情況，我只能說，弄死IE6，我們還有很多的努力要做)，另一種情況是用戶問了一句“為啥?”，好吧，我們給你在右邊留了 一個鏈接，點了你就知道為啥了。
最后，考慮到我們平臺產品的通用性，并不是所有的產品都適合這種手繪風格的提示，還準備了一套相對通用一些的版本，以配合個別產品的背景。
2，錯誤提示
優勢概述：除了給用戶提供必要的信息外，用一點小小的幽默幫用戶消除一些錯誤帶來的負面情緒
應用環境：網頁出現錯誤時，如：404錯誤(針對這版設計的特點，比較適合一淘UX網站等類似的設計站點)
我們設計了一個很牛X的網站，但還沒牛X到保證不會出現錯誤，但這并不影響我們的用戶體驗，即使錯了，我們也會盡量保證這是個有趣的錯誤，看看我們的錯誤提示吧。
錯誤提示頁面需要提供給用戶的必要信息，主要有兩點，一：告訴用戶怎么了。二：告訴用戶下一步該怎么做。
所以，針對網頁中出現的下面三種不同的錯誤，我們一淘UX平臺網站(ux.etao.com)會直截了當的用口語告訴用戶 “怎么了&改該怎么做”:
好吧，現在用戶知道該出什么事兒也知道該怎么做了，但這畢竟是個錯誤，用戶也是有脾氣的，其實出了錯誤，大家都不想的，你看我們一淘UX的前端工程尸、交互設計獅、用戶研究猿和視覺設計虱這一張張苦逼的表情你就知道了。
考慮到其它平臺，我們也在做一些相對較為標準的錯誤提示，希望能在UX各產品中使用較為統一的規范。
3，返回頂部
優勢概述：使體驗更有趣生活化，在視覺上與頁面更融合。因此不再用機械化的文字或規矩的圖標，而是嘗試用隱喻的手法去表達
應用環境：在頁面較長時用戶需要回到頂部時
返回頂部需要向上，發想了一系列具有向上含義的事物(氣球、煙、跳高、向上爬的動植物等等)，最后鎖定在電梯，優點在：
1、電梯向上的速度較快并可控，符合頁面移動的場景。
2、根據一淘首頁、子頻道頁面、活動頁面的特點，往往模塊較多、商品等按模塊排布，如同用積木搭建 的大樓。因此用電梯的概念很契合。
3、視覺上觀光電梯的形態是封閉的膠囊形，不會像比較開放的形態一樣會過度分割負空間。形態上的簡潔柔和符合目前的圖標規范和視覺氣質。
設計細節及實際應用如圖：
擴展設計:
電梯內部的人可以根據不同的場景設計形象。如團購表現出很擁擠;優惠頻道表現出血拼;海外購表現出國際化;女性、男性、兒童也可以做出相應區分。體現出生活樂趣。
結語
對交互細節的注重，是鑄就互聯網產品優秀體驗的基礎，細節決定成敗，這句話在互聯網產品上也一樣適用，我們進行設計的時候可以嘗試跳出現有設計的束縛，思考新的設計方式，給用戶帶來不一樣的體驗，同時也能給我們帶來意想不到的收獲。