以用戶(hù)為中心的網(wǎng)站設(shè)計(jì)策略，旨在為用戶(hù)提供愉快、高效、易用的網(wǎng)站體驗(yàn)?？梢酝ㄟ^(guò)調(diào)查、訪(fǎng)談、用戶(hù)測(cè)試等方法，收集數(shù)據(jù)以指導(dǎo)設(shè)計(jì)決策。使用合適的標(biāo)簽、分類(lèi)和搜索功能，幫助用戶(hù)快速找到所需信息。注意排版、色彩、圖標(biāo)和按鈕的使用，確保用戶(hù)能夠輕松地與網(wǎng)站互動(dòng)等等。今天我們一起來(lái)賞析9個(gè)以用戶(hù)為中心的網(wǎng)站設(shè)計(jì)精品案例。

01.

奧斯卡·戴克曼(Oscar的作品散發(fā)著賽博朋克的氣息，帶有故障效果、強(qiáng)烈的色彩對(duì)比和前衛(wèi)的外觀(guān)。

奧斯卡的名字出現(xiàn)在涂鴉字體氣球字母中，這些字母會(huì)隨著您的光標(biāo)而移動(dòng)。向下滾動(dòng)頁(yè)面時(shí)會(huì)顯示各種項(xiàng)目的預(yù)覽，懸停時(shí)會(huì)顯示項(xiàng)目名稱(chēng)。每個(gè)項(xiàng)目頁(yè)面都包含工作摘要以及奧斯卡職責(zé)的快速列表，例如照片構(gòu)圖、產(chǎn)品 3D 渲染、照片修飾、平面設(shè)計(jì)、創(chuàng)意方向、包裝等。這種組織方式使?jié)撛诳蛻?hù)可以輕松快速查看奧斯卡的技巧、風(fēng)格和成果。

02.

佩德羅·馬塔斯·查韋斯 (Pedro Matas Chaves)以一個(gè)簡(jiǎn)單的標(biāo)題“專(zhuān)注于品牌和數(shù)字媒體的多學(xué)科設(shè)計(jì)師”以及他多年的經(jīng)驗(yàn)和工作可用性等關(guān)鍵信息來(lái)打開(kāi)他的作品集。

佩德羅立即清楚地概述了他是誰(shuí)以及他做什么，然后鼓勵(lì)您向下滾動(dòng)查看他的工作。為了保持新鮮感，他在照片輪播中添加了一些特色項(xiàng)目。在照片下方，您會(huì)看到過(guò)去項(xiàng)目的存檔，帶有視覺(jué)識(shí)別和 UX/UI 等標(biāo)簽。

03.

Esmeralda Studios的 Enkhmaa在她的主頁(yè)上添加了由紫色植物組成的徽標(biāo)和揮舞著和平標(biāo)志的動(dòng)畫(huà)手，增添了她的個(gè)性。

紫色的手在文字旁邊做出和平標(biāo)志“你好！我是 Enkhmaa 交互設(shè)計(jì)師，其靈感來(lái)自于強(qiáng)調(diào)人類(lèi)體驗(yàn)的功能設(shè)計(jì)。

04.

設(shè)計(jì)工作室 Roem 創(chuàng)建了一個(gè)可克隆的合成器鍵盤(pán)，帶有 DuoSynth 聲音，可以用鼠標(biāo)或（計(jì)算機(jī)）鍵盤(pán)演奏。

最小的鍵盤(pán)本身玩起來(lái)很有趣，但 Roem 還解釋了如何將鍵盤(pán)合并到您自己的項(xiàng)目中。

05.

Eloy Be 的截?cái)喙鈽?biāo)效果項(xiàng)目顯示了一個(gè)窗口圓圈，該窗口圓圈使用本機(jī) Webflow 交互進(jìn)行動(dòng)畫(huà)處理，以跟隨鼠標(biāo)穿過(guò)視口。

使用 CSS3 混合模式，Eloy 使背景透過(guò)窗戶(hù)可見(jiàn) - 就好像您正在通過(guò)移動(dòng)的門(mén)戶(hù)觀(guān)看一樣 - 并顯示了一段令人著迷的綠色大理石液體視頻。您還可以切換到“暖色”以更改為紅色配色方案。

06.

旋轉(zhuǎn)一下3D 螺旋組合，看看圖像輪播以螺旋式上升的方式移動(dòng)。

這種簡(jiǎn)單但令人印象深刻的互動(dòng)非常適合攝影師或任何其他視覺(jué)藝術(shù)家的作品集網(wǎng)站。這也將是展示各種產(chǎn)品照片的獨(dú)特方式。

07.

瀏覽豪華餐廳Fern的網(wǎng)站感覺(jué)有點(diǎn)像一次虛擬之旅，首先概述餐廳的氛圍，然后是餐廳內(nèi)部的大幅照片。

當(dāng)您向下移動(dòng)頁(yè)面時(shí)，您會(huì)看到早餐、全天和下班后的飲料菜單。按照時(shí)間順序安排場(chǎng)景，帶您度過(guò) Fern 餐廳從營(yíng)業(yè)到打烊的一天。

08.
Ashish Kumar 的整頁(yè)交互式滾動(dòng)動(dòng)畫(huà)是對(duì)更大的講故事網(wǎng)站項(xiàng)目的一瞥。

09.

Sean Armstrong 創(chuàng)建了Finsweet-island-d3來(lái)練習(xí)講故事的技巧 - 結(jié)果是一個(gè)有趣的、有插圖的網(wǎng)站，感覺(jué)就像一本故事書(shū)。