UI界面视觉设计之字体要素--安卓-ios-网页常用字体

article/2025/8/9 23:46:00

 怎么设计出从而设计出富有美感和形式感的优秀作品?

1.设计经验的积累。

2. 在每个项目设计中只使用1到2个字体样式,通过对字体大小或颜色来强调重点文案,如图的界面设计中,都是通过字体大小、粗细来区分界面内容中的层级关系。字体用得越多,越显得不够专业;

 3、不同样式的字体,形状或系列最好相同,以保证字体风格的一致性;

 4、做到字体与背景的层次分明,以保证信息内容的主次分明;如图中字体和背景融合到一起,用户在光照很强的时候阅读很不方便,所以易读性和易用性是用户的根本诉求;   

 5、确保字体样式与其色调气氛相匹配;

 6、充分了解不同平台的常用字体设计规范,以便在设计过程中避免犯错。

一、常见字体

 1、移动端常用字体。

IOS系统

 常见的中文字体包括思源黑体、华文细黑、冬青黑体、苹方等。其中苹果系统默认中文字体是苹方,苹方字形更加优美,且在屏幕的显示也更加清晰易读,拥有6个字重,满足了日常的设计和阅读需求。所以,在设计中,拿不定主意时,可以直接使用苹方。

 移动端常用的英文是San Francisco、Helvetica、Roboto等字体。其中苹果系统默认英文字体为San Francisco。Helvetica 是一种被广泛使用的西文字体,1957 年由瑞士字体设计师设计,微软常用的 Arial 字体也来自于它。作为一款经典的无衬线字体,Helvetica 在平面设计和商业上非常普及和成功,被认为是现代主义设计理念的典范,其简洁朴素的线条风格非常受追捧

   安卓系统 

          中文常使用思源黑体。以前的设计中,中文字体主要是使用微软雅黑,但微软雅黑在界面中就显得有点厚重、臃肿。Google联合Adobe发布了思源黑体作为安卓的默认中文字体,新的思源黑体不仅仅在字形上更易于屏幕的阅读,风格介于现代和传统之间,可以广泛用于多种途径,比如手机、平板、桌面的用户界面、网页浏览或者电子书阅读等。它为人们带来了愉悦和高效的信息阅读体验。

 安卓系统的常用的英文字体是Roboto。

     2、网页端的常用字体

常用的中文字体有微软雅黑或者方正中黑,微软雅黑系列如下图在网页设计中使用得非常频繁,这款字体无论是放大还是缩小,形体都非常的规整舒适,在设计的过程当中,建议多使用微软雅黑,大标题用加粗字体,正文用常规字体。方正正中黑系列如下图,中黑系列的字体笔画比较锐利和浑厚,一般应用在标题文字中,但这种字体不适用于正文中,因为它的边缘相对来说比较复杂,文字一多就会影响阅读。

  方正兰亭系列也是网页端常见的中文字体,整个兰亭系列的字体有大黑,准黑,纤黑,超细黑等,因笔画清晰简洁,这个系列的字体就足以满足排版设计的需要,通过对这个系列的不同字体进行组合,不仅能够保证字体的统一感,还能很好的区分出文本的层次。

           除了以上两个系列的字体外,我们还常见汉仪菱心简、造字工房力黑,造字工房劲黑,如右图,这几个字体有着共同的特点,字体非常有力和厚实,基本都是以直线和斜线为主。比较适合广告和专题使用,在使用这类字体的时候,我们可以使用字体倾斜的样式,让文字显得更为有活力,在这三种字体当中,菱心和造字工房力黑在笔画、拐角的地方用了圆和圆角,而且笔画也比较疏松,更多的是还有些时尚和柔美的气氛,而劲黑这款字体相对更为厚重和方正,多用于大图中,效果较为突出。

