建站常識
BANNER中的字體結(jié)構(gòu)分析
2010-07-27 08:10:00
本來想寫“Advertisemen中的字體結(jié)構(gòu)分析”,后來發(fā)現(xiàn)這個標(biāo)題寫得有點大,偏離了在目前工作中的針對性,因此縮小到banner的范圍,以下內(nèi)容僅個人在目前工作中對banner設(shè)計上的一點淺見,僅起拋磚引玉的作用。
Banner的傳達(dá)方式 [TOPIC]
針對網(wǎng)站中的banner
Banner的本身形狀:形狀決定了其固定的構(gòu)成方式,一般為矩形,橫幅,左右結(jié)構(gòu)和居中;
Banner的文字特點:主題式,一般分為主標(biāo)題和副標(biāo)題,文字較多;設(shè)計的時候還需要考慮應(yīng)用到網(wǎng)站各種尺寸推廣圖的可讀延伸性。
Banner的圖像特點:輔助主題,增加文字的渲染力。
Banner的傳達(dá)行為方式:載體為電腦屏幕,IE瀏覽器的第一屏位置,用戶眼睛焦點停留時間約3秒以上。
[由于banner一般用于專題類網(wǎng)站,在門戶網(wǎng)站的二級頁面,用戶進來之前,在首頁已經(jīng)對主題有一定的了解和認(rèn)識,所以banner的作用是在二級頁面中起到包裝頁面的同時增加內(nèi)容的趣味度和內(nèi)容方向引導(dǎo);所以這也是和傳統(tǒng)廣告中普遍要求第一感官視覺沖擊力來強奸眼球所不同的地方。]
文字在banner中的重要性
對于文字,我們常常聽到需求方提出:“字要大!”
“???還要大?已經(jīng)很大了!“ 然后很無奈的拉大一點,其實我們都知道大那么幾個像素沒有意義;
但細(xì)心想想,需求方要的真的只是那么一丁點的追求么?畢竟他們不是設(shè)計師,不懂得如何表達(dá)自己的想法,而唯一可以讓們覺得顯眼的方式只有大小的區(qū)別而已,或許是因為,字不夠顯眼,字的處理太普通,背景太搶眼之類的,或許,我們應(yīng)該理解為:“字要顯眼一點“,而”顯眼“的方式卻有很多種。
Banner=文字+圖像[輔助]
Banner上的文字一般都占據(jù)了整個banner的70%的區(qū)域,而實際圖像只占不到30%,往往很多的設(shè)計師更專注于那30%的圖像設(shè)計,忽視了最重要的70%文字區(qū)域,最后只用系統(tǒng)字草草拼湊了之,試問這樣的一個banner的設(shè)計合理么?
尤其當(dāng)主題被延伸應(yīng)用到小尺寸推廣圖的時候,只剩下放文字的區(qū)域時,這個推廣圖算是徹底完蛋了。
中文字和英文字母的屬性區(qū)別
中文字與英文字母的區(qū)別,字母是一種純粹發(fā)音符號,每個字母本身并沒有意義,單詞的意義來自于這些字母之間的橫向串式組合,而漢字的組字方式是以象形為原始基礎(chǔ),也就是每個字都具有特別的意義,一個簡單的字在遠(yuǎn)古時代就代表了一個復(fù)雜的生活場景,因而它也是世界上最形象的文字。兩者之間的閱讀方式和解讀方式都有本質(zhì)的不同,因此,漢字的編排不能照搬英文的編排方式,它們兩者之間在編排上有一些客觀的區(qū)別。
#p#
中英文字體的結(jié)構(gòu)分析
a. 同樣字號的實際大小不同,英文因為都是字母,字母的構(gòu)成結(jié)構(gòu)非常簡單,屏幕最小可視像素為6px[代表字體:04字體],中文則結(jié)構(gòu)復(fù)雜。屏幕最小可視像素為10px[MS明朝/MS UI Gothic]和11px[新細(xì)明體/ PMingLiU]
b. 英文的整體編排容易成段、成篇,視覺效果比較自由活潑,有更強的不連續(xù)的線條感,容易產(chǎn)生節(jié)奏和韻律感。
中文整體編排容易成句、成行,視覺效果更接近一個個規(guī)則的幾何點和條塊,不容易產(chǎn)生動感的最主要的原因是因為整個結(jié)構(gòu)是閉合的,筆劃張力的總和趨于零。
c. 英文的篇幅普遍比相同意義的漢字的篇幅要多,在設(shè)計時,英文本身更容易成為一個設(shè)計主體,而且因為英文單詞的字母數(shù)量不一樣,在編排時,對齊左邊那么右邊都會產(chǎn)生自然的不規(guī)則的錯落,這在中文編排時不太可能出現(xiàn)的,中文編排每個段是一個完整的”塊”,很難產(chǎn)生這種錯落感。
d. 英文的結(jié)構(gòu)有大小不同的形狀,在字形設(shè)計上不可能排列在同一條直線上,如gjpqy等字母齊下方的沉降線,而bdfhkl字母上齊頂線,其它字母才齊上中線和下腳線。然而,英文編排時自然產(chǎn)生的錯落其實并不是西方設(shè)計師所期望的,他們在細(xì)排文字對齊上花大量的時間來調(diào)整字距、詞距、行距、段前距、段后距等,使得段落更趨向于幾何形態(tài)。
如何處理banner中文字的構(gòu)成問題
關(guān)鍵字:理解-分解-重構(gòu)
理解
在進行文字的編排之前,首先要理解文字的內(nèi)容。見過很多設(shè)計師只注重版式美現(xiàn)而不關(guān)注文字內(nèi)容,文字一拿到手就開始編排,從不考慮文字在說什么,他們的原則是文字一定要服從于版式需要。這是不正確的設(shè)計方法,對于一條標(biāo)題,如果我們不去理解標(biāo)題所表述內(nèi)容,就很容易本末倒置。這也是設(shè)計師需要和需求方重點溝通的問題,并從中獲取需求方的關(guān)鍵字。
分解
根據(jù)主題關(guān)鍵字所傳達(dá)情感,分析字體本身的性格屬性,綜合畫面,對其分解;筆劃粗細(xì)與結(jié)構(gòu)、留白、重心之間的關(guān)系,這是活字設(shè)計中的一個綜合問題,并非一朝一夕就能掌握的,它不但對字的個性要有深刻的理解,而且還要具有非常敏銳的觀察力。尤其對于字體本身所設(shè)定出來的一個形象,或這種字體通常會在什么地方出現(xiàn)?見到這種字體會想到什么?這是視覺傳達(dá)中需要長期積累的。
重構(gòu)
字體的設(shè)計需要考慮到標(biāo)題整體組合在畫面的均衡性,在不破壞字體的基本識別前提下進行再設(shè)計,使文字圖形化,字體類別中的襯線字體和無襯線字體(serif vs sans-serif),在組合的時候,不建議把無襯線類字體和有襯線類字體直接組合。
從心理模型可以看出,常規(guī)的組合排列中,無襯線字體比襯線字體的常規(guī)組合性更好一些,但處理的不好反而會呆板。
書法字體,因為書法字體經(jīng)過歷代書法家對字體的追求,使其結(jié)構(gòu)更加牢固,多一點少一點都會影響其本身的字型美感,且氣場較強,不適合太小的版式和過長的句子大量使用;學(xué)過書法的同學(xué),或許深有體會,在中國書法里是十分講究“精”“氣”“神”,用語言無法表達(dá)情緒的時候,書法的字里行間卻能透露出來的氣場,也就是所謂字的性格。
以上是書法類字體在特定主題情緒表達(dá)上的一些處理方式;文字并沒有做特別的變形,而是切合主題的做了一些效果。
ps. 記得來網(wǎng)易面試時,HR曾經(jīng)問過我一個問題:“對于視覺設(shè)計師這個職位里,你覺得設(shè)計師是什么?你能做什么?”
我說:“設(shè)計師在這里,往往更多的是擔(dān)任著翻譯師的角色,把訊息更快速準(zhǔn)確的詮釋給所有受眾?!?/p>
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計的五大特點
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計應(yīng)該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設(shè)計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計都有哪些新的趨勢?
延伸閱讀
- [2010-09-25 15:08:00] 淺淡BANNER設(shè)計
- [2010-03-20 13:16:00] 網(wǎng)站常用字體那些事
- [2007-04-11 08:56:00] 什么是最好的正文字體
- [2010-09-26 08:05:00] Banner設(shè)計
- [2010-07-27 09:05:00] 如何做得Banner通情達(dá)意
- [2007-04-11 09:04:00] 關(guān)于中英文正文字體比較
- [2009-07-04 18:22:00] Banner字體設(shè)計與應(yīng)用
- [2006-05-12 17:01:00] Web與排版學(xué)上的字體問題
- [2010-08-10 16:17:00] 淺談網(wǎng)頁UI之Banner篇
- [2007-08-29 22:24:00] 如何使網(wǎng)頁的字體和顏色更易閱讀
- [2019-05-21 09:04:30] 如何在網(wǎng)站中使用字體
- [2007-12-05 14:56:00] 19條字體設(shè)計基礎(chǔ)原則
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
網(wǎng)站推廣 建站常識 外貿(mào)網(wǎng)站建設(shè) 搜索引擎蜘蛛 青島輪胎網(wǎng)站設(shè)計 青島好的網(wǎng)站優(yōu)化公司 手機網(wǎng)站 舒適的界面 平面設(shè)計 青島抖音小程序開發(fā) 扁平化設(shè)計 網(wǎng)站設(shè)計趨勢 GOOGLE html和css 程序開發(fā) 高端輪胎網(wǎng)站設(shè)計 青島網(wǎng)站營銷 審美 HTML5 網(wǎng)站開發(fā) 企業(yè)網(wǎng)站 青島網(wǎng)站SEO 青島網(wǎng)站建設(shè)基礎(chǔ)知識 良好的導(dǎo)航 網(wǎng)站優(yōu)化 robots 網(wǎng)站設(shè)計 H5專題頁面 圖形網(wǎng)格 css