網(wǎng)站設(shè)計(jì):探討banner中的字體結(jié)構(gòu)
對(duì)于我們通常所看到的網(wǎng)站banner,它的本身形狀決定了其固定的構(gòu)成方式一般為矩形,橫幅,左右結(jié)構(gòu)和居中,它的文字特點(diǎn)是主題式,一般分為主標(biāo)題和副標(biāo)題,文字較多,設(shè)計(jì)的時(shí)候還需要考慮應(yīng)用到網(wǎng)站各種尺寸推廣圖的可讀延伸性,另外,它的圖像輔助主題,增加文字的渲染力,banner的傳達(dá)行為方式可以理解為,以電腦屏幕為載體,處于IE瀏覽器的第一屏位置,用戶眼睛焦點(diǎn)停留時(shí)間約3秒鐘以上。
[由于banner一般用于專題類網(wǎng)站,在門戶網(wǎng)站的二級(jí)頁面,用戶進(jìn)來之前,在首頁已經(jīng)對(duì)主題有一定的了解和認(rèn)識(shí),所以banner的作用是在二級(jí)頁面中起到包裝頁面的同時(shí)增加內(nèi)容的趣味度和內(nèi)容方向引導(dǎo);所以這也是和傳統(tǒng)廣告中普遍要求第一感官視覺沖擊力來強(qiáng)奸眼球所不同的地方。]
文字在banner中的重要性
對(duì)于文字,我們常常聽到需求方提出:“字要大!”
“啊?還要大?已經(jīng)很大了!“ 然后很無奈的拉大一點(diǎn),其實(shí)我們都知道大那么幾個(gè)像素沒有意義;
但細(xì)心想想,需求方要的真的只是那么一丁點(diǎn)的追求么?畢竟他們不是設(shè)計(jì)師,不懂得如何表達(dá)自己的想法,而唯一可以讓們覺得顯眼的方式只有大小的區(qū)別而已,或許是因?yàn)?,字不夠顯眼,字的處理太普通,背景太搶眼之類的,或許,我們應(yīng)該理解為:“字要顯眼一點(diǎn)“,而”顯眼“的方式卻有很多種。
Banner=文字+圖像[輔助]
Banner上的文字一般都占據(jù)了整個(gè)banner的70%的區(qū)域,而實(shí)際圖像只占不到30%,往往很多的設(shè)計(jì)師更專注于那30%的圖像設(shè)計(jì),忽視了最重要的70%文字區(qū)域,最后只用系統(tǒng)字草草拼湊了之,試問這樣的一個(gè)banner的設(shè)計(jì)合理么?
尤其當(dāng)主題被延伸應(yīng)用到小尺寸推廣圖的時(shí)候,只剩下放文字的區(qū)域時(shí),這個(gè)推廣圖算是徹底完蛋了。
中文字和英文字母的屬性區(qū)別
中文字與英文字母的區(qū)別,字母是一種純粹發(fā)音符號(hào),每個(gè)字母本身并沒有意義,單詞的意義來自于這些字母之間的橫向串式組合,而漢字的組字方式是以象形為原始基礎(chǔ),也就是每個(gè)字都具有特別的意義,一個(gè)簡(jiǎn)單的字在遠(yuǎn)古時(shí)代就代表了一個(gè)復(fù)雜的生活場(chǎng)景,因而它也是世界上最形象的文字。兩者之間的閱讀方式和解讀方式都有本質(zhì)的不同,因此,漢字的編排不能照搬英文的編排方式,它們兩者之間在編排上有一些客觀的區(qū)別。
中英文字體的結(jié)構(gòu)分析
a. 同樣字號(hào)的實(shí)際大小不同,英文因?yàn)槎际亲帜?,字母的?gòu)成結(jié)構(gòu)非常簡(jiǎn)單,屏幕最小可視像素為6px[代表字體:04字體],中文則結(jié)構(gòu)復(fù)雜。屏幕最小可視像素為10px[MS明朝/MS UI Gothic]和11px[新細(xì)明體/ PMingLiU]
b. 英文的整體編排容易成段、成篇,視覺效果比較自由活潑,有更強(qiáng)的不連續(xù)的線條感,容易產(chǎn)生節(jié)奏和韻律感。
中文整體編排容易成句、成行,視覺效果更接近一個(gè)個(gè)規(guī)則的幾何點(diǎn)和條塊,不容易產(chǎn)生動(dòng)感的最主要的原因是因?yàn)檎麄€(gè)結(jié)構(gòu)是閉合的,筆劃張力的總和趨于零。
c. 英文的篇幅普遍比相同意義的漢字的篇幅要多,在設(shè)計(jì)時(shí),英文本身更容易成為一個(gè)設(shè)計(jì)主體,而且因?yàn)橛⑽膯卧~的字母數(shù)量不一樣,在編排時(shí),對(duì)齊左邊那么右邊都會(huì)產(chǎn)生自然的不規(guī)則的錯(cuò)落,這在中文編排時(shí)不太可能出現(xiàn)的,中文編排每個(gè)段是一個(gè)完整的”塊”,很難產(chǎn)生這種錯(cuò)落感。
d. 英文的結(jié)構(gòu)有大小不同的形狀,在字形設(shè)計(jì)上不可能排列在同一條直線上,如gjpqy等字母齊下方的沉降線,而bdfhkl字母上齊頂線,其它字母才齊上中線和下腳線。然而,英文編排時(shí)自然產(chǎn)生的錯(cuò)落其實(shí)并不是西方設(shè)計(jì)師所期望的,他們?cè)诩?xì)排文字對(duì)齊上花大量的時(shí)間來調(diào)整字距、詞距、行距、段前距、段后距等,使得段落更趨向于幾何形態(tài)。
如何處理banner中文字的構(gòu)成問題
關(guān)鍵字:理解-分解-重構(gòu)
理解.
在進(jìn)行文字的編排之前,首先要理解文字的內(nèi)容。見過很多設(shè)計(jì)師只注重版式美現(xiàn)而不關(guān)注文字內(nèi)容,文字一拿到手就開始編排,從不考慮文字在說什么,他們的原則是文字一定要服從于版式需要。這是不正確的設(shè)計(jì)方法,對(duì)于一條標(biāo)題,如果我們不去理解標(biāo)題所表述內(nèi)容,就很容易本末倒置。這也是設(shè)計(jì)師需要和需求方重點(diǎn)溝通的問題,并從中獲取需求方的關(guān)鍵字。
分解.
根據(jù)主題關(guān)鍵字所傳達(dá)情感,分析字體本身的性格屬性,綜合畫面,對(duì)其分解;筆劃粗細(xì)與結(jié)構(gòu)、留白、重心之間的關(guān)系,這是活字設(shè)計(jì)中的一個(gè)綜合問題,并非一朝一夕就能掌握的,它不但對(duì)字的個(gè)性要有深刻的理解,而且還要具有非常敏銳的觀察力。尤其對(duì)于字體本身所設(shè)定出來的一個(gè)形象,或這種字體通常會(huì)在什么地方出現(xiàn)?見到這種字體會(huì)想到什么?這是視覺傳達(dá)中需要長(zhǎng)期積累的。
重構(gòu)
字體的設(shè)計(jì)需要考慮到標(biāo)題整體組合在畫面的均衡性,在不破壞字體的基本識(shí)別前提下進(jìn)行再設(shè)計(jì),使文字圖形化,字體類別中的襯線字體和無襯線字體(serif vs sans-serif),在組合的時(shí)候,不建議把無襯線類字體和有襯線類字體直接組合。
從心理模型可以看出,常規(guī)的組合排列中,無襯線字體比襯線字體的常規(guī)組合性更好一些,但處理的不好反而會(huì)呆板。
書法字體,因?yàn)闀ㄗ煮w經(jīng)過歷代書法家對(duì)字體的追求,使其結(jié)構(gòu)更加牢固,多一點(diǎn)少一點(diǎn)都會(huì)影響其本身的字型美感,且氣場(chǎng)較強(qiáng),不適合太小的版式和過長(zhǎng)的句子大量使用;學(xué)過書法的同學(xué),或許深有體會(huì),在中國(guó)書法里是十分講究“精”“氣”“神”,用語言無法表達(dá)情緒的時(shí)候,書法的字里行間卻能透露出來的氣場(chǎng),也就是所謂字的性格。
以上是書法類字體在特定主題情緒表達(dá)上的一些處理方式;文字并沒有做特別的變形,而是切合主題的做了一些效果。
還記得當(dāng)初來現(xiàn)在所在的公司面試時(shí),HR問:對(duì)于視覺設(shè)計(jì)師這個(gè)職位,你覺得設(shè)計(jì)師是什么?你能做什么?我答:設(shè)計(jì)師在這里,往往更多的是擔(dān)任著翻譯師的角色,把訊息更快速準(zhǔn)確地詮釋給所有受眾。筆者是這樣說的,在此后的設(shè)計(jì)生涯中也是這樣勉勵(lì)自己的,希望同行們也是如此。
本文轉(zhuǎn)載自網(wǎng)易UEDC 鏈接http://uedc.163.com/2006.html
本文地址:http://m.likemindfilms.com/tutorial/di1034.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁設(shè)計(jì)中的常見頁面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫:40款為網(wǎng)頁設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