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

字体设计是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.mzph.cn/pingmian/30044.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

二级造价工程师建设工程造价管理试题

1、根据《建设工程质量管理条例》,在正常使用条件下,供热与供冷系统的最低保修期限是( )个采暖期、供冷期。 A.1 B.2 C.3 D.4 [答案]B 2、关于甲级工程造价咨询企业的资质标准,叙述错误的是( )。 A.企业与专职专业人员签订劳动合同&…

【Python】JSON

json 一、JSON1.1 概述1.2 数据结构1.3 值1.4 字符串1.5 数值 二、编程语言与JSON2.1 JavaScript与JSON2.2 Python与JSON 一、JSON 1.1 概述 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写。同时也易于机器解析和生成。 JSON采…

如何用大模型+知识库打造微信群里的AI问答神器!

想象一下,你的微信群或公众号中,有一个AI问答专家随时待命,帮助你和你的朋友们解答各种问题,是不是很酷? 现在,让我们来看看这个项目的技术框架,一步步了解它是如何构建的: 基础起…

zookeeper学习、配置文件参数详解

zookeeper学习、配置文件参数详解 zookeeper 配置文件参数详解tickTime 、session 的过期时间、maxSessionTimeout 三者之间的关系initLimit,syncLimit什么区别minSessionTimeout 默认值,**他的单位是ms** zookeeper 配置文件参数详解 ZooKeeper 是一个分布式协调服…

自动驾驶#芯片-1

概述 汽车是芯片应用场景之一,汽车芯片需要具备车规级。  车规级芯片对加工工艺要求不高,但对质量要求高。需要经过的认证过程,包括质量管理标准ISO/TS 16949、可靠性标准 AEC-Q100、功能安全标准ISO26262等。  汽车内不同用途的芯片要求…

Python中的深拷贝和浅拷贝

一、概述: Python中拷贝的方法有两种: 浅拷贝:copy()深拷贝:copy.deepcopy() 二、理解深拷贝和浅拷贝 2.1 拷贝的应用 浅拷贝 # 原始数据 list1 ["php", "java", "python"] # 对list进行复制…

如何卸载windows系统自带游戏

为了清晰地指导如何卸载Windows系统自带游戏,我们可以参考以下步骤进行: 方法一:通过控制面板卸载 打开控制面板进入程序和功能在控制面板中,找到并点击“程序和功能”。在程序列表中,找到你想要卸载的自带游戏。 方…

AI一键生成PPT工具:AIPPT网站分享

PowerPoint演示文稿作为商业沟通、教育培训以及日常汇报的重要工具,一份精美的ppt可以帮助我们提升演示效果以及显示我们的专业性。为了提升ppt的制作效率,我们可以使用AI一键智能生成ppt工具,这样我们就可以快速制作出高大上的PPT了。下面小…

Web攻防:SQL注入 - MySQL 盲注

SQL注入 - MySQL 盲注 1. 基于布尔 SQL 盲注1.1 LEFT() 函数1.1.1 介绍:1.1.2 注入语法:1.1.3 案例 (SQLi-Labs:Less-8) 1.2 ASCII() 函数 SUBSTR() 函数1.2.1 介绍:1.2.2 注入语法:1.2.3 案例 (SQLi-Labs&#xff1a…

Java——可变参数

一、可变参数 1、介绍 Java的可变参数(Varargs)是一种语法特性,允许一个方法接受不定数量的参数。可变参数的使用通过在参数类型后面添加省略号(...)实现。这使得方法在调用时可以传入不同数量的参数,而不…

Ubuntu20.04用NetworkManager的 nmcli connection modify 连接的名称或UUID 来设置IPV4 笔记240619

用NetworkManager的 nmcli connection modify 连接的名称或UUID ipv4.address 来设置IPV4 用NetworkManager的 nmcli connection modify 连接的名称或UUID ipv4.address 来设置IP 的模板 只设置修改IP 覆盖原有设置: ipv4.addresses或ipv4.addr或ipv4.a NameOrUuidOfConnec…

leetcode 二分查找·系统掌握 统计有序矩阵中的负数

题目: 给你一个 m * n 的矩阵 grid,矩阵中的元素无论是按行还是按列,都以非严格递减顺序排列。 请你统计并返回 grid 中 负数 的数目。 题解: 一种可行的解题思路是找出每一行中负数的个数再相加,又因为每一行单调递…

虚拟存储(Linux挂载点合并)

简介 在 Linux 中你有 3 块硬盘(或分区)分别为 100G、200G 和 300 G,如何在一个统一的路径下访问 600G 的视频文件夹呢?并且任何一个磁盘数据的损坏是不能影响其他两个磁盘中的数据,也不影响其他磁盘的正常访问。 相信大多数用户会想到几种解决办法: 买个更大的硬盘 ̄□ ̄…

Git 克隆 GitHub 仓库时遇到了 SSL 证书问题

fatal: unable to access GitHub - xxxxxxxxxxx: SSL certificate problem: unable to get local issuer certificate 使用 HTTP 代替 HTTPS: 如果 SSL 证书问题无法解决,您可以尝试使用 HTTP 克隆仓库(不推荐,因为不安全)。但请注…

Android device/xxx/system/common/overlay编译产物

MTK 如下代码编译的产物在 framework-res.apk 编译配置文件在device/mediatek/system/common/目录下的Android.bp device/mediatek/system/common/overlay/telephony/frameworks/base/core/res/res/values-mcc655-mnc01/config.xml 在Android U上面还在overlay目录中进行了产…

图像的高频和低频细节

在图像处理和计算机视觉中,"高频"和"低频"是用来描述图像中不同类型细节的术语。这些术语源自信号处理领域,其中频率的概念用于描述信号随时间变化的,但在图像处理中,它们被用来描述图像随空间变化的&#xf…

python是TIOBE编程语言排名第一的编程语言,它有什么优点?它的使用场景有哪些?用python打印数字1--100,用python打印九九乘法表怎么写?

Python是TIOBE编程语言排行榜排名第一的编程语言 。 python是一种解释性、交互式、面向对象的跨平台的语言。 python设计者及名称由来 Guido van Rossum 荷兰人---吉多范罗苏姆,是 Python 编程语言的最初设计者,在 Python 社区一直担当终身仁慈独裁者&…

教你如何安装 IntelliJ IDEA

安装 IntelliJ IDEA 的步骤通常如下,这里提供的是基于 Windows 系统的安装指南。 下载 IntelliJ IDEA 1. 访问 JetBrains 官方网站:[https://www.jetbrains.com/idea/download/](Download IntelliJ IDEA – The Leading Java and Kotlin IDE) 2. 选择适…

vue+echarts实现tooltip轮播

效果图如下: 实现步骤如下: 定义一个定时器 timer:null, len: 0,页面一加载就清空定时器,此操作是为了防止重复加载时会设置多个定时器在setOption后设置定时器 this.myChart.clear() this.myChart.setOption(option); this.autoShowTool…

java 面试题--基础

文章目录 基础java SE 、 EE 、 ME 的区别jdk 和 jre 区别?java 的日志级别基本数据类型 特性关键字finalabstractsuperswitchfortry catch 接口和抽象类的区别接口抽象类适用场景 类的加载循序静态代码块 传参问题访问修饰符运算符 反射java 里的应用为什么反射的性…