界面设计的字体规范:常用字体,字号,字体颜色及间距对齐

今天125网页设计给大家分享界面设计中常用的字体,字号,字体颜色及间距对齐的一些小经验,通过设计经验可以帮助你做出更好的版式,相信大家会有收获。

一、常见界面设计中字体使用问题

1.字体样式太多,导致页面杂乱

2.使用的字体不易识别

3.字体样式和内容的气氛或规范不匹配

二.界面设计中文字的使用规则

移动端常规字体

IOS:常选择华文黑体或者冬青黑体,尤其是冬青黑体效果最好。

界面设计的字体规范:常用字体,字号,字体颜色及间距对齐

Android

英文字体:Roboto

中文字体:Noto

界面设计的字体规范:常用字体,字号,字体颜色及间距对齐

移动端常用字号

导航主标题字号:40-42px

我一般设计就用40px,偏小的40px字号,显得精致些。

界面设计的字体规范:常用字体,字号,字体颜色及间距对齐

内文展示中字号的大小:

大的正文字号32px,副文是26px,小字20px。

在内文的使用中,根据不同类型的App会有所区别。

像新闻类的APP或文字阅读类的APP更注重文本的阅读便捷性,正文字号36px,会选择性的加粗。

界面设计的字体规范:常用字体,字号,字体颜色及间距对齐

而列表形式、工具化的APP普遍是正文32px,不加粗。副文案26px,小字20px

界面设计的字体规范:常用字体,字号,字体颜色及间距对齐

26px的字号还会用于划分类别的提示文案,因为这样的文字希望用户阅读,但不要抢过主列表信息的引导。

界面设计的字体规范:常用字体,字号,字体颜色及间距对齐

36px的字号还经常运用在页面的大按钮中。为了拉开按钮的层次,同时加强按钮引导性,选用了稍大号的字体。

(见下图中的退出按钮)

界面设计的字体规范:常用字体,字号,字体颜色及间距对齐

大家注意了,在选用字体大小的时候一定要选择偶数的字号,因为在开发界面的时候,字号大小换算是要除以二的。

本文转载自Micu设计,原文链接: ,本文观点不代表125jz立场。

(0)
江山如画的头像江山如画管理团队
上一篇 2018年12月29日 上午8:43
下一篇 2018年12月29日 上午9:47

99%的人还看了以下文章

  • 这篇设计配色干货,0基础也能让你做出好作品

    配色一直是设计圈子里的热门话题,是我们作为设计师必须要掌握的一门重要技能,通过色彩可以向用户传递不同层面的视觉信息,所以不同的色彩也都被人们赋予了不同的含义。比如:红色、橙色、黄色等暖色系的颜色能表现出温暖、热闹;而蓝色、淡蓝色等冷色系颜色,会给人一种凉爽、寒冷的感觉。将色彩属性与设计作品有效地相互结合,往往能做到 1+1>2 的视觉效果。 色彩的特征…

    2020年2月18日 网页设计
    3.9K0
  • 你需要知道的色彩基础知识

    色彩基础知识 光与色彩 色彩三要素 色彩的冷暖 色彩深度 光与色彩 1666年,牛頓以三棱镜分解太阳光,发現看似无色的光线,经过三棱镜時,会依其波长和折射关系, 依序分为紅、橙、黃、绿、青、蓝、紫七色光。 光的物理性质:波长:产生色相的区別波长短的偏蓝,波长长的偏红振幅:产生明暗的区別振幅大的偏亮,振幅小的偏暗 【练习】哪一個较偏蓝?以下哪一個较亮?  人类…

    2018年1月27日
    4.2K0
  • 从零开始做APP界面设计一:iOS 界面设计规范

    准备整理一套APP界面设计教程,可能会花费一段时间,请持续关注。 首先开篇我们介绍APP 界面设计,也就是新手最常遇到的问题:尺寸。 我们以iPhone 7为例讲解iOS 界面设计规范。 一、APP 界面设计工具 做APP 界面设计用的最多的就是PS和AI了,如果你是Mac用户,可以尝试一下Sketch,软件的版本当然是推荐高版本,因为功能更强大,作图的速度…

    2018年4月20日 网页设计
    4.3K0
  • 网站logo制作13项实用技巧

    介绍了常用的网站logo制作方法、制作技巧。

    2019年11月16日 网页设计
    5.2K0
  • 绝美!9种最有意境的蓝色

    蓝色既代表着忧郁,又代表着温柔,它和白色混合之后,还能体现柔顺、淡雅、浪漫的氛围,像天空的色彩~蓝的种类也有很多,克莱因蓝是备受设计师喜爱的一种,也是最经典的一种,而且蓝色是最具凉爽、清新、专业的颜色,今天125建站网给大家分享9种不同的蓝色,你更喜欢哪一种呢?

    2023年1月20日 网页设计
    7680
  • 网页设计技巧:3步提升网页品质

    网页设计中的细节通常是束缚我们想像和内容设置的枷锁。要提升网页设计品质,特别是活动或专题页面的视觉效果,请学习网页设计师必须知道的设计技巧:减法、分块、加法。 1.减法 网页设计中原先的细节经常是束缚我们想像和内容设置的枷锁。保留梁柱和承重墙是必需的,这便是我们在网页设计方法中提到的特征。 2.分块 在功能划分前,进行网页分区前所要做的信息消化。比如我们希望…

    2019年2月21日 网页设计
    3.3K0

发表回复

登录后才能评论