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