網(wǎng)站制作中正確使用留白的好處
所謂留白,有時(shí)也稱作負(fù)空間,兩者是同一個(gè)概念。盡管這個(gè)術(shù)語(yǔ)尤其指留“白”,但它所指的區(qū)域并不一定要是白色的。它只是網(wǎng)站制作布局中環(huán)繞各元素的空白空間。這樣的空間體現(xiàn)為多種不同形式,例如圖片、圖表、縫隙、外邊距、列甚至一行行文字之間的空間。盡管它似乎“空無一物”,里面沒有任何其他設(shè)計(jì)元素占據(jù)一席之地,但我們不應(yīng)該如此看待它。視之為“無物”,也許打造美感與表現(xiàn)力的機(jī)會(huì)就流失了。處理得當(dāng)?shù)脑?,留白確實(shí)可以為網(wǎng)站制作設(shè)計(jì)帶來大量的益處。不應(yīng)減少網(wǎng)站制作設(shè)計(jì)中的留白,相反,應(yīng)該增加網(wǎng)站制作中的負(fù)空間。一些知名的大眾品牌已經(jīng)在朝這個(gè)方向前進(jìn),更多的設(shè)計(jì)師們也在追隨他們的腳步。
更多的留白,等同于更奢華的品牌與網(wǎng)站
客戶往往要求設(shè)計(jì)師盡可能用盡網(wǎng)站制作里的空間,因?yàn)榫W(wǎng)站制作中的空間是昂貴的,只有有限的屏幕來展示信息。無論如何,反其道而行之——增加留白——促使設(shè)計(jì)師在更嚴(yán)格約束的空間中,打造更加光鮮的品牌信息。
另外,大家會(huì)覺得,留白更多的網(wǎng)站,它的內(nèi)容比屏幕空間更重要。所以,品牌也顯得更盡奢華,因?yàn)樗鼱奚烁嗥聊豢臻g,反而將焦點(diǎn)匯聚在內(nèi)容信息上。奢華的品牌了解這層隱喻,通常都使用更多留白來達(dá)到這一確切效果。
留白提升搜索流暢度
兩大搜索引擎Google和Yahoo Search,詮釋了留白簡(jiǎn)潔有效,這個(gè)簡(jiǎn)單的例子再適合不過了。Google準(zhǔn)確地理解了一點(diǎn),正在搜索某個(gè)話題的用戶,不想被嘈雜的背景和廣告分散注意力。因此,留白支配了整個(gè)Google搜索引擎頁(yè)面,實(shí)際搜索框只占據(jù)頁(yè)面中央窄窄一絲空間。類似的,Yahoo搜索也體現(xiàn)了使用留白的妙處。雖然這個(gè)頁(yè)面頂部有長(zhǎng)長(zhǎng)一條菜單欄,理念還是相同的:大量的留白,使用戶專注于搜索,別無他物。
可讀性和易讀性得到應(yīng)有的大幅提升
用好留白,任何網(wǎng)站的可讀性與易讀性都會(huì)得到改善。如果一個(gè)頁(yè)面上的文字過于擁擠,它就會(huì)妨礙舒適的閱讀體驗(yàn),從而阻礙整體用戶體驗(yàn)。更多的留白使文字更易瀏覽,從而提升閱讀體驗(yàn),也更易理解。
留白也可以用于不同內(nèi)容區(qū)塊之間,不只是為了提升閱讀體驗(yàn),也為了將內(nèi)容分隔成不同部分,使得信息的吸收更加專注。
它讓顏色更鮮明
也許留白最直接,盡管也是最簡(jiǎn)單的益處,就是突出網(wǎng)站制作中的其他色彩,使它們更加鮮艷。這點(diǎn)對(duì)于吸引訪客目光大有幫助,因?yàn)轭伾顪\、飽和度甚至濃度都更加突出。
留白不是浪費(fèi)空間
網(wǎng)站制作設(shè)計(jì)師們?cè)絹碓蕉鄴仐壷暗恼`解——認(rèn)為設(shè)計(jì)頁(yè)面時(shí)應(yīng)該盡可能在屏幕內(nèi)填塞每個(gè)元素、每種顏色。正如上面所說,留白被用于突出品牌內(nèi)容、提升可讀性與易讀性、突顯極簡(jiǎn)色彩時(shí),展現(xiàn)出了強(qiáng)大的影響力。
俗話說“少即是多”,不論怎么看,它都適用于關(guān)于留白的一切觀點(diǎn)。廣義上講,網(wǎng)站制作設(shè)計(jì)中的這種極簡(jiǎn)處理方式,如今正越來越盛行,這項(xiàng)趨勢(shì)肯定能持續(xù)下去。
設(shè)計(jì)出簡(jiǎn)約風(fēng)格網(wǎng)站制作的5個(gè)方法
簡(jiǎn)約設(shè)計(jì)是將設(shè)計(jì)回歸本質(zhì)的一種設(shè)計(jì)理念。簡(jiǎn)約并非是對(duì)內(nèi)容的簡(jiǎn)單刪減,而是提煉設(shè)計(jì)精華,滿足美觀實(shí)用的本質(zhì)訴求。在網(wǎng)站制作中,簡(jiǎn)約的設(shè)計(jì),往往具有清晰的頁(yè)面結(jié)構(gòu)、簡(jiǎn)單的交互操作等特征,在滿足傳遞信息的同時(shí),從視覺體驗(yàn)的角度,為用戶帶來輕松、愉悅的美感。
那么在網(wǎng)站制作中,怎樣做到簡(jiǎn)約呢?
一、大標(biāo)題
將大標(biāo)題作為網(wǎng)站制作的視覺中心,簡(jiǎn)潔圖片作為大標(biāo)題的背景,這樣很容易將視覺聚焦,讓人一眼就能看出這個(gè)網(wǎng)站制作是做什么的。另外,大標(biāo)題在字體和色彩上,也盡量選擇一些簡(jiǎn)單的、顏色單一的效果,這樣視覺會(huì)更純粹。
二、大背景
大圖片背景,是目前應(yīng)用最多的一種網(wǎng)站制作呈現(xiàn)方式。將整張大圖片作為背景,不僅能產(chǎn)生強(qiáng)烈的視覺沖擊力,還可以對(duì)網(wǎng)站制作內(nèi)容起到一個(gè)很好的補(bǔ)充,有效的突出品牌形象。
三、留白
留白,是頁(yè)面構(gòu)圖的重要組成部分,適當(dāng)?shù)募尤肓舭?,能讓文字便于閱讀,讓頁(yè)面各元素得到很好的區(qū)分,這樣的設(shè)計(jì)通俗易懂,有得于提升一個(gè)頁(yè)面的品質(zhì)感。
四、單純色彩
一個(gè)頁(yè)面,給人帶來第一印象的往往是它的色彩。不同的顏色帶給人不同的心理感受。當(dāng)我們看慣色彩絢麗、對(duì)比鮮明的網(wǎng)站制作之后,靜下來,回歸最自然的狀態(tài),運(yùn)用單純的色彩,會(huì)有不一樣的體會(huì)和感悟。
五、“纖薄”文本框和銨鈕
在頁(yè)面中,將文本框或者銨鈕做得輕薄簡(jiǎn)潔,或?yàn)榧兩蛘邲]有紋理的一層薄線框。這種設(shè)計(jì)在確保功能性的同時(shí),給人一種纖細(xì)的視覺美感。
寫在最后
網(wǎng)站制作中的簡(jiǎn)約,表現(xiàn)形式還很多,通常多種結(jié)合起來使用,這里就不一一說明了。想要做到簡(jiǎn)約,并不是一件簡(jiǎn)單的事情,它需要我們用心去發(fā)現(xiàn)、感受、割舍、提煉,從視覺體驗(yàn)的角度去感受網(wǎng)站制作的簡(jiǎn)約之美,把信息更合理、更有效的傳遞給用戶,給用戶帶來輕松、實(shí)用、愉悅的體驗(yàn)。
適合網(wǎng)站制作設(shè)計(jì)新手的10條設(shè)計(jì)法則
一、糾結(jié)的時(shí)候,讓自然為你做決定!
遵循自然規(guī)律的設(shè)計(jì)總是因?yàn)橘N近萬(wàn)物本源而受到更多人的寵愛,因此,當(dāng)你舉棋不定的時(shí)候,你可以選擇將設(shè)計(jì)代入大自然定律中,讓自然為你做出最好的決定。比如,現(xiàn)實(shí)和自然告訴我們,光源來自天空,在人們也已經(jīng)習(xí)慣了這種由上至下光線來源的時(shí)候,設(shè)計(jì)師需要做的應(yīng)該是能順應(yīng)用戶視線的光線設(shè)計(jì)。
二、脫離色彩誘惑,能真正看清布局設(shè)計(jì)
色彩對(duì)人類視覺的沖擊力能產(chǎn)生最大的效果;一個(gè)網(wǎng)站制作的用戶體驗(yàn)是否合格,從色彩和布局上就能看出一二。但在色彩的“陪同”下,布局的好壞與否似乎就此被“矮化”。為了讓設(shè)計(jì)師在設(shè)計(jì)時(shí)能更加清楚的審視網(wǎng)站制作布局,去色或是“灰度模式”的使用也許更有利于新手的布局設(shè)計(jì)工作。
三、設(shè)計(jì)感是“留”出來的!
大膽留白是設(shè)計(jì)概念中常常會(huì)提到的理論,但真正能根據(jù)理論具體落實(shí)的設(shè)計(jì)師卻為數(shù)不多??赡苁且?yàn)樵O(shè)計(jì)師膽兒不夠大,另一種可能是沒有在實(shí)際中領(lǐng)會(huì)到留白的美妙。
網(wǎng)站制作設(shè)計(jì)中的留白是為了在有限的容量中預(yù)留一些讓其中元素呼吸的負(fù)空間,并不是一種所謂的“偷懶”行為。大片留白在國(guó)內(nèi)市場(chǎng)中極有可能面對(duì)各種不滿,但小范圍的留白卻能很有效的提高整個(gè)網(wǎng)站制作的檔次。比如網(wǎng)站制作中圖片與字句之間的間距,只要留出兩倍及以上的間隙,整體都會(huì)展現(xiàn)出令人眼前一亮的簡(jiǎn)潔感。
四、試試把文字直接放在圖片上
這種設(shè)計(jì)手法看起來很簡(jiǎn)單是不是?但要用這種方法設(shè)計(jì)出一鳴驚人的網(wǎng)站就有一定難度了。在應(yīng)用過程中,為了不破壞網(wǎng)站的用戶體驗(yàn),有幾點(diǎn)可以特別關(guān)注。
文字的顏色盡量使用白色,讓網(wǎng)站制作看起來更大氣;因此,網(wǎng)站制作背景圖的色系選擇以暗色為主;更細(xì)致的話可以再不同的分辨率下進(jìn)行調(diào)試,保證在所有的情況下文字或主要內(nèi)容都是易于辨識(shí)的。
五、關(guān)于字體,適合比新穎更重要!
“堅(jiān)定求新”是很多設(shè)計(jì)師的職業(yè)病,其實(shí),在任何事件中,適合,比什么都重要!
在網(wǎng)站制作字體的應(yīng)用中,形形色色的字體樣式會(huì)讓設(shè)計(jì)師不知如何是好,設(shè)計(jì)師也許會(huì)因此挑花了眼,也許會(huì)始終在常用的幾種字體中互相轉(zhuǎn)換。而關(guān)于字體的選擇,設(shè)計(jì)師應(yīng)該根據(jù)圖片中的某些元素作為靈感,以此在網(wǎng)站制作中自然地形成隱形線索。
六、只有強(qiáng)弱并存才會(huì)獲得對(duì)比
用強(qiáng)弱的對(duì)比展現(xiàn)重點(diǎn)突出是設(shè)計(jì)中強(qiáng)調(diào)內(nèi)容最自然的方式。比如背景圖的弱化,加上清晰的文字或圖案,網(wǎng)站制作會(huì)因此營(yíng)造出以后總別致的唯美效果。如果圖片比較單調(diào),也可以在背景和文字的中間添加一些透明度較高的線性幾何成分,讓頁(yè)面豐富充實(shí)起來,也讓整體不再單薄。
七、你需要一雙善于發(fā)現(xiàn)的眼睛
身邊的一切都可能隨時(shí)為你帶來靈感,千萬(wàn)別吝嗇你的眼睛!
每一個(gè)細(xì)小的部分都有資格成為你的設(shè)計(jì)元素,你應(yīng)該讓它們產(chǎn)生一些小改變,它們就會(huì)讓你的設(shè)計(jì)大提升。濾鏡?幾何?每一種效果都需要你的嘗試。
八、桃紅色&淺橙色!她們才是真正的百搭色!
粉嫩的暖色系色彩一直會(huì)被誤認(rèn)為是很難用的顏色,當(dāng)這類色彩被混雜在五顏六色的“調(diào)色盤”中的確夠難搭配,那不妨嘗試一下在單色背景中使用她們,無論是稍作點(diǎn)綴,還是設(shè)置為主色調(diào),你都一定會(huì)發(fā)現(xiàn)其中的不張揚(yáng)魅力。
九、導(dǎo)航是網(wǎng)站制作中最重要的設(shè)計(jì)
導(dǎo)航可以說是整個(gè)網(wǎng)站中最重要的設(shè)計(jì),用戶體驗(yàn)舒適與否很大的決定權(quán)源自于此。對(duì)導(dǎo)航設(shè)計(jì)的最佳評(píng)價(jià)應(yīng)該是“召之即來,揮之即去”。幽靈按鈕、漢堡圖標(biāo)和無線框純文字設(shè)計(jì)都是好導(dǎo)航的常用設(shè)計(jì)手法。
十、減去頁(yè)面之間的相同存在!
相同的部分在網(wǎng)站制作設(shè)計(jì)中顯得毫無意義,不僅讓網(wǎng)站制作邏輯變得繁雜瑣碎,更會(huì)讓用戶覺得反感。尤其在布局一致的情況下,內(nèi)容的差異化尤為重要。這些差異化可以從很多方面表現(xiàn)出來,比如色彩、文字、風(fēng)格等等。