作為一名網站設計師,很容易對網站設計的主要組成部分進行總結。畢竟,這需要設計布局,放置導航,并確保所有內容都能協同工作。說到網站設計中的頁腳,您可能會很小看它。
但是頁腳可以作為進一步參與的通道。它將用戶傳送到不同的頁面。它促使他們采取行動。它將它們保留在網站上。在我們看獨特的頁腳的例子之前,讓我們討論一下為什么頁腳是重要的?
為什么網站設計的頁腳設計很重要
頁腳。在花了那么多時間和精力來設計一個網站之后,很容易忽略這最后一部分。雖然頁腳可能是隱藏在網站最底部的一個元素,但它并不意味著用戶體驗的結束。相反,頁腳可以作為其他內容的門戶,顯示誘人的社會圖標,收集電子郵件地址,并進一步交流用戶需要知道的信息。
頁腳意味著更好的導航
假設某人瀏覽了所有的登錄頁面內容,并在頁面底部結束,他們可能有更多的問題或者其他想要探索的領域。最好的網站頁腳就像是網站設計中其他部分的一個縮影,它封裝了最重要的部分,讓用戶可以直接使用結構良好的導航選項列表。
網站頁腳傳達相關信息
無論是宣傳語還是對品牌產品或服務的總結,頁腳都會給您留下最后的印象。這就決定了他們是會按照要求采取行動,還是會深入網站的其他部分。這最后一點復制可能會占用一小塊空間,但它會對一個人如何參與設計的其余部分產生很大的影響。
頁腳還提供了一個放置所有必要的聯系信息的地方,如實際地址,電話號碼,電子郵件注冊,以及其他人可能需要知道的其他細節。它們還可能包含法律信息和版權標志。頁腳是設計中一個嚴肅的部分,它展示了在其他地方不適合的實用信息。
頁腳給出了行動的最后號召
如果您想讓某人注冊一份時事通訊,開始訂閱一個產品或服務,或以另一種方式收集電子郵件地址,網站頁腳可能是收集這些重要客戶信息的最后機會。在此之前的所有內容很可能會讓用戶準備好輸入他們的電子郵件地址,從而更接近成為一個忠實的客戶。
頁腳可以促進搜索引擎優化
當谷歌網絡爬蟲掃描一個網站時,他們分析的因素之一是相關鏈接的數量。展示網站地圖或其他內聯鏈接可以給他們一個更好的結構,幫助他們確定您的網站設計是關于什么的。在網站頁腳設計中放置導航鏈接可以提高網站的SEO效率,并幫助其獲得有機搜索引擎結果的吸引力。
13個獨特的網站頁腳設計
1、Avo
數據和分析可以幫助公司實現更高的目標,Avo為企業提供了一個強大的平臺,用于管理和爭論所有重要數據。
這里有一些沉重的技術信息,但是這個網站設計避免了落入枯燥乏味的境地,就像很多技術企業一樣。光滑的插圖,大量的顏色,和維度的點綴,給它一個有趣的能量,平衡更嚴肅的Avo的產品。
讓我們看看頁腳“今天就開始使用Avo”的號召立刻抓住了您的注意力。在它的正下方有一個空格,可以輸入電子郵件地址來開始這個過程。他們不會用太多的內聯頁腳鏈接亂扔布局,并保持事情的直接。我們喜歡右邊的鱷梨,它象征著我們邁出了第一步。
右邊的社交媒體圖標是另一個不錯的觸摸,橫向掃一眼屏幕空間會讓您的眼睛直勾勾地盯著它們。
通過減少鏈接的數量,并在不同的視覺元素周圍留出足夠的空間,Avo成功地創造了干凈、簡單、個性十足的頁腳。
2、進化枝設計
充滿對比的形狀,引人入勝的微互動,和一個快樂的調色板的顏色,這個主頁為設計公司Clade design脫穎而出的古怪的創意感。
一個重復的形狀通過這個布局是背景波,我們在頂部看到它是藍色的,每個部分都有一些不同的背景顏色。在頁面的底部是一個類似的藍色波浪,使這個頁腳成為頂部設計的一個偉大的書簽。即使您沒有注意到,您也會從這個網站的頁腳設計中直觀地感受到您在頁面的末尾。
這個頁腳設計示例是一個簡單的課程。它包含極少數量的鏈接,屏幕最左邊的“聯系我們”(Contact Us)呼叫行動按鈕,以及屏幕右邊的一個簡短的社交媒體圖標塊。這個頁腳與設計的其他部分配合得很好,有一個干凈的布局和明確的行動呼吁。
3、Designies
給它的視覺元素充足的負空間,用3D卡通式的幾何形狀填充網站,使Designies的網站成為一個視覺上吸引人的設計。作為設計師和客戶之間相互聯系的門戶,Designies并沒有讓自己的審美失望。
在一個滿是白色空間的網站布局中,頁腳的深粉色與設計中的深灰色和黑色疊加在一起。當滾動到這最后一部分時,主頂部導航淡出,只留下右上角的藍色按鈕成為Designie的action按鈕。剝離菜單帶來的焦點到這個CTA按鈕。內聯鏈接取代了主導航,如果有人想進入網站的不同部分,很容易找到一個鏈接將他們帶到那里。沒有清晰的導航系統,任何人都不會被晾在那里,無論他們在哪里。
有一個巨大的空間專門為他們的通訊注冊和時尚的顏色組合,設計的頁腳使其完美的結論到他們的著陸頁面。
4、Think32
我們總是喜歡看專業的營銷機構,專注是在競爭中脫穎而出的有力策略。
Think32來自澳大利亞,是一家牙科市場營銷機構。牙科圖像是微妙的,與整體設計投影類型的現代風格,任何類型的高績效機構會擁抱。我們確信十分之九的網站設計師和牙醫會同意這個觀點。
頁腳將召喚行動的權利在中心,與淺粉色訂閱按鈕旁邊的電子郵件聯系形式,把焦點直接帶到它。我們也很喜歡在左邊的空間里加入“深思熟慮的牙科業務營銷”,這總結了他們公司的理念,進一步強調了他們的專業技能。
5、Hologram
Hologram技術為企業提供了他們需要的與蜂窩網絡相連接的技術。無論是電動摩托車、無人機,還是工業設備上的傳感器,它們制造的全息圖和SIM卡都有助于企業將技術聯系起來。
這是一個具有相當多復雜性的專業技術領域,但Hologram在使這個設計在視覺上具有吸引力方面并不吝嗇。通過滾動觸發的動畫和微交互,該設計提供了大量的機會來參與和導航到他們的內容。
就像我們在Designies網站上看到的一樣,這個頁腳也執行頂部導航消失的動作。頁腳中的內聯鏈接提供了所有的導航選項。
在頁腳的頂部,我們得到了一個帶有紫色和藍色漸變的框和2個調用-操作按鈕。方框的顏色變化突出了它下面的深藍色方塊,給人一種它位于頁腳之上的感覺。這工作得很好,使這個調用行動塊突出從其余的頁腳。
Hologram的網站頁腳設計就是所謂的胖頁腳,通過廣泛的鏈接列表,它可以作為網站設計的另一種導航方式,并讓搜索引擎對網站的內容有更精確的了解。
6、Savvy
您看到任何熟悉的2層頁腳下面?敬請期待……這將再次出現。但是讓我們用這個來自于悟性的頁腳跳進來。
該設計的特點是,網站底部有一個帶有直線的大頁腳塊,上面有一個帶有圓角的小方框,上面有一個紫色的“開始”按鈕。
Savvy用低代碼為企業創建自定義工具和應用程序,頁腳前面的z布局顯示了它們的功能。通過網站設計,這條路徑直接通向頁腳內容,而內聯鏈接則通向最重要的頁面,電子郵件訂閱表單則是次要的行動召喚。
7、Astra
您的網站被黑客攻擊會造成很大的壓力。首先,敏感數據被泄露的可能性非常大。接下來就是您的網絡聲譽所帶來的重大變化。Astra的軟件可以幫助企業和其他運營網站的公司抵御網絡攻擊。
這可能是一個漫長的努力,通過黑暗和厄運黑客所做的,但相反,設計集中在樂觀的擺脫這種擔憂。藍色、橙色和黃色的配色方案,是一種令人振奮的用戶體驗。
在明亮的形狀和通風的布局之后,海軍藍的實塊頁腳標志著一個句號。統一的列集,鏈接到網站其余部分的內聯鏈接,整潔的社交媒體塊,這種線性布局與其他設計形成對比,使其成為完美的終端。
8、Fiddler Labs
老實說,對于那些不熟悉人工智能和數據科學的復雜性的人(包括本文作者),Fiddler Labs的網站可能有點嚇人。
雖然它以大量的技術信息為特色,該網站也以同樣多的創意設計而自豪。一個簡短的滾動顯示出層次化的視覺效果,給布局一種立體感,動畫屏幕截圖、圖標和其他視覺元素讓事情變得有趣起來。
然后還有這個頁腳,它直接分解了網站的架構。我們喜歡在右邊的電子郵件表單開始時每欄只設置2個條目的安排。這是一個非常好的視覺鏈接,它可以直接將用戶引導到訂閱表單。
9、Brass Hands
當您瀏覽品牌機構Brass Hands的網站時,您會得到一個平滑的用戶體驗,滾動觸發的文本輕輕移動到適當的位置,特色項目放大懸停,以及其他優秀的設計。沒有不和諧或不合適的地方,整個布局被一種一致性的感覺捆綁在一起。
當您浮到頁腳,這是一個溫和的著陸。簡單的一行“讓我們一起工作”和鏈接到他們的社會媒體使這個頁腳干凈的結束黃銅手的登陸頁面。
10、Vectornator
許多設計師堅持使用經過驗證的、真實的方法來制作以矢量為基礎的藝術,這沒有關系。但是看到像Vectornator這樣的軟件公司以不同的方式加入進來總是很有趣。該網站展示了大量令人驚嘆的例子,說明他們的工具可以實現什么。這個當代的布局也與充滿快速編輯的動畫,捕捉使用Vectornator的創造性過程。
當您到達頁腳時,您將已經被Vectornator的創造性的可能性迷住了。沒有必要再重復什么使這個軟件特別或添加任何新的東西在頁腳。
向下滾動到頁腳會使頂部導航消失,只留下它包含的內聯鏈接指向您想去的方向。這是關于約束的一課,展示了一些最好的頁腳是如何最簡單的設計。
11、Hi5
Hi5是關于團隊建設的。這款有趣的應用程序讓團隊成員可以互相贊揚、交流和提供反饋,也讓管理者有機會分析每個人在實現公司目標方面的表現。設計體現了這種積極的精神,采用了俏皮的藍色、黃色和粉色調色板,以及大量的內容傳達了Hi5應用程序如何增強團隊力量。
在頁腳的左邊,您可以選擇在谷歌Play、WhatsApp、蘋果應用商店和其他地方下載應用程序。深藍色使這些按鈕不可能錯過,使他們成為焦點的頁腳。
Hi5在頁腳的右側填滿公司信息,包括他們的國際辦公室地址和一塊社交媒體按鈕。
這個頁腳有許多不同的部分,但使用了足夠的空白和顏色,一切保持有序。
12、Appasaurus
占領應用程序開發機構Appasaurus的網站設計是眾多的恐龍。設計以一種古怪而有趣的方式展開,將他們的員工描繪成這些史前動物。這個古怪的主題貫穿了這個愉快的網絡空間,以一種隨意的風格呈現了所有的恐龍。
在頁腳上方,我們看到了最后一只恐龍——暴龍,上面寫著:“不要讓您的應用步恐龍的后路。”“這是一個非常有趣的搭配設計,并與下方的白色定價按鈕很好地契合。”黑色的背景與白色和藍色的組合看起來總是很不錯,我們得到了一個導航選項的小列表以及他們的社交媒體鏈接。隨著一種無禮的風格延伸到他們的頁腳,Appasaurus顯示了一點荒謬可以創造一個更愉快的用戶體驗。
13、Flowbase
您的下一個網站flow項目有沒有受到這些頁腳的啟發?Flowbase提供了10+不同的頁腳布局,您可以克隆。他們提供了大量的UI工具包和其他元素,您可以使用您的網站flow設計。如果您還沒有檢查過它們,花些時間讓自己熟悉它們所提供的東西。
頁腳可能是客戶旅程的開始
由于鏈接的有序布局、社交媒體圖標塊、時事通訊注冊和其他附加選項,頁腳占據了重要的空間。它們不應該是關閉一個網站的信號,而是應該激勵用戶去深入了解、了解更多,并進一步與一個品牌建立聯系。雖然頁腳占據了設計的底部,但是作為網站設計師,您應該把頁腳放在首位。