年前，OPPO 獲得了 FWA 的「每日最佳網站」獎項。
獲獎作品是 OPPO 未來科技大會 2021（OPPO INNO DAY 2021），這場線上虛擬大會對於 OPPO 也是一次全新嘗試，往年的未來科技大會都是在線下舉辦。
▲ OPPO 未來科技大會 2021 的獲獎頁面. 圖片來自：FWA
▲ OPPO 未來科技大會 2021. 圖片來自：Twitter @VirtualVerse_X
給 OPPO 頒獎的 FWA 全稱為 Favourite Website Awards，創立於 2000 年，作為一個優秀網站收錄平台運營至今。FWA 從 35 個國家（地區）請來 500 位評審，評出「每日最佳網站」、「每月最佳網站」、「年度觀眾投票獎」和「年度最佳網站」。
▲ OPPO 未來科技大會 2021. 圖片來自：Hypebeast
除了 FWA，知名網站 Awwwards 每天也在給全世界網站打分和頒獎。
Awwwards 有著相對完善的評分系統，評分依據 4 個要素——設計、實用性、創新性和內容，而且採用業內專家和真實用戶的實名制打分。業內專家評分中，還會將偏離平均值最遠的 3 個評分剔除，以提升公正度。
▲ Awwwards 2021 年「年度最佳網站」投票頁面. 圖片來自：Awwwards
2020 年才成立的 Orpetron 網站設計獎，也是一位後起之秀。每天都在 YouTube、Instagram 和推特更新的它，喜歡用電腦和手機同時展示獲獎網站，這讓它收獲了一批忠實粉絲。
▲ 圖片來自：Orpetron 官網
最能發掘創意的藝術網站 It』s Nice That 也有個收錄網站的欄目——「Double Click」（雙擊），從 2019 年開始每月分享 5 個網站，每次看完都讓人不禁想驚呼：「網站還能這麼有意思」。
▲「Double Click」（雙擊）欄目. 圖片來自：It』s Nice That
如果想找一些有趣甚至有點搞怪的網站，loadmo 網站想必是不錯的選擇，它背後是著名創意平台 DVTK。關注重點在手機螢幕的 loadmo，就連網站界面都是手機螢幕框，動態展示持續收錄的網站。
▲ 圖片來自：Instagram @loadmo.re
loadmo 在 Instagram 上的發帖方式也相當有意思，用實物手機打開網站讓你站一側瀏覽，或者請來名人 IP 手舉卡片來張「代言照」。
▲ 圖片來自：Instagram @loadmo.re
我們從以上平台中精選了一些很有特點，也有點不可思議的網站作品，瀏覽的同時一起「漲知識」。
現在流行在網站開大會、辦大型活動
綜觀 FWA、Awwwards 和 Orpetron 近一年的獲獎名單，活動類網站的成績非常耀眼。
這也難怪，當疫情席捲全球，網站設計師和開發人員都在紛紛將原本在線下舉辦的活動搬到線上，比如來自美國洛杉磯的 Active Theory 團隊，在網上辦起會議和活動可是一把「好手」。
2020 年初，Active Theory 推出了用來舉辦線上活動的 Dreamwave 平台，這是基於微型網站發展出的新事物——微觀宇宙，它被視為元宇宙中以社交驅動為目的而打造的沉浸式虛擬空間。
▲ 在 Dreamwave 平台上舉辦的線上虛擬活動. 圖片來自：Medium
Active Theory 在創建平台不久後推出了好評產品——線上音樂節 Secret Sky 2020。在音樂節期間，來自 163 個國家（地區）的 16 萬觀眾來到了這個虛擬禮堂，共享音樂盛宴。
然而，Active Theory 並不滿足於這樣的成功，在接下來的 Secret Sky 2021，針對先前的問題個個擊破，最後交出了讓人驚艷的疊代產品，刷新了線上辦活動的設計水準和技術要求。
在空間內看節目就是對著一塊四四方方的螢幕嗎？Active Theory 覺得讓觀眾靜靜待在小空間里欣賞音樂，是他們在 2020 年的失敗。
▲ 單一 3D 表演環境的 Secret Sky 2020. 圖片來自：FWA
在 2021 年的音樂節直播中，螢幕被融進了 3D 環境和氛圍中，絕不是簡單的疊加層。
▲ Secret Sky 2021. 圖片來自：FWA
音頻聊天新功能的加入，也讓參與音樂節的我們，更加「真實在場」。
▲ Secret Sky 2021. 圖片來自：Medium
Active Theory 還從遊戲《Sky 光遇》和《英雄聯盟》中「偷師」，打造了可以讓觀眾閒逛的自然環境。
▲ 來自遊戲和動漫的場景靈感. 圖片來自：Medium
為了配合音樂節打造出年輕而有趣，但又不幼稚的角色，團隊從遊戲 Journey、吉卜力工作室作品和音樂節組織人 Porter Robinson 想法中汲取靈感，設計出穿著鬥篷，有著表情符號眼睛的人物角色。
▲ 吉卜力工作室的頭像靈感（圖左）和音樂人 Porter Robinson 的創意（圖右）. 圖片來自：Medium
▲ 角色人物的設計手稿. 圖片來自：Medium
▲ 為 VR 設置的手臂數據. 圖片來自：Medium
此外，Active Theory 還打造了一個名為魔方世界（Cube World）的三維空間，黑暗環境中閃爍的燈光與迷幻的特效讓整個音樂節更加帶感。
▲ 魔方世界. 圖片來自：Medium
網址：https://dreamwave.tech/secret-sky-2021
以下推薦 3 個辦活動很給力的網站。
1. 2020 年杜拜虛擬世博會（Virtual Expo Dubai 2020）
▲ 2020 年杜拜虛擬世博會. 圖片來自：Awwwards
實際在 2021 年 11 月才發布的 2020 年杜拜虛擬世博會，憑著在設計和技術上的高難度，當之無愧地拿下了 FWA 2021 年的「年度觀眾投票獎」，還同時獲得 Awwwards 和 Orpetron 的「每日最佳網站」。
拿獎早已拿到手軟 的 Dog Studio，在談起這個網站時也是一把汗水一把淚，坦言它的龐大規模已經擊穿了過往經歷的天花板。
▲ 2020 年杜拜虛擬世博會. 圖片來自：Instagram @dogstudio.co
70 個定製展館，85 個主題展館，2 個公園，4 個主要主題展館，1 個展覽中心。所有這些都要重新建模、紋理化，加入照明效果並加入到一個基於 WebGL 程序語言的空間中。
地圖只是冰山一角，因為我們的團隊需要圍繞展館構建完整的用戶體驗，以及處理整個項目過程中會發生的所有活動和事務。
——Dog Studio
▲ 2020 年杜拜虛擬世博會. 圖片來自：Instagram @dogstudio.co
網址：https://virtualexpodubai.com/
2. 遊戲大獎微觀宇宙（The Game Awards Microverse）
▲ The Game Awards Microverse. 圖片來自：FWA
遊戲大獎是視頻遊戲行業的年度盛會之一，2020 年在流媒體上的播放量超過 8300 萬。2021 年 12 月 9 日舉辦的最新遊戲大獎，Active Theory 被請來設計線上虛擬空間，讓觀眾可以訪問觀看 3 小時的直播。
遊戲大獎的活動現場被設計成一個有漂浮行星、古老巨人和特殊地形的抽象世界。觀眾可以通過完成遊戲任務，獲得專屬房間、頭像定製等升級功能。
▲ The Game Awards Microverse. 圖片來自：FWA
目前，元宇宙如何演變與創新的討論激烈，其中大部分與遊戲有關，因此讓粉絲參與到遊戲大獎中是非常有意義的。
——Dreamwave 創意總監兼聯合創始人安迪·塞蘭德 (Andy Thelander)
▲ The Game Awards Microverse. 圖片來自：VR Scout
網址：https://thegameawards.dreamwave.live/
3. 聖丹斯電影節（Sundance Film Festival）
▲ 聖丹斯電影節線上網站. 圖片來自：Medium
專為獨立電影人和電影作品而設的聖丹斯電影節，今年已迎來了第 38 年，然而這個線下盛典也在去年進軍線上架構虛擬空間，成為新前沿（New Frontier Experience）的重要部分。
聖丹斯電影節團隊給網站設計的方向，卻是疫情下尤為流行的視頻會議軟體 Zoom，希望讓與會者在自己居住的地方見到來自世界各地的友人。
但事實上，視頻會議通常會將界面均勻劃分成幾個框框，不容易讓與會者沉浸到廣闊的虛擬空間中。
▲ 以視頻會議為靈感的早期界面設計. 圖片來自：Medium
經過一番思考，接下項目的 Active Theory 為觀眾設計了移動頭像——卡通型的化身上頂著一個圓形螢幕，里面是我們的頭像。
▲ 虛擬人物設計過程. 圖片來自：Medium
網站以太空宇宙飛船為主題打造，包括太空花園、電影派對、畫廊和電影院，在 2022 年 1 月 20 日至 28 日正式開放，購買價值 50 沒有的門票後即可通過電腦或 VR 耳機訪問。
▲ 聖丹斯電影節線上網站. 圖片來自：Medium
網址：https://newfrontier.sundance.org/
用互動設計改造傳統的「告示板」網站
傳統的網站設計有點像是過去牆上用來公布信息的宣傳板，上面排列著信息，等待訪客閱覽。然而，在遊戲、視頻、影視盛行環境下成長與生活的我們，這類網站往往給我們一種過時的感覺，難以聚焦我們的注意力。
好的互動設計在當下的網站設計中，不僅能夠吸引我們的注意力，更重要的是，它還可以將背後的故事，用最感人的方式講出來。
這並不是一件易事，不恰當或者過多的互動設計，都會將注意力從故事上轉移，故事也就講不下去了。
▲ 圖片來自：Giphy
全球交互式設計工作室 Makemepulse 團隊人員的技術非常過硬，偏偏他們更關注講故事體驗。如果用戶為作品創意、故事情節和情感著迷，忽視了背後的高難度技術，他們反倒會更開心。
Makemepulse 會從電子遊戲、電影和藝術等媒體汲取養分，用在創造用戶體驗上。在遊牧部落（Nomadic Tribes）網站設計中，Makemepulse 更像是電影導演，前半部分時間都在編寫故事，反復調整靈感版。
▲ 遊牧部落獲得 Awwwards 的「每日最佳網站」. 圖片來自：It』s Nice That
網址：https://2019.makemepulse.com/
在一次訪談中，Makemepulse 還分享了自己的珍貴經驗。
到虛擬世界之外的地方尋找靈感，從電影、視頻遊戲、音樂、活動、自然以及生活中能讓你享受的事物中，更有可能找到有價值的創意角度，用戶也更容易有共鳴，給出回應。
——Nicolas Rajabaly（Makemepulse 的聯合創始人）
▲ Makemepulse 為柏林 Alte Nationalgalerie 設計的網站——神奇的倒影（Magical Reflections）獲得 FWA 的「每日最佳網站」. 圖片來自：FWA
網址：https://www.magische-spiegelungen.de/
以下推薦 3 個很擅長用交互空間「講故事」的網站。
1. 鮮味樂園（Umami land）
▲ 鮮味樂園. 圖片來自：FWA
同時獲得 Awwwards 的「每月最佳網站」和 FWA 的「每日最佳網站」的鮮味樂園，是一個虛構的日本飲食文化公園，通過遊戲式的互動引出 Google 搜索結果，讓用戶了解更多日本料理。
Google 趨勢顯示全球對日本食品和外賣的搜索量飆升，因此 Google 啟動了一個宣傳日本美食的項目。
最初想通過日本旅行來吸引遊客的 Google，在全球疫情的背景下改變了主意，找來全球設計公司 Media.Monks 設計宣傳網站。
▲ 鮮味樂園. 圖片來自：Awwwards
Media.Monks 接下項目後，首先整理出一份最吸引人的日本料理菜單，從外觀、味道以及背後的歷史文化開始深入研究。
▲ 鮮味樂園. 圖片來自：Awwwards
然後，Media.Monks 將每種食物變成了公園內的不同區域，用食物作為場景美術靈感，同時每個場景又必須讓菜餚看起來更美味可口。
▲ 鮮味樂園. 圖片來自：FWA
舉個例子，作為日本料理核心的大米被設計成公園的主要街道。在這里，遊客可以找到用大米製作的菜式，以及大米的常見配菜，如醃制蔬菜和蘑菇。
▲ 鮮味樂園. 圖片來自：Awwwards
與平常去任何公園景點類似，遊客可以在商店購買有意義的紀念品。
▲ 鮮味樂園的紀念卡片. 圖片來自：Awwwards
網址：https://umamiland.withgoogle.com/en
2. 沖入風暴（Into the Storm）
▲ 沖入風暴. 圖片來自：Awwwards
由 Media.Monks 操刀設計的另一個網站——沖入風暴（Into the Storm），走的卻是截然不同的風格——交互式紀錄片。
如名稱所暗示一般，進入網站的每一位用戶，將化身為救援人員，沖入風暴搶救倖存者。
▲ 沖入風暴. 圖片來自：Awwwards
這部「紀錄片」源於一個真實故事——2010 年 8 月 8 日，一架民用飛機在阿拉斯加南部的楚加奇山脈墜毀，美國空軍的一個特種作戰小組接到救援任務，最終成功將倖存者帶回安全地道。
▲ 沖入風暴. 圖片來自：Awwwards
為了達到更逼真的效果，Media.Monks 從三個要素全面還原，即故事、環境和互動。從團隊繪制的第一個故事版可以看到，整個事件的所有信息和細節都被納入考慮。
▲ 設計過程中的第一個故事版. 圖片來自：Awwwards
由於位置偏遠無法實地采景，Media.Monks 從 Google 地球獲取了螢幕錄像，用專門的軟體還原地貌的同時，還會讓視角盡可能接近地面，讓畫面更像是通過救援人員眼睛看到的。
▲ 從 Google 地球中提取的圖像數據. 圖片來自：Awwwards
▲ 在 3D 軟體中還原山脈地形. 圖片來自：Awwwards
救援人員的音頻資料也被用了進來，解釋他們使用什麼工具和做了什麼事情，讓體驗更為真實。此外，這個網站還擁有很高的教育宣傳價值，可以激勵人們參與真實的救援行動。
▲ 聲音設計界面. 圖片來自：Awwwards
網址：http://www.airforce.com/intothestorm
3. 普羅米修斯燃料（Prometheus Fuel）
▲ 普羅米修斯燃料. 圖片來自：FWA
一舉拿下 FWA 2021 年「年度最佳網站」和 Awwwards 的「每月最佳網站」的普羅米修斯燃料（Prometheus Fuel），將我們拉回到科幻小說盛行的過去年代，觀看了一部公路電影。
▲ 普羅米修斯燃料. 圖片來自：Awwwards
雖然這部公路電影的主角看起來 70 年代福特的 Mustang Fastback，實質上這卻是燃料廣告。這款燃料非常特別，是由空氣中的二氧化碳過濾生成的。
基於品牌選定的復古未來主題的視覺風格，網站的故事分成兩個章節——「新時代的誕生」和「充滿可能的世界」。用戶可以通過垂直方向的滾動，欣賞整個故事。
▲ 第一章節的故事版. 圖片來自：Medium
▲ 第二章節的故事版. 圖片來自：Medium
為了讓用戶擁有更強的參與感，有趣的時刻被添加了交互式指令，因此用戶可以點擊或按住一個按鍵，與螢幕上的元素進行互動。
▲ 網站的交互效果. 圖片來自：Medium
網址：https://www.prometheusfuels.com/
因為手機和手指才變得有意思的網站
在移動設備十分普及的當下，很多網站是在手機螢幕上展示，雖然螢幕變小了，但是觸屏方式給網頁的設計打開了另一扇窗戶，這吸引了一批網頁設計師想要在手機螢幕上做創新設計。
因為對「網站看起來相似」、「一次又一次地重復相同的模板」這些現況的不滿，首爾創意設計師 Yehwan Song 萌生了創建為手指設計網站的想法。
命名為「今天我走路（Today I Walked）」的網站，正是這個想法的最終成品。在智慧型手機螢幕上，用戶的手指可以化作雙腳，在螢幕中的街道四處行走，窄小的螢幕卻裝進了整個街區。
▲ 今天我走路（Today I Walked）. 圖片來自：Instagram @yehwan.yen.song
後來 Yehwan 還依據這個概念，加入腳印等互動元素推出了新網站——手指在走路（fingerwalking.kr）。
▲ 手指在走路（fingerwalking.kr）. 圖片來自：Instagram @loadmo.re
熟悉運用復雜編碼的 Yehwan，持續探索後推出名為當我站在這里（While I’m Standing Here）的網站——將帶有符號和字母的小方塊放在螢幕上，螢幕便立刻顯現依據物件補全的圖像。
▲當我站在這里（While I’m Standing Here）. 圖片來自：Instagram @yehwan.yen.song
在早期的實驗中，Yehwan 用套上殘缺字母圖案的手指在螢幕上做彈琴動作，敲下來的瞬間，螢幕與手指套上的圖案組成了完整的「hey」（嘿）。
▲ hey 網站互動效果. 圖片來自：Instagram @yehwan.yen.song
我開始思考我們如何在日常生活中使用手指，指出某物或者用手語交流。我們用手指直接觸摸螢幕上的這一時刻，在視覺效果上是可以變得激動人心和很有意思的。
——Yehwan Song
▲ 不要觸摸（Don』t touch）. 圖片來自：Instagram @yehwan.yen.song
以下推薦 3 個在手機螢幕上很有趣的網站。
1. 來和我一起刮毛吧（Come Shave With Me）
▲ 來和我一起刮毛吧. 圖片來自：Instagram @loadmo.re
雖然被大多數網友稱呼為「刮腿毛的網站」，在設計說明頁面上卻標明這是個毛茸茸的上腹部。疫情背景下，居家隔離的經歷讓設計師腦中冒出了一個想法——「不如做一款虛擬皮膚，大家可以一起在線刮毛」。
手指放到螢幕上，會出現一把刮刀，手起刀落，一排毛發便被颳了下來。
有趣的是，虛擬皮膚上毛發生長的速度很快，才剛剛刮完的地方，立馬又會長出新的毛發。
這個網站由 Alexandra Barancova、Jae Perris 與 Moniker 合作完成，這背後的目的分享背後資助人創意產業基金會 NL 的最新研究。
▲ 網站說明頁. 圖片來自：Comeshave
網址：https://www.comeshave.com/
2. 忙碌模擬器（Busy Simulator）
▲ 忙碌模擬器. 圖片來自：loadmo
語音或視頻會議中受不了想要結束怎麼辦？創意總監兼技術專家 Brian Moore 設計出忙碌模擬器，用來模擬手機中常用的應用程式，通過播放通知聲音，讓你可以假裝很忙碌。
Designtaxi 網站還有趣地加上一句評論：「通過表現得很忙碌，你實際上可能會完成更多的工作。」
每個應用程式圖標下都配有一個進度條，原來「忙碌」的程度也可以隨意調試。
網址：https://busysimulator.com/
3. iPod.js
▲ iPod.js. 圖片來自：Instagram @loadmo.re
如果懷念 2000 年代初期的 iPod，不妨嘗試一下這個網站——連接到 Spotify 或 Apple Music，感受從 iPod 里傳來的音樂。
就連轉動方向盤的那種「咔噠」音效，也被細致地還原了。
網址：https://tannerv.com/ipod/
在一次重新構想網站的在線活動中，Yehwan Song 說出了一些希望打破條條框框的設計師的心聲——「我的目標是讓網頁設計可以更加多樣化，我嘗試將網站概念從以用戶為中心，轉變為以內容為中心。」
也就是說，過於重視用戶體驗的設計理念，不可避免地讓網站設計出現同質化的問題。簡單而順暢的交互，或許對用戶很友好，但在做這些減法的過程中，有意思的想法也可能會被過濾掉，被當成殘渣沖入下水道。
▲ 將個人網站做成有貼紙的「偽 Instagram 頁面」的設計師 Rachel Kim. 圖片來自：Instagram @9imyen
專門收錄有趣網站的 loadmo 也在 Instagram 上借用哲學教授 E. Selinger 的文章摘錄發聲：「Selinger 談到了科技行業如何沉迷於對『無摩擦體驗』的追求，但當一切都很平滑順暢，我們還能去感受和思考什麼呢？我們還能夠體驗什麼？」
因為，用不同以往的方式去設計網站，或許會讓我們的「直覺」變得不舒服，但這點不舒服，反倒可以引起我們的思考，以及與新事物產生對視。
來源：愛范兒
