一個有趣的網(wǎng)頁設(shè)計可以為用戶提供絕佳的瀏覽和使用體驗，無論是響應(yīng)式設(shè)計，還是根據(jù)光標(biāo)位置改變網(wǎng)站的行為，都可以吸引用戶與之互動和探索。????下面 UXD 為大家節(jié)選了7個網(wǎng)頁設(shè)計案例，來快速了解一下吧！

01

Jack Wild

網(wǎng)址：https://www.isjackwild.com/

數(shù)字設(shè)計師和網(wǎng)頁開發(fā)者 Jack Wild 的網(wǎng)站的概念很簡單。每次點擊都會導(dǎo)致炸彈（光標(biāo)）爆炸，使網(wǎng)站內(nèi)容更加混亂。Jack 希望他的作品集中在交互和物理上。

設(shè)計成功的關(guān)鍵在于光標(biāo)本身，因為它給訪問者一個線索，表明網(wǎng)站的內(nèi)容遠不止眼前所見。在移動設(shè)備上，雖然光標(biāo)不可見，但用戶必須觸摸屏幕，以此觸發(fā)交。

02

Bruno Tome

網(wǎng)址：http://brunotome.dev/

在設(shè)計網(wǎng)站時，Web 開發(fā)人員 Bruno Tome 想要回到他作為平面設(shè)計師的本源，創(chuàng)建一個模仿海報的單頁紙。他通過使用角落上的裁剪標(biāo)記使它看起來像導(dǎo)出的 PDF 打印，然后設(shè)計了像印刷機一樣“滾動”的字體，以及由 Bruno Rodrigues 設(shè)計的一系列定制字體，用來代表 Bruno 產(chǎn)品組合中包含的每個網(wǎng)站的外觀和感覺。

Bruno 網(wǎng)站上的超大光標(biāo)控制著黑白的橫截面，當(dāng)你在它周圍移動時會反轉(zhuǎn)網(wǎng)站。這個簡單的登錄頁面可以鏈接到他建立的每個網(wǎng)站，Bruno 希望那些訪問他的作品集的人只關(guān)注滾動和移動鼠標(biāo)的完整體驗。

03

Shauna Buckley and Simon Sweeney

網(wǎng)址：http://otheroffice.net/

雖然 Bruno 允許他的作品美學(xué)指導(dǎo)他的作品集設(shè)計，但對于 Shauna Buckley 和 Simon Sweeney AKA Other Office 來說，正是他們的過程提供了靈感。他們希望這一網(wǎng)站能夠反映他們的工作方式，“只有我們兩個人，同時圍繞項目進行循環(huán)，并從不同的角度處理它們，因此我們花了一些時間思考如何將其可視化在互聯(lián)網(wǎng)的背景下?！?在登陸 Other Office 的網(wǎng)站時，你會看到兩個指針，它們由一條黑線連接，該黑線根據(jù)你的位置旋轉(zhuǎn)和延伸。

在討論這兩個光標(biāo)如何引起混淆時，Shauna Buckley 和 Simon Sweeney?想到了使用線條將圖像與其標(biāo)題連接起來的想法。光標(biāo)的協(xié)同工作意味著它們都降落的地方是相互關(guān)聯(lián)的，即如果按下鼠標(biāo)，兩個光標(biāo)下的鏈接必須轉(zhuǎn)到同一個位置。

04

Jaan Sarapuu

網(wǎng)址：https://beyondmatter.eu/

Beyond Matter 是“一個國際性的跨學(xué)科項目，由 ZKM (Zentrum für Kunst und Medien) 組織，目標(biāo)是以創(chuàng)新的方式復(fù)興過去的標(biāo)志性展覽、當(dāng)前展覽的文件記錄、文件的傳播以及實際存在的藝術(shù)品——無論是物質(zhì)上的還是非物質(zhì)上的。

標(biāo)志和鼠標(biāo)的交互是對 Walter Benjamin 的光環(huán)概念的致敬——藝術(shù)品在時間和空間中的存在。因此，網(wǎng)站將光環(huán)的概念與訪問者的互動結(jié)合起來，這反過來又創(chuàng)造了無窮無盡的作品，其中一些工作，一些不成功，一些優(yōu)秀，一些完全失敗——從而鼓勵觀眾帶入為參與者的角色。

05

Daniel Baragwanath

網(wǎng)址：https://digi.gal/

