99国产欧美久久久精品,а√天堂资源中文最新版地址,欧美 日韩 亚洲 在线,国产sm主人调教女m视频,√天堂资源中文www

 返回  

創(chuàng)建出色網站底部的 15 個技巧

2022/4/25 15:06:46 來源:深圳網站建設公司Clh

網站設計中最重要的位置之一是站點的底部。是的,我們是認真的。它可能不是最吸引人的設計或最令人印象深刻的內容區(qū)域,但它卻是用戶最經常尋找信息的地方。因此,在規(guī)劃網頁設計項目時不要忽視這一區(qū)域,這一點非常重要。


你應該添加哪些元素?如何保持底部井井有條并符合網頁整體的審美而不顯得突兀?你來對地方了。在這里,我們將通過一些在這方面做得比較優(yōu)秀的網站示例來了解如何創(chuàng)建出色網頁底部的技巧。


1.保持設計的簡單(Keep the Design Simple)

Agra-Culture

是的,這是大多數(shù)設計項目的關鍵設計理念之一,但依然值得再次提及。在處理大量信息時,簡單的設計很重要,底部可能就是這種情況。堅持使用干凈的元素,充足的空間和有目的的組織。盡量避免混亂并考慮哪些元素將使用在底部以及為什么它們應該放置在那里。底部區(qū)域的大小通常與網站上的信息量和頁面數(shù)量有關。

Agra-Culture在底部中使用顏色、圖標和文本,但它依然很簡單,而且視覺流動性很好。每個鏈接都很容易查找和點擊,綠色框中使用農場圖像的微妙細節(jié)也是對品牌和設計的點睛之筆。



2.關聯(lián)信息(Link to Your Information)

Heckford

任何網站設計中的底部中最重要的兩個鏈接——“關于我們”和“聯(lián)系我們”。用戶會想知道你是誰以及你的公司或品牌是關于什么的。所以,盡量使查找該信息變得容易。許多人還想了解你的團隊成員以及如何聯(lián)系到你(這是一個很重要的內容,確保部分意外丟失了名片的客戶在你的網站上可以輕松獲取到聯(lián)系信息)。

這點,Heckford就做的不錯。



3.包含基本聯(lián)系信息(Include Basic Contact Information)

Root Studio

雖然你已經在底部中提供了鏈接到“聯(lián)系我們”頁面的途徑,但在底部中包含直接展示的聯(lián)系信息也是一個不錯的選擇。包括主要的電話號碼、電子郵件地址和實際地址(合理設置每個元素的交互反饋,以便在單擊時可以自動撥號、關聯(lián)電子郵件或在地圖上查找)。

Root Studio在其網頁設計中底部部分使用了非常規(guī)的設計,但它確實有效。文本很大(以及橙色底部塊),內容則是一個直觀的聯(lián)系信息(對于希望用戶聯(lián)系他們進行項目和工作的網站來說,這是一個特別適合的設計方式)。



4.組織好底部欄目(Organize Footer Links)

SugarSync

通過對底部欄目進行有效的分組可以為鏈接和信息創(chuàng)建良好的組織感。考慮以列或行的形式將幾個主要欄目放置在底部,并將每個欄目的關聯(lián)子欄目放在主欄目標題的下方,以便每個元素都被分類并易于查找。

SugarSync包含多列信息,在底部你幾乎可以找到站點中的任何頁面入口。通過主欄目的標題,你很容易就可以在相關的位置找到你想要深入了解的頁面入口。



5.版權聲明(Include a Copyright Notice)

Adventure

這一小行文字有時候甚至可以成為救命稻草,所以不要忘記它。雖然大多數(shù)網站將其作為一條橫穿底部區(qū)域的單獨小版塊,但你可以將其設計為更加符合網站或者底部樣式的形式。版權聲明可以很簡短,包括版權符號?,文本通常包括出版年份和版權所有者的名稱,如:Copyright ? 2005-2022 Clhweb.com All Rights Reserved。

Adventure.com在其網頁設計中,保持版權聲明簡單。該信息被刻意設置為低對比度,因此不會妨礙更重要的其他導航元素。



6.有效的快捷按鈕/行動呼吁按鈕(Include a Call to Action)

Collabogive

一般我們希望客戶在瀏覽到底部的時候,可以讓他們在那里完成一些事情。比如一個為訂閱設置的郵箱地址提交表單,或邀請他們在社交媒體上關注你并進行互動。不要忘記這個空間在轉化點擊方面的價值,特別重要。

Collabogive將大量底部空間用于郵箱的預留功能。不管是標題還是版塊上都很容易看到,不僅符合設計,還為用戶提供了一種無需加入活動即可進行互動的方式。



7.使用圖形元素(Use Graphic Elements)

Kikk Festival

很多時候,底部只是一個只包含文本信息的塊。通過添加徽標或圖形元素以增加視覺趣味,但是請注意不要用太多元素使這個小空間過于飽和。大致的思路可以是:與其拼寫“在 Facebook/Twitter/whatever 上關注我”,不如為這些社交媒體添加圖標來吸引用戶。你還可以在鏈接中使用小的標志性元素,例如地圖或電話號碼。

Kikk Festival使用在底部空間中突出使用徽標來快速為自己的合作伙伴獲得更直接的點擊率。



8.注意對比度和可讀性(Be Aware of Contrast and Readability)

P53

底部的文本信息通常比較小,這使得考慮文本元素和背景之間的顏色、視覺重量和對比度變得至關重要。每個單詞都應該是可讀的,考慮使用簡單的字體(中等粗細的無襯線字體似乎比較合適)。在文字和背景的選擇上使用具有高對比度的顏色,例如帶有黑色文本的淺色背景或帶有白色文本的深色背景。避免使用不同的顏色或過于華麗的字體。

