提升文字设计感的10种方式

我们在设计中除了接触到图形,还需要了解文字的设计。特别的文字设计或者排版可以使整体的画面效果更加有氛围,甚至超过图形表达的感受,更加直观的表达出内容的主旨。

文字的设计方式有很多种,例如通过字体变形,结构重组等方式来让文字变得更加特别,但往往会让我们耗费比较多的时间。

因此我一直在思考有没有一些方法,既简单又高效的设计方式来提高文字的设计感。在浏览国外的一些设计网站的过程中,做了一下文字设计形式方面的收集,并整理出十种我认为具有代表性的文字设计形式。另外还参考这些设计方式,使用中文字体进行了一些尝试。

一、拉伸的文字

拉伸的处理手法,让文字更具有张力,整体氛围更具标题感和图形化,但依然保留这文字该有但识别度。常见于纯文字排版的海报,既满足阅读需要,同时具有设计感。

拉伸与文字本身的字形、字体有着很大程度的关联,并不是所有的文字都适合拉伸,例如下面的案例

不同字体对比

从方案尝试中看出,左边字体在进行拉伸之后,文字本身的结构会遭到破坏,而右边的效果则较为可以接受。因此在设计的过程中尽量选择可适用于拉伸的字体,另外在拉伸的过程中需要对细节重新处理,使字体保留原有字体的细节美感。

不同字形的对比

从下面案例中对比,O在进行上下拉伸的时候效果比较好,而左右拉伸的时候会失去字体本身的美感,而Y在上下左右拉伸后整体视觉效果都相对平衡。

细节处理对比

优化字体线条的细节可以使得整体文字更加规整、方正(右边)。而未进行细节的设计则会显得笔画参差不齐(左边)。

传统与现代对比

传统的字体拉伸后(如下图中间的字体),字体本身的韵味就失去了,因此不建议对于一些较为传统的字体进行拉伸设计。

设计尝试

中文字的笔画比较多样性,因此在细节的设计上比英文来得更加复杂,在处理“撇、捺、点、折、弯、勾”时需要保持原本的笔画结构性。

拓展案例

结合实际要表达的内容,使用拉伸的设计手法,例如结合物体,叠加颜色或者交错拉伸等。

二、虚实结合文字

虚实结合即为线面/阴阳的设计手法,通过虚实的处理,可以突出一组或一段文字中的重点信息。在一些强调主次的设计中,可以尝试这种方式来做区分,线面结合的处理手法让原有都是面的字体多了一些的透气感和空间感。

虚实处理的方法需要考虑本身字体的粗细,过分纤细的字体效果可能并不明显,

尝试对比:

从对比中,发现粗体相比于细体来得更加直接更容易出效果,对比明确。 

中文字体的尝试

从尝试中来看,与上面中的结论较为一致,较细的字体使用虚实结合效果并不理想。对于书法体的应用,更多需要考虑字体的收边效果是否工整,收边过碎,会影响在描边之后的细节美感。

设计尝试

三、递进渐变的文字

通过递增或者递减的设计手法,让原本简单重复的文字元素,变得更加具有层次感和节奏感,让文字的生命力变得更加丰富多样。

在设计的过程中需要提前规范好各个之间的差异关系及变化的效果过程。按照一定的数值倍数差异比进行变化。

不同方式的尝试对比:

在尝试的时候发现,粗细变化的模式可能更多会依赖于字体本身的模式。

中文字体的尝试

中文在使用递进渐变的方式中需要考虑整体文字的结构感和块状感,由于字形较为复杂,整体视觉效果会过于零碎。

四、扩展变化的文字

与递进渐变接近但却又差别的文字设计形式。扩展变化的文字具有张力的同时具有一定的速度感和发射性,就像向四周展开的波纹效果,具有延续性。

按文字的行高或者字宽作为基础值,按一定的比例,对文字进行破形切割处理,上下左右进行扩展发散。

比例值示意效果:

中文字体的尝试

外观的完整度还算可以,但由于中文本身自有的特性(笔画较为丰富多样),因此在扩展层次的数量上需要进行一定的控制,不宜过多,以短语或标题使用较好,避免过于形式而导致文字识别性降低。

设计尝试

五、底纹的文字

文字作为纹理出现在画面中,区别于图形化的纹理。既有图形感,同时可以辅助传达一定的信息和态度。

在字体的选择上尽量适用字形较为简洁的字体,避免影响前景内容的展示。设计上可以结合其他的设计形式,例如虚实结合/拉伸变形/扩展变化等方式,提升画面的丰富程度。 

中文字体的尝试

