海淘科技分享：網(wǎng)頁交互設(shè)計案例
交互原型設(shè)計基礎(chǔ)
1、移動平臺圖標(biāo)設(shè)計
圖形的基本編輯，繪圖與上色，基本繪圖工具，選擇工具組，LOGO的制作等，適合零基礎(chǔ)同學(xué)學(xué)習(xí)
2、安卓移動平臺界面設(shè)計
鋼筆工具與文字的使用，文字與圖表的應(yīng)用，圖層與蒙版的應(yīng)用，畫筆與符號工具的運用，效果與圖形樣式的應(yīng)用濾鏡效果及其應(yīng)用，廣告招牌制作，燈箱廣告，真實案例分析與制作等，學(xué)員需要有Illustrator的初級基礎(chǔ)
3、蘋果移動平臺界面設(shè)計
藝術(shù)文字設(shè)計，海報招貼設(shè)計與DM單設(shè)計，菜譜設(shè)計，VI視覺系統(tǒng)設(shè)計及宣傳冊制作，包裝與書籍裝幀設(shè)計，矢量插畫繪制，網(wǎng)頁設(shè)計，UI圖標(biāo)設(shè)計等，學(xué)員需要有Illustrator的初、中級基礎(chǔ)
playdotto
一個《連接點》休閑游戲網(wǎng)站，每組連接點都為一個圖案，很有意思。
mike-tucker
這個網(wǎng)頁對JS要求應(yīng)該很高，網(wǎng)頁每個插畫元素好像是用SVG制作，首頁隨機變更風(fēng)格色彩，其次它的聯(lián)系我們頁面設(shè)計很值得學(xué)習(xí)!
defyhistory
這算是一個互動設(shè)計類網(wǎng)站，讓用戶來模仿畫中人的表情頭像，然后貼上去，最后還能FACEBOOK分享，實現(xiàn)推廣作用。
fontwalk專題頁
用視差網(wǎng)頁技術(shù)來展示英文字體，各種動畫非常有創(chuàng)意，大家一定要看看哦。
antro
這是一個設(shè)計工作室類似的網(wǎng)站，大家如果想制作自己的個人網(wǎng)頁，可以參考這些交互來制作。
mapprojectoffice
這個網(wǎng)站以格子形式展示不同的office辦公室，設(shè)計簡約，點擊格子后，會以方格動畫形式展示出圖片。
hollowdocumentary專題類網(wǎng)頁
強大的視差滾動網(wǎng)頁，當(dāng)你拉下滾動條的時候，那感覺就像放電影一般，視覺效果很贊。
connectmania 連接點游戲網(wǎng)站
這是一個休閑游戲網(wǎng)站的官網(wǎng)，大家滑動到中間，左側(cè)的點點可以玩游戲的，用鼠標(biāo)連接看看。這樣制作為了得到更好的推廣、展示效果，讓用戶沒下載APP應(yīng)用游戲就能感受到游戲的樂趣，而且還能提升用戶下載游戲的欲望。
sehenundernten
看上去像是很簡單的布局，但當(dāng)然滑動滾動條或點擊不同的鏈接，會有意想不到的效果哦!
攝影師個人網(wǎng)站julianabrams
以兩欄布局方式展示，這樣的排版設(shè)計很好看，值得學(xué)習(xí)。
感受倫敦NIKE
NIKE的專題網(wǎng)站，利用CSS3實現(xiàn)的3D特效，很強大吧?
在互聯(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進入社交領(lǐng)域的第一個產(chǎn)品，在交互方式有很多亮點，比如在導(dǎo)航的擴展性上，可以把不常用的標(biāo)簽拖放到“更多”中，從而使導(dǎo)航界面更簡潔，這個操作進行時的效果也很精致、流暢。
2，導(dǎo)航hover
案例一：你選中某個導(dǎo)航標(biāo)簽時，并不是改變該標(biāo)簽的字體顏色或?qū)⒆煮w加粗，而是點亮該標(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)，代替了原有的文字鏈，并且擴大了單個標(biāo)簽的點擊區(qū)域，這是在手機、平板電腦越來越普及的情況下，采取的優(yōu)化設(shè)計，這樣的導(dǎo)航可以同時適應(yīng)PC端、移動端，節(jié)省了設(shè)計成本。
4，活潑的輔助導(dǎo)航
越來越多的國外網(wǎng)站運用側(cè)邊欄導(dǎo)航來輔助瀏覽頁面，方便用戶到達想關(guān)注的區(qū)域。不過使用這些側(cè)邊欄，需要注意頁面的情況，避免其淹沒在繁雜的頁面元素之中，成為用戶眼中的“牛皮癬”。
二、Hover交互
案例一：鼠標(biāo)移到元素上時，會有流暢的動態(tài)效果，而不是僅僅改變顏色。
案例二：這個元素其實是焦點圖切換中的控件，當(dāng)用戶將鼠標(biāo)移到切換按鈕上時，能看到下一張圖片的縮略圖。
在進行hover狀態(tài)的設(shè)計的時候，可以參考以上案例，關(guān)注細(xì)節(jié)，為用戶打造更流暢的交互動作。
三、反饋設(shè)計
案例是一個用戶的訂閱操作，設(shè)計師利用了極小的空間，做出了訂閱、取消訂閱等完整的交互細(xì)節(jié)。
四、Hover展現(xiàn)更多
這種鼠標(biāo)hover展現(xiàn)更多信息的設(shè)計很受人青睞，它達到了視覺效果美觀跟功能實用的微妙平衡，設(shè)計師為了視覺效果可以先把內(nèi)容優(yōu)先級較低的內(nèi)容隱藏，等鼠標(biāo)移入時再將其顯示出來。
五、照片展示
圖片中的圓點代表的是圖片、視頻等內(nèi)容，而且圓點的位置也隱喻著這些照片的拍攝位置。這種交互方式將內(nèi)容跟現(xiàn)實位置結(jié)合在了一起，更能吸引用戶，獲得用戶的認(rèn)可。
六、評論模塊
在這個音樂網(wǎng)站中，設(shè)計師將每首歌曲的評論跟歌曲的時間維度相結(jié)合，你可以對歌曲的某一句、甚至某個詞進行評論，并用小頭像的形式進行展示。這樣的設(shè)計，是針對用戶的特殊需求而設(shè)計的，但這種交互形式值得我們借鑒到其他地方。
七、仿真展示
案例來自于電子商務(wù)網(wǎng)站，T恤被掛在衣架上進行展示，鼠標(biāo)移動時，衣服會朝相應(yīng)方向移動，這種設(shè)計是取材于現(xiàn)實生活，拉近了網(wǎng)絡(luò)跟現(xiàn)實的距離，流暢的交互、豐富的細(xì)節(jié)讓用戶有實體店購物的感覺。
八、信息展示
這兩張圖屬于同一個案例，只是展示了不同維度的信息。當(dāng)信息有變動時，圖上會有實時的更新，告知用戶具體內(nèi)容。這種設(shè)計是基于信息可視化的理論進行的，通過簡單的效果來呈現(xiàn)復(fù)雜的信息。
九、三維視角
這個案例是三維視角的交互，用戶進入頁面后，會有4個選項，隨著用戶鼠標(biāo)的移動，會自動選擇某個選項。這樣炫酷的設(shè)計的原因跟網(wǎng)站的主題有一定的關(guān)系(UFC格斗網(wǎng)站)，帶給用戶較強的沖擊感。
十、3D效果
這個案例為了追求視覺沖擊力使用了3D效果，但是也不缺乏實用性，交互流暢，不影響信息讀取。
十一、時間指示
在某些按時間切換圖片的模塊，可采用此方式,給用戶心理預(yù)期，這樣切換的時候用戶會比較容易接受，同樣的設(shè)計可以應(yīng)用到焦點圖切換、頁面切換、頁面加載等模塊。
十二、metro信息展示
同級別的信息展示時，可以將其歸類整理，以便獲得較好的視覺效果，信息展開后，將其他“豆腐塊”移動到下方，進行下一級別的信息展示，達到效果跟功能的平衡。
十三、信息預(yù)覽
針對同等級的大批量信息，可以采用這種縮略模式，利用hover狀態(tài)呈現(xiàn)信息的主要內(nèi)容，由用戶決定下一步操作，達到空間的合理利用。
十四、復(fù)選式信息篩選
通過頁面頂部的操作模塊，可以頁面的信息進行多重篩選，直觀、方便，比單一的下拉框式篩選功能更加豐富。
十五、浮層中的多重信息展示
在某些情況下，浮層中需要放置大量的信息，這些信息屬于同級別，又屬于不同類型，這時候，可以參考此案例中的信息展示方式，在浮層中以較好的效果處理這些信息。
十六、信息流內(nèi)容數(shù)量控制
對同等級、同類別的信息進行信息流內(nèi)容控制的時候，可以參考此設(shè)計模式，利用簡單的操作控制信息展示的數(shù)量，選取不同的設(shè)置時，下方的信息流可以根據(jù)實際情況改變樣式，讓信息流的樣式跟對應(yīng)的設(shè)置形成心理映射，用戶形成習(xí)慣之后，能即刻明白該情況下的設(shè)置是什么。
十七、無線端手勢操作
案例一：模擬物理環(huán)境，賦予界面彈性屬性，界面切換更自然，效果也更豐富。
案例二：ipad上的應(yīng)用程序Paper，用兩個手指順時針或逆時針旋轉(zhuǎn)，來替代“取消操作”和“恢復(fù)操作”按鈕。
十八、轉(zhuǎn)場動畫
目前web端產(chǎn)品的轉(zhuǎn)場基本還處于沒有情感化設(shè)計的階段，無線產(chǎn)品在這塊做的比較有借鑒性。上圖的案例都有人性化、操作感強的特點在其中。
十九、圖片查看
這種設(shè)計方式更接近現(xiàn)實中的場景，用戶很容易明白，并且點擊這些圖片會帶來不同的轉(zhuǎn)換效果(左移、右移、斜著飛入屏幕)，此外這種排列能讓用戶對處于特殊位置的圖片記憶更加深刻。
二十、多圖合一展示
通過這種方式，在一張圖上就可以展示多種相關(guān)商品，節(jié)省了大量的空間和資源，也將商品展示方式進行了創(chuàng)新。在電子商務(wù)網(wǎng)站上，這種設(shè)計的發(fā)揮空間很大。
二十一、Loading
對一成不變的loading的樣式稍作改進，就能超出用戶的預(yù)期，從而獲得用戶的好感，而跟網(wǎng)站主題相關(guān)的設(shè)計，會提升用戶對網(wǎng)站的忠誠度。
二十二、時間軸
在社交網(wǎng)站以外的網(wǎng)站上，時間軸也可以扮演十分重要的角色：以優(yōu)秀的設(shè)計來引導(dǎo)用戶進行更方便的閱讀，達到更好的信息傳達目的。
二十三、推拉窗
用推拉窗來進行信息展示，它可以在同樣的空間內(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弱爆了!)去增加用戶的好奇心，如果用戶這時在想“你才弱爆了呢，給個理由先”，那么，我們的第一個問題就解決了。
對于解決第二個問題，我的理解是，能否戳到用戶的“痛處”;在用戶聽到你要說什么之后，理想的情況是直接去點擊下面的鏈接去升級或替換瀏覽器(當(dāng)然 也有可能直接給你關(guān)了，對于這種情況，我只能說，弄死IE6，我們還有很多的努力要做)，另一種情況是用戶問了一句“為啥?”，好吧，我們給你在右邊留了 一個鏈接，點了你就知道為啥了。
海淘科技不但提供網(wǎng)頁交互設(shè)計案例，而且提供關(guān)于英文網(wǎng)站建設(shè)案例、教育培訓(xùn)網(wǎng)站建設(shè)案例、互聯(lián)網(wǎng)金融網(wǎng)站建設(shè)案例、五金機械網(wǎng)站建設(shè)案例，更多類型的網(wǎng)站建設(shè)案例，在成功案例欄目下。
文章下載，點擊：網(wǎng)頁交互設(shè)計案例
