網(wǎng)頁(yè)Banner設(shè)計(jì)“點(diǎn)橫豎撇捺”
文字,這種與人類歷史幾乎同步的信息表達(dá)形式,同樣也是視覺傳達(dá)設(shè)計(jì)中最重要、最基礎(chǔ)的元素之一。她的歷史沿革應(yīng)該已經(jīng)有非常多的同學(xué)做過分享介紹,這里就不再贅述。我想講述的是字體在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用,她最為常見的一種承載形式:banner字體設(shè)計(jì),這幾乎是每個(gè)Web設(shè)計(jì)師都會(huì)遇到的設(shè)計(jì)內(nèi)容,不論是通欄、半通欄,還是各種大大小小尺寸以及活動(dòng)營(yíng)銷推廣的頁(yè)面頭部,都可以看到字體設(shè)計(jì)的身影。
阿里巴巴中國(guó)站首頁(yè)改版后對(duì)于頁(yè)面內(nèi)的banner推薦位有了更高的要求,這也引發(fā)了我對(duì)如何做好一條banner的思考,我覺得在banner設(shè)計(jì)中相對(duì)圖形及背景元素的運(yùn)用,文字本身的設(shè)計(jì)與排版要重要很多,即使在沒有任何背景元素的情況下,文字依然可以良好的傳達(dá)信息,因此如果我們對(duì)banner上的文字進(jìn)行巧妙設(shè)計(jì)不僅能鮮明的表達(dá)設(shè)計(jì)主題還能夠增強(qiáng)用戶關(guān)注度從而獲得高的點(diǎn)擊率,更可以提升網(wǎng)站頁(yè)面審美價(jià)值,也只有理清的這樣的思路才能更好的制訂設(shè)計(jì)規(guī)范,保證頁(yè)面廣告投放質(zhì)量的一致性。
下面根據(jù)我的理解大概的羅列了幾種平時(shí)最常見banner字體設(shè)計(jì)表現(xiàn)形式(視覺大牛們請(qǐng)輕拍):
根據(jù)文字本身的具體內(nèi)容及其含義,使得文字的筆畫結(jié)構(gòu)與文字內(nèi)容含義一致,符合用戶的心理預(yù)期,下圖中“斷”字就故意在最后一筆切斷。
思考banner的觀眾是誰(shuí)或者說這個(gè)產(chǎn)品是誰(shuí)用的,針對(duì)兒童類產(chǎn)品,在字體的表現(xiàn)上可以幼稚活潑一些,在設(shè)計(jì)上增加一些童趣的意味,假如是針對(duì)機(jī)械類產(chǎn)品,可以在字體筆畫結(jié)構(gòu)上做的硬一些,棱角分明,假如是針對(duì)女性的,文字的構(gòu)建上可以纖細(xì)柔美、也可以時(shí)尚秀麗,假如…
根據(jù)不同的主題氛圍進(jìn)行設(shè)計(jì),如端午節(jié),中秋節(jié)等傳統(tǒng)節(jié)日進(jìn)行的推廣設(shè)計(jì),可以增加人文的設(shè)計(jì)元素,如使用書法字體,用字體去烘托這個(gè)氛圍,同樣比較常見的還有一些使用禮品帶、花枝藤蔓等裝飾性元素結(jié)合文字出現(xiàn)以增加設(shè)計(jì)的美感。
用輔助圖形與字體結(jié)合,這樣的組合方式非常常見,設(shè)計(jì)原理就是根據(jù)字意詞意,使用與之相關(guān)的圖形元素與字體筆畫形體相結(jié)合,圖形元素的使用可以是具象的也可以抽象的,但對(duì)于這個(gè)的形式也很容易陷入設(shè)計(jì)泥潭,過分的強(qiáng)化圖形或者說圖形過于復(fù)雜,反而對(duì)字體有效傳達(dá)造成影響,在設(shè)計(jì)時(shí)盡可能避免過度設(shè)計(jì)。
作為五筆畫的最后一筆,除以上講述的內(nèi)容外,對(duì)于banner中的字體設(shè)計(jì)還是應(yīng)該追本溯源,形式上的美感自然是設(shè)計(jì)表現(xiàn)的一方面,但再好看的商業(yè)設(shè)計(jì)也不能脫離一個(gè)設(shè)計(jì)關(guān)鍵要素:易識(shí)性,怎樣才可以讓字體既美觀又具有良好傳達(dá)力的呢?
1.咱們?cè)谧鲎煮w設(shè)計(jì)的時(shí)候,筆畫粗細(xì)及風(fēng)格要做到統(tǒng)一,這里說的統(tǒng)一并不是讓你將文字的所有筆畫粗細(xì)都調(diào)整的一摸一樣,而是對(duì)于在一個(gè)詞語(yǔ)內(nèi),同樣的點(diǎn)與點(diǎn)或者橫與橫等需要盡量保持一種大小粗細(xì),這樣的好處是不會(huì)出現(xiàn)同樣的筆畫卻大小不一,視覺上很凌亂的感覺。在完成了這樣的粗細(xì)調(diào)整以后,為了使文字更富有變化,對(duì)于常見的勾、折等也應(yīng)該進(jìn)行風(fēng)格上的統(tǒng)一,盡可能讓文字結(jié)合起來看的時(shí)候擁有相對(duì)一致的視覺感受。
2.空間上的平衡,簡(jiǎn)單的說就是在進(jìn)行字體設(shè)計(jì)時(shí)需調(diào)整空間留白,漢字的字型有繁有簡(jiǎn),合理的分配筆畫內(nèi)的留白空間,才可以使文字看上去更為協(xié)調(diào),不會(huì)因?yàn)橛行h字過于繁瑣,空間留白不夠?qū)е潞軘D很壓抑的極端情況。
3.為了解決可能出現(xiàn)的某幾個(gè)字的筆畫相差太大,在視覺上容易出現(xiàn)輕重不一的情況,對(duì)于設(shè)計(jì)完成的字體組合還有一次針對(duì)整體的微調(diào)過程,盡可能達(dá)到視覺的平衡感與一致性。
寫在最后,這篇文章僅作為自己一段時(shí)間的設(shè)計(jì)知識(shí)積累,用于展示的案例圖片都是取自平時(shí)的網(wǎng)絡(luò)收集,之所以用點(diǎn)橫豎撇捺作為標(biāo)題是因?yàn)檫@是漢字書寫最為基礎(chǔ)的筆畫,同樣文字也作為視覺設(shè)計(jì)的最為基礎(chǔ)的元素存在,兩者之間存在一定的相通性,大師說設(shè)計(jì)不是一種技能,而是捕捉事物本質(zhì)的感覺能力與洞察能力,很贊同。希望這篇囈語(yǔ)之文能多多少少給大家?guī)韱l(fā),也希望能拋磚引玉獲得更多的相關(guān)分享,不勝感激。
本文地址:http://m.likemindfilms.com/tutorial/ui1835.html
您可能還喜歡
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