打造精致UI界面:字体设计的妙招

embedded/2024/10/21 11:27:10/

字体设计是UI设计的关键模块之一。字体设计是否有效可能直接实现或破坏整个UI界面。那么,界面设计的字体设计有哪些规范呢?如何设计细节字体?本文将解释字体设计规范的可读性、可读性和可用性,并介绍UI界面中的字体设计技巧。

如何在UI中设计字体?

1.1 默认字体使用移动终端系统

目前,移动终端上使用最广泛的iOS和Android系统对字体的使用有自己的规范。设计和开发人员遵循这些设计规范,可以达到最佳的显示效果。

默认情况下,iOS设备系统中文字体为PingFang,英文字体和数字字体为Sang Francisco。

Android设备系统默认中文字体为思源黑体,英文字体为Roboto。

即时设计内置了思源黑体、站酷快乐体、江西拙楷体等多种免费商用中文字体,无需手动安装即可使用,商业设计项目无侵权风险。如果即时设计的云字体库不能满足您的需求,也可以安装「字体助手」,从本地导入安装在计算机上的字体,为您的字体设计提供更多样化的选择。

即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具,支持 Sketch、Figma、XD 格式导入,海量优质设计资源即拿即用。支持创建交互原型、获取设计标注,为产设研团队提供一站式协同办公体验。icon-default.png?t=N7T8https://js.design/community?category=search&search=%E5%AD%97%E4%BD%93&source=csdn&plan=btt0618

1.2 灵活调整行高

虽然我们在设计字体时通常强调一致性,但并不是所有的高度都应该完全一致是正确的。在处理不同大小的文本时,最好根据段落本身的特点来设置高度。对于大段文本,适当增加高度,可以使行之间的识别度更高;当文本段落本身相对紧凑短时,可以适当降低高度,不会带来可读性问题。

1.3 选择合适的字号

移动设备的屏幕很小。为了保证可读性,应注意字体大小的选择。虽然字体大小没有严格的标准,但具体尺寸应根据设计的视觉效果来确定。常用的移动终端中文字体大小为32px、28px和24px,常用的英文字号为16px。值得注意的是,字号是偶数,而且大多是4倍。

1.4 选择合适的宽度

宽度是一行文本的长度。如果宽度太宽,用户很容易分心,很难专注于文本信息;如果宽度太窄,用户的眼睛必须快速来回移动,扰乱阅读节奏,容易跳跃。设计界对每行长度的最佳字符数存在争议:根据 Emil Ruder 在“Typographie: A Manual of Design“文本的最佳长度是50-60个字符(包括空间)。然而,许多心理学专家和设计师认为,最佳宽度是 75 一个字符。现在设计领域形成的默契是:每行66个字符为佳。

1.5 行距设置应保留呼吸感应

行距是行间的空间,行距过紧或过宽都会给用户造成阅读障碍,标准行距为1.4EM,在移动终端界面设计中,我们通常用X的高度来代表。行距取决于文本的设计和间距,文本应为文本大小的1.5到2倍,具体取决于内容的宽度和长度。例如,如果您的文本是16像素,则可以将行高设置为1.5倍或24像素。

1.6 创建文本风格

文本风格包括:字体大小、字体重量、行高和字体距离等。在设计中,通常需要为不同的文本设置不同的属性,使用文本风格将大大提高设计效率。我们可以将文本风格应用于整个文本层,也可以只应用于图层中的部分文本。在选择字体时,我们需要考虑团队合作中不同终端的适应性。字体大小通常为12px-64px,使用传统和粗体。即时设计的默认字体是思源黑体。即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具,支持 Sketch、Figma、XD 格式导入,海量优质设计资源即拿即用。支持创建交互原型、获取设计标注,为产设研团队提供一站式协同办公体验。icon-default.png?t=N7T8https://js.design/community?category=search&search=%E5%AD%97%E4%BD%93&source=csdn&plan=btt0618

在即时设计中创建文本样式只需四步:

选择已设置风格的文本;

