1 標(biāo)題及重點(diǎn)突出內(nèi)容設(shè)計(jì)一般標(biāo)準(zhǔn)
瀏覽者來(lái)到網(wǎng)站,會(huì)試圖找出他們需要的東西。再次重復(fù),用戶(hù)并不一定是來(lái)閱讀的,他們是來(lái)做他們想做的事情,每個(gè)人的目的不一定相同,網(wǎng)站要節(jié)省他們的時(shí)間并且突出優(yōu)質(zhì)內(nèi)容來(lái)吸引每個(gè)用戶(hù)的注意力,從而讓他們更加便于在幾秒鐘內(nèi)掃描整個(gè)頁(yè)面。用戶(hù)只有在這幾秒內(nèi)掃描并發(fā)現(xiàn)他們想要的東西,才會(huì)繼續(xù)在你的網(wǎng)站上停留更長(zhǎng)的時(shí)間。所以對(duì)于B2B行業(yè)網(wǎng)站的首頁(yè)、一級(jí)欄目首頁(yè)等導(dǎo)航頁(yè)面來(lái)講,焦點(diǎn)內(nèi)容就是推薦內(nèi)容標(biāo)題,信息分類(lèi)名稱(chēng),信息圖片等幾個(gè)方面。使焦點(diǎn)內(nèi)容更突出的方法有很多,下面來(lái)詳細(xì)講解。
(1) 文字加粗
無(wú)論什么內(nèi)容,只要我們將少部分的內(nèi)容加粗,將大部分不加粗,那么加粗的內(nèi)容肯定就會(huì)非常突出,這個(gè)是常用的制造焦點(diǎn)內(nèi)容的方法。在一個(gè)頁(yè)面上我們會(huì)見(jiàn)到很多加粗的文字,這些加粗的文字就會(huì)是焦點(diǎn)內(nèi)容的一個(gè)部分,推薦的鏈接內(nèi)容標(biāo)題、主要分類(lèi)名稱(chēng)等經(jīng)常使用。這個(gè)是頁(yè)面設(shè)計(jì)時(shí)創(chuàng)造焦點(diǎn)內(nèi)容的主要方法。
(2) 字號(hào)變大
這個(gè)方法與文字加粗一樣,屬于設(shè)計(jì)焦點(diǎn)內(nèi)容的常用方法,對(duì)于最重點(diǎn)的內(nèi)容,通常都是既加粗,字號(hào)又變大。同樣是推薦鏈接內(nèi)容標(biāo)題、主要分類(lèi)名稱(chēng)等經(jīng)常使用的。
(3) 文字變顏色
一般字號(hào)變大、字體加粗,也會(huì)與變顏色同時(shí)出現(xiàn),更加突出,但是變顏色也會(huì)出現(xiàn)在一些次突出內(nèi)容上出現(xiàn),只變顏色,不加粗,不變大字體。
圖(69) 阿里巴巴產(chǎn)品列表頁(yè)截圖
如圖(69)所示,首先產(chǎn)品名稱(chēng),是最重要的,用戶(hù)將通過(guò)名稱(chēng)看是否是自己感興趣的產(chǎn)品,所以阿里的設(shè)計(jì)師采用了最突出的做法,既變顏色,又增大字體,還加粗。公司名字是第二個(gè)需要突出的,在這里只采用了變顏色,如果又加粗的話,就會(huì)使頁(yè)面看起來(lái)很累,突出的內(nèi)容太多了,就沒(méi)有突出了。同時(shí)標(biāo)題下面為產(chǎn)品的導(dǎo)讀,將產(chǎn)品的參數(shù)表示出來(lái),當(dāng)訪問(wèn)者通過(guò)掃描對(duì)某個(gè)產(chǎn)品感興趣了,就可能進(jìn)一步看產(chǎn)品的介紹,屬于掃描到感興趣內(nèi)容后的第二步動(dòng)作,所以在頁(yè)面上,要弱化,設(shè)計(jì)師采用了灰色,以及地區(qū)、起訂量等都是灰色。搜索出來(lái)的產(chǎn)品都很類(lèi)似,價(jià)格的比較就變的很重要,所以?xún)r(jià)格采用了瀏覽者眼球最關(guān)注的顏色:紅色。正如我在之前文章里講的,要研究電子商務(wù)網(wǎng)站的設(shè)計(jì),阿里巴巴是最重要的研究對(duì)象。
(4) 文字配圖片
為了突出某個(gè)內(nèi)容,我們常常配個(gè)圖片,吸引用戶(hù)的眼球,當(dāng)然有時(shí)是這個(gè)內(nèi)容本身就包含圖片,但是更多的時(shí)候我們會(huì)配個(gè)圖標(biāo)、按鈕、小圖片,為了突出這個(gè)內(nèi)容,與周?chē)膬?nèi)容區(qū)別開(kāi)來(lái)。
(5) 四周留空白
為了突出某個(gè)內(nèi)容,我們常采用把這個(gè)內(nèi)容的四周留白,這也是突出這個(gè)內(nèi)容的方法,這種方法常常與加粗、字體變大、變顏色等一起使用。
(6) 為內(nèi)容加導(dǎo)讀
加導(dǎo)讀的方法,除了讓用戶(hù)增加對(duì)突出內(nèi)容有更多的了解,吸引用戶(hù)點(diǎn)擊,還從視覺(jué)上讓用戶(hù)覺(jué)得這個(gè)內(nèi)容相比其他信息占的空間更多,習(xí)慣上認(rèn)為這個(gè)信息更加重要,突出這個(gè)部分的內(nèi)容。
2 內(nèi)容鏈接設(shè)計(jì)一般標(biāo)準(zhǔn)
網(wǎng)站內(nèi)容鏈接要遵守用戶(hù)習(xí)慣,讓用戶(hù)看著就像一個(gè)鏈接,想去點(diǎn)擊。鏈接設(shè)計(jì)也是網(wǎng)站設(shè)計(jì)與平面設(shè)計(jì)最大的區(qū)別之一。一般的設(shè)計(jì)師對(duì)鏈接都能處理好,但是仍然有一些網(wǎng)站在這方面經(jīng)常犯一些錯(cuò)誤,也許各位讀者覺(jué)得這些錯(cuò)誤太低級(jí),但是據(jù)我看過(guò)的一些做的不好的網(wǎng)站,他們?cè)阪溄釉O(shè)計(jì)上存在如下的問(wèn)題。
(1)重要鏈接放圖片上
網(wǎng)站大部分的鏈接都應(yīng)該使用文字,尤其是內(nèi)容的鏈接,盡量減少對(duì)圖片做鏈接,不僅對(duì)搜索引擎優(yōu)化不利,而且用戶(hù)使用時(shí)更習(xí)慣點(diǎn)文字鏈接。
(2)鼠標(biāo)放鏈接上時(shí)文字顏色無(wú)變化
鼠標(biāo)放鏈接上時(shí)文字顏色變化是一個(gè)習(xí)慣用法,幾乎所有主流網(wǎng)站,當(dāng)鼠標(biāo)經(jīng)過(guò)鏈接時(shí),都會(huì)變顏色,目的是讓用戶(hù)更清楚的知道,他準(zhǔn)備點(diǎn)擊的是那個(gè)具體的內(nèi)容。如果鏈接顯示的時(shí)候沒(méi)有加下劃線,鼠標(biāo)放上去后必須要加下劃線。
(3)鏈接文字之間行距太小,看起來(lái)很累
鏈接與鏈接之間,要有一定的行距,一般字號(hào)在12PX-13PX之間,行距在25-30象素之間,行距太高,太粗糙,行距太低,看起來(lái)太累,這些都一定要符合標(biāo)準(zhǔn),常用的行距是:150%。
(4)鏈接的背景顏色很深
一般導(dǎo)航頁(yè)面鏈接背景都是白色,為了使看起來(lái)不累或美觀,可以用淺灰色的背景,或很淺的其他顏色作為背景,背景顏色不能對(duì)閱讀鏈接內(nèi)容造成視覺(jué)噪聲,干擾用戶(hù)的視線。
3 網(wǎng)站內(nèi)容圖片設(shè)計(jì)一般標(biāo)準(zhǔn)
在網(wǎng)站導(dǎo)航頁(yè)面里,圖片分為兩種情況,正如在《B2B行業(yè)門(mén)戶(hù)網(wǎng)站設(shè)計(jì)開(kāi)發(fā)實(shí)戰(zhàn)研究報(bào)告》里所講的,一種情況是圖片作為文字的點(diǎn)綴,讓文字內(nèi)容更突出,更具有可讀性;另一種情況是圖片就是內(nèi)容,產(chǎn)品圖片、新聞圖片、人物頭像等。這兩種情況對(duì)圖片設(shè)計(jì)的要求是不一樣的。
(1)作為點(diǎn)綴或類(lèi)似按鈕的小圖片
這類(lèi)圖片重要的一點(diǎn)就是要精致,使用的顏色一定要符合最新的設(shè)計(jì)潮流,要更多使用漸變顏色,可以參考很多大門(mén)戶(hù)網(wǎng)站的小圖片,可以直接抄過(guò)來(lái)使用,或者在一些專(zhuān)門(mén)的小圖標(biāo)收集網(wǎng)站去找,然后修改下,就可以使用。
(2)產(chǎn)品圖片、新聞圖片及人物頭像
在設(shè)計(jì)時(shí),我們常常會(huì)涉及內(nèi)容圖片,這類(lèi)圖片尺寸不能太大,否則顯得太粗糙,也不能太小,太小就不顯眼,圖片周?chē)形淖终f(shuō)明,不能只有圖片,沒(méi)有文字說(shuō)明。
(3)圖片清晰、不變形是最基本的要求,也是必須的
我們?cè)O(shè)計(jì)時(shí)使用的所有的圖片、圖標(biāo),一定要清晰,見(jiàn)過(guò)很多設(shè)計(jì)太差的網(wǎng)站,按鈕是變形的,有的圖標(biāo)也是變形的,用戶(hù)上傳的產(chǎn)品圖片有的也是變形的,這個(gè)在網(wǎng)站設(shè)計(jì)中是絕對(duì)不允許出現(xiàn)的。圖片尺寸要符合圖片本身的特點(diǎn),比如服裝款式圖片、人的頭像,高度就一定要比寬度大,見(jiàn)過(guò)很多網(wǎng)站設(shè)計(jì)的人物頭像,居然寬度比高度長(zhǎng)。
4 導(dǎo)航頁(yè)輔助內(nèi)容設(shè)計(jì)一般標(biāo)準(zhǔn)
比如資訊導(dǎo)航頁(yè)面重點(diǎn)推薦內(nèi)容的導(dǎo)讀,產(chǎn)品列表頁(yè)面產(chǎn)品導(dǎo)讀、產(chǎn)品參數(shù)等,在本研究報(bào)告,我都?xì)w納為輔助內(nèi)容。這些內(nèi)容設(shè)計(jì)時(shí)要用灰色,字要更小一些,行距要低一些,主要就是不能影響重點(diǎn)內(nèi)容,使頁(yè)面看起來(lái)更有層次感,主次分明。用戶(hù)也是在掃描整個(gè)頁(yè)面,找到重要內(nèi)容的時(shí)候,再去閱讀輔助內(nèi)容。
長(zhǎng)沙科聯(lián)環(huán)?萍加邢薰
長(zhǎng)沙科聯(lián)環(huán)?萍加邢薰咀溆趪(guó)家級(jí)長(zhǎng)沙經(jīng)濟(jì)技術(shù)開(kāi)發(fā)區(qū),星沙工業(yè)園、我們以“科技創(chuàng)新,聯(lián)合共...南京尚上防腐木
南京尚上防腐木是一家專(zhuān)業(yè)致力于加工、制作、銷(xiāo)售戶(hù)外景觀防腐木,并為客戶(hù)設(shè)計(jì)安裝一站式服務(wù)的現(xiàn)...長(zhǎng)沙昱霆機(jī)電有限公司
長(zhǎng)沙昱霆機(jī)電有限公司是長(zhǎng)沙空壓機(jī)_長(zhǎng)沙空壓機(jī)保養(yǎng)_湖南空壓機(jī)維修_長(zhǎng)沙空壓機(jī)機(jī)頭維修-長(zhǎng)沙昱...湖南省土地學(xué)會(huì),湖南土地學(xué)會(huì),湖南土地學(xué)會(huì)官網(wǎng)
湖南省土地學(xué)會(huì)是全省土地科技工作者自愿組成,并依法登記的學(xué)術(shù)性、非盈利性、公益性的法人社會(huì)團(tuán)...湖南為美環(huán)保技術(shù)有限公司,醫(yī)療污水凈化機(jī)組...
湖南為美環(huán)保技術(shù)有限公司應(yīng)“綠水青山就是金山銀山”之勢(shì)而生,秉持“為民環(huán)保,美麗干凈”理想信...長(zhǎng)沙租車(chē)公司-長(zhǎng)沙鑫晨租車(chē)
長(zhǎng)沙鑫晨租車(chē)(長(zhǎng)沙租車(chē)網(wǎng))于2008年,已精工細(xì)作多年,F(xiàn)以成為長(zhǎng)沙地區(qū)較早的租車(chē)公司之一。...聯(lián)系方式
地址:湖南省長(zhǎng)沙市天心區(qū)韶山南路248號(hào)南園503室
電話:13637482004 0731-88571521
網(wǎng)址:http:///
郵箱:123@123007.com
微信咨詢(xún)
掃一掃進(jìn)移動(dòng)端