轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   www.alimai.net  )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源：http://labs.chinamobile.com/news/design/97279

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，   請(qǐng)點(diǎn)這里  在互聯(lián)網(wǎng)這個(gè)領(lǐng)域，每天都有不計(jì)其數(shù)的產(chǎn)品誕生，有些產(chǎn)品只是靈光一現(xiàn)，有的卻存活了下來(lái)，但是不論存活與否，這些產(chǎn)品上總有一些設(shè)計(jì)細(xì)節(jié)讓我們眼前一亮，下文中分類(lèi)整理了一些不錯(cuò)的交互形式，希望能給大家?guī)?lái)新的設(shè)計(jì)靈感。

一、導(dǎo)航

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

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

2，導(dǎo)航hover

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

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

3，具有親和力的圖形化導(dǎo)航  

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

4，活潑的輔助導(dǎo)航

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

二、Hover交互

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

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

三、反饋設(shè)計(jì)

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

五、照片展示

六、評(píng)論模塊

七、仿真展示

八、信息展示

九、三維視角

十、3D效果

十一、時(shí)間指示

十二、metro信息展示

十三、信息預(yù)覽

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

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

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

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

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

十七、無(wú)線端手勢(shì)操作

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

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

十八、轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

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

十九、圖片查看

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

二十、多圖合一展示

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

二十一、Loading

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

二十二、時(shí)間軸

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

二十三、推拉窗

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

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

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