Digi-Gal 是來自世界各地從事 3D 工作的 womxn、跨性別創(chuàng)意人員的集合，他們以技術(shù)技能和工作機會相互支持。該團體新推出的網(wǎng)站由倫敦設(shè)計師 Daniel Baragwanath 設(shè)計和開發(fā)，其中包含一個代表每個成員及其位置的星系。雖然在美學(xué)上相當(dāng)簡單，但該網(wǎng)站的復(fù)雜之處在于其功能具有過濾系統(tǒng)，允許你根據(jù)成員的位置和技能查看成員，將他們視為銀河系的一部分。

網(wǎng)站通過反映集體工作方式來延續(xù) [Digi-Gal's] 的精神，同時為會員和潛在客戶提供發(fā)現(xiàn)彼此的機會。導(dǎo)航元素基于 3D 星系，來自世界各地的每個成員都被表示為一個球體，每個成員都包含一個與其各自位置、技能集和聯(lián)系方式有關(guān)的數(shù)據(jù)集。

在 Digital-Gal 網(wǎng)站，所有事物都有一個未來主義的外觀。但 3D 星系才是真正的吸引力，完美地體現(xiàn)了這群人盡管位于不同的地方，但如何作為一個整體發(fā)揮作用。

06

William Richardson

網(wǎng)址：http://williamrichardson.co.uk/

如何做出吸引人注意力的作品集網(wǎng)站，這一點始終是倫敦設(shè)計師 William Richardson 在設(shè)計他的想法時的首要任務(wù)。作為一名在倫敦工作的自由設(shè)計師，他一直在尋找讓自己的作品更令人難忘的方法，因此他設(shè)計了一個互動且有趣的網(wǎng)站，無論是對于設(shè)計師還是非設(shè)計師。

受 Adobe Illustrator 和 inDesign 畫板的啟發(fā)，William 的網(wǎng)站由 Rafa Cobiella 開發(fā)，點擊時顯示可以拖放、調(diào)整大小、分層和刪除的圖像。更重要的是，一旦你找到了喜歡的圖像排列，就可以下載這些圖像，將網(wǎng)站變成與自己的客戶對話的獨特工具。另外，網(wǎng)站的單頁布局也很便于溝通，因為訪問者應(yīng)該知道的一切都在他們面前。

William 的設(shè)計很有趣，而且很有用，它在某種程度上揭示了他作品背后的一些過程。沒有兩個畫板是相同的，因為每個用戶參與工作的方式都不同——有些是整潔的，有些是凌亂的，有些則試圖打破它。

07

TwoMuch

網(wǎng)址：http://twomuch.studio/

TwoMuch 由?Ben Chan 和?Malone Chen?建立，這是一個簡單、大膽和有趣的網(wǎng)站，其中包含一個交互式 3D 空間，充滿了與 Ben 和 Malone 的每個項目相關(guān)的對象。這些物體會被你的鼠標(biāo)吸引，在點擊時分散。

網(wǎng)站上的每個形狀代表他們已經(jīng)完成的一個項目，用戶可以移動鼠標(biāo)或單擊來與空間進行交互。在手機上，用戶可以傾斜和搖晃來玩弄空間。如果向下滾動，每個項目都有自己的自動圖庫，需要時間來查看所有圖像和視頻。Ben Chan 和?Malone Chen?想為人們創(chuàng)造一個更慢的環(huán)境來瀏覽來理解作品。

更多知識干貨以及其他海外留學(xué)的資訊可以關(guān)注UXD交互工業(yè)產(chǎn)品設(shè)計分享或者添加小助手，還可獲取講座直播哦~

|福利大放送 | WELFARE?
對于設(shè)計初學(xué)者，完成從0開始創(chuàng)作幾乎是不可能的，就像學(xué)習(xí)過程中書讀百遍其義自見一樣。有了大量的積累，才能在腦海里建立素材庫，這些素材庫能幫助同學(xué)們完成最初的設(shè)計想法積累，基于這樣的基礎(chǔ)再進行個性化的創(chuàng)作，最終才能做出高質(zhì)量的作品集。全球院校最新作品集免費拿！添加小助手即可獲?。?/p>

UXD交互工業(yè)產(chǎn)品設(shè)計學(xué)院是尤克斯國際旗下的一家專注于交互、服務(wù)、工業(yè)、產(chǎn)品設(shè)計專業(yè)的頂級設(shè)計學(xué)院。除了一對一設(shè)計課、基礎(chǔ)技能課程、小組課題、設(shè)計評圖、聯(lián)合教學(xué)外，我們提供不定主題的公開課和內(nèi)部小組課，教學(xué)計劃課程由三大部分組成，包括基礎(chǔ)軟件技能教學(xué)、設(shè)計理論系統(tǒng)講座、申請必備知識解析等。

本文版權(quán)歸UXD尤克斯所有

部分圖片來自于網(wǎng)絡(luò)

如有侵權(quán)請與我們聯(lián)系