P53使用一種經典的(也是最易讀的)文本和背景組合作為底部信息的展示——黑底白字。



9.始終統(tǒng)一你的設計主題(Maintain Your Design Theme)

Swwiths Interactive Group

網站設計中底部不應看起來像是事后才想到的內容,它應該與網站的整體設計主題相匹配。不管是顏色、樣式和圖形元素都應該反映整體。所以,從項目一開始就將這個區(qū)域納入整體的考慮范疇中,以避免在設計過程的后期陷入視覺不匹配的境地。

Swwiths Interactive Group使用了一個簡單的底部,它與網站的整體外觀完全融合,其中一個人坐在辦公桌前,上面散落著各種物品。簡單的底部顯示了相關信息,但是整體上看它屬于網站。



10.小,但不要太小(Think Small (But Not Too Small))

CuriousSpace

底部本質上包括很多較小的項目,請注意不要太小。文本字號可以比網站主體使用的字號小幾個點,圖標或圖像具體需要滿足大小可讀(如果你不能分辨圖標是什么,那它可能就太小了)。元素的大小應該能夠輕松點擊,如果用戶因為鏈接太小或太靠近而無法輕松獲取或點擊,那么它們將無法按預期工作。

雖然CuriousSpace使用了一種非傳統(tǒng)的底部樣式,但你可以從所使用的字體大小中獲得良好的比例感,文本比頁面上的所有其他正文文本更小、更細、更輕,但仍然足夠大,易于閱讀。



11.合理把握空間(Use Plenty of Space)

Sailing Collective

因為底部區(qū)域通常情況下并不會給太大的區(qū)域,所以在空間和間距的把控上需要特別注意。在底部各個元素周圍以及文本行之間留出足夠的空間,足夠的間距將使底部區(qū)域看起來不會過于擁擠,對點擊也將提供很大幫助。由于底部中的許多(并非全部)欄目都鏈接到其他內容,因此這是提升用戶體驗的一個重要方面。

Sailing Collective在元素之間在垂直和水平方向都使用了大量空間,它們按類型聚集并且方便點擊。



12.警惕太多的元素(Be Wary of Too Many Objects)

Master & Dynamic

雖然使用圖形元素和欄目標題是一個好主意,但在恰到好處和太多之間有一條界限。謹慎使用這些元素并用于非常特定的目的。問問自己為什么要使用標題、圖標或照片。如果答案是“因為它看起來不錯”,請重新考慮。每個元素都應該有一個目的。這將幫助你設計一個可以充分利用可用空間的底部。

從Master & Dynamic的底部就可以看出,少即是多的設計理念。簡單的圖標和文本足以讓你輕松瀏覽底部內容。



13.營造層次感(Create a Sense of Hierarchy)

Griflan Design Inc.

就像網站設計中的其他部分一樣,底部本質上應該是具有層次的。底部應位于整個網站層次結構的底部(畢竟這是它所在的位置)。而包含在底部中的元素依然需要保持層次結構。最重要的元素(通常是聯(lián)系信息、號召性用語或站點地圖)應該是最突出的。輔助信息,例如版權聲明,通常是規(guī)模最小的。

Griflan Design Inc.在底部中的設置可以很好的展現(xiàn)這種層次關系,并在通過這種層次引導用戶按照他們希望的順序一步一步完成一些動作。首先,用戶可以給他們發(fā)電子郵件,如果這不起作用,那么請致電他們,如果這些選項都不起作用,請在社交媒體上關注并進行后續(xù)互動。



14.考慮底部的子版塊(Consider a Sub-Footer)

Smart Passive Income

你的底部還需要一個子底部嗎?考慮使用子底部以進行額外的層級劃分(這是一種現(xiàn)在非常流行的做法)。子底部可以是創(chuàng)建一些額外層次結構的好地方,如果底部空間已經過于密集,可以為底部空間添加新的維度,或者只是為有趣的內容提供空間。使用此區(qū)域突出顯示榮譽或插入號召性用語是比較常用的一種做法。

Smart Passive Income博客在多級底部方面做得較好。首先設置了一個行動號召的版塊,然后再是網站鏈接,然后是帶有低對比度的社交媒體子內容,然后是網站免責聲明和政策。導航級別提供了頁腳的深度,并使其易于瀏覽和單擊。



15.不要在鏈接下面設置下劃線(Don’t Underline All Those Links)

Baxter of California

想必這是網站設計中經常會犯的最大錯誤?在鏈接欄目下設置下劃線。很難想象現(xiàn)在仍然有大量的站點底部帶有下劃線鏈接。這種過時的技術不適合現(xiàn)代網頁設計。

Baxter of California有一個干凈的底部并包含很多鏈接。由于鏈接的簡單,它看起來并不雜亂。



總結

底部可以說明以及承載網站的很多信息。它可以告訴用戶你是誰,你是做什么的,他們可以做什么以及如何瀏覽你的網頁。它還顯示了你作為設計師的獨特之處,例如對細節(jié)的關注和在小空間中合理安排元素的工作的能力。

底部是設計的重要組成部分。關注他,確保包含的信息、設計元素和可用性的正確組合,以在每個網站建設項目中充分利用這個空間。









----圖文來自:design shack 

----由深圳網站建設公司-Clh翻譯編輯整理,為您提供更多有關深圳網站建設、網站設計、網頁設計及其他互聯(lián)網應用服務