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

01.

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

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

02.

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

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

03.

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

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

04.

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

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

05.

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

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

06.

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

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

07.

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

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

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

09.

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