通過網(wǎng)站布局創(chuàng)造難忘的用戶體驗(yàn)

成都網(wǎng)站建設(shè)的主要目標(biāo)之一是設(shè)計(jì)出用戶會(huì)記住的東西。盡管這個(gè)目標(biāo)聽起來很簡(jiǎn)單，但卻很難實(shí)現(xiàn)。每個(gè)利基市場(chǎng)都有成百上千個(gè)網(wǎng)站，所有這些網(wǎng)站都在爭(zhēng)取觀眾的興趣和關(guān)注。 內(nèi)容和設(shè)計(jì)是定義站點(diǎn)是否保留在用戶內(nèi)存中的兩個(gè)主要因素。在設(shè)計(jì)方面，網(wǎng)站的布局是使網(wǎng)站成功或失敗的最關(guān)鍵因素之一。精心設(shè)計(jì)的布局是功能強(qiáng)大的工具，可讓用戶保持參與并返回更多內(nèi)容。在本文中，我們將介紹當(dāng)今在無數(shù)站點(diǎn)上可以找到的七個(gè)流行布局，并展示如何使用它們來創(chuàng)造令人難忘的體驗(yàn)。

網(wǎng)站布局定義

網(wǎng)站布局是一種定義網(wǎng)站結(jié)構(gòu)的模式。它具有為網(wǎng)站訪問者構(gòu)造網(wǎng)站上存在的信息的作用。良好的可用性是網(wǎng)站布局的首要條件。網(wǎng)站布局還應(yīng)具有出色的視覺層次結(jié)構(gòu)-它們應(yīng)使重要信息易于訪問和直觀查找。精心設(shè)計(jì)的布局可以創(chuàng)建流程并引導(dǎo)訪問者發(fā)現(xiàn)關(guān)鍵信息。

但是良好的可用性不足以創(chuàng)造真正令人難忘的體驗(yàn)。為此，您需要準(zhǔn)備進(jìn)行實(shí)驗(yàn)并嘗試各種設(shè)計(jì)方法。

不要重新發(fā)明輪子

在為網(wǎng)站創(chuàng)建布局時(shí)，許多設(shè)計(jì)師認(rèn)為他們應(yīng)該為所從事的每個(gè)項(xiàng)目構(gòu)建一個(gè)真正獨(dú)特的網(wǎng)站布局。但是，這遠(yuǎn)非事實(shí)。如果您訪問流行的網(wǎng)站，您會(huì)發(fā)現(xiàn)其中許多使用相似的布局。這不是巧合。這些布局具有顯著的優(yōu)勢(shì)-訪客很熟悉它們。

通過建立對(duì)用戶的熟悉感來創(chuàng)造良好的用戶體驗(yàn)。人們?cè)L問看起來很熟悉的網(wǎng)站時(shí)，無需考慮如何瀏覽該網(wǎng)站；相反，他們專注于消費(fèi)內(nèi)容。因此，盡管每個(gè)項(xiàng)目都是唯一的并且需要單獨(dú)的方法，但是使用熟悉的布局總是有幫助的。

7種常見布局

以下是設(shè)計(jì)網(wǎng)站時(shí)會(huì)發(fā)現(xiàn)的七個(gè)最常見的布局，以及有關(guān)如何使用它們來創(chuàng)建令人難忘的用戶體驗(yàn)的示例。

1.單列布局

單列布局將主要內(nèi)容顯示在一個(gè)垂直列中。這種類型的網(wǎng)站布局可能是我們列表中最簡(jiǎn)單的一種，也是用戶最容易瀏覽的-所有訪客需要做的就是滾動(dòng)以獲取更多信息。移動(dòng)設(shè)備的興起極大地影響了這種布局的流行，因?yàn)樗鼈兎浅＿m合移動(dòng)屏幕。

什么時(shí)候使用

