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

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

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像素。   

 

 

 

 

  • 2
    点赞
  • 7
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

vue学习

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值