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