1. 項(xiàng)目概述那些“有病”但有趣的網(wǎng)站作為一名在互聯(lián)網(wǎng)內(nèi)容領(lǐng)域摸爬滾打了十多年的老博主我每天接觸的信息量巨大但真正能讓我停下來(lái)會(huì)心一笑甚至拍案叫絕的往往不是那些設(shè)計(jì)精美、功能強(qiáng)大的“正經(jīng)”網(wǎng)站。恰恰相反是一些初看覺(jué)得“這玩意兒是不是有點(diǎn)大病”但細(xì)品之下卻充滿奇思妙想、解壓治愈或深刻諷刺的“怪站”。今天我就來(lái)分享幾個(gè)我私藏已久的這類網(wǎng)站它們或許不能幫你升職加薪但絕對(duì)能給你的數(shù)字生活帶來(lái)一絲意想不到的樂(lè)趣和啟發(fā)。這些網(wǎng)站的共同特點(diǎn)是反常規(guī)、低成本、高創(chuàng)意它們用最樸素甚至粗糙的技術(shù)實(shí)現(xiàn)了最直擊人心的互動(dòng)體驗(yàn)完美詮釋了互聯(lián)網(wǎng)早期那種自由、實(shí)驗(yàn)和分享的精神。2. 網(wǎng)站一The Useless Web - 帶你通往“無(wú)用”的深淵2.1 核心功能與設(shè)計(jì)哲學(xué)The Useless Web無(wú)用之網(wǎng)的入口極其簡(jiǎn)單就是一個(gè)巨大的紅色按鈕上面寫(xiě)著“PLEASE”請(qǐng)按。它的核心功能只有一個(gè)隨機(jī)將你跳轉(zhuǎn)到一個(gè)開(kāi)發(fā)者認(rèn)為“無(wú)用”的網(wǎng)站。這個(gè)設(shè)計(jì)本身就是一個(gè)巨大的行為藝術(shù)它直接挑戰(zhàn)了我們?cè)L問(wèn)互聯(lián)網(wǎng)的功利性目的——我們總是帶著明確目標(biāo)去搜索、去消費(fèi)、去學(xué)習(xí)。而這個(gè)網(wǎng)站則邀請(qǐng)你進(jìn)行一次純粹的、無(wú)目的的“數(shù)字漫游”。它的設(shè)計(jì)哲學(xué)在于“放棄控制權(quán)”。你永遠(yuǎn)不知道下一次點(diǎn)擊會(huì)把你帶向何方可能是一個(gè)無(wú)限旋轉(zhuǎn)的披薩也可能是一個(gè)滿是跳舞香蕉的頁(yè)面。這種不確定性帶來(lái)的是一種類似開(kāi)盲盒的驚喜感和脫離日常信息軌道的放空感。從技術(shù)實(shí)現(xiàn)上看它本質(zhì)上是一個(gè)精心維護(hù)的跳轉(zhuǎn)鏈接庫(kù)每個(gè)鏈接都指向一個(gè)獨(dú)立開(kāi)發(fā)的、充滿個(gè)人趣味的迷你網(wǎng)站。維護(hù)者的審美和幽默感構(gòu)成了這個(gè)“無(wú)用宇宙”的基石。2.2 經(jīng)典跳轉(zhuǎn)站點(diǎn)解析與互動(dòng)體驗(yàn)通過(guò)它我遇到了許多令人印象深刻的站點(diǎn)。例如有一個(gè)網(wǎng)站叫“Staggering Beauty”頁(yè)面上只有一條柔軟的、色彩斑斕的“毛毛蟲(chóng)”狀物體它會(huì)完全跟隨你的鼠標(biāo)移動(dòng)而瘋狂扭動(dòng)移動(dòng)越快它的扭動(dòng)就越劇烈背景音樂(lè)也會(huì)變得越發(fā)迷幻和躁動(dòng)。這個(gè)站點(diǎn)的精妙之處在于它用最簡(jiǎn)單的物理引擎或類似算法模擬了一種極其逼真且富有彈性的跟隨效果將用戶最基礎(chǔ)的鼠標(biāo)移動(dòng)行為放大成了一種充滿視覺(jué)沖擊力的互動(dòng)表演。另一個(gè)叫“Paper Toilet”的網(wǎng)站更是將“無(wú)用”做到了極致。整個(gè)網(wǎng)站就是一張畫(huà)在屏幕上的衛(wèi)生紙你可以用鼠標(biāo)不斷地向下拉扯它衛(wèi)生紙會(huì)一圈圈被扯下來(lái)并發(fā)出“唰唰”的逼真音效。這個(gè)行為沒(méi)有任何實(shí)際產(chǎn)出但那種流暢的撕扯動(dòng)畫(huà)和聲音反饋卻帶來(lái)了一種莫名的、低成本的解壓快感。這些站點(diǎn)的共同特點(diǎn)是聚焦于單一交互并將其體驗(yàn)做到極致。它們不追求功能的復(fù)雜而是追求互動(dòng)反饋的細(xì)膩和情感共鳴的精準(zhǔn)。注意訪問(wèn)這類網(wǎng)站時(shí)請(qǐng)適當(dāng)調(diào)低音箱音量。有些站點(diǎn)為了營(yíng)造氛圍可能會(huì)突然播放較大聲或比較突兀的音樂(lè)在辦公室等公共場(chǎng)合瀏覽需謹(jǐn)慎。2.3 背后的技術(shù)實(shí)現(xiàn)與創(chuàng)意啟發(fā)從技術(shù)角度看這些“無(wú)用”網(wǎng)站大多并不復(fù)雜。它們大量運(yùn)用了早期的Web技術(shù)如HTML5 Canvas、CSS3動(dòng)畫(huà)、基礎(chǔ)的JavaScript甚至有些就是純靜態(tài)頁(yè)面。比如“Paper Toilet”其核心就是一張長(zhǎng)圖精靈Sprite和一段根據(jù)鼠標(biāo)拖動(dòng)距離計(jì)算并顯示對(duì)應(yīng)幀畫(huà)面的JS代碼。音效則是預(yù)加載的音頻文件在特定時(shí)機(jī)觸發(fā)。它們的價(jià)值不在于技術(shù)壁壘而在于創(chuàng)意視角。它們教會(huì)我們?cè)谧非蟠蠖腤eb應(yīng)用時(shí)不妨偶爾回歸本質(zhì)一個(gè)網(wǎng)頁(yè)可以只是一個(gè)玩笑、一個(gè)表情、一個(gè)瞬間的情緒出口。對(duì)于產(chǎn)品經(jīng)理和開(kāi)發(fā)者而言這類網(wǎng)站是絕佳的“腦洞體操”。它提醒我們用戶體驗(yàn)不僅僅是效率和流暢也可以是意外和樂(lè)趣。在設(shè)計(jì)產(chǎn)品時(shí)是否可以加入一個(gè)類似的、無(wú)功利性的“彩蛋”交互來(lái)增加產(chǎn)品的情感溫度和記憶點(diǎn)這種低成本高創(chuàng)意的實(shí)驗(yàn)往往是偉大產(chǎn)品靈感的來(lái)源。3. 網(wǎng)站二Pointer Pointer - 你的鼠標(biāo)永遠(yuǎn)被“指”著3.1 交互邏輯與即時(shí)反饋機(jī)制Pointer Pointer指針指針是一個(gè)概念極其簡(jiǎn)單但執(zhí)行起來(lái)令人拍案叫絕的網(wǎng)站。打開(kāi)網(wǎng)站你會(huì)看到一個(gè)空白的背景。當(dāng)你把鼠標(biāo)光標(biāo)移動(dòng)到頁(yè)面任意位置時(shí)網(wǎng)站會(huì)在瞬間真的是瞬間從海量圖庫(kù)中找出一張人物手指正指向你光標(biāo)所在位置的照片并顯示出來(lái)。這個(gè)交互邏輯清晰得可怕1. 監(jiān)聽(tīng)鼠標(biāo)移動(dòng)事件2. 獲取光標(biāo)坐標(biāo)X, Y3. 根據(jù)坐標(biāo)從預(yù)先標(biāo)注好的圖片數(shù)據(jù)庫(kù)中匹配出那張手指方向線恰好穿過(guò)該坐標(biāo)點(diǎn)的圖片4. 無(wú)刷新地替換顯示圖片。關(guān)鍵在于其即時(shí)性和精準(zhǔn)度。從移動(dòng)鼠標(biāo)到圖片切換幾乎感覺(jué)不到延遲這背后需要極其高效的圖片索引算法和前端渲染優(yōu)化。每一張圖片都必須預(yù)先進(jìn)行元數(shù)據(jù)標(biāo)注記錄圖中人物手指的指向角度和延伸線的數(shù)學(xué)表達(dá)式以便快速進(jìn)行坐標(biāo)匹配。3.2 海量圖庫(kù)的構(gòu)建與標(biāo)注工程這才是這個(gè)網(wǎng)站真正“硬核”和“有病”的地方。為了實(shí)現(xiàn)全頁(yè)面任意點(diǎn)的精準(zhǔn)指向它需要一個(gè)覆蓋360度所有方向、且在不同距離上都有樣本的龐大圖片庫(kù)。這意味著網(wǎng)站創(chuàng)建者需要收集成千上萬(wàn)張不同人、在不同場(chǎng)景下、以不同角度指向鏡頭的照片。我們可以推測(cè)其標(biāo)注工作流程首先建立一個(gè)圖片收集管道可能來(lái)自免費(fèi)圖庫(kù)、自愿提交或特定拍攝。然后對(duì)每張圖片進(jìn)行關(guān)鍵點(diǎn)標(biāo)注——至少需要兩個(gè)點(diǎn)手指根部或手腕的坐標(biāo)和指尖的坐標(biāo)。通過(guò)這兩個(gè)點(diǎn)可以確定一條指向線。更進(jìn)一步可能還需要標(biāo)注這條線的有效范圍因?yàn)槭种赣虚L(zhǎng)度指向是有作用范圍的。最后將這些向量數(shù)據(jù)和圖片ID存入數(shù)據(jù)庫(kù)并建立空間索引例如R-tree以便根據(jù)輸入的鼠標(biāo)坐標(biāo)進(jìn)行快速的空間關(guān)系查詢查找哪條指向線最接近輸入點(diǎn)。這個(gè)工程量的枯燥和龐大與最終呈現(xiàn)出的簡(jiǎn)單趣味形成了巨大反差這正是其魅力所在。3.3 從簡(jiǎn)單創(chuàng)意中學(xué)習(xí)產(chǎn)品思維Pointer Pointer給我們的啟發(fā)是深刻的。它把一個(gè)“我注意到你在指我”的瞬間感覺(jué)做成了一個(gè)完整的、可無(wú)限重復(fù)的產(chǎn)品。這體現(xiàn)了極強(qiáng)的場(chǎng)景洞察力和執(zhí)行力。從產(chǎn)品思維角度看它做到了以下幾點(diǎn)第一單點(diǎn)極致。不添加任何多余功能就是“指”把這個(gè)點(diǎn)做到又快又準(zhǔn)。第二預(yù)期管理。用戶每次移動(dòng)鼠標(biāo)前都會(huì)有“這次會(huì)是誰(shuí)會(huì)指成什么樣”的期待這種持續(xù)的微期待是吸引用戶不斷交互的核心動(dòng)力。第三情感化設(shè)計(jì)。雖然都是陌生人照片但那種“被指向”的互動(dòng)感莫名地營(yíng)造了一種虛擬的、無(wú)害的社交聯(lián)系有點(diǎn)幽默也有點(diǎn)溫暖。對(duì)于開(kāi)發(fā)者這是一個(gè)關(guān)于算法優(yōu)化和數(shù)據(jù)工程的絕佳案例。如何設(shè)計(jì)一個(gè)能毫秒級(jí)響應(yīng)坐標(biāo)查詢的圖片匹配系統(tǒng)如何管理和標(biāo)注海量數(shù)據(jù)這些問(wèn)題在大型推薦系統(tǒng)、地圖服務(wù)中同樣存在只是這個(gè)網(wǎng)站用一個(gè)有趣的形式把它表現(xiàn)了出來(lái)。4. 網(wǎng)站三Mikutap - 創(chuàng)造你的初音未來(lái)混音派對(duì)4.1 音畫(huà)同步的實(shí)時(shí)音頻引擎Mikutap 是一個(gè)現(xiàn)象級(jí)的音樂(lè)互動(dòng)網(wǎng)站。它的界面是一堆散落的、色彩鮮艷的幾何圖形和日文假名。當(dāng)你點(diǎn)擊、拖動(dòng)或敲擊鍵盤(pán)時(shí)每個(gè)交互動(dòng)作都會(huì)觸發(fā)一個(gè)獨(dú)特的音樂(lè)片段通常是電子音效或初音未來(lái)的人聲采樣同時(shí)屏幕上會(huì)有華麗的粒子動(dòng)畫(huà)爆開(kāi)。其核心技術(shù)在于一個(gè)精心設(shè)計(jì)的實(shí)時(shí)音頻引擎。網(wǎng)站預(yù)加載了上百個(gè)獨(dú)立的音頻采樣文件.wav或.mp3格式。當(dāng)用戶觸發(fā)事件時(shí)JavaScript通過(guò)Web Audio API動(dòng)態(tài)創(chuàng)建音頻上下文AudioContext加載并播放對(duì)應(yīng)的采樣。關(guān)鍵難點(diǎn)在于低延遲和并發(fā)管理。用戶可能快速連續(xù)點(diǎn)擊引擎必須能夠無(wú)延遲地響應(yīng)并妥善處理多個(gè)音頻的重疊播放避免爆音或卡頓。視覺(jué)部分它通常使用Canvas或WebGL來(lái)渲染粒子動(dòng)畫(huà)。每個(gè)交互動(dòng)作會(huì)觸發(fā)一個(gè)動(dòng)畫(huà)函數(shù)生成數(shù)十上百個(gè)帶有隨機(jī)初速度、顏色和生命周期的粒子對(duì)象然后在每一幀進(jìn)行更新和繪制形成絢爛的爆炸、漣漪或拖尾效果。音效和動(dòng)畫(huà)通過(guò)同一個(gè)事件觸發(fā)并共享部分參數(shù)如點(diǎn)擊力度可能影響音量和粒子數(shù)量從而實(shí)現(xiàn)高度的音畫(huà)同步。4.2 聲音素材的設(shè)計(jì)與情感映射Mikutap 的成功一半要?dú)w功于其出色的聲音設(shè)計(jì)。它的音效庫(kù)并非隨意堆砌而是有清晰的風(fēng)格主題初音未來(lái)、電子音樂(lè)、流行文化并且經(jīng)過(guò)了精心的分類和編排。例如點(diǎn)擊圓形按鈕可能是鼓點(diǎn)滑動(dòng)線條可能是滑音敲擊字母鍵可能是人聲切片。這種設(shè)計(jì)建立了一種直覺(jué)性的情感映射。明亮、短促的音效配合爆發(fā)式粒子帶來(lái)“爽快感”悠長(zhǎng)、空靈的音效配合流動(dòng)的粒子帶來(lái)“治愈感”。用戶不需要懂音樂(lè)理論僅憑直覺(jué)探索就能創(chuàng)作出聽(tīng)起來(lái)不刺耳、甚至頗有節(jié)奏感的“音樂(lè)”。這降低了音樂(lè)創(chuàng)作的門(mén)檻將其變成了一種觸覺(jué)和視覺(jué)的游戲。從創(chuàng)作角度看構(gòu)建這樣一個(gè)網(wǎng)站需要1.確立音畫(huà)風(fēng)格整體是賽博朋克、可愛(ài)風(fēng)還是迷幻風(fēng)這決定了素材收集的方向。2.創(chuàng)建素材庫(kù)收集或制作大量短小精悍、音質(zhì)干凈、音高調(diào)性相對(duì)和諧的音效采樣。3.建立映射規(guī)則決定哪個(gè)圖形或按鍵觸發(fā)哪個(gè)采樣這個(gè)規(guī)則可以是有邏輯的如按字母順序排列音高也可以是隨機(jī)的但最好有一定規(guī)律可循讓用戶能慢慢發(fā)現(xiàn)“秘籍”。4.調(diào)試與平衡確保任何隨機(jī)點(diǎn)擊產(chǎn)生的音效組合都不會(huì)太難聽(tīng)這需要對(duì)和聲、節(jié)奏有基本的把控或者通過(guò)技術(shù)手段如自動(dòng)限幅、壓縮來(lái)保證音頻輸出的穩(wěn)定性。4.3 作為創(chuàng)意工具與壓力釋放閥Mikutap 不僅僅是一個(gè)玩具它也是一個(gè)低門(mén)檻的創(chuàng)意表達(dá)工具和高效的壓力釋放閥。對(duì)于普通用戶它提供了無(wú)需學(xué)習(xí)的即時(shí)創(chuàng)作快感。對(duì)于音樂(lè)或交互設(shè)計(jì)學(xué)習(xí)者它是一個(gè)絕佳的案例展示了如何將復(fù)雜的音頻編程和交互設(shè)計(jì)包裝成一個(gè)人人都能上手的趣味應(yīng)用。在實(shí)際使用中我發(fā)現(xiàn)幾個(gè)技巧第一嘗試有節(jié)奏地點(diǎn)擊。即使不懂樂(lè)理嘗試以固定的間隔點(diǎn)擊同一個(gè)或一組圖形很容易就能敲出一段簡(jiǎn)單的節(jié)奏l(xiāng)oop。第二結(jié)合鍵盤(pán)和鼠標(biāo)。鍵盤(pán)按鍵通常觸發(fā)人聲或主旋律音效鼠標(biāo)點(diǎn)擊觸發(fā)鼓點(diǎn)或效果音兩者結(jié)合能創(chuàng)作出層次更豐富的片段。第三錄屏分享。很多用戶會(huì)將自己無(wú)意中創(chuàng)作出的好聽(tīng)片段錄制成視頻分享這形成了二次傳播。實(shí)操心得如果你也想做一個(gè)類似的聲音互動(dòng)網(wǎng)站不必一開(kāi)始就追求Mikutap的復(fù)雜度。可以從最簡(jiǎn)單的開(kāi)始準(zhǔn)備5-10個(gè)音效用button標(biāo)簽和click事件綁定先實(shí)現(xiàn)點(diǎn)擊播放。然后再逐步升級(jí)到Canvas動(dòng)畫(huà)和更復(fù)雜的交互邏輯。核心是先跑通“交互-反饋”的最小閉環(huán)。5. 網(wǎng)站四This Is The Only Level - 顛覆認(rèn)知的“一關(guān)”游戲5.1 游戲機(jī)制的解構(gòu)與重構(gòu)“This Is The Only Level”只有這一關(guān)是一個(gè)Flash時(shí)代流傳下來(lái)的經(jīng)典網(wǎng)頁(yè)游戲它完美詮釋了“標(biāo)題黨”和“機(jī)制欺詐”。游戲標(biāo)題和第一眼的界面都告訴你你只需要通過(guò)一個(gè)簡(jiǎn)單的關(guān)卡操作一頭小象拿到鑰匙走到門(mén)口。當(dāng)你輕松完成以為游戲結(jié)束時(shí)卻發(fā)現(xiàn)下一關(guān)的畫(huà)面和前一關(guān)一模一樣。但這一次操作失靈了或者規(guī)則改變了。它的核心創(chuàng)意在于對(duì)玩家預(yù)期的系統(tǒng)性顛覆。游戲看似只有“一個(gè)關(guān)卡”的圖形素材但實(shí)際上有數(shù)十個(gè)關(guān)卡。每一關(guān)游戲都會(huì)暗中改變一條核心規(guī)則。比如第二關(guān)方向鍵控制全部顛倒第三關(guān)小象會(huì)自動(dòng)朝一個(gè)方向滑動(dòng)第四關(guān)你需要用鼠標(biāo)點(diǎn)擊來(lái)控制小象跳躍……開(kāi)發(fā)者將幾十種不同的游戲機(jī)制解謎、動(dòng)作、反應(yīng)力等全部塞進(jìn)了同一個(gè)視覺(jué)框架下。玩家需要做的不是熟悉新場(chǎng)景而是發(fā)現(xiàn)當(dāng)前關(guān)卡被篡改的規(guī)則是什么。5.2 關(guān)卡設(shè)計(jì)的心理學(xué)應(yīng)用這種設(shè)計(jì)充滿了心理學(xué)巧思。它利用了玩家的思維定式和肌肉記憶。當(dāng)你用同樣的方式通過(guò)第一關(guān)后大腦會(huì)形成“這個(gè)游戲就是這么玩”的強(qiáng)烈預(yù)期。第二關(guān)突然打破這個(gè)預(yù)期會(huì)造成強(qiáng)烈的認(rèn)知失調(diào)和挫敗感但隨之而來(lái)的是“原來(lái)如此”的頓悟快感。隨著關(guān)卡推進(jìn)玩家會(huì)從“嘗試操作”轉(zhuǎn)變?yōu)椤爸鲃?dòng)探索規(guī)則”這種心流狀態(tài)的轉(zhuǎn)變是非常高級(jí)的游戲設(shè)計(jì)。從技術(shù)實(shí)現(xiàn)上它像是一個(gè)“游戲機(jī)制測(cè)試場(chǎng)”。開(kāi)發(fā)者預(yù)先編寫(xiě)好幾十套不同的物理規(guī)則、控制邏輯和過(guò)關(guān)條件代碼模塊然后按順序加載到同一個(gè)場(chǎng)景里。這要求代碼有極高的模塊化和可插拔性。場(chǎng)景渲染和碰撞檢測(cè)等底層邏輯是通用的但控制玩家角色的update()函數(shù)、處理輸入的handleInput()函數(shù)等則在每一關(guān)被替換成不同的版本。5.3 對(duì)現(xiàn)代產(chǎn)品設(shè)計(jì)的隱喻與啟示這個(gè)游戲遠(yuǎn)遠(yuǎn)超出了娛樂(lè)范疇它是一個(gè)關(guān)于適應(yīng)性思維和批判性思維的絕佳隱喻。在現(xiàn)實(shí)生活中我們常常會(huì)遇到“場(chǎng)景沒(méi)變但規(guī)則變了”的情況。比如一個(gè)你用了很久的軟件突然更新了交互邏輯一個(gè)熟悉的市場(chǎng)環(huán)境因?yàn)樾抡叨淖?。固守舊有經(jīng)驗(yàn)的人會(huì)處處碰壁而能快速識(shí)別新規(guī)則、調(diào)整策略的人才能成功。對(duì)于產(chǎn)品設(shè)計(jì)師和開(kāi)發(fā)者這個(gè)游戲的啟示在于第一用戶教育可以很有趣。與其提供枯燥的說(shuō)明書(shū)不如設(shè)計(jì)一個(gè)漸進(jìn)式的、讓用戶在探索中學(xué)習(xí)產(chǎn)品特性的引導(dǎo)流程。第二保持產(chǎn)品的變化和新鮮感。在核心功能不變的前提下通過(guò)定期引入小的、有趣的規(guī)則變化或彩蛋可以極大地提升用戶粘性和社區(qū)話題度。第三測(cè)試你的設(shè)計(jì)的魯棒性。就像游戲測(cè)試玩家對(duì)不同規(guī)則的適應(yīng)力一樣我們也應(yīng)該測(cè)試用戶對(duì)產(chǎn)品不同使用路徑、不同理解方式的適應(yīng)力。6. 發(fā)現(xiàn)與分享這類網(wǎng)站的實(shí)用技巧6.1 高效的探索渠道與信息源如何持續(xù)發(fā)現(xiàn)這些隱藏的互聯(lián)網(wǎng)寶石靠隨機(jī)撞見(jiàn)效率太低。我總結(jié)了幾條實(shí)用的渠道特定社區(qū)與聚合站除了眾所周知的Reddit如r/InternetIsBeautiful板塊一些專注于創(chuàng)意編碼和數(shù)字藝術(shù)的社區(qū)是寶庫(kù)比如CreativeApplications.Net、Chrome Experiments谷歌官方的創(chuàng)意實(shí)驗(yàn)項(xiàng)目集。國(guó)內(nèi)像“有趣網(wǎng)址之家”這類老牌導(dǎo)航站也時(shí)有驚喜。社交媒體上的創(chuàng)意開(kāi)發(fā)者在Twitter、微博上關(guān)注一些獨(dú)立的創(chuàng)意開(kāi)發(fā)者或工作室。他們經(jīng)常分享自己的實(shí)驗(yàn)性作品或推薦同好的作品。這些作品往往先以個(gè)人網(wǎng)站的形式發(fā)布。設(shè)計(jì)和技術(shù)博客的專題文章像Smashing Magazine、Codrops等網(wǎng)站偶爾會(huì)發(fā)布“10個(gè)有趣的Web實(shí)驗(yàn)”這類合集文章質(zhì)量通常很高?！疤淄奘健碧剿骱芏嘤腥ぞW(wǎng)站都會(huì)在不起眼的地方如頁(yè)腳、“關(guān)于”頁(yè)面鏈接到其他它們欣賞的網(wǎng)站。順著這些鏈接探索就像在走一個(gè)由創(chuàng)作者們構(gòu)建的私密網(wǎng)絡(luò)花園常常能發(fā)現(xiàn)風(fēng)格相近的精品。6.2 評(píng)估網(wǎng)站“有趣”價(jià)值的維度不是所有標(biāo)新立異的網(wǎng)站都值得收藏。我通常會(huì)從以下幾個(gè)維度來(lái)評(píng)估創(chuàng)意獨(dú)特性這個(gè)點(diǎn)子是否足夠新穎、反直覺(jué)還是只是對(duì)已有創(chuàng)意的簡(jiǎn)單模仿完成度與精致感即使想法簡(jiǎn)單執(zhí)行是否到位交互是否流暢細(xì)節(jié)是否經(jīng)得起推敲粗糙和簡(jiǎn)陋是有區(qū)別的前者是風(fēng)格或資源限制后者是態(tài)度問(wèn)題?；?dòng)深度它是“一眼看完”的視覺(jué)把戲還是能讓人互動(dòng)幾分鐘甚至更久并不斷發(fā)現(xiàn)新東西像“The Useless Web”就有無(wú)限的探索深度。情感共鳴它是否能喚起某種情緒——?dú)g樂(lè)、寧?kù)o、懷舊、思考有情感價(jià)值的網(wǎng)站生命力更強(qiáng)。技術(shù)啟發(fā)性作為一個(gè)從業(yè)者它背后是否有值得學(xué)習(xí)的技術(shù)實(shí)現(xiàn)思路或產(chǎn)品哲學(xué)6.3 安全與隱私注意事項(xiàng)在探索這些未知網(wǎng)站時(shí)安全是首要考慮使用安全的瀏覽器環(huán)境建議在Chrome或Edge的“訪客模式”或新建一個(gè)無(wú)痕窗口進(jìn)行探索。這可以避免網(wǎng)站可能設(shè)置的惡意Cookie或緩存對(duì)你常用瀏覽環(huán)境的影響。注意網(wǎng)址與證書(shū)對(duì)于需要點(diǎn)擊或交互的網(wǎng)站優(yōu)先選擇以https://開(kāi)頭的。避免在那些看起來(lái)就非?？梢傻木W(wǎng)站上輸入任何個(gè)人信息哪怕只是一個(gè)郵箱。警惕過(guò)度占用資源的網(wǎng)站一些使用大量Canvas或WebGL的網(wǎng)站可能會(huì)短時(shí)間內(nèi)占用較高的CPU和內(nèi)存。如果風(fēng)扇狂轉(zhuǎn)或?yàn)g覽器變卡及時(shí)關(guān)閉標(biāo)簽頁(yè)。廣告與彈窗很多個(gè)人趣味網(wǎng)站沒(méi)有廣告但也有一些會(huì)通過(guò)廣告來(lái)維持運(yùn)營(yíng)。對(duì)于頻繁彈窗或全屏廣告的網(wǎng)站需要保持警惕最好使用廣告攔截插件。內(nèi)容鑒別由于文化差異某些網(wǎng)站的幽默可能帶有惡搞或輕微冒犯性。根據(jù)自己的接受程度進(jìn)行判斷不傳播明顯具有攻擊性或不良導(dǎo)向的內(nèi)容。7. 從“有病”到“有趣”創(chuàng)意落地的思考回顧這些網(wǎng)站它們從“有病”到“有趣”的轉(zhuǎn)變核心在于創(chuàng)作者跳出了“網(wǎng)站必須有用”的思維定式轉(zhuǎn)而追求“網(wǎng)站可以有趣、可以表達(dá)、可以實(shí)驗(yàn)”。對(duì)于我們這些從事互聯(lián)網(wǎng)產(chǎn)品相關(guān)工作的來(lái)說(shuō)這種思維極其寶貴。在日常繁重的需求開(kāi)發(fā)中我們很容易被“功能”、“性能”、“數(shù)據(jù)”這些指標(biāo)框住。而這些網(wǎng)站提醒我們用戶體驗(yàn)中還有“驚喜”、“情感”和“玩心”這些無(wú)法量化但至關(guān)重要的維度。試著在下一個(gè)產(chǎn)品的某個(gè)角落加入一個(gè)像“Pointer Pointer”那樣精巧的小互動(dòng)或者在加載頁(yè)做一個(gè)像“Mikutap”片段那樣的小游戲成本可能很低但為用戶帶來(lái)的好感度提升可能是巨大的。這些網(wǎng)站大多由個(gè)人或極小團(tuán)隊(duì)開(kāi)發(fā)技術(shù)?？赡懿⒉磺把氐鼈冏C明了創(chuàng)意的價(jià)值遠(yuǎn)大于技術(shù)的堆砌。一個(gè)絕妙的點(diǎn)子配上扎實(shí)的基礎(chǔ)技術(shù)和用心的細(xì)節(jié)打磨就能產(chǎn)生巨大的傳播力。這或許就是互聯(lián)網(wǎng)最初吸引我們的樣子一個(gè)充滿可能性、鼓勵(lì)創(chuàng)造、平等分享的無(wú)限空間。在算法和流量主導(dǎo)的今天偶爾回頭看看這些“無(wú)用之美”或許能讓我們重新找回做東西的初心與快樂(lè)。