Banner在網(wǎng)頁(yè)設計中是最吸引眼球的亮點(diǎn),如何通過(guò)Banner來(lái)傳遞更多的信息,如何利用Banner把網(wǎng)站展現的更為美觀(guān),這就考驗設計師的功力了,今天鄭州網(wǎng)站建設開(kāi)拓者科技跟大家分享一下網(wǎng)站建設中Banner圖中英文字體的設計。希望對大家在鄭州做網(wǎng)站時(shí)有所幫助。
Banner的傳達方式 [TOPIC]
針對網(wǎng)站中的banner
Banner的本身形狀:形狀決定了其固定的構成方式,一般為矩形,橫幅,左右結構和居中;
Banner的文字特點(diǎn):主題式,一般分為主標題和副標題,文字較多;設計的時(shí)候還需要考慮應用到網(wǎng)站各種尺寸推廣圖的可讀延伸性。
Banner的圖像特點(diǎn):輔助主題,增加文字的渲染力。
Banner的傳達行為方式:載體為電腦屏幕,IE瀏覽器的第一屏位置,用戶(hù)眼睛焦點(diǎn)停留時(shí)間約3秒以上。
[由于banner一般用于專(zhuān)題類(lèi)網(wǎng)站,在門(mén)戶(hù)網(wǎng)站的二級頁(yè)面,用戶(hù)進(jìn)來(lái)之前,在首頁(yè)已經(jīng)對主題有一定的了解和認識,所以banner的作用是在二級頁(yè)面中起到包裝頁(yè)面的同時(shí)增加內容的趣味度和內容方向引導;所以這也是和傳統廣告中普遍要求第一感官視覺(jué)沖擊力來(lái)強奸眼球所不同的地方。]
文字在banner中的重要性
對于文字,我們常常聽(tīng)到需求方提出:“字要大!”
“???還要大?已經(jīng)很大了!“ 然后很無(wú)奈的拉大一點(diǎn),其實(shí)我們都知道大那么幾個(gè)像素沒(méi)有意義;
但細心想想,需求方要的真的只是那么一丁點(diǎn)的追求么?畢竟他們不是設計師,不懂得如何表達自己的想法,而唯一可以讓們覺(jué)得顯眼的方式只有大小的區別而已,或許是因為,字不夠顯眼,字的處理太普通,背景太搶眼之類(lèi)的,或許,我們應該理解為:“字要顯眼一點(diǎn)“,而”顯眼“的方式卻有很多種。
Banner=文字+圖像[輔助]
Banner上的文字一般都占據了整個(gè)banner的70%的區域,而實(shí)際圖像只占不到30%,往往很多的設計師更專(zhuān)注于那30%的圖像設計,忽視了最重要的70%文字區域,最后只用系統字草草拼湊了之,試問(wèn)這樣的一個(gè)banner的設計合理么?
尤其當主題被延伸應用到小尺寸推廣圖的時(shí)候,只剩下放文字的區域時(shí),這個(gè)推廣圖算是徹底完蛋了。
中文字和英文字母的屬性區別
中文字與英文字母的區別,字母是一種純粹發(fā)音符號,每個(gè)字母本身并沒(méi)有意義,單詞的意義來(lái)自于這些字母之間的橫向串式組合,而漢字的組字方式是以象形為原始基礎,也就是每個(gè)字都具有特別的意義,一個(gè)簡(jiǎn)單的字在遠古時(shí)代就代表了一個(gè)復雜的生活場(chǎng)景,因而它也是世界上最形象的文字。兩者之間的閱讀方式和解讀方式都有本質(zhì)的不同,因此,漢字的編排不能照搬英文的編排方式,它們兩者之間在編排上有一些客觀(guān)的區別。
中英文字體的結構分析
a. 同樣字號的實(shí)際大小不同,英文因為都是字母,字母的構成結構非常簡(jiǎn)單,屏幕最小可視像素為6px[代表字體:04字體],中文則結構復雜。屏幕最小可視像素為10px[MS明朝/MS UI Gothic]和11px[新細明體/ PMingLiU]
b. 英文的整體編排容易成段、成篇,視覺(jué)效果比較自由活潑,有更強的不連續的線(xiàn)條感,容易產(chǎn)生節奏和韻律感。
中文整體編排容易成句、成行,視覺(jué)效果更接近一個(gè)個(gè)規則的幾何點(diǎn)和條塊,不容易產(chǎn)生動(dòng)感的最主要的原因是因為整個(gè)結構是閉合的,筆劃張力的總和趨于零。
c. 英文的篇幅普遍比相同意義的漢字的篇幅要多,在設計時(shí),英文本身更容易成為一個(gè)設計主體,而且因為英文單詞的字母數量不一樣,在編排時(shí),對齊左邊那么右邊都會(huì )產(chǎn)生自然的不規則的錯落,這在中文編排時(shí)不太可能出現的,中文編排每個(gè)段是一個(gè)完整的”塊”,很難產(chǎn)生這種錯落感。
d. 英文的結構有大小不同的形狀,在字形設計上不可能排列在同一條直線(xiàn)上,如gjpqy等字母齊下方的沉降線(xiàn),而bdfhkl字母上齊頂線(xiàn),其它字母才齊上中線(xiàn)和下腳線(xiàn)。然而,英文編排時(shí)自然產(chǎn)生的錯落其實(shí)并不是西方設計師所期望的,他們在細排文字對齊上花大量的時(shí)間來(lái)調整字距、詞距、行距、段前距、段后距等,使得段落更趨向于幾何形態(tài)。
如何處理banner中文字的構成問(wèn)題
關(guān)鍵字:理解-分解-重構
理解
在進(jìn)行文字的編排之前,首先要理解文字的內容。見(jiàn)過(guò)很多設計師只注重版式美現而不關(guān)注文字內容,文字一拿到手就開(kāi)始編排,從不考慮文字在說(shuō)什么,他們的原則是文字一定要服從于版式需要。這是不正確的設計方法,對于一條標題,如果我們不去理解標題所表述內容,就很容易本末倒置。這也是設計師需要和需求方重點(diǎn)溝通的問(wèn)題,并從中獲取需求方的關(guān)鍵字。
分解
根據主題關(guān)鍵字所傳達情感,分析字體本身的性格屬性,綜合畫(huà)面,對其分解;筆劃粗細與結構、留白、重心之間的關(guān)系,這是活字設計中的一個(gè)綜合問(wèn)題,并非一朝一夕就能掌握的,它不但對字的個(gè)性要有深刻的理解,而且還要具有非常敏銳的觀(guān)察力。尤其對于字體本身所設定出來(lái)的一個(gè)形象,或這種字體通常會(huì )在什么地方出現?見(jiàn)到這種字體會(huì )想到什么?這是視覺(jué)傳達中需要長(cháng)期積累的。
重構
字體的設計需要考慮到標題整體組合在畫(huà)面的均衡性,在不破壞字體的基本識別前提下進(jìn)行再設計,使文字圖形化,字體類(lèi)別中的襯線(xiàn)字體和無(wú)襯線(xiàn)字體(serif vs sans-serif),在組合的時(shí)候,不建議把無(wú)襯線(xiàn)類(lèi)字體和有襯線(xiàn)類(lèi)字體直接組合。
從心理模型可以看出,常規的組合排列中,無(wú)襯線(xiàn)字體比襯線(xiàn)字體的常規組合性更好一些,但處理的不好反而會(huì )呆板。
書(shū)法字體,因為書(shū)法字體經(jīng)過(guò)歷代書(shū)法家對字體的追求,使其結構更加牢固,多一點(diǎn)少一點(diǎn)都會(huì )影響其本身的字型美感,且氣場(chǎng)較強,不適合太小的版式和過(guò)長(cháng)的句子大量使用;學(xué)過(guò)書(shū)法的同學(xué),或許深有體會(huì ),在中國書(shū)法里是十分講究“精”“氣”“神”,用語(yǔ)言無(wú)法表達情緒的時(shí)候,書(shū)法的字里行間卻能透露出來(lái)的氣場(chǎng),也就是所謂字的性格。
以上是書(shū)法類(lèi)字體在特定主題情緒表達上的一些處理方式;文字并沒(méi)有做特別的變形,而是切合主題的做了一些效果。
ps. 記得來(lái)網(wǎng)易面試時(shí),HR曾經(jīng)問(wèn)過(guò)我一個(gè)問(wèn)題:“對于視覺(jué)設計師這個(gè)職位里,你覺(jué)得設計師是什么?你能做什么?”
我說(shuō):“設計師在這里,往往更多的是擔任著(zhù)翻譯師的角色,把訊息更快速準確的詮釋給所有受眾。”
鄭州網(wǎng)站建設 | 鄭州網(wǎng)絡(luò )公司 | 鄭州網(wǎng)站制作 | 鄭州做網(wǎng)站 開(kāi)拓者科技 www.cnmcafee.cn