超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

你應(yīng)該知道的24種新興交互設(shè)計(jì)

2014-6-11    藍(lán)藍(lán)設(shè)計(jì)的小編

 

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

來源: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),有的卻存活了下來,但是不論存活與否,這些產(chǎn)品上總有一些設(shè)計(jì)細(xì)節(jié)讓我們眼前一亮,下文中分類整理了一些不錯(cuò)的交互形式,希望能給大家?guī)硇碌脑O(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)注近來的導(dǎo)航設(shè)計(jì)的話,不難發(fā)現(xiàn),越來越多的導(dǎo)航采用了圖標(biāo),代替了原有的文字鏈,并且擴(kuò)大了單個(gè)標(biāo)簽的點(diǎn)擊區(qū)域,這是在手機(jī)、平板電腦越來越普及的情況下,采取的優(yōu)化設(shè)計(jì),這樣的導(dǎo)航可以同時(shí)適應(yīng)PC端、移動(dòng)端,節(jié)省了設(shè)計(jì)成本。

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

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

二、Hover交互

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

案例二:這個(gè)元素其實(shí)是焦點(diǎn)圖切換中的控件,當(dāng)用戶將鼠標(biāo)移到切換按鈕上時(shí),能看到下一張圖片的縮略圖。

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

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

案例是一個(gè)用戶的訂閱操作,設(shè)計(jì)師利用了極小的空間,做出了訂閱、取消訂閱等完整的交互細(xì)節(jié)。

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

      這種鼠標(biāo)hover展現(xiàn)更多信息的設(shè)計(jì)很受人青睞,它達(dá)到了視覺效果美觀跟功能實(shí)用的微妙平衡,設(shè)計(jì)師為了視覺效果可以先把內(nèi)容優(yōu)先級(jí)較低的內(nèi)容隱藏,等鼠標(biāo)移入時(shí)再將其顯示出來。

五、照片展示

       圖片中的圓點(diǎn)代表的是圖片、視頻等內(nèi)容,而且圓點(diǎn)的位置也隱喻著這些照片的拍攝位置。這種交互方式將內(nèi)容跟現(xiàn)實(shí)位置結(jié)合在了一起,更能吸引用戶,獲得用戶的認(rèn)可。

六、評(píng)論模塊

       在這個(gè)音樂網(wǎng)站中,設(shè)計(jì)師將每首歌曲的評(píng)論跟歌曲的時(shí)間維度相結(jié)合,你可以對(duì)歌曲的某一句、甚至某個(gè)詞進(jìn)行評(píng)論,并用小頭像的形式進(jìn)行展示。這樣的設(shè)計(jì),是針對(duì)用戶的特殊需求而設(shè)計(jì)的,但這種交互形式值得我們借鑒到其他地方。

七、仿真展示

      案例來自于電子商務(wù)網(wǎng)站,T恤被掛在衣架上進(jìn)行展示,鼠標(biāo)移動(dòng)時(shí),衣服會(huì)朝相應(yīng)方向移動(dòng),這種設(shè)計(jì)是取材于現(xiàn)實(shí)生活,拉近了網(wǎng)絡(luò)跟現(xiàn)實(shí)的距離,流暢的交互、豐富的細(xì)節(jié)讓用戶有實(shí)體店購物的感覺。

八、信息展示

       這兩張圖屬于同一個(gè)案例,只是展示了不同維度的信息。當(dāng)信息有變動(dòng)時(shí),圖上會(huì)有實(shí)時(shí)的更新,告知用戶具體內(nèi)容。這種設(shè)計(jì)是基于信息可視化的理論進(jìn)行的,通過簡(jiǎn)單的效果來呈現(xiàn)復(fù)雜的信息。

九、三維視角

       這個(gè)案例是三維視角的交互,用戶進(jìn)入頁面后,會(huì)有4個(gè)選項(xiàng),隨著用戶鼠標(biāo)的移動(dòng),會(huì)自動(dòng)選擇某個(gè)選項(xiàng)。這樣炫酷的設(shè)計(jì)的原因跟網(wǎng)站的主題有一定的關(guān)系(UFC格斗網(wǎng)站),帶給用戶較強(qiáng)的沖擊感。

十、3D效果

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

十一、時(shí)間指示

在某些按時(shí)間切換圖片的模塊,可采用此方式,給用戶心理預(yù)期,這樣切換的時(shí)候用戶會(huì)比較容易接受,同樣的設(shè)計(jì)可以應(yīng)用到焦點(diǎn)圖切換、頁面切換、頁面加載等模塊。

十二、metro信息展示

      同級(jí)別的信息展示時(shí),可以將其歸類整理,以便獲得較好的視覺效果,信息展開后,將其他“豆腐塊”移動(dòng)到下方,進(jìn)行下一級(jí)別的信息展示,達(dá)到效果跟功能的平衡。

十三、信息預(yù)覽

      針對(duì)同等級(jí)的大批量信息,可以采用這種縮略模式,利用hover狀態(tài)呈現(xiàn)信息的主要內(nèi)容,由用戶決定下一步操作,達(dá)到空間的合理利用。

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

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

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

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

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

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

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

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

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

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

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

十九、圖片查看

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

二十、多圖合一展示

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

二十一、Loading

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

二十二、時(shí)間軸

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

二十三、推拉窗

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

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


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

分享本文至:

日歷

鏈接

個(gè)人資料

存檔