打造精致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

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

选择已设置风格的文本;

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

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

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

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

提炼字体设计技巧

字体设计技巧一:易读性

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

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

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

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/721788.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

团队管理的三个要点,打造高执行力团队

一、明确目标与责任 明确的目标与责任是团队高效运作的基石。只有当团队成员对目标有清晰的认识,并明确自己的责任时,才能形成强大的合力,推动团队不断前进。 1、目标设定 目标应该具体、可衡量、有挑战性但可实现。项目经理可以与团队成员…

Nginx Proxy 代理测试

目录 https://blog.csdn.net/Lzcsfg/article/details/139781909 一. 实验准备 二. 配置反向代理 三. 配置二层代理 解释流程 一. 实验准备 关闭防火墙和selinux,准备三台同一网段的虚拟机 localhostRoucky_linux9.4192.168.226.20localhostRoucky_linux9.419…

【2024泰迪杯】C 题:竞赛论文的辅助自动评阅 26页及31页2篇完整论文及Python 代码实现

【2024泰迪杯】C 题:竞赛论文的辅助自动评阅 26页及31页完整论文及Python 代码实现 相关链接 【2024泰迪杯】A 题:生产线的故障自动识别与人员配置 Python代码实现 【2024泰迪杯】B 题:基于多模态特征融合的图像文本检索Python代码实现 【2…

基于PHP的草莓种植信息管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的草莓种植管理系统 一 介绍 此草莓种植管理系统基于原生PHP开发,数据库mysql,前端采用jquery.js和kindeditor在线HTML编辑器。系统角色分为用户和管理员。 技术栈:phpmysqljquery.jsphpstudyvsco…

云计算【第一阶段(16)】安装及管理程序

一、linux 应用程序基础 当我们主机安装linux操作系统 时候,也会同时安装一些软件或网络服务等等,但是随着系统一起安装的软件包毕竟他是少数的, 能够实现的功能也是有限的,那么我们相拥为主机提供更多更丰富的功能的时候&#x…

注意力机制和Transformer模型各部分功能解释

文章目录 Transformer1、各部分功能解释2、通过例子解释a.输入预处理位置编码b.Encoder 的处理c.Decoder的输入Decoder的工作流程d.输出预测总结 Attention代码和原理理解 Transformer 运行机理: (1)假设我们需要进行文本生成任务。我们将已…

Java17 --- redis7缓存双写一致性

一、缓存双写一致性 如果redis中有数据:需要和数据库中的值相同。如果redis中没有数据:数据库中的值要是最新值,且准备回写redis。只读缓存。读写缓存:①、同步直写策略:写数据库后也同步写redis缓存,缓存…

计算机网络(谢希仁第六版)| 课后习题与答案 | 物理层 | 题目知识点详细分析

计算机网络(谢希仁第六版)课后习题与答案 物理层 博客只对老师给的重点进行整理,完整的课后习题答案见Gitee下载:《计算机网络教程(第6版)(微课版)》习题答案 2-5 请画出数据流1 0 1…

Java基础学习-流程控制语句-顺序结构-分支结构-循环结构

目录 顺序结构: 分支结构: if语句: 第一种格式: if第二种格式: 案例练习 if第三种格式: switch语句: 格式: switch其他知识点: 循环结构: for循环…

软件测试面试题:性能测试关注哪些指标?

问题 在工作中,使用JMeter做压力测试时,需要关注其中的哪些指标? 性能测试关注哪些指标? 考察点 面试官想了解: 是否用过 JMeter 指标进行分析 技术点 涉及的技术点: JMeter 结果分析 回答 性能指…

基于 Vitis HLS 的单个乘法 DSP 映射研究

文章目录 1 自媒体账号2 引言3 整数乘法4 定点乘法5 浮点乘法6 总结 1 自媒体账号 目前运营的自媒体账号如下: 哔哩哔哩 【雪天鱼】: 雪天鱼个人主页-bilibili.com 如果觉得有所收获的话,可以点击我的主页 -> 充电 -> 自定义充电 支持一下&#…

2024加密软件排行榜|最新企业常用加密软件推荐

安秉网盾加密软件: 专注于企业级的透明加密解决方案,确保公司内部文件在公司环境外无法被访问。 审批机制灵活,支持多种审批方式,方便管理。 广泛应用于多个行业,拥有丰富的企业环境适配经验。 适合对内部数据安全有严…

设置角色运动的动画

(1) 打开Assets-UnityTechnologies-Animation-Animators,Create-Animation-Controller,命名为JohnLemon (2) 打开JohnLemon,出现下图 (3) 依次将Assets-UnityTechnologies-Animation-Animation中的JohnIdle和JohnWalk拖放到Base Layer窗口中 (4) 右击Idl…

分享由AI制定一个商城网站的开发计划及推荐的开发语言

商城网站开发计划 一、项目概述 本商城网站开发计划旨在创建一个功能齐全、用户友好的在线购物平台,为顾客提供商品浏览、搜索、购物车管理、订单跟踪、在线支付等服务。商城将支持多种商品分类,包括但不限于电子产品、家居用品、服饰鞋帽等。 二、开…

Nginx缓存之代理缓存配置

Nginx 的缓存功能是集成在代理模块中的,当启用缓存功能时,Nginx 将请求返回的响应数据持久化在服务器磁盘中,响应数据缓存的相关元数据、有效期及缓存内容等信息将被存储在定义的共享内存中。当收到客户端请求时,Nginx 会在共享内…

联邦学习周记|第四周

论文:Active Federated Learning 链接 将主动学习引入FL,每次随机抽几个Client拿来train,把置信值低的Client概率调大,就能少跑几次。 论文:Active learning based federated learning for waste and natural disast…

全新AI图像擦处理工具上线,手机电脑版资源合集下载

下载地址: 安卓手机版: 点击下载 苹果手机版: 点击下载 电脑版(支持Mac和Windows): 点击下载 图像处理技术在当今迅速发展,为了满足广大用户的需求,我们推出了一款强大的图像优化…

京东健康·全球医疗AI创新大赛开启!32万奖金池等你来拿!

京东健康全球医疗AI创新大赛是由京东健康发起,以探索医疗行业前沿技术与创新应用为导向、携手产学研各界力量,通过AI创新促进医疗服务行业高质量发展的一场大赛。 本次大赛聚焦“睡眠监测智能算法”与“医疗大模型创新应用”两个课题方向,面…

【ARM-Linux篇】POSIX消息队列

System V消息队列POSIX 消息队列主 要 函 数#include <sys/msg.h> int msgget(key_t key, int oflag) int msgsnd(int msqid, const void * ptr, size_t length, int flag) ssize_t msgrcv (int msqid, void *ptr, size_t length, long type, int flag) int msgctl(int m…

HTML入门教程:深度解析HTML,开启你的前端技术之旅

一、引言 HTML&#xff08;HyperText Markup Language&#xff0c;超文本标记语言&#xff09;是前端开发的基础&#xff0c;它负责构建网页的结构和内容。作为前端技术栈的基石&#xff0c;HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始&#xff…