以上是 常见的几种字体,字号是我们在界面设计中要考虑的另一个重要的元素,字号大小决定了信息的层级和主次关系,合理有序的字号设置能让界面信息清晰易读、层次分明;相反,糟糕无序的字号使用会让界面混乱不堪,影响阅读体验。字号是表示字体大小的术语,最常用的描绘字体大小的单位有两个,em和px,通常我们认为px是像素单位,是绝对大小单位,10px表示10个像素大小,常用来表示电子设备当中的字体大小。而em是相对大小的单位,根据基础字体大小进行相对大小的处理,默认的字体大小为16px,如果对一段文字指定1em,那么表现出来的就是16px大小,2em,就是32px大小。因其相对性,所以对跨平台设备的字体大小处理上有很大的优势,同时对于响应式的布局设计也有很大的帮助。但它的缺点是无法看到实际的字体大小,对于大小的不同,需要进行精确的计算。 

二、常见字号

1、移动端

在移动端常用的字号中,导航主标题的字号采用40~42像素,如图,主标题采用的是40像素,显得更加精致。在内文展示中,大的正文字号常采用32像素,附文采用26像素,小字采用20像素,在内文的使用中,我们根据不同类型的APP也会有所区别,像新闻类的APP或文字阅读类的APP,会更加注重文本的阅读便捷性,所以正文字号采用36像素,会选择性的加粗。工具化的APP普遍是正文采用32像素,不加粗,副文案采用26像素,小至20像素。   

 

 

 

 


http://chatgpt.dhexx.cn/article/vDeMLlIE.shtml

相关文章

【UI教程】结合PS和AI绘制炫彩2.5D插画

【UI教程】结合PS和AI绘制炫彩2.5D插画 为了此次文章教程,利用下班在家空余时间撸图撸了两个凌晨,原则只做原创精品设计文章,好案例配好文章,希望大家能喜欢,做设计行业文章教程最初目的就是能希望帮助到更多设计师小伙伴,很单纯、很简单 完全免费奉献上我一些能量,我不…

Adobe AI软件解决界面字体过小的方法

转载自:http://www.pc0359.cn/article/jiaocheng/69216.html ,图片为本博主自己操作时的截图。 AI是adobe旗下的软件之一,使用过该公司软件的用户应该都有这样的感受,软件功能很强大,可是它的界面字体实在是太小。对于…

视频教程-AI软件与字体设计-Illustrator

AI软件与字体设计 专注提供优质教学内容 CSDN就业班 136.00 立即订阅 扫码下载「CSDN程序员学院APP」,1000技术好课免费看 APP订阅课程,领取优惠,最少立减5元 ↓↓↓ 订阅后:请点击此处观看视频课程 视频教程-AI软件与字体设计…

ai怎么调界面大小_ai软件界面字体特别小 ai菜单栏字体大小怎么改

win8系统装软件,软件那些字体好小,怎么调大,例如PS软件,AI软件里面那些菜单栏字都很小,怎么? 1、桌面空白处单击鼠标右键,选择“屏幕分辨率”; 2、点击“放大或缩小文本和其他项目”; 3、单击屏幕右侧“设置自定义文本大小”; 4、在下拉列表中可以选择默认提供的放大…

ai字体设计(鲜到家)

1、选择合适的字体输入文本内容 2、 选中文字,选择文字菜单,点击创建轮廓(将文字转曲);选择倾斜工具,双击后输入角度等参数,确定,用小白工具把鲜字的笔画往下拉一拉,有折…

AI多种设计字体的方法与英文字体收藏

为什么80%的码农都做不了架构师?>>> 无意间看到了刘兵克的字体改造法,大神:点我。 ZCOOL上有他的字体LOGO专题,感觉比较专业,虽然有些改动并…

【AI】简单的方法教你做一组字体设计

字体设计初级方法交流、学习,喜欢可以分享,下面上设计教程。 首先,你要有一个软件——AI,这一点非常重要!!切记!! 然后我们开始设计,这次设计的是工作室出品的一组明信片…

【干货分享】用AI工具设计一款吸引人的字体效果

干货又来啦!今天教大家如何使用AI工具设计一款引人注目的字体效果,话不多说,我们直接开始! 1、在AI画布中使用钢笔工具勾勒出字母的线条,如图所示 2、使用椭圆工具画一个小的正圆,并填充蓝色渐变。 3、我们…

再续FFT:信号的频谱分析

