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

news2024/10/5 14:27:42

字体设计是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.coloradmin.cn/o/1837062.html

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

相关文章

链表OJ--超详细解析

链表OJ 文章目录 链表OJ1. 反转链表2. 返回K值3. 链表的中间节点4. 回文链表5. 相交链表6. 带环链表6.1 为什么一定会相遇,有没有可能会错过,或者出现永远追不上的情况,请证明6.2 slow一次走一步,fast如果一次走3步,走…

读书笔记-《人人都是产品经理》

在开发工程师与产品经理的段子中,常看到“人人都是产品经理”这句话,用来调侃这个岗位似乎没有什么门槛。 很明显,这句话的出处,即本书作者想表达的是每个人都可以运用产品思维去解决问题。 01 产品 产品:用来解决某…

SpringMVC的使用

SpringMVC详情 RequestMapping("/hello") 负责用户的请求路径与后台服务器之间的映射关系 如果请求路径不匹配,则用户报错404 ResponseBody 作用: 将服务器的返回值转化为JSON. 如果服务器返回的是String类型,则按照自身返回. 新增: post请求类型 PostMapping("…

OKR:2024年目标和关键成果常见问题

什么是目标和关键结果(OKR)? 目标和关键结果(#OKR#)是一种由结果驱动的目标制定方法。在企业中,OKR经常被用来指导基于结果的成功。使用结果而不是任务作为驱动力,OKRs 鼓励通过度量指标对实现成…

LLM 理论知识

LLM 理论知识 一.大型语言模型LLM1.1 大型语言模型 LLM 的概念1.2 常见的 LLM 模型1.2.1 闭源 LLM (未公开源代码)1.2.1.1 GPT 系列1.2.1.1.1 ChatGPT1.2.1.1.2 GPT-4 1.2.1.2 Claude 系列1.2.1.1.3 PaLM/Gemini 系列1.2.1.1.4 文心一言1.2.1.1.5 星火大模型 1.2.2. 开源 LLM1.…

MapStruct对象转换

MapStruct是一个Java注解处理器,用于简化对象的转换 遇到的问题: java: Internal error in the mapping processor: java.lang.NullPointerException 解决方案:修改编辑器配置 -Djps.track.ap.dependenciesfalse

超长国债来了,高净值客群的机会在哪儿?

有人说,2024年是全球经济的“分化年”,也是中国经济突围的“关键年”。当前,我国经济恢复仍处在关键阶段,长期向好的基本趋势没有改变,但也需要克服一些挑战,而巩固和增强经济复苏的良好势头,离…

转行AI的人,都后悔了

说真的,很多转行AI的人,都后悔了,后悔没早点转,因为AI岗实在是太香了!就连Google都开始捞****AI/ML的人才了👇 曾经在一家IT外企研发中心做仿真工程师的小夏,每天加班、薪资还只有150k&#xff…

Codeforces Round 923 (Div. 3)(A~D题解)

目录 A. Make it White B. Following the String C. Choose the Different Ones! D. Find the Different Ones! A. Make it White Problem - A - Codeforces 题意:问在一个只含有W和B元素的字符串中,选择一个L到R范围,将之间包含的B全部变…

RK3568技术笔记八 开发环境的搭建

先按照前面的方法将 ubuntu 安装在 PC 机上。 编译开发Linux系统,虚拟机Ubuntu 系统要求: 64位系统,硬盘空间大于或等于200G,内存不小于6GB。 建议使用 Ubuntu18.04 系统进行编译。 光盘资料:SAIL-RK3568开发板光盘…

Ceph: vdbench 测试ceph存储rbd块设备

目录 2.搭建ceph 3.vdbench环境 准备 笔记本架构:x86 i5 8 代 虚拟化软件:virtualBox 7.0 操作系统:CentOS Linux release 7.9.2009 (Core) 测试虚拟机操作系统:CentOS Linux release 7.9.2009 (Core) 节点 外部网络 内部网…

langchain教程-(1)Prompt模板

LangChain 的核心组件 模型 I/O 封装 LLMs:大语言模型Chat Models:一般基于 LLMs,但按对话结构重新封装PromptTemple:提示词模板OutputParser:解析输出 数据连接封装 Document Loaders:各种格式文件的加载…

C# yolov8 OpenVINO 同步、异步接口视频推理

C# yolov8 OpenVINO 同步、异步接口视频推理 目录 效果 项目 代码 下载 效果 同步推理效果 异步推理效果 项目 代码 using OpenCvSharp; using System; using System.Collections.Generic; using System.Diagnostics; using System.Threading; using System.Windows.Form…

YOLOv10改进 | 主干篇 | YOLOv10引入FasterNeT替换Backbone

1. FasterNeT介绍 1.1 摘要: 为了设计快速神经网络,许多工作一直致力于减少浮点运算(FLOP)的数量。 然而,我们观察到,FLOP 的减少并不一定会导致延迟的类似程度的减少。 这主要源于每秒浮点运算 (FLOPS) 效率低下。 为了实现更快的网络,我们重新审视流行的算子,并证明…

点击即转换,Mistune库助你驾驭Markdown文档!

mistune 是一个用于将 Markdown 文本解析为 HTML 的 Python 库.它提供了快速、简单的方法来处理 Markdown 格式的文本,并将其转换为 HTML,适用于将 Markdown 文档集成到网站、博客等项目中. 安装 #可以使用 pip 来安装 mistune:pip install mistune示例 基本用法…

《SelectDB 新一代日志存储分析平台解决方案》白皮书重磅发布|立即下载

随着信息技术的飞速进步,企业面临着前所未有的系统复杂性和数据挑战。在此背景下,日志数据成为了企业洞察系统内部状态、监控网络安全以及分析业务动态的宝贵资源,构建高效的日志存储与分析平台至关重要。 作为基于 Apache Doris 打造的现代…

计算机网络:运输层 - 概述

计算机网络:运输层 - 概述 运输层的任务端口号复用与分用UDP协议首部格式 TCP协议面向字节流 运输层的任务 物理层、数据链路层以及网络层,他们共同解决了将主机通过网络互联起来所面临的问题,实现了主机到主机的通信。 网络层的作用范围是…

CVE-2011-1473: OpenSSL权限许可和访问控制问题漏洞及解决方案

CVE-2011-1473: OpenSSL权限许可和访问控制问题漏洞 漏洞详情: OpensSL.是OpensSL团队的一个于源的能够实现安全套接层(SSL2/3) 和安全传输层(TLSw1)协议的通用加密库。该产品支持多种加密算法,包括对称密…

.NET周刊【6月第3期 2024-06-18】

国内文章 记一次 .NET某游戏币自助机后端 内存暴涨分析 https://www.cnblogs.com/huangxincheng/p/18243233 文章讨论了程序中非托管内存暴涨的问题。作者描述了友人发现内存问题并请他帮助分析的背景,利用WinDbg工具分析Linux平台上的内存泄漏情况。文章介绍了如…

Gotchi 战士们准备好吧!稀有度挖矿第八季锦标赛即将开始!

我们很高兴地宣布稀有度挖矿第 8 赛季的比赛即将开始,比赛将设立 15 万 GHST 的巨额奖金池,同时还将进行新的更新,让您有更多的方式来制定战略并与您的小鬼好友们一较高下。 本赛季引入了双败淘汰赛,每支队伍可以有两名替补队员&a…