最近一段時間我們看到了一些非常棒的網(wǎng)頁設(shè)計案例——平滑而優(yōu)雅，華麗而大膽，有機(jī)而微妙。其中一些使用相同或相似的動畫效果，一些是創(chuàng)新和獨(dú)特的。從視覺上和技術(shù)上都沒有停止，沒有故障，沒有停止。只是一個不間斷的導(dǎo)航流程。這就是良好的頁面設(shè)計的要點(diǎn)。


Kikk 數(shù)字創(chuàng)意節(jié)以為每年的版本制作視覺創(chuàng)新和鼓舞人心的節(jié)目展示而聞名。我們在受海報美學(xué)啟發(fā)的網(wǎng)站上的文章中討論了 2021 年版，而 2019 年版則出現(xiàn)在我們的最佳粉色網(wǎng)站列表中。這一次，我們要看看Kikk Festival 2018的節(jié)目。該網(wǎng)站以年輕、樂觀的藍(lán)色為基礎(chǔ)，以活潑的手繪插圖和粉紅色的圓形光標(biāo)為基礎(chǔ)，打造出一個俏皮、完美平衡的角色。但是關(guān)于布局就足夠了——我們在這里檢查頁面轉(zhuǎn)換。這些遵循整個構(gòu)圖的歡樂、樂觀的脈絡(luò)由藍(lán)色的飛濺組成，來自每個環(huán)節(jié)的不同方向。2018 年的節(jié)日主題是“物種”，在代表微生物和原始脊椎動物的插圖中，以及在濺起的水花和場地的整體流動特征中都暗示了這一點(diǎn)，讓人想起我們都從中進(jìn)化而來的原始湯。

Save Whales是由屢獲殊榮的 Red Collar 機(jī)構(gòu)創(chuàng)建的一個項目，旨在提高人們對五種瀕臨滅絕的鯨魚物種的認(rèn)識，以及我們?nèi)绾螏椭鼈兊囊恍┘记?。該項目非常逼真，有可以四處移動的鯨魚的 3D 模型，以及動畫和聲音效果。物種列表以水平滾動列表的形式給出，但根本不像列表——動物以全屏圖像呈現(xiàn)在自然環(huán)境中，最大限度地提高了身臨其境的效果。單擊時，每個項目都會打開一個新頁面，其中帶有表示波浪或水花的插圖過渡。過渡是手工制作的，涉及 66 個渲染幀。該機(jī)構(gòu)通過將動畫傳輸?shù)?HTML5 Canvas 并應(yīng)用背景媒體加載來確保網(wǎng)站上的動畫數(shù)量不會使瀏覽器過載。

我們已經(jīng)在我們關(guān)于令人驚嘆的深綠色網(wǎng)站的文章中介紹了 OuiWill 的精彩項目 Disrupt，但是這家位于舊金山的數(shù)字品牌代理商值得再次提及，這一次是因?yàn)轫撁孓D(zhuǎn)換設(shè)計精美。與 Spatzek、C8 和 Design Canada 類似，Oui Will 選擇了基于線性截面的過渡. 然而，不僅僅是簡單的百葉窗效果，這里的過渡還涉及更寬、不對稱的區(qū)域，可以打開和關(guān)閉，從對角線位置移動到垂直位置。這些過渡中有一些電影感，可能讓人想起一些較早的詹姆斯邦德電影。過渡在調(diào)色板方面與布局的其余部分保持一致，以相同的深綠色為基礎(chǔ)，結(jié)合黑色，保證流暢流暢的視覺體驗(yàn)。

Spatzek Studio是一家網(wǎng)頁設(shè)計和開發(fā)公司，提供網(wǎng)頁解決方案，尤其是價格實(shí)惠的有限現(xiàn)成網(wǎng)站。工作室網(wǎng)站將大膽與簡約結(jié)合在一起，通過大版式和非常大的排版和簡單的調(diào)色板減少到黑色、白色和可愛的鐵銹色。正是這最后一種顏色是工作室網(wǎng)站頁面轉(zhuǎn)換的主角。單擊時，指向內(nèi)頁的鏈接會提示以銹橙色和黑色相結(jié)合的全屏百葉窗效果。效果短而醒目，顏色選擇散發(fā)出略帶復(fù)古的氣息，讓人想起 60 和 70 年代的設(shè)計趨勢。

在創(chuàng)意和品牌機(jī)構(gòu) C8的網(wǎng)站上可以看到非常相似的東西，調(diào)色板也減少為三種顏色——黑色、白色和紅色，以及相同的百葉窗過渡，但這次是垂直而不是像案例中的水平Spatzek 工作室。Design Canada的人在他們的網(wǎng)站上也有類似的東西，在頁面轉(zhuǎn)換過程中，更粗的水平線逐漸填滿了屏幕。