常规的中文字体,整体效果还算不错。但结合中国书法字作为底纹,可以让整体的设计更具有不同于英文的设计感,整体效果更具有力量感,因此建议在设计中文底纹的时候可以大胆尝试中文书法字。

六、穿透的文字

通过叠加的方式,让原本简单的文字和背景产生了融合。既提升了背景的层次感,又让文字变得具有设计感。

粗细的字体会产生不一样的视觉感受,较细的字体会产生若隐若现的视觉效果,文字的识别性会稍弱,较粗的字体识别度基本上没有太大问题,因此在设计的过程中可以结合实际的情况选择不同粗细的文字。

粗细对比尝试

穿透的文字设计,对于打造设计的大片感具有很突出的视觉效果。例如漫威的电影片头设计

中文字体的尝试

结合不同的语意使用不同的字体,再结合穿透的设计方式,使画面具有中文的文艺感。

拓展案例

结合实际的内容设计,穿透文字的玩法还可以拓展出更多不一样的设计,例如下面这些例子。

七、扭动的文字

扭动的设计,让文字具有曲线的动态感,提升了文字的装饰性。不同曲线的动态变化,赋予文字不同的律动感。变形的文字并未影响到文字该有的识别性和阅读感,却具有了设计感。

如下面的三个案例,曲率的差别,赋予文字不同的动态规则,具有了不同的视觉感知,有时柔美,有时却具有速度感。因此在设计的时候,可根据具体的内容设计不同的扭动趋势。

中文字体的尝试

对比可见较细的字体使用扭动的设计,效果并不理想。由于中文笔画的差异点,经过扭动之后整体外形较为不规整,而粗体的效果则较为规整,动态曲线趋势也较为明显。

设计尝试

扭动+虚实+底纹的效果。

拓展案例

更高级的设计手法是利用自然环境的介质结合文字,起到扭曲的视觉效果。

八、立体层叠的文字

与扩展变化有异曲同工之妙,文字通过按一定的角度和位移间隔,由二维向三维的视觉效果进行变化,让文字更加多变化、重量感、层次感。

立体层叠的设计对于字体本身具有一定的要求,较为纤细的字体出来的效果并不理想,

不同的字体尝试

从对比中看出,细体或较细的衬线字体,层叠后会出现衔接不上或视觉黑点的情况(如下面左图和右图)。因此设计时建议使用粗体,并且整体笔画较为平均的字体(中间的图)。 

中文字体的尝试

虽然具有了层次感和空间感,但也会让整体变得更加复杂,因此需要根据文字但多少情况进行使用。

拓展案例

立体层叠还不止单向的设计,例如可以进行轨迹变化,向外扩展层叠,或是增加一些颜色渐变来丰富整体的设计。

九、颜色叠加的文字

文字通过错位,叠加,颜色变化,透明度变化,切割等方式的设计之后,具有故障的视觉偏差感知。整体视觉感知类似双重曝光的照片,文字具有丰富的层次感。

颜色叠加的效果,对于颜色的选择极为重要,两个颜色交错之间的颜色可以为过度色或者互补色。

细体的效果并不理想(如上图左边第一个),建议设计的过程中使用较粗的字体,另外在使用的过程中需要考虑文字的识别度(如右边的效果),重叠之后文字的识别度或多或是会受到影响。 

中文字体的尝试

由于中文字比英文复杂,因此使用中文字在设计的时候,可以寻找一些共笔的地方进行重叠(如下图左边的设计),利用字体笔画粗细一致的情况下,进行了边与边的重叠。另外在设计的过程中建议加大字距离,这样可以避免不同文字的重叠,产生过度复杂的效果,影响文字的识别性(如下图最右边的设计)。

拓展案例

在简单的叠色之外,结合不同质感和肌理,可以让整个文字更具有不一样的视觉感受。

十、立体空间的文字

文字按照立方几何结构进行排版,通过颜色差异,阴阳,线面等方式设计处理后形成空间感和立体感。相比于平面排列的文字更具有空间感和层次感,提升整体画面的设计感。

设计尝试

使用空间错位结合虚实的设计,让简单重复的文字变得具有空间感和立体感。

拓展案例

除了常规的空间打造,甚至可以融入到场景中或者结合物体本身的设计。

以上设计风格,常常会在一些运动品牌的设计中看到,如下:

Nike的设计中应到的文字,也会结合这些方式,来丰富和提高整体的设计感。

火箭队出场片头的字体应用,线形字体叠加渐变的效果,具有层次感又有未来感。

阿迪达斯的广告

Converse的广告

Under Armour的广告

除了一些品牌的设计,音乐唱片的封面也有应用到这些类型的设计手法。

