在互聯(lián)網(wǎng)這個領(lǐng)域，每天都有不計其數(shù)的產(chǎn)品誕生，有些產(chǎn)品只是靈光一現(xiàn)，有的卻存活了下來，但是不論存活與否，這些產(chǎn)品上總有一些設(shè)計細(xì)節(jié)讓我們眼前一亮，本文中分類整理了一些不錯的交互形式，希望能給大家?guī)硇碌脑O(shè)計靈感。

一、導(dǎo)航

1，Google+導(dǎo)航的隱藏功能

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

2，導(dǎo)航hover

案例一：你選中某個導(dǎo)航標(biāo)簽時，并不是改變該標(biāo)簽的字體顏色或?qū)⒆煮w加粗，而是點(diǎn)亮該標(biāo)簽的背景。?

案例二：選中的標(biāo)簽上會滴下一滴牛奶，并停留在那里，告知你的當(dāng)前位置。（當(dāng)然，這是一個關(guān)于牛奶的網(wǎng)站）。

3，圖形化導(dǎo)航 ?

如果你比較關(guān)注近來的導(dǎo)航設(shè)計的話，不難發(fā)現(xiàn)，越來越多的導(dǎo)航采用了圖標(biāo)，代替了原有的文字鏈，并且擴(kuò)大了單個標(biāo)簽的點(diǎn)擊區(qū)域，這是在手機(jī)、平板電腦越來越普及的情況下，采取的優(yōu)化設(shè)計，這樣的導(dǎo)航可以同時適應(yīng)PC端、移動端，節(jié)省了設(shè)計成本。

4，輔助導(dǎo)航

越來越多的國外網(wǎng)站運(yùn)用側(cè)邊欄導(dǎo)航來輔助瀏覽頁面，方便用戶到達(dá)想關(guān)注的區(qū)域。不過使用這些側(cè)邊欄，需要注意頁面的情況，避免其淹沒在繁雜的頁面元素之中，成為用戶眼中的“牛皮癬”。

二、Hover交互

案例一：鼠標(biāo)移到元素上時，會有流暢的動態(tài)效果，而不是僅僅改變顏色。

在進(jìn)行hover狀態(tài)的設(shè)計的時候，可以參考以上案例，關(guān)注細(xì)節(jié)，為用戶打造更流暢的交互動作。

三、反饋設(shè)計

四、Hover展現(xiàn)更多

五、照片展示

六、評論模塊

七、仿真展示

八、信息展示

九、三維視角

十、3D效果

十一、時間指示

十二、“豆腐塊”信息展示

十三、信息預(yù)覽

十四、復(fù)選式信息篩選

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

在某些情況下，浮層中需要放置大量的信息，這些信息屬于同級別，又屬于不同類型，這時候，可以參考此案例中的信息展示方式，在浮層中以較好的效果處理這些信息。

十六、信息流內(nèi)容數(shù)量控制

對同等級、同類別的信息進(jìn)行信息流內(nèi)容控制的時候，可以參考此設(shè)計模式，利用簡單的操作控制信息展示的數(shù)量，選取不同的設(shè)置時，下方的信息流可以根據(jù)實際情況改變樣式，讓信息流的樣式跟對應(yīng)的設(shè)置形成心理映射，用戶形成習(xí)慣之后，能即刻明白該情況下的設(shè)置是什么。

十七、五險段手勢操作

案例一：模擬物理環(huán)境，賦予界面彈性屬性，界面切換更自然，效果也更豐富。

案例二：ipad上的應(yīng)用程序Paper，用兩個手指順時針或逆時針旋轉(zhuǎn)，來替代“取消操作”和“恢復(fù)操作”按鈕。

十八、轉(zhuǎn)場動態(tài)

目前web端產(chǎn)品的轉(zhuǎn)場基本還處于沒有情感化設(shè)計的階段，無線產(chǎn)品在這塊做的比較有借鑒性。上圖的案例都有人性化、操作感強(qiáng)的特點(diǎn)在其中。

