在長期的網(wǎng)站建設(shè)過程當(dāng)中,漸漸的認(rèn)識(shí)到網(wǎng)頁布局是那么的重要,無論是布局還是設(shè)計(jì),個(gè)性如果獨(dú)特,必然會(huì)讓網(wǎng)站增色不少。對(duì)于如何進(jìn)行網(wǎng)站布局與各種設(shè)計(jì)提一些建議性的意見。
、記住,如果不是特別重要的文字說明,一般情況別輕易讓文字居中和使用粗體或斜體字符。
第二、利用短的段落,加點(diǎn)列示,適當(dāng)?shù)恼麎K引用文字,用水平線分節(jié),用影像地圖指引主要鏈接,使你的頁面能吸引人和容易閱讀。
第三、不要在每一個(gè)頁面里使用不同風(fēng)格的圖標(biāo)。
第四、不必在以頁面上填滿圖像來增加視覺趣味。盡量使用彩色圓點(diǎn)——它們較小并能為列表項(xiàng)增加色彩活力。彩色分隔條也能在不擾亂帶寬的情況下增強(qiáng)圖形感。
第五、對(duì)用作背景的GIF要謹(jǐn)慎。它們可以使一個(gè)頁面看起來很有趣,甚至很專業(yè),但是裝飾背景很容易使文字變得不可辨讀。要把背景做得好,光有顏色對(duì)比是不夠的。背景要么很亮(文字較暗)要么很暗(文字較亮)。如果背景含有圖像,對(duì)比度要較低才不至于過于分散讀者的注意力。
第六、在添加圖片的時(shí)候,即img標(biāo)簽里記得要加上alt標(biāo)記。
第七、也可以在分隔條上使用ALT標(biāo)記,這樣就使得使用基于文本的瀏覽器的讀者能看到一些更有趣的東西,而不只是一條直線。
第八、把重要的內(nèi)容盡量的放在頁首,而不是頁尾,之所以要這樣做,是因?yàn)橐话愕木W(wǎng)站瀏覽者是不會(huì)往下看那么遠(yuǎn)的。
第九、不要讓什么東西看起來象是一個(gè)按鈕卻不起按鈕的作用。
第十、帶有下劃線的文本和元素
很意外地發(fā)現(xiàn)大家近爭先恐后地使用下劃線這種元素。當(dāng)然,能夠在各式各樣設(shè)計(jì)元素中靈活運(yùn)用的下劃線,自然不是設(shè)計(jì)工具默認(rèn)的下劃線效果或者文本鏈接下的那種文本下劃線。
下劃線原本運(yùn)用在文本當(dāng)中,用來強(qiáng)調(diào)內(nèi)容,提醒用戶關(guān)注特定的文本信息。當(dāng)下劃線和不同的元素搭配起來使用的時(shí)候,盡量讓兩者在風(fēng)格和細(xì)節(jié)上保持一致,確保它們?cè)谠O(shè)計(jì)上是無縫而一致的。
讓下劃線看起來是有意為之,但是又不會(huì)造成干擾,這樣的設(shè)計(jì)是成功的。雖然在許多設(shè)計(jì)當(dāng)中,下劃線的加入會(huì)讓文本看起來略顯擁擠,但是實(shí)際上通過留白可以適當(dāng)?shù)鼐徑膺@個(gè)問題。
在下面的案例當(dāng)中,Simon Lee Gallery 和 Hoohaa Design 均是通過下劃線吸引用戶注意到特定的文本。在 Simon Lee Gallery 當(dāng)中,下劃線和小字的搭配讓它們不再顯得單薄,在視覺上更重了。而 Hoohaa Design 中,下劃線則是出于平衡視覺重心的目的來使用的,設(shè)計(jì)師想要突出站點(diǎn)的名稱。
Abel Design Group 這個(gè)網(wǎng)站中,設(shè)計(jì)師并沒有直接采用傳統(tǒng)意義上的下劃線,而是使用橙色的線條置于文本前方,起到了和下劃線相似的功用。
第十一、被遮擋的文本
我們?cè)谔接懺O(shè)計(jì)的時(shí)候,文本的可讀性往往被作為相當(dāng)靠前的一個(gè)標(biāo)準(zhǔn)來提,但是現(xiàn)在要說的設(shè)計(jì)趨勢其實(shí)是和這一規(guī)則相悖的:被遮擋的文字。雖然你不一定會(huì)喜歡,但是確實(shí)有許多近期的設(shè)計(jì)作品會(huì)選擇這樣的設(shè)計(jì)。
當(dāng)然,從技術(shù)層面上來說,有不少設(shè)計(jì)在運(yùn)用這一技巧的時(shí)候并未拿捏太好。有的可能是因?yàn)樽煮w設(shè)計(jì)的原因,有的可能是所選的用來遮擋字體的元素沒有挑選好。這個(gè)中間的度其實(shí)并不好控制,尤其是當(dāng)用來遮擋文本的元素是響應(yīng)式、動(dòng)態(tài)的時(shí)候。遮擋的元素、文本和背景之前要構(gòu)成足夠好的對(duì)比,但是又不能太過突兀,這是許多出問題的設(shè)計(jì)所面臨的狀況。
不過,如果能把遮擋的區(qū)域、遮擋元素和文本的對(duì)比以及運(yùn)動(dòng)的軌跡都設(shè)計(jì)好的話,實(shí)際上所創(chuàng)造的效果是非常醒目的,想要運(yùn)用好文本前景的遮蓋元素,你需要注意下面幾點(diǎn):確保文本中的詞匯足夠常見,易于理解,比如 Root Studio 網(wǎng)站中的單詞 Root、遮蓋元素不會(huì)遮擋太多部分、確保遮擋不會(huì)造成不必要的識(shí)別障礙、使用足夠簡單的字體,不會(huì)因?yàn)樽煮w風(fēng)格和障礙物造成識(shí)別障礙、保持其他部分的設(shè)計(jì)足夠簡單,這樣用戶可以更機(jī)輕松的關(guān)注核心的文本,并且識(shí)別出來。
第十二、經(jīng)典的黑白配色
談到色彩相關(guān)的趨勢的時(shí)候,我們通常會(huì)認(rèn)為色彩能夠反應(yīng)出設(shè)計(jì)者的心緒。黑白配色在這幾年越來越常見,而在過去的這段時(shí)間當(dāng)中出現(xiàn)的越來越多,是因?yàn)樘鞖廪D(zhuǎn)冷設(shè)計(jì)師們的心情都越來越沉郁了么?
當(dāng)然,和以前那種強(qiáng)調(diào)形式感的黑白攝影網(wǎng)站不同,現(xiàn)在的黑白色調(diào)的網(wǎng)站所覆蓋的網(wǎng)站類型更多了,當(dāng)然,在細(xì)節(jié)上可能還會(huì)點(diǎn)綴以其他的色彩,但是總體上是黑白色調(diào)沒跑了。
因?yàn)槿狈ωS富的色彩元素,黑白色調(diào)之下,這些網(wǎng)站所呈現(xiàn)出來的情緒是很接近的。
在單純的黑白配色之下,文本的可讀性往往是設(shè)計(jì)中所碰到的實(shí)際的問題。盡管可用的色彩不多,但是設(shè)計(jì)師可以通過創(chuàng)造一些有趣的東西,來達(dá)到效果。
正如同前面所說的,主要色調(diào)是黑白,這個(gè)時(shí)候適當(dāng)?shù)募尤胍稽c(diǎn)點(diǎn)其他的色彩,比如紅色或者藍(lán)色,一點(diǎn)色彩就能從整個(gè)設(shè)計(jì)當(dāng)中跳脫出來,醒目。
當(dāng)然,黑白之間的過渡色有很多,適當(dāng)?shù)氖褂媚軌蜃屨麄(gè)設(shè)計(jì)更為豐滿。還是一句話,個(gè)性的網(wǎng)頁設(shè)計(jì)與布局,必然為網(wǎng)站建設(shè)增色不少。