這種布局非常適合基于簡(jiǎn)約設(shè)計(jì)原則的個(gè)人作品集。它非常適合攝影師，作家，博客和其他創(chuàng)意人員。

攝影師Pontus Rudolfson使用單列布局來展示他的作品。

單列布局也非常適合講故事。檢查下面的船示例。在此網(wǎng)頁上，各個(gè)部分逐一講述完整的故事。

小船是講故事的好典范。

2. Z形和鋸齒形布局

Z形布局基于“ Z”掃描圖案。它的設(shè)計(jì)模仿了人眼在閱讀內(nèi)容時(shí)所經(jīng)過的路線：

人們從左上方到右上方掃描頁面，形成一條水平線

接下來，他們的眼睛向下移動(dòng)到頁面左側(cè)，創(chuàng)建一條對(duì)角線

最后，他們?cè)俅蜗蛴铱戳艘谎?，形成了第二條水平線

鋸齒形圖案是在同一頁面上重復(fù)幾次的Z形圖案。精心設(shè)計(jì)的鋸齒形布局可以營(yíng)造出使游客保持興趣的節(jié)奏。

什么時(shí)候使用

Z形網(wǎng)站布局更適合具有單一目標(biāo)的網(wǎng)站或單個(gè)頁面，例如單頁面促銷網(wǎng)站或特定服務(wù)的登錄頁面。這樣的網(wǎng)站/登陸頁面在視覺上看起來像在線海報(bào)。訪客的注意力指向特定的地方，例如文本部分或號(hào)召性用語按鈕。

X-Vax充分利用空白來突出顯示標(biāo)題和號(hào)召性用語。

當(dāng)您想向訪問者介紹一些重要主題，但又不想讓太多信息淹沒他們時(shí)，之字形布局非常適合。

旅游博客和視覺講故事者Pat Kay使用鋸齒形布局來展示他的作品。

3.全屏照片或視頻

此布局的核心元素是一個(gè)很大的視覺效果，用作整個(gè)頁面的背景。在設(shè)計(jì)中使用圖像或視頻是銷售產(chǎn)品，想法或解決方案的快方法，因?yàn)閳D像會(huì)與訪客建立情感聯(lián)系。產(chǎn)品的大膽，大膽的照片或視頻表達(dá)出強(qiáng)烈的印象，并給人留下深刻的一印象。

什么時(shí)候使用

該網(wǎng)站布局非常適合希望遵循“少說多展示”方法的人。當(dāng)您只需要演示一個(gè)想法/產(chǎn)品/服務(wù)并將用戶的全部注意力集中在該想法/產(chǎn)品/服務(wù)上時(shí)，它就可以發(fā)揮好效果。這種類型的布局有助于建立真正的身臨其境的情感體驗(yàn)。

電影編輯馬文·庫納（Marvin Kuehner）使用全屏背景視頻以可視方式傳達(dá)消息。

4.故意不對(duì)稱

不對(duì)稱是布局兩側(cè)之間缺乏平等性。這是傳統(tǒng)藝術(shù)中很受青睞的技術(shù)，但在網(wǎng)頁設(shè)計(jì)師中也很流行。

不對(duì)稱性非常適合于產(chǎn)生張力和動(dòng)感，因?yàn)樗鼤?huì)將用戶的注意力集中在各個(gè)元素（焦點(diǎn)）上。

什么時(shí)候使用

當(dāng)設(shè)計(jì)師想要?jiǎng)?chuàng)建令人興奮且出乎意料的布局，同時(shí)仍然提供方向性重點(diǎn)時(shí)，可以使用這種類型的布局。通常，此布局更適合于不太嚴(yán)格和更具藝術(shù)性的網(wǎng)站。

Chamba是一個(gè)網(wǎng)站，致力于展示哥倫比亞La Chamba村獨(dú)特而精美的手工陶瓷。通過使用非對(duì)稱布局，該站點(diǎn)將整個(gè)用戶的注意力集中在陶瓷上。

