通過網(wǎng)站布局創(chuàng)造難忘的用戶體驗
建立網(wǎng)站的主要目標之一是設(shè)計出用戶會記住的東西。盡管目標聽起來很簡單，但很難實現(xiàn)。每個利基市場都有成百上千個網(wǎng)站，所有這些網(wǎng)站都在爭取觀眾的興趣和關(guān)注。
內(nèi)容和設(shè)計是定義站點是否保留在用戶內(nèi)存中的兩個主要因素。當涉及到設(shè)計時，網(wǎng)站的布局是使網(wǎng)站成功或失敗的最關(guān)鍵因素之一。精心設(shè)計的布局是強大的工具，可讓用戶保持參與并返回更多內(nèi)容。
在本文中，我們將介紹當今在無數(shù)站點上可以找到的七個流行布局，并展示如何使用它們來創(chuàng)造令人難忘的體驗。
模板圖標
增長第3卷：建立有利可圖的Web設(shè)計業(yè)務(wù)
將您的《成長第3卷：建立有利可圖的Web設(shè)計業(yè)務(wù)》的免費副本發(fā)送到您的收件箱。
電子郵件
輸入您的電子郵件地址
輸入您的電子郵件-我們還將向您發(fā)送與Shopify相關(guān)的營銷電子郵件。您可以隨時取消訂閱。注意：該指南不會發(fā)送到基于角色的電子郵件，例如info @，developer @等。
我們的虛擬齒輪正在轉(zhuǎn)動。
請注意，
我們的電子郵件最多可能需要15分鐘
才能到達您的收件箱。
網(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è)計的布局可創(chuàng)建流程并引導訪問者發(fā)現(xiàn)關(guān)鍵信息。
但是，良好的可用性不足以創(chuàng)造真正令人難忘的體驗。為此，您需要準備進行實驗并嘗試各種設(shè)計方法。
不要重新發(fā)明輪子
在為網(wǎng)站創(chuàng)建布局時，許多設(shè)計師認為他們應(yīng)該為所從事的每個項目構(gòu)建一個真正獨特的網(wǎng)站布局。但是，這遠非事實。如果您訪問受歡迎的網(wǎng)站，您會發(fā)現(xiàn)其中許多使用相似的布局。這不是巧合。這些布局具有顯著的優(yōu)勢-訪客很熟悉它們。
通過建立對用戶的熟悉感來創(chuàng)造良好的用戶體驗。當人們訪問看起來很熟悉的網(wǎng)站時，他們無需考慮如何瀏覽該網(wǎng)站；相反，他們專注于消費內(nèi)容。因此，盡管每個項目都是唯一的并且需要單獨的方法，但是使用熟悉的布局總是有幫助的。
您可能還會喜歡： 主題開發(fā)人員如何從Brutalist Web Design中學習。
7種常見布局
以下是設(shè)計網(wǎng)站時會發(fā)現(xiàn)的七個最常見的布局，以及如何使用它們來創(chuàng)建令人難忘的用戶體驗的示例。
1.單列布局
單列布局在一個垂直列中顯示主要內(nèi)容。這種類型的網(wǎng)站布局可能是我們列表中最簡單的一種，也是用戶最容易瀏覽的-所有訪客需要做的就是滾動以獲取更多信息。移動設(shè)備的興??起極大地影響了這種布局的流行，因為它們非常適合移動屏幕。
什么時候使用
這種布局非常適合基于簡約設(shè)計原則的個人作品集。它非常適合攝影師，作家，博客和其他創(chuàng)意人員。
網(wǎng)站布局：單欄
攝影師Pontus Rudolfson使用單列布局來展示他的作品。
單列布局也非常適合講故事。檢查下面的船示例。在此網(wǎng)頁上，各節(jié)一個接一個地講述一個完整的故事。
網(wǎng)站布局：講故事
小船是講故事的絕佳典范。
2. Z形和鋸齒形布局
Z形布局基于“ Z”掃描圖案。它的設(shè)計模仿了人眼在閱讀內(nèi)容時所經(jīng)過的路線：
人們從左上方到右上方掃描頁面，形成一條水平線
接下來，他們的眼睛向下移動到頁面左側(cè)，創(chuàng)建一條對角線
最后，他們再次向右看了一眼，形成了第二條水平線
鋸齒形圖案是在同一頁面上重復幾次的Z形圖案。精心設(shè)計的鋸齒形布局可以營造出使游客保持興趣的節(jié)奏。
什么時候使用
Z形網(wǎng)站布局更適合具有單一目標的網(wǎng)站或單個頁面，例如單頁促銷網(wǎng)站或特定服務(wù)的登錄頁面。這樣的網(wǎng)站/登陸頁面在視覺上看起來像在線海報。訪客的注意力指向特定的地方，例如文本部分或號召性用語按鈕。
網(wǎng)站布局：空格
X-Vax充分利用空白來突出顯示標題和號召性用語。
當您想向訪問者介紹一些重要主題，但又不想讓太多信息淹沒他們時，之字形布局非常適合。
網(wǎng)站布局：之字形
旅游博客和視覺講故事者Pat Kay使用鋸齒形布局來展示他的作品。
您可能還會喜歡： 每個設(shè)計師都應(yīng)了解的22個基本UX律。
3.全屏照片或視頻
此布局的核心元素是一個很大的視覺效果，用作整個頁面的背景。在設(shè)計中使用圖像或視頻是銷售產(chǎn)品，想法或解決方案的最快方法，因為圖像會與訪客建立情感聯(lián)系。產(chǎn)品的大膽，大膽的照片或視頻表達出強烈的印象，并給人留下深刻的第一印象。
什么時候使用
該網(wǎng)站布局非常適合希望遵循“少說多做”的方法的人。當您只需要演示一個想法/產(chǎn)品/服務(wù)并將用戶的全部注意力集中在該想法/產(chǎn)品/服務(wù)上時，它就可以發(fā)揮最佳效果。這種類型的布局有助于建立真正的身臨其境的情感體驗。
網(wǎng)站布局：視頻
電影編輯馬文·庫納（Marvin Kuehner）使用全屏背景視頻直觀地傳達信息。
4.故意不對稱
不對稱是布局兩側(cè)之間缺乏平等性。這是傳統(tǒng)藝術(shù)中很受青睞的技術(shù)，但在網(wǎng)頁設(shè)計師中也很受歡迎。
不對稱性非常適合于產(chǎn)生張力和動感，因為它會將用戶的注意力集中在各個元素（焦點）上。
什么時候使用
當設(shè)計師希望創(chuàng)建令人興奮且出乎意料的布局，同時仍提供方向性重點時，可以使用這種類型的布局。通常，此布局更適用于不太嚴格和更具藝術(shù)性的網(wǎng)站。
網(wǎng)站布局：不對稱
Chamba是一個網(wǎng)站，致力于展示哥倫比亞La Chamba村獨特而精美的手工陶瓷。通過使用非對稱布局，該站點將整個用戶的注意力集中在陶瓷上。
顏色是不對稱的秘密成分。通過使用對比色可以很容易地將焦點添加到特定元素。當訪問者掃描頁面時，他們的注意力自然會吸引到視覺重量更大的對象上。
網(wǎng)站布局：顏色
在加拿大國家鐵路公司創(chuàng)建使用顏色鮮艷一個很好的平衡組成。
您可能還會喜歡： 深色圖案：您不應(yīng)該在產(chǎn)品中使用的12招。
5.固定邊欄
導航是任何網(wǎng)站的關(guān)鍵部分-菜單是大多數(shù)用戶想要導航站點時首先要尋找的東西。固定的側(cè)邊欄布局試圖通過在屏幕的左側(cè)或右側(cè)提供固定的導航欄來解決導航問題。無論訪問者在網(wǎng)頁上的什么位置，該欄始終可見。
什么時候使用
該網(wǎng)站布局非常適合導航選項數(shù)量相對有限的網(wǎng)站。
網(wǎng)站布局：導航
該1X網(wǎng)站是專門的藝術(shù)作品。無論訪問者在頁面下有多深，總能看到主導航菜單和購物車。
6.紙牌網(wǎng)格
卡是信息的重要容器。它們使設(shè)計人員能夠以易于消化的方式呈現(xiàn)大量信息?？ㄆ洚斠豢诖笮〉念A覽，可幫助訪問者找到他們喜歡的內(nèi)容，然后深入研究細節(jié)。
關(guān)于紙牌網(wǎng)格的偉大之處在于這種布局非常易于操作。網(wǎng)格的大小，間距和列數(shù)可以變化，并且卡片的樣式可以根據(jù)屏幕大小而變化，因為可以重新排列它們以適合任何屏幕。這就是為什么卡片網(wǎng)格在響應(yīng)式設(shè)計中表現(xiàn)如此出色的原因。
什么時候使用
卡片式網(wǎng)站布局網(wǎng)格非常適合需要顯示很多具有相同層次結(jié)構(gòu)的項目的網(wǎng)站。
網(wǎng)站布局：卡片
氣候樂觀主義者是一個試圖解決氣候變化的項目。鮮艷的色彩和基于卡片的布局帶來視覺吸引力，并讓您滾動以獲取更多信息。
網(wǎng)站布局：動畫
蒙特利爾的一家制作公司Alt使用懸停動畫將更多的動態(tài)感引入到交互中。
7.分屏
分屏（或一個分為兩屏）的布局使設(shè)計師可以同時顯示兩段內(nèi)容，同時賦予它們相同的視覺重量。
什么時候使用
當您需要呈現(xiàn)兩個具有相同重要性并應(yīng)以相同方式展示的不同內(nèi)容時，分屏式網(wǎng)站布局非常有用。
網(wǎng)站布局：分屏
Zeemansneaker使用分屏呈現(xiàn)兩種不同的產(chǎn)品。
但是，這種布局也有助于做出大膽的創(chuàng)意陳述。
網(wǎng)站布局：娛樂性
自治使用分屏來使事情變得更有趣。
您可能還會喜歡：無 摩擦體驗：如何創(chuàng)建流暢的用戶流。
讓訪客回頭
設(shè)計網(wǎng)站時，您的最終目標是選擇一種易于瀏覽且樂于花時間的網(wǎng)站布局。如果您實現(xiàn)了這一目標，則將為您帶來出色的初次體驗，并增加人們將來再次訪問您網(wǎng)站的機會。
