• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 2017年流行的这些字体排版趋势,你都知道嘛?

2017年流行的这些字体排版趋势,你都知道嘛?

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含优秀网页设计,字体排版,经验分享,网页字体,设计趋势等相关知识,希望在学习及工作中可以帮助到您

技术和设计趋势一样,随着时间的推移总在不停地变化。对于网页设计师和前端而言,字体和排版所涉及到的技术和设计尤其是如此。不过纵观这几年,网页字体和排版在大方向上并没有明显变化,结合当前主流产品和设计,并不难确定2017年内,我们需要关注的这些字体和排版趋势。

定制:品牌化的字体

Bookerly, San Francisco, Product Sans 这些带着明显品牌烙印的英文字体,想必设计师们并不陌生,而新晋中文字体苹方,和最近火爆无比的思源系列新字体,思源宋体,无一例外,都在向我们传递一个明确的信息:品牌化字体的大时代来临了。

Bookerly 字体是亚马逊官方联合 Dalton Magg 为Kindle 系列产品所专门定制的字体。设计巨头苹果就更不必说,San Francisco 为苹果产品专用英文字体,覆盖了macOS、iOS、watchOS 和 tvOS 四个核心平台,官方还未中文用户专门定制了苹方字体,从文字层面上彻底完成了品牌化。当然,定制化的字体不仅仅是大企业的专利,在前不久美国总统竞选中落选的希拉里克林顿,还有专门的字体用来对抗大选期间流行的川普专用手写字体……

通过 Prototypo 和 FontArk 这样的工具,自定义英文字体绝对是一件便捷又快速的事情。自定义字体和创意字体本质上是一致的:它们都旨在强化品牌的识别度。

响应:完美适配所有设备

如今每天都有新的产品,新的数字设备诞生,我们对于可以适应各种屏幕显示的字体,依然有着极大的需求。在桌面端上显示的超大字体能够带来视觉冲击力和戏剧性的效果,但是直接沿用到移动端,可能效果并不理想,会让信息的流动性变差,无法流畅地浏览。而这也是响应式设计所要解决的主要问题,字体应该能够根据各种不同的设备的使用场景进行适配。在响应式排版当中,字体尺寸、间距和整个布局都会遵循一整套排版规则,进行自适应。

虽然目前设计师们依然在不断遭遇新的问题,但是响应式排版的整体方案已经比较成熟。

对比:超大和超小尺寸的字体

正如同之前所说的,超大和超小的字体本身就能带来戏剧化的体验,通过尺寸上的对比,来营造独特的视觉奇观,影响访客的主观体验。超大字体毫无疑问是引人瞩目的,它能够将信息视觉化的呈现出来。

另一方面,超小的字体在多用在极简主义的网页上,它常常同首图搭配在一起,和超大字体不同的是,超小的文本内容常常是用来凸显图片内容的,它通过对比将视觉焦点转移到图片上,所发挥的作用和负空间有异曲同工之妙。

超大和超小的字体,本身能发挥作用主要是因为它们所带来的视觉落差,尺寸适中的文本相反没有这样的效果。当然,具体如何使用取决于你的品牌定位,以及你所要用的页面和场合。

性格:增加个性化的色彩

最深刻的艺术,要么是传达思想,要么发人深省。在字体和排版当中,最艺术化的,应该是使用独特而创新的字体来进行品牌设计与传达。实际上,今年我们已经看到越来越多的个性化字体设计用来强化品牌的设计案例了。而最值得关注也是最流行的,大概是水彩和渐变的色彩为字体注入性格的设计手法了。

手写字体也是一个明显的趋势,它们给品牌所赋予的个性更为明显和突出。不过,值得注意的是,有的字体确实是手写或者手绘的,而有的字体只是模拟这种笔触。

复古字体则是另外一个流行趋势,正如同我们常说的,复古一直在流行。复古的字体常常能够给人以精致和品质感。

可变:排版的未来

微软、谷歌、苹果和Adobe 在2016年9月联合发布了 OpenType 可变字体项目,这一项目让字体能够更好地适配响应式排版布局,让单个字体文件能够容纳更多不同样式的字体和布局,OpenType 字体文件规范让设计师能够将不同高度、不同字重、不同间距的不同类型的字体,有机的整合到一个字体文件中,并且灵活地运用到排版中去。

