什么是字距排版?网页设计定义。

什么是字距排版?网页设计定义01

包含在用户界面 (UI) 样式指南中的一个关键元素是排版将如何出现在您的移动程序 或 网站设计中。您可以选择是要使用预先存在的字体还是创建您品牌独有的新字体。但是随着您的排版决策变得更加细化,您最终将需要讨论字距调整。

如果字距调整对您来说是一个新概念,那么本文将帮助您弄清楚它是什么、它的目的以及如何使用它来改进包括排版在内的设计。让我们首先定义字距,以便更好地理解它是什么。

什么是字距调整?

字距调整是指两个单个字母之间存在的间距。这是一种可以追溯到印刷机的排版方法,最初被称为间距。虽然您可能已经在最近的UI 设计中遇到过字距调整,但了解字距调整最佳实践和最佳入门方式非常重要。让我们仔细看看字距调整以及如何开始将其融入您的设计过程。

字距调整的目的是什么?

字距调整的目的是完全控制排版的间距,以便每个字母都有足够的喘息空间。例如,如果您将"l"和"i"等可区分的小写字母放在一起("li"),字体的字距调整不是问题,但如果您将大写"V"和"由于间距增加,A' ('VA') 在一起。字距调整还可以通过使排版更易于阅读且不那么吓人来帮助您克服认知超负荷的问题。

当设计师使用他们的设计系统工具构建他们的 UI 基础架构时,他们会记录段落、组件、边距、填充等之间的间距。这种谨慎的元素间距方法应该扩展到您对设计排版的看法。

数字排版中的字距

即使您的设计工具自动将间距合并到您的排版中,您仍然需要根据您当前正在设计的内容以及您计划如何将排版合并到该设计中来考虑字距调整。下面,让我们分解字距调整值和字距调整表的含义,以帮助您入门。

紧缩值

在字距调整过程中调整字母间距时,有正值和负值之分。每个正增量都会增加任意两个字母之间的间距,而负增量会减小间距。但是,请记住,每个字母都有不同的形状和大小,因此突出显示所有文本并同时调整所有间距的值可能不会产生您想要的效果。

字距调整表

自印刷机发明以来,字距调整已成为排版设计的主要内容,因此创建了字距调整表以帮助指导设计师的流程。字距调整表是一个字母对列表,其中包括每个列出的对的最佳间距值。在排版设计过程中参考这些表格很有用,但重要的是要记住您选择的字体在字母间距中起着重要作用。

4 种字距调整

调整排版间距有四种关键方法,包括:

  1. 公制字距
  2. 光学字距
  3. 手动字距调整
  4. 上下文字距调整

让我们快速浏览一下每一个,以了解它们的含义以及它们的工作原理。

1. 公制

公制字距调整是一种自动字距调整选项,可以轻松地在字母之间创建空间,而无需花费大量时间进行设计。这种字距调整方法使用一个字距调整表,其中存储了每对字母之间特定间距的值。

2.光学

光学字距调整是一项高级功能,可自动检测每个字母的轮廓。这种字距调整方法使用一种算法来计算字母之间的最佳间距。

3. 手动字距调整

手动字距调整只是自己调整每个字母之间的间距,这看起来很乏味。但是,手动调整字距为您提供了自动选项无法提供的控制级别。对于经常使用排版的设计师来说,这是首选方法,尤其是在平面设计方面。

4. 上下文字距调整

上下文字距调整本质上是查看一串字母以确定它们之间的适当间距。这种字距调整方法会根据整个单词的最佳间距自动移动字母,而不是仅将两个字母视为一组。

改善排版的字距调整技巧

现在您了解了可供您使用的不同字距调整选项,是时候查看一些有助于指导您完成整个过程的关键提示了。

  • 留意特定的字母配对。字母有各种各样的形状,其中一些在彼此相邻放置时非常尴尬。一定要注意倾斜的字母(A、K、V、W、Y)、带有手臂或交叉笔划的字母(F、L、T),以及特定的字母配对(W 或 V 与 A;T 或 F 与 A )。
  • 观察间距如何随字体大小变化。随着您增加或减少字体大小,字母之间的间距可能会改变并改变排版的预期外观。您应该将其余设计中的相同视觉层次结构方法应用于排版间距。
  • 让字母呼吸。手动调整字距时,请确保不要将空间减少太多或太少,除非是针对特定用例。否则,它会降低单词的可读性,损害用户的整体体验。在运动或用户体验 (UX) 动画设计中使用排版时,这一点尤其重要。

