B2B行業網站設計分享:網站設計製作的標準

來源:互聯網
上載者:User

文章描述:B2B行業網站“文字樣式設計”一般標準.

當我們開啟各種B2B行業網站,看到最多的就是各種文字,以各種方式表達出來,顯示在訪問者眼前,文字是門戶類型網站最多的內容,同時文字與圖片、視頻是網站最重要的三種表達方式之一。

B2B行業網站,更多的服務於企業的交易需求、瞭解行業知識的學習需求及交流需求,本文作者李學江認為,這些需求更多還是要通過文字來表達和傳遞,不同的字型大小、顏色、粗細、行距,代表了產品策劃者、網站設計者所期望向網站訪問者傳遞的資訊。下面來簡要講解下在B2B行業網站設計製作時具有的標準。

1 B2B行業網站導覽列文字字型、字型大小、粗細、顏色的一般標準

導覽列是一個使用者來到頁面最先看到的部分,要引導使用者到不同的欄目訪問,所以文字要力求突出,這個在前面效果圖設計時也講了。

一般標準為:

A 字型:預設字型宋體,導覽列不能採用圖片製作,不利於搜尋引擎最佳化,所以只能使用宋體。

B 字型大小:14PX及以上,由於B2B行業網站的欄目一般不多,大部分不適合像新浪、網易那樣做導覽列,一排欄目,是大部分B2B行業網站設計的習慣。部分也有兩排欄目、三排欄目的,最多2排導航更合理。所以絕大多數情況下,字型大小要大於等於14PX,放二排時一部分有一級欄目導航和二級欄目導航,二級欄目的字型大小可以小一些,最小13PX。

C 粗細:如果導覽列只有一排,絕大部分情況下,都要加粗,如果把一級欄目和二級欄目都寫在導航條上,用二排顯示,一般只加粗一級欄目。

D 顏色:根據頁面效果圖來製作,如果導覽列有背景,文字顏色必須要用與背景有很強對比的顏色。

圖(92) 華人螺絲網(www.luosi.com)二排導覽列

上面網站二排導覽列,字型大小為14PX,一級導覽列已加粗,重點欄目用了更吸引眼球的橙色,一部分的B2B行業網站也是採用的是這種導航方式。

圖(93) 醫藥網(www.pharmnet.com.cn)導覽列

上面網站的導覽列,字型大小為14PX,加粗,顏色為與背景色對比很強的白色,重點欄目變色顯示,這樣的導航方式是絕大部分B2B行業網站採用的方式。

2 B2B行業網站標題列文字字型、字型大小、粗細、顏色的一般標準

標題列是一個頁面架構設計中最重要的部分,也是需要設計最多的地方,我們設計一個頁面,除了內容設計,基本都是在設計標題列,在頁面效果圖設計部分也講的很詳細了,這裡從標題列上的文字入手,精確到字型、字型大小、粗細、顏色來簡要講解。

一般標準為:

A 字型:大部分時候都預設為宋體,因為現在設計網頁,大家都喜歡在標題列的文字上加連結,直接連結到二級或一級欄目的更多內容,文字都不是圖片表達的,有的也用CSS來設計一些效果。所以除了一些對效果要求比較高的標題列以外,我們都只使用所有瀏覽器都能正常顯示的宋體。如果要製作標題列圖片,可以用一些嚴肅的、商業化一些的字型。

B 字型大小:14PX,基本沒有多少例外,絕大部分的標題列文字大小都不能低於14PX,有時會更大一些,但是絕大多數情況下都不能小於14PX。曾經一個設計師給我他設計的網頁,我怎麼看都覺得不對,後來才發現,原來他的標題列都是使用12PX加粗的,看起來沒有層次感,每一個內容塊之間區分度不夠。

C 粗細:必須加粗,基本沒有例外。

D 顏色:根據頁面效果圖的顏色而定,文字顏色仍然必須要用與背景有很強對比的顏色。

3 B2B行業網站導航頁“普通內容”連結字型大小、粗細、行距、顏色的一般標準

導航頁一般指網站首頁,一級欄目首頁等頁面,導航頁內絕大部分的內容都有超連結,訪問者根據連結標題尋找自己感興趣的內容,所以內容連結的設計就變的非常重要。

一般標準為:

A 字型大小:12PX,也可以採用13PX,絕大部分時候是12PX。

B 粗細:細體,不加粗。

C 行距:一般是20PX,最高不超過23PX,最低不低於18PX,否則要麼太高,要麼太低。

D 顏色:絕大部分情況為黑色,代碼為:#000000—#333333,為了保護視覺,也有採用灰色的,顏色代碼為#444444或#555555。

4 B2B行業網站導航頁“推薦內容”連結字型大小、粗細、行距、顏色一般標準

為了讓內容有主次之分,將重點的內容,讀者可能感興趣的內容讓讀者優先發現,節省使用者去尋找內容的時間,提高網站黏性,對於資訊、技術文章、部落格、問答等內容,在網站首頁、一級欄目首頁都要有編輯推送的內容,這些推薦內容與普通的內容連結樣式是具有很大不同的。

一般標準為:

A 字型大小:大部分都是14PX,對於某個欄目每天或一段時間重點推薦的一條內容,標題會更大,一般是16PX-20PX。

B 粗細:絕大部分情況下,絕對是加粗的,我曾經見到一個設計師設計的網站,推薦的資訊,雖然字型大小比較大,但是卻沒有加粗,沒有達到引起訪問者重點關注的效果。

C 行距:120%以上,一般為150%,否則字大了,上下的距離太緊了,甚至顯示不完全。

D 顏色:與普通內容連結的顏色一般是不一樣的,使用黑色、紅色、藍色等,為了達到更突出的效果,不僅從字型大小、粗細等角度突出,還會使用更吸引眼球的亮色(紅色、橙色、藍色等顏色)。

5 B2B行業網站列表頁“產品名稱”連結字型大小、粗細、行距、顏色一般標準

在列表頁,產品名稱、公司名稱都會比頁面其他字型顯眼一些,在前面效果圖設計時也講過,主要是針對採購商會優先關注產品名稱,挑選到自己想要的產品,才會進一步去看產品的介紹、產地等詳情,那麼除產品名稱以外的內容就需要弱化。

一般標準為:

A 字型大小:大部分都是14PX,也可為13PX。

B 粗細:加粗。

C 行距:150%。

D 顏色:與輔助內容顏色不一樣,一般不用黑色,用藍色比較多一些。

圖(94) 阿里巴巴產品列表頁

圖(94)為阿里巴巴產品列表頁面截圖,產品名稱字型大小為14PX,藍色,加粗,標題以外的大部分內容都是灰色,弱化了。

[1] [2]  下一頁



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。