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

今天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%的人还看了以下文章

  • 3分钟学图片版式设计:K先生的版式平衡与构图实战

    条理清晰,通俗易懂的图片版式设计教程。

    2018年1月23日
    8.7K0
  • 移动端web app和页面开发使用什么字体?微软雅黑?

    一直不清楚移动端web app和页面用的什么字体,只是觉得类似微软雅黑,直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题。 三大手机系统IOS、android、winphone支持的字体 ios 系统 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue 无微软雅黑字体 androi…

    2019年4月9日
    17.0K0
  • 1秒学会两点透视绘图技巧

    1秒学会两点透视绘图技巧1秒学会两点透视绘图技巧1秒学会两点透视绘图技巧1秒学会两点透视绘图技巧

    三点透视是一种绘图方法,一般用于超高层建筑,俯瞰图或仰视图。第三个消失点必须和画面保持垂直的主视线,必须使其和视角的二等分线保持一致。 (二点透视)就是把立方体画到画面上,立方体的四个面相对于画面倾斜成一定角度时,往纵深平行的直线产生了两个消失点。 建筑绘画的两点透视要比三点透视还要难以掌控,Anatoly Reza Pahlevi 为我们展示了他的独门绝技…

    2018年7月14日 网页设计
    13.3K0
  • 做什么样的网站好,什么样的网站才能吸引用户?

    什么样的网站是好网站,做什么样的网站好?网站要以什么样的形式来吸引你的用户?

    2019年1月25日
    2.5K0
  • 网页设计中最常用的7款字体

    网页设计中最常用的7款字体网页设计中最常用的7款字体网页设计中最常用的7款字体网页设计中最常用的7款字体

    字体主要分为衬线字和无衬线字。网站制作中,选用什么样的字体是比较重要。 衬线字和无衬线字的区别:左边的中文和英文字属于衬线字,右边中文和英文属于无衬线字。 衬线字指的是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。 如宋体,观察比划可以看到横细竖粗的特点,这就是典型的称线字。 无衬线字体没有这些额外的装饰,而且笔画的粗细差不多。比如微软雅…

    2019年10月22日 网页设计
    10.4K0
  • web前端开发学习路线

    如果你是新手,准备学习web前端开发的话,一定要想想为什么要学习它?性趣、爱好、获得一份相关工作…… 定位好自己,持之以恒,然后是多学、多思、多练、多交流、多总结,发现自己的问题,然后克服。在状态不好的情况下,要及时调整,多向大牛请教,那样往往能让自己成长的快,切勿急躁。 初学web前端开发可以看一些入门视频教程,之后可以买一些书,做一些小项目,要学会分析自…

    2018年1月18日
    9.3K0

发表回复

登录后才能评论