当前位置:首页 > 校园动态 > 设计教程

网页缺乏设计感,试试这几个方法!丨干货教程

发布时间:2017/12/8 15:00:13

编者注:这种设计技巧在印刷品上早有应用,但最近在网页或移动端界面上应用变得越来越多。

最近一些网站的设计好像明显违反了我们熟知的设计法则,故意用视觉元素把字体的一部分给挡了起来,但却看起来格外有设计感。

这个技巧很有意思,因为它打破我们经常说的关于可阅读性和快速和读者建立连接的规则。毫无疑问,要用好这个技巧是有难度的,但如果执行得好的话能产生很有冲击力的视觉效果。

简单的遮挡

 

重点是画面里得其他部分要尽可能的简洁,这样用户不会被眼花缭乱的设计给弄迷糊了。

Root Studio的这个例子就做得很好。看的第一眼就被这大面积的纯色和长颈鹿挡住了一步部分的字体给吸引住了。这里的要点在于,即使这个字体被挡住了之后不妨碍我们知道这是个什么字母。因为设计的时候考虑了字体的尺寸还有长劲鹿的位置,所以这部分文字依旧还有很高的可读性。

字体“ROOT”作为这个网站的品牌,所以设计师保证了它有一定的完整度。需要注意的是在响应式页面上,要适当减少遮挡(这是很容易犯错的一个点,有时在桌面端效果非常好,但在移动端确出现错误)。

立体效果

 

加上一些立体效果能让画面里的元素显得更跳脱一些,拉近与观众的距离感。在一些情况下,把字体作为背景是个不错的选择。但要确保上面的物体不要过分遮挡下面的字体,也要避免遮挡后变成另外一个字母的情况。

Simply Chocolate这个案例就做得很好。原因在于本身底下的文字是简单易懂的单词,字体也设置得非常大;同时上面的物件大小适中,而且物体上还有同样的单词。

通过这样的处理,底下的文字从单纯的可阅读内容变成了更具装饰性的元素,整个画面从而变得更有层次感(感兴趣的小伙伴可以去它们网站看看他们这个系列的其他设计)。

忘掉布局的规则

 

在一些情况下,只是进入到文字的栅格内而不是直接覆盖到字体上也有不错的效果。

North Street 这个例子就看似打破了秩序,中间那条线紧紧地挨着旁边那段文字,但画面却不显得混乱和细碎(整个网站基本上都沿用了这个设计元素)。这是由于大面积的留白,整个画面的视觉变得很简单;字体的粗细也刚刚好能把那条打破布局规则的细线衬到背景里去。

大部分观众可能没有留意到,设计师用画面里另一条细线在导航那里故技重施了一下。

只适用于大的文字

 

看了这些例子,你应该就发现了这种技巧比较适用于粗大的而且简洁的字体。

小的文字的可利用空间不足,而且在使用这个技巧的时候,文字的遮挡最好能形成一个创意,这种在小文字上是比较难实现。所以由于创意和可读性的因素,这种技巧比较适用于大的文字。

这些文字通常用的是易于阅读的无衬线字体,有着中等的粗细程度,并且还有大的字碗和字怀(编者注:字怀就是字母所包含的内部空间,无论是否封闭,也就是字碗的内部区域。比如H或者n两个竖画之间的空间;字碗是字母中弯曲的圆形区域,如大写字母O或者小写字母e,字碗可以是闭合的也可以是开口的)。这样覆盖在上面的元素才有充分的施展空间。细瘦或者压缩的字体是不适合的,花哨和复杂的字体因为可读性的问题也是不适合的。

降低对比度

 

这种风格说白了是对字体和其他元素之间关系的思考,所以你把字体和其他的背景元素的对比程度降低也能出效果。

需要注意,这个地方又是难度比较高的,因为要把握好这个对比度,保证文字可读性。

当画面上有更显眼的文字的时候,这些降低了对比度的文字可以作为一种微妙的视觉补充。当用户看完那些高对比的文字,再自然地把视线转移到这上面来。

在上面这个Anew的例子里,右上角对于品牌的描述身在这个情景下比品牌的名字本身要重要一些,于是被设计师凸显了出来。画面想要给观众传达“rooftop+test kitchen”这个重要概念,所以设计得更显眼,但用户同时也还是能识别出logo底下那个对比度比较低的“Anew”。

还有一点值得注意,画面内容本身也是这个风格在这里奏效的原因。“Anew”和洁白的餐盘也是有较高关联性的,所以低对比度对于理解的影响又减少了一些。

总结

字体遮挡在界面设计上的应用不久之前还很少看到,但最近用得越来越多(在印刷品设计上用得比较多,因为不用考虑响应式的问题)。

再次强调一下,要确保遮挡之后的文字意义没有改变,而且易读性能保证。如果风险太大,请考虑其他风格,因为好设计还是要保有对用户友好的前提。

优设译文:小李同学

原文题目:Design Trend: Obstructed Text优设译文:小李同学

 

温馨提示:长沙牛耳数字艺术学院互动媒体平面设计专业2017年招生火热进行中!专业师资团队、案例式教学方式、毕业推荐就业,只要你想学,这些通通都为你备好!对艺术设计行业感兴趣的同学可来电咨询或>>点击进入在线咨询平台<<直接与专业老师对话!

官方电话:400-0731-835

微信咨询:csnewerart

报名地址:长沙市五一广场文运街省电教馆2-3楼牛耳数字艺术学院

开班信息

在线咨询
/* 浮窗 */