淺談電子商務(wù)網(wǎng)站文字設(shè)計基準(zhǔn)特點(diǎn)
電子商務(wù)行業(yè)網(wǎng)站的設(shè)計,更多的服務(wù)于企業(yè)的交易需求、了解行業(yè)知識的學(xué)習(xí)需求及交流需求,作者李學(xué)江認(rèn)為,這些需求更多還是要通過文字來表達(dá)和傳遞,不同的字號、顏色、粗細(xì)、行距,代表了產(chǎn)品策劃者、網(wǎng)站設(shè)計者所期望向網(wǎng)站訪問者傳遞的信息。下面來簡要講解下在電子商務(wù)行業(yè)網(wǎng)站設(shè)計制作時具有的基準(zhǔn)特點(diǎn)。
1 電子商務(wù)行業(yè)網(wǎng)站導(dǎo)航欄文字字體、字號、粗細(xì)、顏色的一般標(biāo)準(zhǔn)
導(dǎo)航欄是一個用戶來到頁面最先看到的部分,要引導(dǎo)用戶到不同的欄目訪問,所以文字要力求突出,這個在前面效果圖設(shè)計時也講了。
一般標(biāo)準(zhǔn)為:
A 字體:默認(rèn)字體宋體,導(dǎo)航欄不能采用圖片制作,不利于搜索引擎優(yōu)化,所以只能使用宋體。
B 字號:14PX及以上,由于電子商務(wù)行業(yè)網(wǎng)站的欄目一般不多,大部分不適合像新浪、網(wǎng)易那樣做導(dǎo)航欄,一排欄目,是大部分電子商務(wù)行業(yè)網(wǎng)站設(shè)計的習(xí)慣。部分也有兩排欄目、三排欄目的,最多2排導(dǎo)航更合理。所以絕大多數(shù)情況下,字號要大于等于14PX,放二排時一部分有一級欄目導(dǎo)航和二級欄目導(dǎo)航,二級欄目的字號可以小一些,最小13PX。
C 粗細(xì):如果導(dǎo)航欄只有一排,絕大部分情況下,都要加粗,如果把一級欄目和二級欄目都寫在導(dǎo)航條上,用二排顯示,一般只加粗一級欄目。
D 顏色:根據(jù)頁面效果圖來制作,如果導(dǎo)航欄有背景,文字顏色必須要用與背景有很強(qiáng)對比的顏色。
上圖 華人螺絲網(wǎng)(www.luosi.com)二排導(dǎo)航欄
上面網(wǎng)站二排導(dǎo)航欄,字號為14PX,一級導(dǎo)航欄已加粗,重點(diǎn)欄目用了更吸引眼球的橙色,一部分的電子商務(wù)行業(yè)網(wǎng)站也是采用的是這種導(dǎo)航方式。
下圖 醫(yī)藥網(wǎng)(www.pharmnet.com.cn)導(dǎo)航欄
上面網(wǎng)站的導(dǎo)航欄,字號為14PX,加粗,顏色為與背景色對比很強(qiáng)的白色,重點(diǎn)欄目變色顯示,這樣的導(dǎo)航方式是絕大部分電子商務(wù)行業(yè)網(wǎng)站采用的方式。
2 電子商務(wù)行業(yè)網(wǎng)站標(biāo)題欄文字字體、字號、粗細(xì)、顏色的一般標(biāo)準(zhǔn)
標(biāo)題欄是一個頁面框架設(shè)計中最重要的部分,也是需要設(shè)計最多的地方,我們設(shè)計一個頁面,除了內(nèi)容設(shè)計,基本都是在設(shè)計標(biāo)題欄,在頁面效果圖設(shè)計部分也講的很詳細(xì)了,這里從標(biāo)題欄上的文字入手,精確到字體、字號、粗細(xì)、顏色來簡要講解。
一般標(biāo)準(zhǔn)為:
A 字體:大部分時候都默認(rèn)為宋體,因?yàn)楝F(xiàn)在設(shè)計網(wǎng)頁,大家都喜歡在標(biāo)題欄的文字上加鏈接,直接鏈接到二級或一級欄目的更多內(nèi)容,文字都不是圖片表達(dá)的,有的也用CSS來設(shè)計一些效果。所以除了一些對效果要求比較高的標(biāo)題欄以外,我們都只使用所有瀏覽器都能正常顯示的宋體。如果要制作標(biāo)題欄圖片,可以用一些嚴(yán)肅的、商業(yè)化一些的字體。
B 字號:14PX,基本沒有多少例外,絕大部分的標(biāo)題欄文字大小都不能低于14PX,有時會更大一些,但是絕大多數(shù)情況下都不能小于14PX。曾經(jīng)一個設(shè)計師給我他設(shè)計的網(wǎng)頁,我怎么看都覺得不對,后來才發(fā)現(xiàn),原來他的標(biāo)題欄都是使用12PX加粗的,看起來沒有層次感,每一個內(nèi)容塊之間區(qū)分度不夠。
C 粗細(xì):必須加粗,基本沒有例外。
D 顏色:根據(jù)頁面效果圖的顏色而定,文字顏色仍然必須要用與背景有很強(qiáng)對比的顏色。
3 電子商務(wù)行業(yè)網(wǎng)站導(dǎo)航頁“普通內(nèi)容”鏈接字號、粗細(xì)、行距、顏色的一般標(biāo)準(zhǔn)
導(dǎo)航頁一般指網(wǎng)站首頁,一級欄目首頁等頁面,導(dǎo)航頁內(nèi)絕大部分的內(nèi)容都有超鏈接,訪問者根據(jù)鏈接標(biāo)題尋找自己感興趣的內(nèi)容,所以內(nèi)容鏈接的設(shè)計就變的非常重要。
一般標(biāo)準(zhǔn)為:
A 字號:12PX,也可以采用13PX,絕大部分時候是12PX。
B 粗細(xì):細(xì)體,不加粗。
C 行距:一般是20PX,最高不超過23PX,最低不低于18PX,否則要么太高,要么太低。
D 顏色:絕大部分情況為黑色,代碼為:#000000—#333333,為了保護(hù)視覺,也有采用灰色的,顏色代碼為#444444或#555555。
4 電子商務(wù)行業(yè)網(wǎng)站導(dǎo)航頁“推薦內(nèi)容”鏈接字號、粗細(xì)、行距、顏色一般標(biāo)準(zhǔn)
為了讓內(nèi)容有主次之分,將重點(diǎn)的內(nèi)容,讀者可能感興趣的內(nèi)容讓讀者優(yōu)先發(fā)現(xiàn),節(jié)省用戶去尋找內(nèi)容的時間,提高網(wǎng)站黏性,對于資訊、技術(shù)文章、博客、問答等內(nèi)容,在網(wǎng)站首頁、一級欄目首頁都要有編輯推送的內(nèi)容,這些推薦內(nèi)容與普通的內(nèi)容鏈接樣式是具有很大不同的。
一般標(biāo)準(zhǔn)為:
A 字號:大部分都是14PX,對于某個欄目每天或一段時間重點(diǎn)推薦的一條內(nèi)容,標(biāo)題會更大,一般是16PX-20PX。
B 粗細(xì):絕大部分情況下,絕對是加粗的,我曾經(jīng)見到一個設(shè)計師設(shè)計的網(wǎng)站,推薦的資訊,雖然字號比較大,但是卻沒有加粗,沒有達(dá)到引起訪問者重點(diǎn)關(guān)注的效果。
C 行距:120%以上,一般為150%,否則字大了,上下的距離太緊了,甚至顯示不完全。
D 顏色:與普通內(nèi)容鏈接的顏色一般是不一樣的,使用黑色、紅色、藍(lán)色等,為了達(dá)到更突出的效果,不僅從字號、粗細(xì)等角度突出,還會使用更吸引眼球的亮色(紅色、橙色、藍(lán)色等顏色)。
5 電子商務(wù)行業(yè)網(wǎng)站列表頁“產(chǎn)品名稱”鏈接字號、粗細(xì)、行距、顏色一般標(biāo)準(zhǔn)
在列表頁,產(chǎn)品名稱、公司名稱都會比頁面其他字體顯眼一些,在前面效果圖設(shè)計時也講過,主要是針對采購商會優(yōu)先關(guān)注產(chǎn)品名稱,挑選到自己想要的產(chǎn)品,才會進(jìn)一步去看產(chǎn)品的介紹、產(chǎn)地等詳情,那么除產(chǎn)品名稱以外的內(nèi)容就需要弱化。
一般標(biāo)準(zhǔn)為:
A 字號:大部分都是14PX,也可為13PX。
B 粗細(xì):加粗。
C 行距:150%。
D 顏色:與輔助內(nèi)容顏色不一樣,一般不用黑色,用藍(lán)色比較多一些。
下圖為阿里巴巴產(chǎn)品列表頁面截圖,產(chǎn)品名稱字號為14PX,藍(lán)色,加粗,標(biāo)題以外的大部分內(nèi)容都是灰色,弱化了。
本文地址:http://m.likemindfilms.com/tutorial/di958.html