2019-5-31 濤濤
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
我們在設(shè)計中除了接觸到圖形，還需要了解文字的設(shè)計。特別的文字設(shè)計或者排版可以使整體的畫面效果更加有氛圍，甚至超過圖形表達(dá)的感受，更加直觀地表達(dá)出內(nèi)容的主旨。文字的設(shè)計方式有很多種，例如通過字體變形，結(jié)構(gòu)重組等方式來讓文字變得更加特別，但往往會讓我們耗費比較多的時間。
因此我一直在思考有沒有一些既簡單又的設(shè)計方式來提高文字的設(shè)計感。在瀏覽國外的一些設(shè)計網(wǎng)站的過程中，做了一下文字設(shè)計形式方面的收集，并整理出十種我認(rèn)為具有代表性的文字設(shè)計形式。另外還參考這些設(shè)計方式，使用中文字體進(jìn)行了一些嘗試。
拉伸的處理手法，讓文字更具有張力，整體氛圍更具標(biāo)題感和圖形化，但依然保留著文字該有的識別度。常見于純文字排版的海報，既滿足閱讀需要，同時具有設(shè)計感。
拉伸與文字本身的字形、字體有著很大程度的關(guān)聯(lián)，并不是所有的文字都適合拉伸，例如下面的案例。
1. 不同字體對比
從方案嘗試中看出，左邊字體在進(jìn)行拉伸之后，文字本身的結(jié)構(gòu)會遭到破壞，而右邊的效果可以較為接受。因此在設(shè)計的過程中盡量選擇可適用于拉伸的字體，另外在拉伸的過程中需要對細(xì)節(jié)重新處理，使字體保留原有字體的細(xì)節(jié)美感。
2. 不同字形的對比
從下面案例中對比，O 在進(jìn)行上下拉伸的時候效果比較好，而左右拉伸的時候會失去字體本身的美感，而 Y 在上下左右拉伸后整體視覺效果都相對平衡。
3. 細(xì)節(jié)處理對比
優(yōu)化字體線條的細(xì)節(jié)可以使得整體文字更加規(guī)整、方正（右邊）。而未進(jìn)行細(xì)節(jié)的設(shè)計則會顯得筆畫參差不齊（左邊）。
4. 傳統(tǒng)與現(xiàn)代對比
傳統(tǒng)的字體拉伸后（如下圖中間的字體），字體本身的韻味就失去了，因此不建議對一些較為傳統(tǒng)的字體進(jìn)行拉伸設(shè)計。
5. 設(shè)計嘗試
中文字的筆畫比較多樣性，因此在細(xì)節(jié)的設(shè)計上比英文來得更加復(fù)雜，在處理「撇、捺、點、折、彎、勾」時需要保持原本的筆畫結(jié)構(gòu)性。
6. 拓展案例
結(jié)合實際要表達(dá)的內(nèi)容，使用拉伸的設(shè)計手法，例如結(jié)合物體，疊加顏色或者交錯拉伸等。
虛實結(jié)合即為線面/陰陽的設(shè)計手法，通過虛實的處理，可以突出一組或一段文字中的重點信息。在一些強(qiáng)調(diào)主次的設(shè)計中，可以嘗試這種方式來做區(qū)分，線面結(jié)合的處理手法讓原有都是面的字體多了一些透氣感和空間感。
虛實處理的方法需要考慮本身字體的粗細(xì)，過分纖細(xì)的字體效果可能并不明顯。
1. 嘗試對比
從對比中，發(fā)現(xiàn)粗體相比于細(xì)體來得更加直接更容易出效果，對比明確。
2. 中文字體的嘗試
從嘗試中來看，與上面中的結(jié)論較為一致，較細(xì)的字體使用虛實結(jié)合效果并不理想。對于書法體的應(yīng)用，更多需要考慮字體的收邊效果是否工整，收邊過碎，會影響在描邊之后的細(xì)節(jié)美感。
3. 設(shè)計嘗試
通過遞增或者遞減的設(shè)計手法，讓原本簡單重復(fù)的文字元素，變得更加具有層次感和節(jié)奏感，讓文字的生命力變得更加豐富多樣。
在設(shè)計的過程中需要提前規(guī)范好各個字體之間的差異關(guān)系及變化的效果過程。按照一定的數(shù)值倍數(shù)差異比進(jìn)行變化。
1. 不同方式的嘗試對比
在嘗試的時候發(fā)現(xiàn)，粗細(xì)變化的模式可能更多會依賴于字體本身的模式。
2. 中文字體的嘗試
中文在使用遞進(jìn)漸變的方式中需要考慮整體文字的結(jié)構(gòu)感和塊狀感，由于字形較為復(fù)雜，整體視覺效果會過于零碎。
與遞進(jìn)漸變接近但卻又有差別的文字設(shè)計形式。擴(kuò)展變化的文字具有張力的同時有一定的速度感和發(fā)射性，就像向四周展開的波紋效果，具有延續(xù)性。
按文字的行高或者字寬作為基礎(chǔ)值，按一定的比例，對文字進(jìn)行破形切割處理，上下左右進(jìn)行擴(kuò)展發(fā)散。
1. 比例值示意效果
2. 中文字體的嘗試
外觀的完整度還算可以，但由于中文本身自有的特性（筆畫較為豐富多樣），因此在擴(kuò)展層次的數(shù)量上需要進(jìn)行一定的控制，不宜過多，以短語或標(biāo)題使用較好，避免過于形式而導(dǎo)致文字識別性降低。
3. 設(shè)計嘗試
文字作為紋理出現(xiàn)在畫面中，區(qū)別于圖形化的紋理。既有圖形感，同時可以輔助傳達(dá)一定的信息和態(tài)度。
在字體的選擇上盡量適用字形較為簡潔的字體，避免影響前景內(nèi)容的展示。設(shè)計上可以結(jié)合其他的設(shè)計形式，例如虛實結(jié)合/拉伸變形/擴(kuò)展變化等方式，提升畫面的豐富程度。
1. 中文字體的嘗試
常規(guī)的中文字體，整體效果還算不錯。但結(jié)合中國書法字作為底紋，可以讓整體的設(shè)計更具有不同于英文的設(shè)計感，整體效果更具有力量感，因此建議在設(shè)計中文底紋的時候可以大膽嘗試中文書法字。
通過疊加的方式，讓原本簡單的文字和背景產(chǎn)生了融合。既提升了背景的層次感，又讓文字變得具有設(shè)計感。
粗細(xì)的字體會產(chǎn)生不一樣的視覺感受，較細(xì)的字體會產(chǎn)生若隱若現(xiàn)的視覺效果，文字的識別性會稍弱，較粗的字體識別度基本上沒有太大問題，因此在設(shè)計的過程中可以結(jié)合實際的情況選擇不同粗細(xì)的文字。
1. 粗細(xì)對比嘗試
穿透的文字設(shè)計，對于打造設(shè)計的大片感具有很突出的視覺效果。例如漫威的電影片頭設(shè)計。
2. 中文字體的嘗試
結(jié)合不同的語意使用不同的字體，再結(jié)合穿透的設(shè)計方式，使畫面具有中文的文藝感。
3. 拓展案例
結(jié)合實際的內(nèi)容設(shè)計，穿透文字的玩法還可以拓展出更多不一樣的設(shè)計，例如下面這些例子。
扭動的設(shè)計，讓文字具有曲線的動態(tài)感，提升了文字的裝飾性。不同曲線的動態(tài)變化，賦予文字不同的律動感。變形的文字并未影響到文字該有的識別性和閱讀感，卻具有了設(shè)計感。
如下面的三個案例，曲率的差別，賦予文字不同的動態(tài)規(guī)則，有不同的視覺感知，有時柔美，有時卻具有速度感。因此在設(shè)計的時候，可根據(jù)具體的內(nèi)容設(shè)計不同的扭動趨勢。
1. 中文字體的嘗試
對比可見較細(xì)的字體使用扭動的設(shè)計，效果并不理想。由于中文筆畫的差異點，經(jīng)過扭動之后整體外形較為不規(guī)整，而粗體的效果則較為規(guī)整，動態(tài)曲線趨勢也較為明顯。
2. 設(shè)計嘗試
扭動+虛實+底紋的效果。
3. 拓展案例
更高級的設(shè)計手法是利用自然環(huán)境的介質(zhì)結(jié)合文字，起到扭曲的視覺效果。
與擴(kuò)展變化有異曲同工之妙，文字通過一定的角度和位移間隔，由二維向三維的視覺效果進(jìn)行變化，讓文字更加多變化和有重量感、層次感。
立體層疊的設(shè)計對于字體本身具有一定的要求，較為纖細(xì)的字體出來的效果并不理想。
1. 不同的字體嘗試
從對比中看出，細(xì)體或較細(xì)的襯線字體，層疊后會出現(xiàn)銜接不上或視覺黑點的情況（如下面左圖和右圖）。因此設(shè)計時建議使用粗體，并且整體筆畫較為平均的字體（中間的圖）。
2. 中文字體的嘗試
雖然具有了層次感和空間感，但也會讓整體變得更加復(fù)雜，因此需要根據(jù)文字的多少情況進(jìn)行使用。
3. 拓展案例
立體層疊還不止單向的設(shè)計，例如可以進(jìn)行軌跡變化，向外擴(kuò)展層疊，或是增加一些顏色漸變來豐富整體的設(shè)計。
文字通過錯位，疊加，顏色變化，透明度變化，切割等方式的設(shè)計之后，具有故障的視覺偏差感受。整體視覺感知類似雙重曝光的照片，文字具有豐富的層次感。
顏色疊加的效果，對于顏色的選擇極為重要，兩個顏色交錯之間的顏色可以為過渡色或者互補(bǔ)色。
細(xì)體的效果并不理想（如上圖左邊第一個），建議設(shè)計的過程中使用較粗的字體，另外在使用的過程中需要考慮文字的識別度（如右邊的效果），重疊之后文字的識別度或多或是會受到影響。
1. 中文字體的嘗試
由于中文字比英文復(fù)雜，因此使用中文字在設(shè)計的時候，可以尋找一些共筆的地方進(jìn)行重疊（如下圖左邊的設(shè)計），利用字體筆畫粗細(xì)一致的情況下，進(jìn)行了邊與邊的重疊。另外在設(shè)計的過程中建議加大字間距，這樣可以避免不同文字的重疊，產(chǎn)生過度復(fù)雜的效果，影響文字的識別性（如下圖最右邊的設(shè)計）。
2. 拓展案例
在簡單的疊色之外，結(jié)合不同質(zhì)感和肌理，可以讓整個文字具有不一樣的視覺感受。
文字按照立方幾何結(jié)構(gòu)進(jìn)行排版，通過顏色差異，陰陽，線面等方式設(shè)計處理后形成空間感和立體感。相比于平面排列的文字更具有空間感和層次感，提升整體畫面的設(shè)計感。
1. 設(shè)計嘗試
使用空間錯位結(jié)合虛實的設(shè)計，讓簡單重復(fù)的文字變得具有空間感和立體感。
2. 拓展案例
除了常規(guī)的空間打造，甚至可以融入到場景中或者結(jié)合物體本身的設(shè)計。
以上設(shè)計風(fēng)格，常常會在一些運動品牌的設(shè)計中看到。例如，Nike 的設(shè)計中應(yīng)到的文字，也會結(jié)合這些方式，來豐富和提高整體的設(shè)計感。
火箭隊出場片頭的字體應(yīng)用，線形字體疊加漸變的效果，具有層次感又有未來感。
阿迪達(dá)斯的廣告：
Converse 的廣告：
Under Armour 的廣告：
除了一些品牌的設(shè)計，音樂唱片的封面也有應(yīng)用到這些類型的設(shè)計手法。
我們除了在一些常規(guī)的媒介上會看到相關(guān)的文字設(shè)計，在這兩年的耐克或阿迪達(dá)斯的鞋子設(shè)計中，也會加入文字元素的設(shè)計，甚至球員會直接在鞋子上寫上文字。
文字設(shè)計的拓展疊加
文字的設(shè)計已經(jīng)成為一種新的設(shè)計趨勢，結(jié)合實際需要表達(dá)的想法，對于設(shè)計手法進(jìn)行活學(xué)活用是做出好設(shè)計的關(guān)鍵。當(dāng)然只有掌握了基礎(chǔ)手法才可能做到舉一反三的設(shè)計思考。在實際設(shè)計的過程中，我們往往不會是單獨使用某一種方式，而是對不同的設(shè)計手法進(jìn)行重組再設(shè)計，或者使用 2~3 種方式疊加設(shè)計來打造整體的畫面效果。如下：
在這十種基礎(chǔ)的文字設(shè)計中，通過結(jié)合發(fā)散可以迸發(fā)出遠(yuǎn)遠(yuǎn)不止于十種的創(chuàng)意設(shè)計。本次收集總結(jié)除了自身學(xué)習(xí)提高之外，希望可以起到拋磚引玉的作用，激發(fā)設(shè)計師對于文字的設(shè)計思考。
藍(lán)藍(lán)設(shè)計( www.alimai.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍(lán)藍(lán)設(shè)計的小編 http://www.alimai.net