我们除了在一些常规的媒介上会看到相关的文字设计,在这两年的耐克或阿迪达斯的鞋子设计中,也会加入文字元素的设计,甚至球员会直接在鞋子上直接写上文字。

其他更多—文字设计的拓展叠加

文字的设计已经成为一种新的设计趋势,结合实际需要表达的想法,对于设计手法进行活学活用是做出好设计的关键。当然对于基础手法的掌握才可能做到举一反三的设计思考。在实际设计的过程中,我们往往不会是单独使用某一种方式,而是对不同的设计手法进行重组再设计,或者使用2-3中方式叠加设计来打造整体的画面效果。如下:

最后

在这十种基础的文字设计中,通过结合发散可以迸发出远远不止于十种的创意设计。本次收集总结除了自身学习提高之外,希望可以起到抛砖引玉的作用,激发设计师对于文字的设计思考。

谢谢品鉴!

本文部分按图片来源于Behance和Pinterest

  • 璁捐鍑烘紓浜殑瀛椾綋缁勫悎鏁堟灉鐨勫崄涓榛勯噾瑙勫垯
    绛旓細杩欑瘒鏂囩珷鏄笂涓绡囨枃绔犮婁簩鍗涓鍒╃敤瀵规瘮璁捐鐨勬柟娉銆嬩腑绗18鏉℃彁鍒扮殑鐢ㄥ瓧浣撶粍鍚堟潵澧炲姞瀵规瘮鏁堟灉閲屾彁鍒扮殑閭g瘒鏂囩珷銆 璁捐鎴栬呰壓鏈殑涓栫晫,鏄病鏈変粈涔堜竴鎴愪笉鍙樼殑娉曞垯鐨勩備簡瑙d簡鍩烘湰鐨勮鍒欎箣鍚,鎴戜滑灏卞彲浠ュ姞鍏ヨ嚜宸辩殑鎯虫硶,鑷敱鐨勫幓鎵撶牬瑙勫垯銆傞偅涔,鏉ュ涔犲瓧浣撶粍鍚堢殑涓浜涘熀鏈鍒欏惂銆備竴璧锋潵鐪嬬湅鍦ㄨ璁′腑宸茬粡琚瘉鏄庡彲浠ヤ娇鐢ㄧ殑鍑...
  • 璁璁捐缁嗚妭鏇撮珮绾鐨10涓瀹炵敤灏忔妧宸
    绛旓細涓嶈浣跨敤涓绉嶅瓧閲嶄笉鍚屽瓧浣撳ぇ灏忕殑鏂瑰紡鏉ュ缓绔嬪姣斿拰灞傛銆傜浉鍙,鎶婁富瑕佸唴瀹瑰姞绮楀姞娣,鎶婃瑕佸唴瀹瑰彉缁嗗彉娣(涓嶅お閲嶈鐨)銆傚垱寤轰笁绉嶄笉鍚岀殑鏂囧瓧棰滆壊,浠庢繁鑹插埌娴呰壊(鍙傝涓嬮潰鐨勭ず渚)銆傞氬父鎴戜娇鐢ㄦ垜璁捐鐨鍩虹棰滆壊浣滀负姝f枃鏂囧瓧棰滆壊銆備笉瑕佸鎬曚娇鐢ㄥぇ鐨勫瓧浣撴瘮渚(渚嬪:24px鏍囬銆16px姝f枃銆10px鏍囩绛)銆傛洿澶х殑瀛椾綋姣斾緥=鏇村ソ...
  • 绉戞妧鎰焢ng-PPT涓偅浜涘ソ鐪嬬殑瀛椾綋鏁堟灉閮芥槸鎬庝箞鍋氬嚭鏉ョ殑?
    绛旓細02鍒朵綔缂哄け鏂囧瓧 瀵逛簬缂哄け鏂囧瓧杩欎釜姒傚康鍙兘澶у閮戒笉鏄緢鐞嗚В,涓嶈繃娌″叧绯,鍥犱负杩欐槸鎴戣嚜宸辩瀻璧风殑鍚嶅瓧銆傜湅瀹屼笅闈㈣繖鍑犱釜妗堜緥,浣犲氨浼氭槑鐧戒簡: 璁╂枃瀛楃己涓灏忓潡,鍙互璁╂枃瀛楃湅璧锋潵鏇村叿璁捐鎰,杩樹赴瀵屼簡椤甸潰鐨勫眰娆! 鍏充簬缂哄け鏂囧瓧鐨鍒朵綔鏂规硶,涔熻澶ч儴鍒嗘湅鍙嬮兘鐭ラ亾,浣跨敤甯冨皵杩愮畻灏辫兘鎼炲畾: 閫変腑鏂囧瓧,鎸変綇shift閿,鍐嶇偣鍑诲舰鐘,鏈鍚...
  • 骞抽潰璁捐鎰忓康琛ㄧ幇鏂规硶
    绛旓細鍦ㄥ钩闈璁捐涓渶瑕佺敤瑙嗚鍏冪礌鏉ヤ紶鎾綘鐨勮鎯冲拰璁″垝,鐢鏂囧瓧鍜屽浘褰㈡妸淇℃伅浼犺揪缁欏彈浼,璁╀汉浠氳繃杩欎簺瑙嗚鍏冪礌浜嗚В璁捐甯堢殑璁炬兂鍜岃鍒掋備笅闈㈡暣鐞嗕簡涓浜涘钩闈㈣璁℃剰蹇佃〃鐜鏂规硶,涓璧锋潵鐪嬬湅鍚! 1.鐩存帴灞曠ず娉 杩欐槸涓绉嶆渶甯歌鐨勮繍鐢ㄥ崄鍒嗗箍娉涚殑琛ㄧ幇鎵嬫硶銆傚畠灏嗘煇浜у搧鎴栦富棰樼洿鎺ュ瀹炲湴灞曠ず鍦ㄥ箍鍛婄増闈笂,鍏呭垎杩愮敤鎽勫奖鎴栫粯鐢荤瓑鎶宸х殑...
  • 鏂瑰舰鐨勬暟瀛楁槸浠涔堝瓧浣撴墦鍑烘潵鐨
    绛旓細3銆佽繛鎺ュ瓧涓庡瓧鐨勮繛鎺ワ紝鎴栬呯瑪鐢讳箣闂寸殑杩炴帴锛岃繖绉鏂规硶鍦ㄥ箍鍛婃爣棰樺拰缃戦〉鏍囬涓瀬涓哄父瑙侊紝閫氳繃鐩搁偦瀛椾綋鐨勭瑪鐢昏繛鎺ワ紝蹇鎻愬崌璁捐鎰銆傚瓧涓庡瓧鐨勮繛鎺ヨ兘鎵撶牬鏂瑰潡瀛楃殑鍒剁害锛岄噸鏂扮粍鍚堟垚涓烘椿娉肩編瑙傘佸瓧褰㈣繛璐粺涓鐨勬柊褰㈡侊紝浣嗕笉鍔犳濊冨湴鐢ㄧ洿绾夸覆鑱斾細鏈夊钩鏉裤佸崟璋冪殑鎰熻銆傝璁℃椂搴旈夋嫨鍙繛鎺ラ儴浣嶆垨鍏卞悓鐨勭瑪鐢伙紝鏍规嵁鏂囧瓧...
  • 鍒涢犵嫭鐗璁捐鐨勫崄绉嶆柟娉
    绛旓細璧板嚭浣犵殑鑸掗傚尯鍙互甯姪浣鎻愬崌璁捐甯堢殑鍦颁綅鈥斺斿綋浣犲皾璇曟柊鐨勪笢瑗挎椂,浣犲彲鑳戒細瀵逛綘鑳藉瀛︿範鍜屽畬鎴愮殑涓滆タ鎰熷埌鎯婅銆 浠ヤ笅鏄袱浣嶈璁″笀閲囩敤涓ょ鎴劧涓嶅悓鐨勬柟娉鏉ュ鐞嗗悓涓涓婚鐨勪緥瀛:涓涓绠鍗曡屾湁瑙掑害,鍏锋湁鏈灏忕殑缁嗚妭; 鍙︿竴涓洿澶嶆潅銆佹湁鏃嬭浆鎰,鍏锋湁閿欑患澶嶆潅鐨勭粏鑺傘 灏界瀹冧滑瀹屽叏涓嶅悓,鍗存槸涓ょ椋庢牸鈥斺旀渶绠鍗曞拰鏇村鏉...
  • 骞抽潰璁捐甯哥敤琛ㄧ幇鎵嬫硶鏈夊摢浜?
    绛旓細閫犳垚涓绉嶅厖婊℃儏瓒o紝寮曚汉鍙戠瑧鑰屽張鑰愪汉瀵诲懗鐨勫菇榛樻剰澧冦6銆佷互鎯呮墭鐗╂硶 鍦ㄨ〃鐜版墜娉曚笂渚ч噸閫夋嫨鍏锋湁鎰熸儏鍊惧悜鐨勫唴瀹癸紝浠ョ編濂界殑鎰熸儏鏉ョ儤鎵樹富棰橈紝鐪熷疄鑰岀敓鍔ㄥ湴鍙嶆槧杩欑瀹$編鎰熸儏灏辫兘鑾峰緱浠ユ儏鍔ㄤ汉锛屽彂鎸ヨ壓鏈劅鏌撲汉鐨勫姏閲忥紝杩欐槸骞抽潰璁捐鐨鏂囧渚ч噸鍜岀編鐨勬剰澧冧笌鎯呰叮鐨勮拷姹傘傚弬鑰冭祫鏂欐潵婧愶細鐧惧害鐧剧--骞抽潰璁捐鐞嗚 ...
  • 鎻愰珮璁捐鐨鍏ぇ鏂规硶
    绛旓細涓銆佺湅鐢佃鑾峰彇淇℃伅锛氱湅鐢佃闄や簡濞变箰鎬ц川浠ュ锛岀湅鐢佃鎻愰珮璁捐甯堣嚜宸辫兘鍔涙槸涓緢 濂界殑閫斿緞銆備絾瑕佹湁閫夋嫨鍦扮湅鐢佃锛屼笉鏄粈涔堣妭鐩兘鑳芥彁楂樹綘鐨勮璁¤兘鍔涚殑銆傛椂灏氥侀鍦熶汉鎯呫佹梾娓搞佹柊闂汇侀兘甯傛晠浜嬬墖绛夛紝鏈夐夋嫨鐨勭湅銆傛渶閲嶈鐨勬槸瀛︿細鍒嗗眰鐪嬶細浜 鐗╂儏鑺傛墍澶勭幆澧冿紙鑳屾櫙锛夈侀鎯呮皯淇楃瓑鍒嗗紑鐪嬶紝鏈夌殑鏃跺欏彲浠ュ拷鐣...
  • 銆!銆嶇殑璁捐:璁捐楝兼墠浣愯棨澶鐨10涓鍒涙剰鍏抽敭瀛
    绛旓細姝ゅ,鏈功涔嬪緱浠ュ彂琛,瑕佹劅璋互鍚堣憲鑰呯殑韬垎浠d负鎵х瑪鐨勮鑰呭窛涓婂吀鏉庡瓙灏忓銆佹媿鎽勫皝闈㈢瓑鐓х墖鐨勬憚褰卞笀鏋楅泤涔嬪厛鐢熴佹媴浠绘湰涔璁捐鐨鑹烘湳鎬荤洃鍔犺棨鎯犲皬濮愩佸湪閲囪鏂归潰榧庡姏鐩稿姪鐨勫悇浣嶃佹荤紪杈戜笅宸濅竴鍝夊厛鐢,浠ュ強鏃ョ粡璁捐缂栬緫閮ㄧ殑鍚勪綅銆 浣愯棨澶 Starbucks Espresso Journey銆 灏卞儚鎸戦変竴鏈功涓鏍,鎸戦夊挅鍟′篃鏈変竴绉嶈垝鏈嶇殑宸紓鎰 (...
  • 浠涔堟槸瑙嗚琛ㄨ揪鏂规硶?
    绛旓細瑙嗚琛ㄨ揪鏂规硶灏辨槸浠ヤ笅杩欎竷绫昏瑙変紶杈璁捐锛1銆佸瓧浣撹璁 璁╀汉浠幏鍙栧ぇ閲忎俊鎭紝涓昏鍒嗕负鏀挎不鎬с佸叕鐩婃с佹枃鍖栨у拰鍟嗕笟鎬с2銆佸寘瑁呰璁 瀵逛功绫嶇殑灏侀潰鍙婃帓鐗堢瓑杩涜鑹烘湳鍖栫殑璁捐锛岃兘鎻愰珮璇昏呯殑闃呰鍏磋叮銆3銆佹爣蹇楄璁 浠ョ壒瀹氱殑鍥惧舰璞″緛鎴栦唬琛ㄦ煇涓鍥藉銆佹満鏋勩佸洟浣撱佷紒涓氭垨浜у搧鐨勭鍙枫4銆佸浘鍍忚璁 浼氳繍鐢ㄨ瑙...
  • 扩展阅读:学会说话的96个沟通技巧 ... 文字排版怎么排 ... 提升自己的10个方法 ... 文案自动生成器 ... 怎么在原图上修改文字 ... 免费艺术字设计生成器 ... 免费logo设计自动生成 ... 怎么提高情商最有效的方法 ... 免费文字logo设计生成器 ...

    本站交流只代表网友个人观点,与本站立场无关
    欢迎反馈与建议,请联系电邮
    2024© 车视网