顏色是不對(duì)稱的秘密成分。通過使用對(duì)比色可以很容易地將焦點(diǎn)添加到特定元素。當(dāng)訪問者掃描頁面時(shí)，他們的注意力自然會(huì)吸引到視覺重量更大的對(duì)象上。

在加拿大國(guó)家鐵路公司創(chuàng)建使用顏色鮮艷一個(gè)很好的平衡組成。

5.固定的側(cè)邊欄

導(dǎo)航是任何網(wǎng)站的關(guān)鍵部分-菜單是大多數(shù)用戶想要導(dǎo)航網(wǎng)站時(shí)首先要尋找的東西。固定的側(cè)邊欄布局嘗試通過在屏幕的左側(cè)或右側(cè)提供固定的導(dǎo)航欄來解決導(dǎo)航問題。無論訪問者在網(wǎng)頁上的什么位置，該欄始終可見。

什么時(shí)候使用

該網(wǎng)站布局非常適合導(dǎo)航選項(xiàng)數(shù)量相對(duì)有限的網(wǎng)站。

該1X網(wǎng)站是專門的藝術(shù)作品。無論訪問者在頁面下有多深，總能看到主導(dǎo)航菜單和購物車。

6.紙牌網(wǎng)格

卡是信息的重要容器。它們使設(shè)計(jì)人員能夠以易于消化的方式呈現(xiàn)大量信息?？ㄆ洚?dāng)一口大小的預(yù)覽，可幫助訪問者找到自己喜歡的內(nèi)容，然后深入細(xì)節(jié)。

關(guān)于紙牌網(wǎng)格的偉大之處在于這種布局非常易于操作。網(wǎng)格的大小，間距和列數(shù)可以變化，并且卡片的樣式可以根據(jù)屏幕大小而變化，因?yàn)榭梢灾匦屡帕兴鼈円赃m合任何屏幕。這就是為什么卡片網(wǎng)格在響應(yīng)式設(shè)計(jì)中表現(xiàn)如此出色的原因。

什么時(shí)候使用

卡片式網(wǎng)站布局網(wǎng)格非常適合需要顯示具有相同層次結(jié)構(gòu)的大量項(xiàng)目的網(wǎng)站。

氣候樂觀主義者是一個(gè)試圖解決氣候變化的項(xiàng)目。鮮艷的色彩和基于卡片的布局帶來視覺吸引力，并讓您滾動(dòng)以獲取更多信息。

蒙特利爾的一家制作公司Alt使用懸停動(dòng)畫將更多的動(dòng)態(tài)感引入到交互中。

7.分屏

分屏（或一個(gè)分為兩屏）的布局使設(shè)計(jì)師可以同時(shí)顯示兩段內(nèi)容，同時(shí)賦予它們相同的視覺重量。

什么時(shí)候使用

當(dāng)您需要呈現(xiàn)兩個(gè)具有相同重要性并應(yīng)以相同方式展示的不同內(nèi)容時(shí)，分屏式網(wǎng)站布局非常有用。

Zeemansneaker使用分屏呈現(xiàn)兩種不同的產(chǎn)品。

但是，這種布局也有助于做出大膽的創(chuàng)意陳述。

自治使用分屏來使事情變得更有趣。

讓訪客回頭

當(dāng)做成都網(wǎng)站建設(shè)，你的最終目標(biāo)是要選擇一個(gè)網(wǎng)站的布局，這將是簡(jiǎn)單的導(dǎo)航和快樂花時(shí)間。如果您實(shí)現(xiàn)了這一目標(biāo)，則將為您帶來出色的初次體驗(yàn)，并增加人們將來再次訪問您網(wǎng)站的機(jī)會(huì)。

當(dāng)前標(biāo)題：通過網(wǎng)站布局創(chuàng)造難忘的用戶體驗(yàn)
瀏覽路徑：http://www.bm7419.com/news28/160228.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有用戶體驗(yàn)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)