2019-8-2 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
我們常說：設(shè)計(jì)就是在向用戶傳遞信息，在設(shè)計(jì)的日常工作中，傳遞信息的方式大多都是圖文相結(jié)合的形式，而文字作為信息傳遞中最直觀的表現(xiàn)形式，對(duì)于整體而言是至關(guān)重要的一環(huán)。很多設(shè)計(jì)師一味強(qiáng)調(diào)追求圖具有吸引力，而忽略了文字的重要性，最終導(dǎo)致圖文無法結(jié)合、虎頭蛇尾。說到文案吸引力，最佳的表現(xiàn)位置就是標(biāo)題字，所以本期就和大家一起分析、總結(jié)一些比較實(shí)用的標(biāo)題文字的處理方式，提升對(duì)讀者的吸引力。在文字排版中，想要提升標(biāo)題文字的吸引力，就要與其他非標(biāo)題性文字形成視覺上的反差、對(duì)比，進(jìn)而讓標(biāo)題文字在整體排版中更加吸引用戶眼球。這里說的第一個(gè)比較實(shí)用的處理手法就是切割文字筆畫，即：以標(biāo)題文字的筆畫為切入點(diǎn)，在不影響其辨識(shí)度的前提下，通過一些特殊的處理手法，提升視覺比重。
切割文字筆畫也可以理解為將文字的筆畫分離字體的本身，然后再以文字筆畫為切入點(diǎn)，進(jìn)行處理，常用的筆畫處理方式：變色、模糊、刪除、陰影，下面我們逐一來看。
1. 分離筆畫 – 變色處理
顧名思義就是有意將分離的字體筆畫進(jìn)行變色處理，提升標(biāo)題文字本身字體上的變化強(qiáng)度，從而提升標(biāo)題對(duì)于用戶的吸引力。舉例說明：
上圖中，這兩種標(biāo)題形式在設(shè)計(jì)工作中都是可取的，只是對(duì)比而言，案例 1 給人的感覺更加平緩，屬于比較常見、中規(guī)中矩。而案例 2 則更加新穎，在視覺上變化更強(qiáng)烈（主要體現(xiàn)在文字筆畫與筆畫之間），更加吸引用戶眼球，也起到了提升作品設(shè)計(jì)感的作用。
2. 分離筆畫 – 模糊處理
同樣的理解方式，就是將分離的字體筆畫進(jìn)行模糊化處理，目的是通過筆畫與筆畫之間的虛實(shí)對(duì)比，營造出視覺上的前后關(guān)系，從而提升標(biāo)題文字在整體文案中的視覺注意力。
上圖案例中通過對(duì)比我們發(fā)現(xiàn)：案例 4 相較于案例 3 更吸引人，原因在于其筆畫之間的虛實(shí)結(jié)合使得字體本身就形成了一定的反差感，形式上的多變?cè)炀土宋淖指?，同時(shí)如果感覺文字筆畫之間的變化強(qiáng)度不夠，可以結(jié)合變色+模糊的處理形式，比如：
這樣給人的感覺就更加強(qiáng)烈、也更誘人，但是這種筆畫之間的變化多了，也就意味著掌握的難度提升了，一定要避免過多的效果導(dǎo)致出現(xiàn)凌亂的現(xiàn)象。
3. 分離筆畫 – 陰影處理
可以理解為將文字筆畫分開來看，通過添加陰影的方式，營造視覺上筆畫的前后關(guān)系，從而增強(qiáng)其整體的視覺變化，舉例說明：
上圖中，案例 8 就是通過給文字筆畫添加陰影的形式，使得筆畫與筆畫之間在視覺上形成了很明顯的前后遮擋關(guān)系，將原本平面的文字變得更立體，也更易于吸引用戶眼球。這種處理手法在平時(shí)工作中也很實(shí)用，只需要理清楚筆畫的前后邏輯關(guān)系，通過畫筆涂抹的方式慢慢調(diào)整即可。
4. 分離筆畫 – 刪除處理
刪除筆畫的處理形式相對(duì)來說在工作中運(yùn)用較少，因?yàn)橐坏┨幚聿磺‘?dāng)，很容易影響字體本身的辨識(shí)度，適得其反，舉例說明：
如上圖所示，刪除了一些筆畫，給用戶留下一些想象的空間，也是比較新穎的處理方式，比較適合一些平面海報(bào)標(biāo)題的設(shè)計(jì)。
這種刪除字體筆畫的處理形式雖然很新穎，但是應(yīng)用的局限性較大，屬于比較難把控的一種。
注意：將文字筆畫單獨(dú)拆分出來進(jìn)行處理的手法，一定不要過于追求變化強(qiáng)烈，否則很容易導(dǎo)致標(biāo)題文字非但沒有起到吸引用戶的作用，反而最基本的辨識(shí)度都會(huì)被破壞，一定要把握好度。
在日常工作中，通過給標(biāo)題文字添加輔助元素，從而突出標(biāo)題的處理手法是非常實(shí)用的，這里所說的輔助元素可以分為很多種，比如：圖形、肌理、光效等等，目的都是借助輔助元素與標(biāo)題文字的相互結(jié)合，讓文案標(biāo)題的視覺形象更鮮明、更吸引用戶。
添加圖形是屬于比較直觀且應(yīng)用廣泛的一種處理方式，而這里的圖形一般情況下會(huì)和標(biāo)題文字在屬性上有所反差，這樣有利于最終效果的呈現(xiàn)更加明顯，舉例說明：
如上圖所示，標(biāo)題文字通過添加下劃線、邊框、形狀等等輔助圖形元素，較常規(guī)標(biāo)題而言，其視覺變化更加強(qiáng)烈，整體豐富度提升了很多。但是這種輔助元素不能添加太多，否則很容易出現(xiàn)亂的現(xiàn)象，要讓這些添加的元素與標(biāo)題形成相輔相成的關(guān)系。
上圖的設(shè)計(jì)案例，通過對(duì)比我們發(fā)現(xiàn)，右側(cè)案例視覺更豐富，且標(biāo)題文字添加下劃線后，其在畫面整體的視覺形象更加鮮明、更吸引用戶眼球。
現(xiàn)實(shí)生活中一個(gè)物品如果置身于某一個(gè)環(huán)境內(nèi)，它自身就會(huì)受到周圍環(huán)境的影響，而如果我們假定環(huán)境，將標(biāo)題文字看做物品，那么我們就可以給予標(biāo)題文字在環(huán)境中的光影，比如：投影、倒影、發(fā)光、環(huán)境色等等，這樣就間接地增強(qiáng)了標(biāo)題文字的視覺變化，從而起到吸引用戶眼球的作用。
如上圖所示，把文字當(dāng)做處于環(huán)境中的物體，通過投影、倒影、陰影的方式體現(xiàn)其環(huán)境，在視覺上有了更深的層次變化，也能起到強(qiáng)調(diào)、加深印象的作用。這種營造環(huán)境感的處理形式在平時(shí)工作中也很實(shí)用。
再說下發(fā)光的處理手法，這種形式大多用在暗色調(diào)的畫面中，將文字看做一個(gè)發(fā)光體，即受周圍環(huán)境的影響又影響著周圍環(huán)境，舉例說明：
上圖中雖然說左右兩種表現(xiàn)形式文字都比較清晰、明了，但是就視覺感受而言，右側(cè)將文字作為發(fā)光體與周圍環(huán)境相輔相成、融為一體的處理形式更容易吸引用戶眼球，而且更加新穎、有創(chuàng)意。這種表現(xiàn)形式在一些電商海報(bào)中也很常見，比如：
發(fā)光的效果給人的感受很舒服，打破了常規(guī)的單純平面編排文字的現(xiàn)象，將文字場(chǎng)景化，使其更誘人。
還有一些在平時(shí)工作比較實(shí)用的，只不過或多或少在之前文章中都有提過，這里以補(bǔ)充說明的形式展開。
1. 標(biāo)題文字 – 關(guān)鍵詞變色
說到關(guān)鍵詞變色算是比較常用的一種，就是將原本標(biāo)題文字中一些關(guān)鍵詞進(jìn)行變色處理，目的是增加標(biāo)題文字的視覺變化強(qiáng)度。
通過將案例中「免息」一詞變色處理，使得標(biāo)題在視覺感受上更加明顯、有吸引力，而且給人的感覺也很舒服，這種處理手法是非常實(shí)用的，不妨多試試。
2. 標(biāo)題文字 – 描邊
描邊文字在平時(shí)工作中用到的相對(duì)少一些，這種處理手法也間接地起到了打破常規(guī)的作用，當(dāng)我們一直按照某一些常規(guī)形式工作時(shí)，偶爾做一些改變也許會(huì)得到意想不到的效果。
3. 標(biāo)題文字 – 與主體遮擋
文字與主體營造遮擋關(guān)系也是在日常工作中很實(shí)用的一種，就是將主體與文字相互穿插排放，通過必要位置的陰影進(jìn)行加深體現(xiàn)。雖然元素并不多，但是最終呈現(xiàn)的視覺效果卻很舒服、有吸引力。
這種主體與標(biāo)題穿插表現(xiàn)的形式使得兩者更加整體，對(duì)于畫面而言，主體和標(biāo)題都起到了很好的強(qiáng)調(diào)作用。
文章中提到了一些比較實(shí)用的提升標(biāo)題文字吸引力的處理手法，但是需要注意不能過于追求效果而忽略了設(shè)計(jì)的本質(zhì)，要根據(jù)需求選擇恰當(dāng)?shù)姆绞剑还芎畏N形式，都要保證文字本身的識(shí)別性。文章中提到的并非全部，主要還是為大家提供一個(gè)可以參考的方向，要學(xué)會(huì)舉一反三、大膽嘗試。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.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.wnxcall.com