打造精致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.rhkb.cn/news/353079.html

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

相关文章

02-ES6新语法

1. ES6 Proxy与Reflect 1.1 概述 Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。 Proxy 可以对目标对象的读取、函数调用等操作进行拦截,然后进行操作处理。它不直接操作对象,而是像代理模式,通过对象的代理对象进行操作,…

功能测试的内容与目的是什么?

在软件开发与测试过程中,功能测试是不可或缺的关键步骤,它主要关注软件产品是否能够按照设计规格和用户需求实现预定的功能。功能测试的内容与目的,简单来讲,就是验证软件的各种特性和功能是否正确、完整且符合预期,确…

docker 中 File Sharing 和Volumes 的区别

在 Docker 中,File Sharing 和 Volumes 都涉及到将文件和目录从主机系统映射到容器中,但它们的用途和实现方式有一些重要的区别: 一、简介 File Sharing 是 Docker Desktop 在 Windows 和 macOS 上的一项功能,允许你将主机文件系…

API-操作元素内容

学习目标: 掌握操作元素内容 学习内容: 操作元素内容元素innerText属性元素innerHTML属性案例 操作元素内容: DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。就是操作对象使用的点语法。如果想要修…

开源的数字孪生平台

欧洲对工业4.0的追求体现在三个方面: 数字孪生、智能制造和万物互联。 资助2440万欧元的开源数字孪生平台 源代码: http://www.gitpp.com/ccdan/dpqq-digital-twins 这套数字孪生是工业4.0整体规划中的中的一项技术,实现了一种称为“数字…

正则表达式常用表示

视频教程:10分钟快速掌握正则表达式 正则表达式在线测试工具(亲测好用):测试工具 正则表达式常用表示 限定符 a*:a出现0次或多次a:a出现1次或多次a?:a出现0次或1次a{6}:a出现6次a…

UE4_材质_雨滴涟漪效果ripple effect_ben教程

学习笔记,不喜勿喷!侵权立删,祝愿生活越来越好! 雨水落下时会产生这些非常漂亮的同心环波纹,我们要做的第一件事是创建一个单个的圆环遮罩动画,我们希望环在开始的时候在中心很小,然后放大&…

论文发表CN期刊《高考》是什么级别的刊物?

论文发表CN期刊《高考》是什么级别的刊物? 《高考》是由吉林省长春出版社主管并主办的省级教育类期刊,期刊以科教兴国战略为服务宗旨,专门反映和探索国内外教育教学和科研实践的最新成果。该期刊致力于为广大教育工作者提供一个高质量的学术…

Docker部署常见应用之SFTP服务器

文章目录 简介Dockers部署单用户多用户用户信息加密使用SSH密钥认证 参考文章 简介 atmoz/sftp 是一个基于 Docker 的 SFTP 服务镜像,它使用 OpenSSH 来提供 SFTP 服务。这个镜像支持创建单个或多个用户的 SFTP 访问,并允许用户通过 SFTP 协议安全地共享…

CAN总线仲裁(四)

​ 多设备同时发送遇到的问题 CAN总线只有一对差分信号线,同一时间只能有一个设备操作总线发送数据,若多个设备同时有发送需求,该如何分配总线资源? 解决问题的思路:制定资源分配规则,依次满足多个设备的…

空气质量预报模式系统WRF-CMAQ

空气污染问题日益受到各级政府以及社会公众的高度重视,从实时的数据监测公布到空气质量数值预报及预报产品的发布,我国在空气质量监测和预报方面取得了一定进展。随着计算机技术的高速发展、空气污染监测手段的提高和人们对大气物理化学过程认识的深入&a…

【vue大作业-端午节主题网站】【预览展示视频和详细文档】

vue大作业-端午节主题网站介绍 端午节,又称为龙舟节,是中国的传统节日之一,每年农历五月初五庆祝。这个节日不仅是纪念古代爱国诗人屈原的日子,也是家人团聚、共享美食的时刻。今天,我们非常高兴地分享一个以端午节为…

高压防触碰预警装置,工期重要还是命重要?

“说了多少遍了,不要在高压线下赶工期”吊车违规施工碰撞到高压线,导致供电线路跳闸停电事故,现场火花四溅及其危险, 高压线路被外力破坏的情况,违规施工、赶工期、视觉盲区导致线路外破等情况,想必大家也…

基于STM32的简易智能家居设计(嘉立创支持)

一、项目功能概述 1、OLED显示温湿度、空气质量,并可以设置报警阈值 2、设置4个继电器开关,分别控制灯、空调、开关、风扇 3、设计一个离线语音识别系统,可以语音控制打开指定开关、并且可以显示识别命令词到OLED屏上 4、OLED实时显示&#…

基于B/S版java语言+SpringBoot技术开发的云HIS系统源码 HIS系统住院业务模块常见问题及解决方案

基于B/S版java语言SpringBoot技术开发的云HIS系统源码 HIS系统住院业务模块常见问题及解决方案 随着医疗技术的不断提高,住院治疗已成为许多病人的常规选择。但是,住院治疗不仅需要医护人员的精心照顾,也需要个高效的信息系统来保证整个治疗过…

flac格式如何转mp3?7大热门实用音频转换软件大PK

FLAC是Free Lossless Audio Codec(免费无损音频编解码器)的缩写,是一种在压缩文件大小的同时保留原始音乐质量的音频格式。不过,大多数音频格式都会在音乐质量和文件大小之间做出权衡。当你使用flac获得更好的音乐质量时&#xff…

C++ 63 之 函数模版和普通函数的区别

#include <iostream> #include <string> using namespace std;template<typename T> T myAdd(T a, T b){return a b; }int myAdd2(int a, int b){return a b; }int main() {int a 1;int b 2;char c a; // a的ask码 97// cout << myAdd(a,c) <…

BarTender软件最新版下载-bartender条码标签打印软件下载

​​BarTender​​是一款遵循“look and feel”标准的​​条码打印​​软件。​​BarTender​​条码打印软件能够帮助用户挥洒自如&#xff0c;轻松制作出标签条码&#xff0c;包括文本、图形、​​条形码​​和大多数序列化功能。BarTender条码打印软件功能强大、操作简单&…

基于QT和C++实现的中国象棋

一&#xff0c;源码 board.h #ifndef BOARD_H #define BOARD_H#include <QWidget> #include "Stone.h"class Board : public QWidget {Q_OBJECT public:explicit Board(QWidget *parent 0);bool _bRedTurn; // 红方先走int _currentPlayer; // 当前玩家&…

2025年计算机毕业设计题目参考

今年最新计算机毕业设计题目参考 以下可以参考 springboot洗衣店订单管理系统 springboot美发门店管理系统 springboot课程答疑系统 springboot师生共评的作业管理系统 springboot平台的医疗病历交互系统 springboot购物推荐网站的设计与实现 springboot知识管理系统 springbo…