网页中这 10 种字体的运用方式,不会让人觉得 Low
简评:字体特效非常多,有目的地选取合理的特效是让它们发挥效果的诀窍所在。好的字体排版是不需要辅助就能被识别的,否则这个设计是失败的。
本文转载自 UISDC,如需转载请联系他们。
对于设计师而言,在日常的平面和 UI设计中,给字体增加特效一直都是一件恼人的事情。客户提出的浮雕特效或者大阴影的需求,但是直接按照要求来设计可能会毁掉整个设计。更多时候,你需要的是一些相对优雅但是又足够吸引人的字体效果,让整个设计项目的走向更加合理。
字体特效非常多,有目的地选取合理的特效是让它们发挥效果的诀窍所在。好的字体排版是不需要辅助就能被识别的,否则这个设计是失败的。
值得一提的是,最好的字体特效往往是润物细无声的,近乎无形,但是对于整个设计在视觉和质感上都有所提升。
- 有目的地运用阴影效果
无论你使用什么软件做设计,都不要使用默认的阴影效果,这个经验里面包含了太多血的教训。
正如前文所说,好的阴影特效有着较高的融入度,几乎是「隐形」的。在部署阴影特效的时候,不要为了创建而创建,而是要借助阴影来构建前景文字和背景之间的层次感,这种对比恰到好处即可。
这种「隐形」的阴影设计对于设计师而言通常是不难识别出来的,不过普通用户通常不会太注意到它们。这些柔和的阴影,功能只是用来营造对比。
相对较为硬朗的阴影,会给人以更加复古的感觉,在较粗的、笔触平整的字体背后使用这样的阴影效果会比较好。
- 使用双重曝光效果
双重曝光效果在网页设计和平面设计当中是非常流行的设计技巧。在文本字体中使用双重曝光效果能够让它看起来复杂而有趣,尤其是在双重曝光的图片选取得比较精妙的时候,效果看起来会非常惊艳。
- 描边特效
对于较粗的字体使用描边特效,往往能够让字体的轮廓更加清晰,也增加了整体复古的感觉。在上面的案例当中,设计师就借助霓虹色字体和描边特效创造出了独特的氛围。
- 使用多彩字体
多彩字体本身就包含有多样的色彩属性,甚至含有阴影、渐变、透明度甚至纹理。你可以使用多彩字体来让文本拥有远超传统字体的时髦值。
当大量的色彩共同来构成一套字体的时候,字体本身的视觉吸引力就已经达到极致了。现如今明亮大胆的字体是一种设计趋势,这样的配色本身并不会冒犯用户,因为用户正在越来越适应这样的设计。
当然,在色彩的搭配上需要协调且有目的性。
- 适当地融入一些动效
从来都没有规定文本必须是静止的,在网页的文本中加入动效能够提升它的视觉吸引力。
不过,在为文本添加动效的时候,尤其要注意保持文本字体的可读性:
运动轨迹应该是有意识地设计的;
字母的运动不应该太快;
滚动或者自动播放的文本应该可以被停止;
无论屏幕大小,文本内容应该始终保持可读。
- 模仿一些标志性的元素和特征
这两年的 Netflix 的热门美剧《怪奇物语》中,就模仿80年代经典的电影,融入了大量当时的元素,创造出让许多影迷共鸣的设计。
最典型的就是霓虹色的运用,充满80年代风情的 LOGO 成为了该剧最具识别度的元素。这种模仿的基础在于近年来80年代复古元素的疯狂流行,以及霓虹色等设计风格的回潮。
在模仿这些标志性的风格和元素的时候,度的把握很重要,恰到好处的模仿让人觉得亲切,而拙劣的复制则会显得很 Low。
- 引入图形
引入图形或者其他的多媒体元素,在文本中加入一些额外的东西,也是不错的手法。使用图形或者其他的元素来替代一个或者多个字母,这样的设计还是很抓人眼球的。
这种技法的诀窍在于,图形的外观要和字母的风格、形状相匹配。很明显,如果不这么做的话,会让内容难以阅读。
在上面的 Kasra Design 的网页当中,视频的触发按钮和图标很好地融合了起来。
- 增加纹理
有些字体风格本身就显得复古、粗糙,设计师能够通过自定义增加纹理来强化这种感觉。纹理本身能够让文本更加突出一些,也能够强化文本的质感,营造出独特的氛围。
在上面的案例当中,设计师通过两种不同的方式来赋予文本以纹理:
通过切割出来的细节来赋予文本以纹理;
通过半透明的效果让字体透出背景,从而拥有纹理。
- 创造自定义的文本字体
在进行品牌 LOGO 设计的时候,自定义的文本字体是最常见的元素之一。基于特定的字体来进行自定义设计,通过标志性的细节来营造令人难忘的视觉体验,是自定义字体的主要目标之一。
这并不是一件容易实现的事情,自定义文本字体不仅需要足够扎实的技术,而且需要在具体设计的时候,足够小心谨慎。在绝大多数时候,最好是要同专业的字体设计师合作,以达到最好的设计效果。
- 让字体本身发挥效果
有的时候,最好的文本效果,就是不要加其他任何特效。在形状、大小和色彩具有足够对比度的情况下,文本元素和背景会自然地构成前后景的对比,自然分离。
缺少其他效果的加持,设计师需要精心地控制所有的辅助性的元素,确保所有的元素能够完美的协同工作。加粗字体,深浅对比,是比较合理的组合方式。
The University of Essex 这个网站就在较暗的背景上采用了加粗的白色字体,视觉上足够突出,也足够清晰。
结语
文字特效的使用还需要特别注意设计趋势的存在,过于突出的特效可能会显得过犹不及,而趋势的流行周期也是设计师需要尤为注意的问题。微妙的设计总归是拥有更加持久生命力的。
原文:10 Tips for Using Text Effects That Don’t Suck
网页中这 10 种字体的运用方式,不会让人觉得 Low的更多相关文章
- 网页中的数据的4个处理方式:CRUD(Creat, Retrive, Update, Delete)
网页中的数据的4个处理方式:CRUD(Creat, Retrive, Update, Delete) 2018-12-21, 后续完善
- SVG在网页中的四种使用方式
1,直接打开simple.svg <svg xmlns="http://www.w3.org/2000/svg" width="200" height=& ...
- Struts中Action三种接收参数的方式?
前言: 前面已经有一篇随笔介绍了Struts2的大概原理.本文就Struts2中Action与jsp页面进行数据对接时介绍几种常见方法! 值栈ValueStack 3个Action Action1 p ...
- 关于OC中的几种代码延迟执行方式
第一种: [UIView animateWithDuration:3 delay:3 options:1 animations:^{ self.btn.transform = CGAf ...
- 10-vim-选中命令-01-三种选择文本的方式
选择文本(可视模式) 学习复制命令前,应该先学会如何选中要复制的代码. 在vi中要选择文本,需要先使用visual命令切换到可视模式. vi中提供了三种可视模式. 按ESC可以放弃选中,返回到命令模式 ...
- django中的几种返回模版的方式
redirect方法-----(重定向) # 首先导入redirect方法, from django.shortcuts import redirect 在函数中写一个返回值 return redir ...
- 1. svg学习笔记-在网页中使用svg
在网页中使用svg有以下三种方式 1. svg归根结底来说是一种图像格式,虽然有别于jpeg,gif,png等位图图像格式,所以在网页中能嵌入图像的地方都可以嵌入svg,例如将svg文件设置为< ...
- Java 8 创建 Stream 的 10 种方式,我保证你受益无穷!
之前栈长分享过 Java 8 一系列新特性的文章,其中重点介绍了 Stream. 获取上面这份 Java 8~12 系列新特性干货文章,请在微信搜索关注微信公众号:Java技术栈,在公众号后台回复:j ...
- C++中的三种继承方式
1,被忽略的细节: 1,冒号( :)表示继承关系,Parent 表示被继承的类,public 的意义是什么? class Parent { }; class Child : public Parent ...
随机推荐
- 【HDU5361】In Touch
题意有n个人住在一条直线上,从左到右编号为1,2,3....n ...
- 文件后缀与mime类型对应表
//文档文件类型的 .ai application/postscript .eps application/postscript .exe application/octet-stream ...
- Windows ---- mysql 5.7 配置安装
去官网下载mysql 下载地址 https://dev.mysql.com/downloads/mysql/ 根据自己操作系统位数选择相对应的版本 点击Download下载 下载下来后是一 ...
- django项目搭建及Session使用
django+session+中间件 一.使用命令行创建django项目 在指定路径下创建django项目 django-admin startproject djangocommon 在项目目录 ...
- Android代码速查,写给新手的朋友们[转]
原文地址:http://www.open-open.com/lib/view/open1397286499090.html 0 android 创建按钮 Button button = new But ...
- htaccess跨域
目的:为了加快访问速度,减轻主站压力,把静态资源放到独立的服务器上,使用独立的域名 问题:浏览器为安全考虑,实施同源策略:ip/域名和端口必须相同 解决办法: 1.httpd.conf中,开启apac ...
- Cw210开发板
达内培训嵌入式开发板 qt + kernel uboot toolchain
- 使用Intellij中的Spring Initializr来快速构建Spring Boot/Cloud工程
在之前的所有Spring Boot和Spring Cloud相关博文中,都会涉及Spring Boot工程的创建.而创建的方式多种多样,我们可以通过Maven来手工构建或是通过脚手架等方式快速搭建,也 ...
- 05 Computing GC Content
Problem The GC-content of a DNA string is given by the percentage of symbols in the string that are ...
- mysql-day01
Microsoft Windows [版本 10.0.17134.648](c) 2018 Microsoft Corporation.保留所有权利. C:\Users\lijun>java用法 ...