你有沒有想過如何設計網頁佈局?設計一個網頁,需要藝術與科學的完美結合。秘訣是給自己一點創造性的自由,同時堅持一個行之有效的結構。聽起來不可能?別擔心,這是一個快速指南,以建立一個頁面佈局,提高任何公司網站的轉換率。
第一步:首先考慮用戶體驗
這是很重要的研究和考慮主頁結構,甚至在草圖的想法。在進行調查的時候,一定要密切關注潛在客戶的期望。畢竟,在不瞭解目標用戶期望的情况下,設計一個提供出色用戶體驗的商業網站幾乎是不可能的。
不能提供良好用戶體驗的網站吸引大量流量的機會要少得多。畢竟,用戶體驗和搜尋引擎優化是齊頭並進的。例如,同一都市的一些用戶仍然會吸引大量用戶。但更好的用戶體驗公司,如滴滴,有更大的機會重塑行業。
研究用戶需求和期望的方法很多,但是用戶調查和用戶分類可能是最流行的方法。在瞭解了目標受眾對頁面的期望之後,您可以開始研究資訊體系結構。
資訊架構(IA)是以一種清晰、直觀和明智的管道組織網站上的資訊。考慮一下你自己流覽網頁的經驗:登入一個計畫不周的網頁,幾秒鐘內還沒有被證明是相關的,這可能會讓你立即點擊關閉或返回按鈕。
一個好的ia創造了一個層次結構,強調了最重要的元素,並保持了訪問者的參與度。如果你沒有一個堅實的“骨架”來建造,你將準備失敗。
導航是IA的一個關鍵方面,您應該儘早考慮。如果用戶找不到自己的網站,你的網站有多華麗也無所謂。
良好的導航有三個主要特點
簡單的
清楚的
均勻性
你的目標應該是通過盡可能少的點擊來引導用戶找到他們正在尋找的資訊。您可以通過在巡覽列中使用清晰、簡潔、有用的語言以及整個網站的一致設計來實現這一點。添加諸如breadcrumbs之類的備份功能還可以極大地提高網站的可用性,並幫助訪問者跟踪他們在網站上的位置。
步驟2:正確獲取視覺層次結構
强大的視覺層次結構使得引導用戶採取行動的網站佈局設計不同於美麗的網站。人類是一種令人難以置信的視覺生物,當談到線上消費內容時,我們通常會掃描網頁以快速確定是否能在投入使用前找到所需內容。
作為一個設計師,你可以確保你看到最重要的資訊並吸引用戶。如果沒有清晰的視覺層次,頁面上的所有內容都顯得同樣重要,讓人無法忍受。各種設計原則有助於創建一個强大的視覺層次。
使用網格
網格提供了一種强大的方法來創建頁面上不同元素之間的連接並組織佈局。網格顯示頁面上的所有元素如何互動,並確保使用清晰的結構來強調正確的資訊。
自然瀏覽模式的設計
有兩種主要的眼動掃描模式,人們可以用來快速掃描內容塊
F形圖案
之字形的
作為一個設計師,你可以控制用戶掃描頁面時的外觀,囙此為用戶設置正確的路徑非常重要。我們經常在部落格和新聞網站等各種文字的網站上遇到F形圖案。
值得注意的是,最新研究表明,F字型模式實際上對用戶和企業不利,應該避免。
如果用戶在F模式下瀏覽你的網站,這意味著他們在頁面的左側顯示强烈的偏好,而在右側則會遺失重要內容。為了防止瀏覽,您必須將網站內容的格式設定為將內容指向您認為最重要的資訊。
直觀地劃分關鍵要素的優先順序
使用五個基本設計構建塊構建直觀的視覺層次:
1大小
在任何設計中,將大小與重要性聯系起來是很重要的—最重要的資訊應該是頁面上最大的,並且需要最關注。
2顏色
請記住,在設計中,顏色既可以用作組織工具,也可以用作品牌/個性工具。
三。佈局
一個好的格式可以鼓勵訪問者參與整個頁面的內容,並更快地找到最重要的資訊。
4間距
空格或負空格是設計者用來吸引用戶注意最重要的UI元素的工具
5風格
選擇與您的品牌相匹配並突出您的品牌的風格將有助於您更有效地傳達您的資訊。
應用三分法
這個原則要求您將設計分為三個部分(三行三列),以查看線條相交的位置並確定設計重點。這是一種有效的方法,可以開始你的網站組合,並選擇元素的位置和框架。使用網格是將此科技應用於任何設計的最簡單方法。
第三步:把注意力集中在呼叫詞按鈕上
沒有CTA,就沒有完整的網站。事實上,行銷人員會說這是頁面上最重要的元素,所有的努力都應該集中在讓人們點擊它上。策略性地使用一個設計良好的CTA可以極大地改善頁面的處理過程並引導用戶進行轉換,囙此正確地實現這一點至關重要。
設計按鈕時,請記住以下幾點。
確保按鈕看起來可以按一下
這聽起來很明顯,但是你會驚訝於網頁設計師們經常放弃清晰而傾向於創造性或者一些奇怪的新趨勢(是的,我是說你,鬼按鈕)。要確保用戶理解元素是按鈕,請使用標準視覺提示來幫助他們確定可按一下性,例如形狀、陰影和高光。
清楚地標記所有按鈕
那裡的按鈕告訴用戶下一步要做什麼。如果副本模棱兩可,人們就會思考而不是行動。讓用戶清楚地知道如果他們點擊會發生什麼。這是Netflix的一個聰明的例子。