设计趋势:剪裁文字与排版风格

用户头像
深圳/网页设计师/7年前/5483浏览
设计趋势:剪裁文字与排版风格
用户头像
深圳Clh

一些注重理论主义的设计师可能会说:你永远不应该改变或打破排版的规则。字体应该按照类型设计以及想要表达的意图而做出选择...

一些注重理论主义的设计师可能会说:你永远不应该改变或打破排版的规则。字体应该按照类型设计以及想要表达的意图而做出选择,或者你应该选择不同的字体。虽然这写观点在实际上确实如此,但最近正在流行的一个例外趋势确告诉我们改变并不一定都是错误或坏的。


裁剪文字或排版风格的特点在于,它使用漂亮的效果使文字元素看起来像是用精密工具切割的,并且可以增加视觉类型、标题和简单文本块的视觉兴趣。切分文本效果可以从超细微(如缺少一个字母的小一部分)到单词的主要部分,不同的裁剪面积所带来的视觉效果也是完全不同的。

使用切分文本时要记住的是,单词必须始终是可读的,否则就没有意义了。在使用这个趋势技巧的时候,你应该密切关注字母组合或单词的裁剪是否会影响文本整体的可读性。这里有一些关于如何让它为你工作的一些网站设计的例子,希望可以帮你获得一些灵感。


1.“传统”切分

切分文本包括一个文本元素的分层外观,例如一个单词或小的单词组,在两个平面上被剪切和重叠。这种效果可以产生深度,使一组原本很简单的视觉元素变得更加有趣。

Resoluut将这个效果与他们的品牌标识结合起来,将用户吸引到设计的中心。切分文本强调了下面的消息,该公司专注于“数字设计与态度”,因为通过切分文本使元素的线条和笔画产生了一种更容易吸引用户的视觉流。

当文本的内容或长度很简单(首先考虑无衬线字体)时,该技术的使用效果最佳,单词具有自然断点,在这里可以剪切并保持可读性。


2.切分文字和照片

分层效果并不局限于字体和空间的组合。设计者也可以使用图像和文本来创建一个很酷的剪切效果,比如上面的例子。

单个图像的倾斜切割以及用文字相应的视觉效果可以很容易将用户吸引到设计中。

虽然有些单词起初比较难辨认,但动画之间有足够的时间来很容易地找出信息。

这种趋势对数字机构和作品集网站设计起到了很好的作用,以展示现代的外观和感觉,因为它在创意和视觉上就足够吸引用户的了。


3.裁剪动画

切分文本效果也可以与其他时尚设计元素相结合。将切分的技巧与动画相结合可以产生良好的视觉元素。

在上面的网站设计示例中,每一个被切分的文本元素实际上是导航。用户可以点击任一元素,但更令人印象深刻的是悬停动作,它将被切分的文本重新组合在一起了。


3.用于标识类型

切分文字可以是一种有趣的方式来创建一个logo,当你选择的logo元素仅仅只是文字元素的时候,你唯一需要处理的元素就是文本。一个有趣的字型不仅仅可以是品牌识别的标志,它也可以是一个高度的图形元素,用于多种用途,如衬衫设计。

注意裁剪和切分创建空间的方式。上面的设计使用了一个更大范围的空间,而传统的裁剪或切分更常用的用法通常是细线,但是实际使用的不同方法可以非常显著地发生变化。


4.创建交互性

通过交互式文本和画笔组合,可以让用户在浏览的同时,亲身体验和分割他们自己的文本,例如上面的例子。虽然文本本身并不精确,但艺术是在效果制作的过程中产生的。

任何允许用户改变网站设计的工具都会由于有趣的交互体验而使得用户在站点停留更长的时间。


5.裁剪垂直笔画

虽然大多数设计师似乎以相同的方式使用更倾向于水平方向的裁剪和切分,但切割也可以是垂直的。

垂直切分往往较短,因为每个切割都是单个字母的一部分。垂直切分工作的诀窍在于,你需要尽可能的保持一致性。切割的方式应该是相互类似的,这样字母看起来就好像是一起的。这种切分方法应该看起来像是字体的一部分。


6.建立可视化流程

切分文本最终会形成的一个结果,不管是有意的还是无意的,它一定会创造一个视觉流。用户的眼睛将遵循切分元素的方向和周围的白色空间。

看看上面例子中的Logo。观察Robocath品牌标识中R和O中的不同裁剪(加上C的正常缺失部分),从左到右在屏幕上有明显的方向性“引力”。

这种“引力”比你正常阅读(也就是左到右)更强大,因为这些片段能快速推动你以正确的形式阅读和查看相应的信息。裁剪几乎创造了一种阅读的紧迫感,并在屏幕上营造了一个主要的视觉流。


7.强调字形

最后一个可能也是最有说服力的原因是使用文字设计可以有效的强调文字或信息。

上面提到的MJND的网站设计使用更多的分层效果来隐藏或切分字母,以帮助增强对消息的强调。图像可以轻松地完成这里的所有信息的展示,这种效果有助于用户返回到主消息传递。组合简单,有效,视觉有趣。


总结

使用裁剪和切分文本趋势可能有点棘手,因为它涉及改变文本元素。其中最重要的是可读性不能丢失,否则你会因为这种效果失去用户。

然而,切分文本效果可以是一个有趣的解决方案,并有助于生成焦点。添加一点动画可以帮助它进入下一个层次。




图文来自:design shack 

深圳网站建设公司-Clh翻译编辑整理

15
阅读原文
|
举报
|
33
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
倒计时,海报,平面
活动,优惠,平面,海报,特惠
海底世界插画
古风平面仕女与瓷器
金色颗粒质地的平面
水蜜桃和李子的平面水果图案
城市园林平面布局航拍
城市园林平面布局航拍
牛奶乳液层次梯田平铺平面
平面男孩喝咖啡插画设计
金色颗粒质地的平面
城市园林平面布局航拍
平面人物插画
平面设计 吊牌设计
城阙凡花
空的平台平面和自然景观
空的平台平面和自然景观
平面花卉图案扁平简约无缝拼接插画
牛奶乳液层次平面平铺平面
城市园林平面布局航拍
金色颗粒质地的平面
玄关入门地毯印花图案红地毯
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
金色颗粒质地的平面
金色颗粒质地的平面
你可能喜欢
大家都在看
登录注册