十九、圖片查看

這種設(shè)計方式更接近現(xiàn)實中的場景，用戶很容易明白，并且點(diǎn)擊這些圖片會帶來不同的轉(zhuǎn)換效果（左移、右移、斜著飛入屏幕），此外這種排列能讓用戶對處于特殊位置的圖片記憶更加深刻。

二十、多圖合一展示

通過這種方式，在一張圖上就可以展示多種相關(guān)商品，節(jié)省了大量的空間和資源，也將商品展示方式進(jìn)行了創(chuàng)新。在電子商務(wù)網(wǎng)站上，這種設(shè)計的發(fā)揮空間很大。

二十一、Loading

對一成不變的loading的樣式稍作改進(jìn)，就能超出用戶的預(yù)期，從而獲得用戶的好感，而跟網(wǎng)站主題相關(guān)的設(shè)計，會提升用戶對網(wǎng)站的忠誠度。

二十二、時間軸

在社交網(wǎng)站以外的網(wǎng)站上，時間軸也可以扮演十分重要的角色：以優(yōu)秀的設(shè)計來引導(dǎo)用戶進(jìn)行更方便的閱讀，達(dá)到更好的信息傳達(dá)目的。

二十三、推拉窗

用推拉窗來進(jìn)行信息展示，它可以在同樣的空間內(nèi)展示幾倍的信息，而且有主次之分，讓用戶有所關(guān)注。

二十四、單頁面網(wǎng)站

這種設(shè)計是將網(wǎng)站的所有內(nèi)容都加載在一個頁面上，通過上下或左右滾動就能瀏覽完整個網(wǎng)站，這種技術(shù)極大地減少了網(wǎng)站的層級，避免用戶迷惑，提升了體驗。

二十五、新組件暢想

1，IE6升級提示

優(yōu)勢概述：為用戶設(shè)計提供升級或替換更高版本的瀏覽器的提示，并盡可能的降低用戶對于提示的抵觸 ?情緒，加速IE6消亡

應(yīng)用環(huán)境：使用 IE6瀏覽器打開相關(guān)網(wǎng)頁時

在設(shè)計中，我們遇到兩個問題，一、如何讓用戶聽到你要說什么。二、如何讓用戶按你所說的做。首先，我們提供用戶更趣味性的展現(xiàn)方式，用輕松一些的手繪風(fēng)格去取代生硬的提示框，用戶看到的，更像是一張手涂的卡片，這在一定程度上降低了對于同質(zhì)化的彈窗提示或是彈出廣告的抵觸情緒，同時用口語化的提示（親，你的IE6弱爆了！）去增加用戶的好奇心，如果用戶這時在想“你才弱爆了呢，給個理由先”，那么，我們的第一個問題就解決了。

對于解決第二個問題，我的理解是，能否戳到用戶的“痛處”；在用戶聽到你要說什么之后，理想的情況是直接去點(diǎn)擊下面的鏈接去升級或替換瀏覽器（當(dāng)然也有可能直接給你關(guān)了，對于這種情況，我只能說，弄死IE6，我們還有很多的努力要做），另一種情況是用戶問了一句“為啥？”，好吧，我們給你在右邊留了一個鏈接，點(diǎn)了你就知道為啥了。

最后，考慮到我們平臺產(chǎn)品的通用性，并不是所有的產(chǎn)品都適合這種手繪風(fēng)格的提示，還準(zhǔn)備了一套相對通用一些的版本，以配合個別產(chǎn)品的背景。

?

2，錯誤提示

優(yōu)勢概述：除了給用戶提供必要的信息外，用一點(diǎn)小小的幽默幫用戶消除一些錯誤帶來的負(fù)面情緒

