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

这篇具有很好参考价值的文章主要介绍了UI界面视觉设计之字体要素--安卓-ios-网页常用字体。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

1.设计经验的积累。

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

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

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

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

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

一、常见字体

 1、移动端常用字体。

IOS系统

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

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

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

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

   安卓系统 

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

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

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

     2、网页端的常用字体

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

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

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

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

以上是 常见的几种字体,字号是我们在界面设计中要考虑的另一个重要的元素,字号大小决定了信息的层级和主次关系,合理有序的字号设置能让界面信息清晰易读、层次分明;相反,糟糕无序的字号使用会让界面混乱不堪,影响阅读体验。字号是表示字体大小的术语,最常用的描绘字体大小的单位有两个,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像素。   

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

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

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

 文章来源地址https://www.toymoban.com/news/detail-453285.html

到了这里,关于UI界面视觉设计之字体要素--安卓-ios-网页常用字体的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 安卓开发 微信ui界面设计 (Android Studio)

    功能: 开发一个类似微信的主页面框架,UI布局为上中下结构,包含4个tab界面: 开发技术为: layout xml、控件、监听,fragment; 设计流程: 创建项目 改下项目名,编程语言为java UI界面 UI界面由多个xml组成,头部标题为微信,中间留空白,底部分为四个(微信,联系人,发现,

    2024年02月15日
    浏览(48)
  • 计算机视觉设计如何应用于人脸识别技术?

           计算机视觉设计在人脸识别技术中起着重要的作用。它通过使用图像处理和模式识别技术,对人脸图像进行分析和比对,从而实现人脸的检测、定位和识别。下面是计算机视觉设计在人脸识别技术中的应用方法: 人脸检测:计算机视觉设计可以通过使用人脸检测算法

    2024年01月19日
    浏览(37)
  • 计算机视觉实验:人脸识别系统设计

    设计 计算机视觉目标识别系统,与实际应用有关(建议:最终展示形式为带界面可运行的系统),以下内容选择其中一个做。 1. 人脸识别系统设计 (1) 人脸识别系统设计(必做):根据课堂上学习的理论知识(包括特征提取、分类器设计),设计一个人脸识别系统,该系统具

    2024年02月14日
    浏览(37)
  • 合创视觉APP设计色彩搭配重点

    现如今人机交互主要通过GUI来实现,色彩在交互过程中扮演着重要的角色。良好的色彩搭配会帮助用户发现页面中的重点     色彩的数目     在APP的界面中,尽量不要使用过多的颜色。诚然,过少的颜色搭配很难第一眼就能吸引住用户。但是你的APP毕竟不是一锤子买卖

    2024年02月01日
    浏览(25)
  • 【计算机视觉】基于OpenCV计算机视觉的摄像头测距技术设计与实现

    在当今技术日益进步的时代,计算机视觉已成为我们生活中不可或缺的一部分。从智能监控到虚拟现实,计算机视觉技术的应用范围日益广泛。在这篇博客中,我们将探索一个特别实用的计算机视觉案例:使用OpenCV实现摄像头测距。这一技术不仅对专业人士有用,也为编程爱

    2024年02月04日
    浏览(36)
  • 基于视觉的无人机自主降落系统设计

    无人机的自主化降落过程里,从传统的地标识别法里面可以看到,实验需要大量的实验测试。为了解决这一问题,提出了一种基于仿射不变矩和支持向量机的方法。第一,六个以某个半径画圆将其组合为整体图标,可以被认为是无人机自主降落的地面标识。这是因为无人机自

    2024年01月25日
    浏览(34)
  • 视觉检测系统设计过程中遇到的问题

    前言 使用环境:          海康的工业相机相机、海康MVS软件。 问题描述:         通过架设的两个相机采集图像,其中一个相机采集图像数量少于另一个相机。MVS提示相机丢包。         首先可以肯定的一个相机丢包了,另一个不确定。 原因 工业相机丢包原因是什

    2024年02月09日
    浏览(51)
  • 基于机器视觉的交通灯控制系统设计

    随着工业自动化和汽车行业的发展,汽车数量猛增,导致交通故障和城市交通拥堵发生的现象越来越频繁。即使道路日益扩宽,但仍无法解决现有存在问题,交通环境问题仍日趋严重。为了解决该问题,本文对交通灯配时控制器展开设计和研究,提出了一种基于机器视觉的交

    2024年02月04日
    浏览(34)
  • 基于 ZYNQ 的双目视觉图像采集系统设计(四)

    1、axi_hp0_wr.v 模块代码解析         该模块实现 AXI HP 总线写入数据到 DDR3 的操作。该模块的接口如下。 rst_n 为系统复位信号; i_clk 、 i_data_rst_n 、 i_data_en 和 i_data 为 FPGA 逻辑需要写入到 DDR3 的数据输入接口。 i_clk 为同步时钟信号, i_data_rst_n 用于复位 FIFO , i_data_en 拉高表

    2024年02月04日
    浏览(28)
  • 毕业设计-基于机器视觉的手势识别系统-OPENCV

    目录 前言 课题背景和意义 实现技术思路 一、系统总体设计 二、手势区域特征提取 三、系统设计与实现 四、总结 实现效果图样例 最后     📅大四是整个大学期间最忙碌的时光,一边要忙着备考或实习为毕业后面临的就业升学做准备,一边要为毕业设计耗费大量精力。近几年

    2024年02月08日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包