網頁banner設計理論:工作中對banner設計的理解

來源:互聯網
上載者:User

網頁製作Webjx文章簡介:Banner廣告條中的字型設計.

由於banner一般用於專題類網站,在門戶網站的二級頁面,使用者進來之前,在首頁已經對主題有一定的瞭解和認識,所以banner的作用是在二級頁面中起到封裝頁面的同時增加內容的趣味度和內容方向引導;所以這也是和傳統廣告中普遍要求第一感官視覺衝擊力來強姦眼球所不同的地方

本來想寫“Advertisemen中的字型結構分析”,後來發現這個標題寫得有點大,偏離了在目前工作中的針對性,因此縮小到banner的範圍,以下內容僅個人在目前工作中對banner設計上的一點淺見,僅起拋磚引玉的作用。

Banner的傳達方式 [TOPIC]
針對網站中的banner

Banner的本身形狀:形狀決定了其固定的構成方式,一般為矩形,橫幅,左右結構和置中;
Banner的文字特點:主題式,一般分為主標題和副標題,文字較多;設計的時候還需要考慮應用到網站各種尺寸推廣圖的可讀延伸性。
Banner的映像特點:輔助主題,增加文字的渲染力。
Banner的傳達行為方式:載體為電腦螢幕,IE瀏覽器的第一屏位置,使用者眼睛焦點停留時間約3秒以上。

 

[由於banner一般用於專題類網站,在門戶網站的二級頁面,使用者進來之前,在首頁已經對主題有一定的瞭解和認識,所以banner的作用是在二級頁面中起到封裝頁面的同時增加內容的趣味度和內容方向引導;所以這也是和傳統廣告中普遍要求第一感官視覺衝擊力來強姦眼球所不同的地方。] 

文字在banner中的重要性

對於文字,我們常常聽到需求方提出:“字要大!”
“啊?還要大?已經很大了!“  然後很無奈的拉大一點,其實我們都知道大那麼幾個像素沒有意義;
但細心想想,需求方要的真的只是那麼一丁點的追求嗎?畢竟他們不是設計師,不懂得如何表達自己的想法,而唯一可以讓們覺得顯眼的方式只有大小的區別而已,或許是因為,字不夠顯眼,字的處理太普通,背景太搶眼之類的,或許,我們應該理解為:“字要顯眼一點“,而”顯眼“的方式卻有很多種。

 Banner=文字+映像[輔助]

Banner上的文字一般都佔據了整個banner的70%的地區,而實際映像只佔不到30%,往往很多的設計師更專註於那30%的映像設計,忽視了最重要的70%文字地區,最後只用系統字草草拼湊了之,試問這樣的一個banner的設計合理嗎?

尤其當主題被延伸應用到小尺寸推廣圖的時候,只剩下放文字的地區時,這個推廣圖算是徹底完蛋了。

  

中文字和英文字母的屬性區別

中文字與英文字母的區別,字母是一種純粹發音符號,每個字母本身並沒有意義,單詞的意義來自於這些字母之間的橫向串式組合,而漢字的組字方式是以象形為原始基礎,也就是每個字都具有特別的意義,一個簡單的字在遠古時代就代表了一個複雜的生活情境,因而它也是世界上最形象的文字。兩者之間的閱讀方式和解讀方式都有本質的不同,因此,漢字的編排不能照搬英文的編排方式,它們兩者之間在編排上有一些客觀的區別。

中英文字型的結構分析

a. 同樣字型大小的實際大小不同,英文因為都是字母,字母的構成結構非常簡單,螢幕最小可視像素為6px[代表字型:04字型],中文則結構複雜。螢幕最小可視像素為10px[MS明朝/MS UI Gothic]和11px[新細明體/ PMingLiU] 

b. 英文的整體編排容易成段、成篇,視覺效果比較自由活潑,有更強的不連續的線條感,容易產生節奏和韻律感。
中文整體編排容易成句、成行,視覺效果更接近一個個規則的幾何點和條塊,不容易產生動感的最主要的原因是因為整個結構是閉合的,筆劃張力的總和趨於零。

 

c. 英文的篇幅普遍比相同意義的漢字的篇幅要多,在設計時,英文本身更容易成為一個設計主體,而且因為英文單詞的字母數量不一樣,在編排時,對齊左邊那麼右邊都會產生自然的不規則的錯落,這在中文編排時不太可能出現的,中文編排每個段是一個完整的”塊”,很難產生這種錯落感。

 

d. 英文的結構有大小不同的形狀,在字形設計上不可能排列在同一條直線上,如gjpqy等字母齊下方的沉降線,而bdfhkl字母上齊頂線,其它字母才齊上中線和下腳線。然而,英文編排時自然產生的錯落其實並不是西方設計師所期望的,他們在細排文字對齊上花大量的時間來調整字距、詞距、行距、段前距、段後距等,使得段落更趨向於幾何形態。

 

如何處理banner中文字的構成問題

關鍵字:理解-分解-重構

 理解.

在進行文字的編排之前,首先要理解文字的內容。見過很多設計師只注重版式美現而不關注文字內容,文字一拿到手就開始編排,從不考慮文字在說什麼,他們的原則是文字一定要服從於版式需要。這是不正確的設計方法,對於一條標題,如果我們不去理解標題所表述內容,就很容易本末倒置。這也是設計師需要和需求方重點溝通的問題,並從中擷取需求方的關鍵字。

 分解.

根據主題關鍵字所傳達情感,分析字型本身的性格屬性,綜合畫面,對其分解;筆劃粗細與結構、留白、重心之間的關係,這是活字設計中的一個綜合問題,並非一朝一夕就能掌握的,它不但對字的個性要有深刻的理解,而且還要具有非常敏銳的觀察力。尤其對於字型本身所設定出來的一個形象,或這種字型通常會在什麼地方出現?見到這種字型會想到什嗎?這是視覺傳達中需要長期積累的。

 重構

字型的設計需要考慮到標題整體組合在畫面的均衡性,在不破壞字型的基本識別前提下進行再設計,使文字圖形化,字型類別中的襯線字型和無襯線字型(serif vs sans-serif),在組合的時候,不建議把無襯線類字型和有襯線類字型直接組合。

 

從心理模型可以看出,常規的組合排列中,無襯線字型比襯線字型的常規組合性更好一些,但處理的不好反而會呆板。

書法字型,因為書法字型經過曆代書法家對字型的追求,使其結構更加牢固,多一點少一點都會影響其本身的字型美感,且氣場較強,不適合太小的版式和過長的句子大量使用;學過書法的同學,或許深有體會,在中國書法裡是十分講究“精”“氣”“神”,用語言無法表達情緒的時候,書法的字裡行間卻能透露出來的氣場,也就是所謂字的性格。

 

以上是書法類字型在特定主題情緒表達上的一些處理方式;文字並沒有做特別的變形,而是切合主題的做了一些效果。

ps. 記得來網易面試時,HR曾經問過我一個問題:“對於視覺設計師這個職位裡,你覺得設計師是什嗎?你能做什嗎?”
我說:“設計師在這裡,往往更多的是擔任著翻譯師的角色,把訊息更快速準確的詮釋給所有受眾。”



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。