几何:令人着迷的图形

我们的生活中充满了各式各样的几何图形,几何图形本身也是字体设计的灵感来源之一。纤细的线条,棱角分明的形状,或者是圆润的边角,充满几何元素质感的设计让字体显得优雅而流畅,充满现代感。

在过去的一年当中,越来越多的字体设计中开始出现几何元素,不少企业和机构将几何字体和元素引入自家品牌,用以强化品牌所传达的信任感。

叠加:图片和文本的结合

图片和文本是网也设计中最常见的两个元素,两者常常相互配合,呈现信息。图文混排的设计由来已久,但是近几年来,设计师们尤其喜欢图片和文本相互叠加的设计,为了确保文本而和图片的呈现效果,两者要保持较好的对比度,文本不能影响图片的焦点,而图片也最好不要影响文本的识别。图片和文本两者的结合让内容拥有了层次,两者的结合应该是信息的强化,实际效果不应该混淆用户的视听。

混搭:不同字体的组合

一般而言,衬线体和衬线体的组合能够让排版看起来更加一致,但是衬线体、非衬线体甚至手写字体的有机组合,有的时候同样能创造一定的协调感。这种视觉设计的趋势非常的明显,字体的组合搭配结合具有现代风格的纹理/图案,常常能让整个设计更加摩登和丰满。

结语

网页设计中,图片的使用总是不可避免,但是字体和排版用好了常常能够化腐朽为神奇。今天所谈及的不少设计趋势,已经悄然出现在设计圈的各个角落,但是发觉和了解终究还是有差别的,了解它们,运用它们,才能让趋势掌握在自己手中。

【2017年的设计趋势都在这里】

  1. 《作为8年DRIBBBLE粉,和设计师聊聊未来的视觉趋势》
  2. 《PS教程!教你打造2017年最受欢迎的渐变幻彩风格》
  3. 《趋势抢先知!2017年设计师都在讨论的服务设计到底是什么?》
  4. 《2017年,这5个网页设计风格可能会成为主流趋势》

原文地址:inkoniq
原文作者:ROSHI
优设译文:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

优设大课堂

您可能想查找下面的文章:

  • 弹出框里的设计门道,你是否都知道?
  • 遵循这7个原则,能让你的网页用户体验更优秀
  • 氛围独特情绪深沉的深色系网站,设计上有什么讲究?
  • 这3个适用性极强的网页设计趋势,在4月非常流行
  • 怎样设计,才能抓住用户稍纵即逝的注意力
  • 吃透这10个网站,你就明白了网页中留白的技巧
  • 设计出优秀的网站着陆页,这10个技巧能帮到你
  • 换了很多家公司还是在打杂,问题究竟出在哪里?
  • 也许你该注意一下影响网页设计的这5个关键指标
  • 这5个丑出新高度的网站,为什么那么多人夸

相关文章

  • 2017-09-11webpack从入门到放弃
  • 2018-08-23想更好地掌控设计,你还需要懂得形状心理学
  • 2018-08-23在网页中如何践行游戏化设计?研习一下这7个案例吧
  • 2018-08-23实战案例!众安保险PC官网的改版设计经验总结
  • 2017-08-062008年网页设计十条经验总结
  • 2018-08-23这5个思路,能让你的线上广告更加吸引人
  • 2017-08-06专题页设计的5个基本功(阿里巴巴UED 山木)
  • 2018-08-23收福利!5个不为人知但干货超多的交互设计公众号
  • 2018-08-23写给UI新手的APP结构指南:注册和登录
  • 2018-08-23想为iPhone X设计UI?给你这11个设计小贴士

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 网页设计技巧:iframe自适应高度的问题
    • em是何物 em与px的介绍及换算方法
    • 我们邀请了搜狐的UE设计组长,教你应聘UE 设计师!
    • 设计师装备指南之 iMac 电脑全方位科普篇
    • WebPack初步入门
    • 2018 阿里巴巴 UCAN 回顾!张晶华:用户研究在产品定义上的新影响力
    • 超全面!可能是最详细的电商首页设计总结
    • 水彩自学第四集:水彩颜料常见问题和自用测评
    • 腾讯实战案例:如何用设计让更多人参与公益活动?
    • 10个优秀的 Web UI库/框架

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有