什么是字距调整的最佳字体?

最好的字距调整字体是那些字母之间已经有很好间距的字体,因为这将为您节省大量的编辑时间。此外,尝试选择一种简约且易读的字体,让任何人都可以轻松阅读,尤其是如果你还是第一次学习如何进行字距调整。

字距调整的价值以及如何开始

虽然字距调整似乎是一个不值得投入大量时间的小调整,但现实情况是它会对您的观众如何消费和欣赏您的排版产生巨大影响。例如,您网站主页上的大文本以及字母之间的间距不一致确实会分散体验,并且还可能破坏您网站的可扫描性。

如果您仍然不确定如何开始使用字距调整,请访问不同的网站并将排版示例的图像保存到您的设计灵感情绪板上。如果您遇到一个独特的排版挑战,您可以通过查看您最喜欢的样本集合来解决它。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/238691.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚重蔚管理团队
上一篇 2023年3月7日 12:14
下一篇 2023年3月7日 12:14

相关推荐

  • UI设计如何配色?4000字干货帮你提高视觉设计的配色水平。

    在平时的设计创作中,色彩搭配是很基础且重要的。那如何才能让自己成为了一个会搭配的设计师呢?除了日常的审美和创作积累,其实掌握好色彩基础和搭配原理才是让自己设计配色提升的第一步。下面就带大家由浅入深全…

    2023年3月1日 SEO操作
    01
  • 什麽是基於媒体查询的响应式设计?

    响应式的页面设计,是现在都非常流行的方式。只不过要认清的是,在实际的页面设计当中响应式设计还存在着一定的局限性。除了加载速度之外,还有就是很少小网站、小应用会采用一套代码来适配所有终端。 因此,就目前…

    2022年6月25日
    0143
  • 如何利用动效设计提升网站的用户体验

    随着交互设计的重要性逐渐提升,动效也越来越倍受设计师所重视。动效设计不但是取悦用户的工具,更视为改善用户体验的重要手段。那麽,如何利用动效设计提升网站的用户体验? 一、弹性动效   一般来说,弹性动…

    2022年6月25日 建站资讯
    0119
  • 为网站设计师推荐一组色彩工具。

    为您的网页设计项目设置一个基本的颜色主题可能是一项简单的任务,然而,决定正确的组合或想出一个配色方案可能是棘手的,特别是当您不知道哪种颜色工具最适合您。因此,为了帮助您为您的项目确定最佳的配色方案,…

    2023年2月23日 SEO操作
    09
  • 如何制定色彩规范?7个步骤带你走完实战流程。

    物联网产品的色彩运用,一般分为主色、辅助色、功能色和中性色。主色与企业品牌色相关;辅助色主要用于区别分类;功能色就是成功提示、警告提示和错误提示;中性色主要是背景、文字、线条和线框。系统的色彩规范制…

    2023年3月7日 SEO操作
    07
  • 如何让动效元素增加界面生命力

      控制使用者的视觉焦点   在使用者打开你的介面时,应该尽快地去吸引用户。尤其是使用者第一次打开时,必须给予他们富有视觉冲击力的元素。而动效最适合不过了!除了要让使用者在视觉上感觉愉悦之外,还…

    2022年6月25日
    099
  • 我来分享网站建公司有哪些注意事项。

    1. 确定目标客户群体,2. 选择合适的网站类型,3. 设计简洁易用的网站界面,4. 优化网站SEO,5. 保证网站安全性,6. 定期更新内容,7. 提供优质的客户服务。 (图片来源网络,侵删) 在建立公司网站时,有许多重要…

    2024年6月30日
    01
  • 小编分享网站如何开发。

    网站开发需要设计、编码、测试和维护。确定网站目标和功能;选择合适的技术栈;编写代码并部署到服务器;持续优化和更新。 (图片来源网络,侵删) 网站开发是一个复杂的过程,涉及到多个步骤和技能,以下是一些基…

    2024年6月30日
    01

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息