单击右侧属性面板的文本部分,单击样式图标;

点击文本风格面板中的[+]图标创建新风格;

命名风格,然后单击创建风格。

注意∶不能通过文本样式设置文本对齐模式,需要单独设置每个文本块的对齐模式。

提炼字体设计技巧

字体设计技巧一:易读性

易读性是字体选择中的最低考虑因素:它是指人们能否看到、区分和识别文本中的字符和单词。如果即时设计资源社区协同工作空间登录页面所示,图片中加入浅色文本往往很难看到。此时,加上彩色矩形覆盖层,文本的可读性大大提高。

字体设计技巧二:可读性二:可读性

可读性是指文本的句子是否流畅,意思是否清晰,这与语言本身的难度有关。例如,句子中使用不当的修辞会影响文本的可读性。如资源社区免费视频聊天网站即时设计所示,逻辑和语法的断开也会影响文本的可读性。

字体设计技巧三:可用性三:可用性

可用性是指设计字体可以正常显示在任何大小的屏幕设备上,在任何亮度上,甚至在不同语言之间的转换上,不会影响用户与产品之间的正常互动。

这里有必要总结一下:这三者之间的关系是好的[易用性]和[可读性],这对用户体验的[可用性]非常重要。

正确使用设计字体是为了提高字体的可读性和可读性,然后提高用户的浏览体验。


http://www.ppmy.cn/embedded/51288.html

相关文章

华为数通——单臂路由

单臂路由:指在三层设备路由器的一个接口上通过配置子接口(或“逻辑接口”,并不存在真正物理接口)的方式,实现原来相互隔离的不同VLAN(虚拟局域网)之间的互联互通。但是仅仅允许单播通信。 单臂路…

jenkins docker配置方法

搜索docker可以下载镜像 # 找STARS数高的进行下载 和 是 OFFICIAL官方的下载 [rootleisure docker]# docker search jenkins # 输出 NAME DESCRIPTION STARS OFFICIAL jenkins DEP…

C++中if-else,switch-case有什么区别,执行效率哪个更高?是否其他语句有比两者更高的执行效率?

在编程中,选择使用 switch-case 还是 if-else 语句通常取决于代码的可读性、维护性和特定的使用场景。对于它们的性能,以下是对它们的效率比较: 1. 基本原理: if-else 语句: if-else 是一个链式结构,条件会…

AI 已经在污染互联网了。。赛博喂屎成为现实

大家好,我是程序员鱼皮。这两年 AI 发展势头迅猛,更好的性能、更低的成本、更优的效果,让 AI 这一曾经高高在上的技术也走入大众的视野,能够被我们大多数普通人轻松使用,无需理解复杂的技术和原理。 其中,…

AI视频智能监管赋能城市管理:打造安全有序的城市环境

一、方案背景 随着城市化进程的加速和科技的飞速发展,街道治安问题日益凸显,治安监控成为维护社会稳定和保障人民安全的重要手段。当前,许多城市已经建立了较为完善的治安监控体系,但仍存在一些问题。例如,监控设备分…

电子盖章软件能够盖骑缝章吗_电子骑缝章

电子盖章软件当然 能够盖骑缝章,并且有多种软件支持这一功能。以下是对电子盖章软件盖骑缝章功能的详细解释: 软件选择: 专门的电子签章软件,如Adobe Acrobat Pro DC、福昕高级PDF编辑器等,都支持在PDF文档上添加骑缝…

OSPF协议详解(一)

本文主要介绍OSPF的基础知识,主要从OSPF报文,OSPF原理、OSPF基本工作过程来介绍OSPF协议。 OSPF简述 OSPF(开放式最短路径优先)是广泛运用的一种动态路由协议。相比于静态路由协议,动态路由协议能够自适应网络环境的…

如何添加虚轴(AM400PLC)

1、添加虚轴 选择好后,选择点击添加。 2、虚轴循环周期任务 EtherCAT运动控制总线启用的时候,选择EtherCAT总线任务周期。