摘自:http://www.ilovematlab.cn/thread-119939-1-1.html http://www.360doc.com/content/13/1208/18/13670635_335496776.shtml 对于下面这句话该怎么理解? 假设采样频率为Fs,信号频率F,采样点数为N。那么FFT之后结果就是一个为…

实验五 连续信号的频谱分析

目录 一、实验目的二、实验原理1、连续周期信号的傅里叶级数、各次谐波及叠加2、连续周期信号的周期T的变化对频谱的影响3、连续非周期信号的频谱 三、实验内容1、在实验原理1中,绘制加入5次谐波后的波形,根据该仿真图,说明为什么加入5次谐波…

【信号与系统】(十四)傅里叶变换与频域分析——周期信号的频谱及特点

文章目录 周期信号的频谱及特点1 周期信号的频谱2 单边谱和双边谱的关系3 周期信号频谱的特点4 周期信号的功率 周期信号的频谱及特点 频谱——信号的一种新的表示方法 1 周期信号的频谱 频谱:周期信号分解后,各分量的幅度和相位对于频率的变化&#x…

信号频谱和傅氏变换

信号频谱和傅氏变换基本思想: 把一个复杂信号分解成许多简单的正弦信号的叠加,这些正弦信号的频率是已知的,相应的振幅和相位则可由原始信号确定。 周期信号都可以表示成谐波关系的正弦信号的加权和,非周期信号都可以用正弦信号的加权积分来…

基于FFT的信号频谱分析

设计要求 用MATLAB产生正弦波及白噪声信号,并显示各自时域波形图。进行FFT变换,显示各自频谱图。做出两种种信号的均方根图谱,功率图谱,以及对数方均根图谱。用IFFT傅里叶反变换恢复信号,并显示时域波形图 正弦波的信号频谱分析 正弦波源代码 clear all clc %*************…

近代数字信号处理实验-DFT分析信号的频谱

一、实验目的 (1)掌握利用DFT近似计算不同类型信号频谱的原理和方法。 (2)理解误差产生的原因及减小误差的方法。 (3)培养学生自主学习能力,以及发现问题、分析问题和解决问题的能力。 二、…

Matlab中利用FFT实现信号频谱搬移

目录 Matlab中利用FFT实现信号频谱搬移只有实部的频谱搬移只有虚部的频谱搬移复函数下的频谱搬移 Matlab中利用FFT实现信号频谱搬移 在fft的理论中,fft的频移特性表示为: 也就是说,要想对信号f(t)实现频域的频谱搬移&…

转|周期矩形脉冲信号频谱及特点

周期矩形波信号及其频谱 如图所示信号为脉冲宽度τ,脉冲幅度A,周期为T的周期矩形脉冲信号。 上述周期矩形脉冲信号的傅里叶系数推导可参考占空比任意方波的傅里叶级数展开最终化简可得到下面的表达式。 由此式可得知,该信号频谱谱线大致按照…

用Matlab求余弦信号的频谱

如果你是电子信息类专业的学生,一定对频谱这个词听过无数次了,当然求频谱的方法之一就是可以采取快速傅里叶的方法,今天来给大家介绍一种用Matlab对余弦信号求频谱的实际操作。 第一步:构建原始余弦信号 Matlab代码如下&#xf…

2、信号与频谱

2.1、概述 信号传输的实质:信息传输的过程就是信号变换和处理的过程。如何观察信息传输过程中信号发生了什么变化? 一种方法是在时域 观察信号波形的变化,另一种方法是在频域观察信号频谱的变化。最常见的基本信号:正弦信号。 2…

matlab画信号频谱

为了让大学生活充实一点,多学点东西,我选修了《数字信号处理》。现在充实得不要不要的。 clc close all clear%参数设置% Fs 1000; % Sampling frequency T 1/Fs; % Sampling period L 1500; …

利用DFT分析信号频谱【信号与系统二】

利用DFT分析信号频谱 1. 利用FFT分析信号频谱2. 产生一个淹没在噪声中的信号x(t),分析信号的频谱3. 利用有限项分析三角波信号4. 利用频域分析方法,重新对第一次实验时的含噪信号进行滤波处理5. 通过频谱分析,识别电话拨号音的电话号码6. 试着…