您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

淺談電子商務(wù)網(wǎng)站文字設(shè)計(jì)基準(zhǔn)特點(diǎn)

電子商務(wù)行業(yè)網(wǎng)站的設(shè)計(jì),更多的服務(wù)于企業(yè)的交易需求、了解行業(yè)知識(shí)的學(xué)習(xí)需求及交流需求,作者李學(xué)江認(rèn)為,這些需求更多還是要通過(guò)文字來(lái)表達(dá)和傳遞,不同的字號(hào)、顏色、粗細(xì)、行距,代表了產(chǎn)品策劃者、網(wǎng)站設(shè)計(jì)者所期望向網(wǎng)站訪問(wèn)者傳遞的信息。下面來(lái)簡(jiǎn)要講解下在電子商務(wù)行業(yè)網(wǎng)站設(shè)計(jì)制作時(shí)具有的基準(zhǔn)特點(diǎn)。
1 電子商務(wù)行業(yè)網(wǎng)站導(dǎo)航欄文字字體、字號(hào)、粗細(xì)、顏色的一般標(biāo)準(zhǔn)
導(dǎo)航欄是一個(gè)用戶來(lái)到頁(yè)面最先看到的部分,要引導(dǎo)用戶到不同的欄目訪問(wèn),所以文字要力求突出,這個(gè)在前面效果圖設(shè)計(jì)時(shí)也講了。
一般標(biāo)準(zhǔn)為:
A 字體:默認(rèn)字體宋體,導(dǎo)航欄不能采用圖片制作,不利于搜索引擎優(yōu)化,所以只能使用宋體。
B 字號(hào):14PX及以上,由于電子商務(wù)行業(yè)網(wǎng)站的欄目一般不多,大部分不適合像新浪、網(wǎng)易那樣做導(dǎo)航欄,一排欄目,是大部分電子商務(wù)行業(yè)網(wǎng)站設(shè)計(jì)的習(xí)慣。部分也有兩排欄目、三排欄目的,最多2排導(dǎo)航更合理。所以絕大多數(shù)情況下,字號(hào)要大于等于14PX,放二排時(shí)一部分有一級(jí)欄目導(dǎo)航和二級(jí)欄目導(dǎo)航,二級(jí)欄目的字號(hào)可以小一些,最小13PX。
C 粗細(xì):如果導(dǎo)航欄只有一排,絕大部分情況下,都要加粗,如果把一級(jí)欄目和二級(jí)欄目都寫在導(dǎo)航條上,用二排顯示,一般只加粗一級(jí)欄目。
D 顏色:根據(jù)頁(yè)面效果圖來(lái)制作,如果導(dǎo)航欄有背景,文字顏色必須要用與背景有很強(qiáng)對(duì)比的顏色。


 

上圖 華人螺絲網(wǎng)(www.luosi.com)二排導(dǎo)航欄
上面網(wǎng)站二排導(dǎo)航欄,字號(hào)為14PX,一級(jí)導(dǎo)航欄已加粗,重點(diǎn)欄目用了更吸引眼球的橙色,一部分的電子商務(wù)行業(yè)網(wǎng)站也是采用的是這種導(dǎo)航方式。

下圖 醫(yī)藥網(wǎng)(www.pharmnet.com.cn)導(dǎo)航欄



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

下圖為阿里巴巴產(chǎn)品列表頁(yè)面截圖,產(chǎn)品名稱字號(hào)為14PX,藍(lán)色,加粗,標(biāo)題以外的大部分內(nèi)容都是灰色,弱化了。


[教程作者:阿圖]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/di958.html
圖趣網(wǎng)絡(luò)講解網(wǎng)頁(yè)設(shè)計(jì)教程
作為一名設(shè)計(jì)師應(yīng)該如何理解設(shè)計(jì)
×