應(yīng)用環(huán)境：網(wǎng)頁出現(xiàn)錯誤時，如：404錯誤（針對這版設(shè)計的特點(diǎn)，比較適合一淘UX網(wǎng)站等類似的設(shè)計站點(diǎn)）

我們設(shè)計了一個很牛X的網(wǎng)站，但還沒牛X到保證不會出現(xiàn)錯誤，但這并不影響我們的用戶體驗，即使錯了，我們也會盡量保證這是個有趣的錯誤，看看我們的錯誤提示吧。

錯誤提示頁面需要提供給用戶的必要信息，主要有兩點(diǎn)，一：告訴用戶怎么了。二：告訴用戶下一步該怎么做。

所以，針對網(wǎng)頁中出現(xiàn)的下面三種不同的錯誤，我們一淘UX平臺網(wǎng)站（ux.etao.com）會直截了當(dāng)?shù)挠每谡Z告訴用戶 “怎么了&改該怎么做”:

好吧，現(xiàn)在用戶知道該出什么事兒也知道該怎么做了，但這畢竟是個錯誤，用戶也是有脾氣的，其實出了錯誤，大家都不想的，你看我們一淘UX的前端工程尸、交互設(shè)計獅、用戶研究猿和視覺設(shè)計虱這一張張苦逼的表情你就知道了。

考慮到其它平臺，我們也在做一些相對較為標(biāo)準(zhǔn)的錯誤提示，希望能在UX各產(chǎn)品中使用較為統(tǒng)一的規(guī)范。

3，返回頂部

優(yōu)勢概述：使體驗更有趣生活化，在視覺上與頁面更融合。因此不再用機(jī)械化的文字或規(guī)矩的圖標(biāo)，而是嘗試用隱喻的手法去表達(dá)

應(yīng)用環(huán)境：在頁面較長時用戶需要回到頂部時

返回頂部需要向上，發(fā)想了一系列具有向上含義的事物（氣球、煙、跳高、向上爬的動植物等等），最后鎖定在電梯，優(yōu)點(diǎn)在：

1、電梯向上的速度較快并可控，符合頁面移動的場景。

2、根據(jù)一淘首頁、子頻道頁面、活動頁面的特點(diǎn)，往往模塊較多、商品等按模塊排布，如同用積木搭建 ? ?的大樓。因此用電梯的概念很契合。

3、視覺上觀光電梯的形態(tài)是封閉的膠囊形，不會像比較開放的形態(tài)一樣會過度分割負(fù)空間。形態(tài)上的簡潔柔和符合目前的圖標(biāo)規(guī)范和視覺氣質(zhì)。

設(shè)計細(xì)節(jié)及實際應(yīng)用如圖：

擴(kuò)展設(shè)計:

電梯內(nèi)部的人可以根據(jù)不同的場景設(shè)計形象。如團(tuán)購表現(xiàn)出很擁擠；優(yōu)惠頻道表現(xiàn)出血拼；海外購表現(xiàn)出國際化；女性、男性、兒童也可以做出相應(yīng)區(qū)分。體現(xiàn)出生活樂趣。

結(jié)語

對交互細(xì)節(jié)的注重，是鑄就互聯(lián)網(wǎng)產(chǎn)品優(yōu)秀體驗的基礎(chǔ)，細(xì)節(jié)決定成敗，這句話在互聯(lián)網(wǎng)產(chǎn)品上也一樣適用，我們進(jìn)行設(shè)計的時候可以嘗試跳出現(xiàn)有設(shè)計的束縛，思考新的設(shè)計方式，給用戶帶來不一樣的體驗，同時也能給我們帶來意想不到的收獲。

以上這些案例都是出于對新興交互方式的興趣才收集的，并不見得代表未來的發(fā)展趨勢，貢獻(xiàn)出來希望能開闊下大家的設(shè)計思路，從更多的維度來思考自己的設(shè)計，收集會一直持續(xù)下去，并會增加移動端的案例的比例。

來源：一淘UX