界面设计必备,常用字体规范micu设计

这几天有人问我说:“最近看了好多教程,都老高大上了,但是老弟我做不到呀,想学点直接能拿来用的,这个要求过分吗……”

作者:王铎(MICU设计)

这个,好吧,那就直接说说能用的知识:字体字号。

也许你会说:字体字号?也太Low了吧,这个谁不知道重要呀。

对于这个问题,我想说:会和熟练,是两回事。一个App,不同部分的字体字号你能准确地说出来吗?很多刚做APP界面的设计师,经常会因为字号,字体颜色,间距而困扰。拿到设计需求后,开始进行设计,不知道从何去调整界面的字号和行间距等。容易碰到的问题是页面和页面的字号调着调着就大小或颜色不统一了。并且容易导致设计稿反复得修改。设计出来的效果图文字左右间距层次不齐,导致与预期不符等。这小节我将和大家理一理界面中常用的字体,字号,字体颜色及间距对齐的一些小经验。希望能对大家有些帮助。

在设计师的职业生涯中,至少一次甚至多次在工作中因为字体不协调栽跟头。在实践的过程中我们会慢慢发现一些规律或者经验规范。接下来我将和大家一起聊聊在界面设计中的那些常规字体的使用规范。

我们常常会听到,这也太LOW了吧!!你能统一一下字体吗?

不明确而繁琐的字体搭配会导致整个画面失调。可以这样说,字体可以成就设计也可以毁掉设计。

问题的关键有:

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

2.使用的字体不易识别

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

怎么避免这样的结果发生呢?

通过设计经验可以帮助你做出更好的版式,了解不同平台的常用字体设计规范.

在每个项目设计中只使用1-2个字体样式,而在品牌字有明确的规范的情况下,只需要一种字体贯穿全文,通过对字体放大来强调重点文案。字体用的太多,越显得不够专业。

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

字体与背景的层次要分明,确保字体样式与色调气氛相匹配

在不同平台的界面设计中规范的字体会有不同,像移动界面的设计就会有固定的字体样式。网页中会有常用的几个字体,在这我和大家分别介绍一下。

以下是在72像素/英寸下的规范

移动端常规字体

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

Android

英文字体:Roboto

中文字体:Noto

移动端常用的的字号有哪些呢?

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

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

在内文展示中字号大小又是多大呢?大的正文字号32px,副文是26px,小字20px在内文的使用中,根据不同类型的App会有所区别。

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

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

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

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

(见下图中的退出按钮)

大家注意了,在选用字体大小的时候一定要选择偶数的字号,因为在开发界面的时候,字号大小换算是要除以二的。这个详细缘由大家可以网上查询,我就不在这一一的介绍了。常用字号的大小基本就这几个,根据版式设计需要也会采用异样大小的字号来特殊处理。这种更高的要求设计师的全局把控能力了。

常用的字号有哪些呢?

网页中文字字号一般都是宋体12px或14px(无状态),大号字体用微软雅黑或黑体。大号字体是18px、20px、26px、30px,一般使用双数字号,单数的字体在显示的时候会有毛边。

常用的字体

1.平平稳稳:微软雅黑/方正中黑

微软雅黑系列:在网页设计中这款字体使用的非常平凡,这款只无论是放大还是缩小,形体都非常的规整舒服。在设计过程中建议多使用雅黑,大标题用加粗字体,正文用常规字体。

方正正中黑系列:中黑系列的字体笔画比较锐利而浑厚,一般运用在标题文字中。但这种字体不适用于正文中,因为边缘相对比较的复杂,文字一多会影响用户的阅读。

2.与时俱进:方正兰亭系列

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

3.刚劲有力,运动型:汉仪菱心简/造字工房力黑/造字工房劲黑

毛笔字生成器

通过自由的书法网站在线生成。在网址中输入文本,再进行选择书法字体样式。通过这种方法我们能很快的找到需要的书法字体。这招非常管用。

和大家简单操作一下毛笔字的使用方法。

将下载下来的字体图片AI转路径,编辑文字。

首先使用在线生成器输入选择好你需要的文字字形,将文字图片拖至AI中。

选中拉入图片,点击[图像描摹]

然后继续点击[扩展]按钮

扩展完毕后,图片已经都变成了路径。

使用魔棒选择颜色就可以将文字的路径提选出来。

最后经过设计后的Banner效果,这就是我经常用的Banner风格,你们也试试吧~

重要提示,怎么找不认识的字体名称?

字体颜色又有哪些常用的颜色呢?在界面中的文字分为三个层级,主文、副文、提示文案等。

在白色的背景下,字体的颜色层次其实就是黑、深灰、灰色。

常用的色值是#333333;#666666;#999999

在界面中还经常会用到背景色#eeeeee。

分割线则采用#e5e5e5或#cccccc的颜色值,一个深一些,一个浅一些。这个会更具不同的软件风格采用不同的深浅,由设计自己把控。

设计的时候我们还可以将字体进行变形来达到宣传的目的,这个需要设计师对字体设计有一定的了解。

总之,设计是要有规范,有体系的。使用规范化的设计对产品的延续性非常有帮助,并且保证了产品的独特性和一致性。所以,大家要在设计初期找到风格和规范,这样做出来的界面才会统一一致,在变化的需求中找到定量,调整起来也相对轻松很多。

THE END
1.UI设计中字体大小的设计规范是什么?简单来说,UI 设计中字体大小需根据平台选择,标题大、正文易读,行高搭配合理,不同屏幕需调整。本文将从中英文字体、行高、字体大小设计要点 3 个部分来介绍 UI 设计中字体大小的设计规范是什么。字体是 UI 设计中很重要的一个组成部分,字体大小是影响用户阅读体验和视觉平衡的关键要素。 UI 设计中的字体大小应该https://js.design/special/article/design-specifications-for-font-size.html
2.ui设计移动端字体适配超全面的移动端UI设计规范整理汇总很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不那么尽如人意。本文整理汇总了一些界面设计(iOS系统)中常用的一些尺寸规范和方法,如控件间距、适配、标注、切图等,设计师在设计时并不一定要https://blog.csdn.net/weixin_39726044/article/details/111739471
3.武汉网页UI设计公司分析2024年网页UI设计新趋势与基础规范指南字体样式:字体样式的选择要根据网页的定位和风格来确定。常见的字体样式包括斜体、粗体和下划线。斜体常用于强调文字,粗体常用于标题和重要信息,而下划线则常用于链接文字。 三、图片规范 在网页UI设计规范中,图片的尺寸是一个重要的考虑因素。合适的图片尺寸可以提高页面的美观度和用户体验。以下是网页UI设计规范中常见http://hbbywl.com/news/tuiguangyingxiao/3134.html
4.UI设计的字体规则这小节我将和大家理一理界面中常用的字体,字号,字体颜色及间距对齐的一些小经验。希望能对大家有些帮助。一.成也字,败也字在设计师的职业生涯中,至少一次甚至多次在工作中因为字体不协调栽跟头。在实践的过程中我们会慢慢发现一些规律或者经验规范。接下来我将和大家一起聊聊在界面设计中的那些常规字体的使用规范https://www.douban.com/group/topic/77825169
5.ui设计规范大全(精选6篇)ui设计规范大全(精选6篇) 文章描述:Android 3.0(蜂巢)交互&UI设计规范.Android OS自上市以来,由于缺乏统一规划,使得不同设备在 1.5、1.6、2.0、2.1、2.2、2.3几大版本徘徊,本人用的HTC Hero(俗称G3)也是从1.5~2.3一个个版本,10多个https://www.360wenmi.com/f/file173fjcf6.html
6.优秀UI设计师必知的字体设计规范前几期给大家分享了关于图片UI设计的排版、配色、流行趋势、情感化设计等等。这些都固然重要但是似乎忽略了什么,没错那就是字体!今天胡老师就和大家聊聊优秀UI设计师必知的字体设计规范。 字体为什么重要? 字体不仅仅只是字体,它更是用户界面设计的重要组成部分。好的排版将建立强大的视觉层次,为网站提供图形平衡,并设https://www.17font.com/news/d21b185dbdd74dde851855fa34e8395c.html
7.新版!UI设计规范详解2. Android的UI设计规范 2.1 基本单位 DP:Android开发专用单位,以160DPI屏幕为基准,称之为一倍图。1DP=1PX(计算公式:DP x DPI / 160 = PX)。 SP:Android专用字体单位。以160 DPI屏幕为标注,则1SP=1PX(计算公式:SP x DPI/160=PX) 2.2 单位和度量 https://pixso.cn/designskills/shejiguifan/
8.UI设计一份超详细的UI设计规范全攻略设计语言是一个很庞大的设计体系,包括字体、网格系统、颜色、图形等等,而笔者在本文中也分享了相关的设计原则与关键词,希望对你有所启发。 前面两期我分享了,为什么需要设计语言,对内对外有哪些帮助,同时和大家分享了,在做设计语言之前我们先要建立设计原则,以及设计原则下面的设计关键词,通过设计关键词推导出对应的视http://www.sailmet.com/News/Detail/15
9.UI设计规范文档一篇详细的UI设计规范模板,可以方便我们解决了一些与程序沟通和接口的问题,尽量避免误会和摩擦。是每个UI设计必须掌握的知识。 目录: 一、适用环境和对象 二、必要性 三、技术原则 四、代码编写规范 五、页面模版使用规范 一、适用环境和对象 本规范适用基于浏览器的B/S版软件项目开发工作。开发流程中的模版页面编写http://www.360doc.com/content/16/1013/15/37278251_598132338.shtml
10.UI设计规范整理iOS字体和切图及规范UI设计规范整理一iOS字体和切图及规范 4.切图命名常用词 图片.png 5.Splash切图(单位px) ···iphone4:640X960 ···iphone5:640X1136 ···iphone6/7:750X1334 ···iphone6/7:1242X2208 6.Icon切图(桌面图标) 图片.png 图片.png iPhone图标尺寸及整理如下: https://www.jianshu.com/p/3bf00864bf82
11.北京网页制作的基础UI设计规范总汇企术建站北京网页制作一般都是要遵循这某些网页制作规则的,尤其是对UI的设计更是有些着一套规范。一些刚入行的网页设计师因为对网页制作的一些尺寸及规范的理解可能会有一些模糊,但看到如下UI设计规范,对于网页制作的一些基础尺寸就会有一些概念了。 1、 网页尺寸规范 https://www.netconst.com/index.php/news/1040.html
12.ios开发ui规范ios开发规范手册4、下面列出UI设计网页设计字体规范特点:微软雅黑/方正中黑:在网页设计中这款字体使用的非常频繁,这款字无论是放大还是缩小,形体都非常的规整舒服。在设计过程中建议多使用雅黑,大标题用加粗字体,正文用常规字体。 5、所以请务必采用750 x 1334分辨率做图,另外以偶数做标注,避免小数避免锯齿和边线模糊。 http://www.pzhseo.com/article/didghpp.html
13.WebUI设计理论学习笔记一般项目初期就要建立设计规范(主色调,字体等),因此为基准,进行之后的设计工作。查看设计规范的不只有设计师还可能是前端,运营,开发等人员,所以设计规范的建立要充分考虑适用人群。 字体选择 一个非创意性质的网页,最重要的内容,就是文字。 出现了文字,就会出现文字排版,字体选择,字体颜色大小粗细等细节。而这些细节,https://www.imooc.com/article/details/id/20171
14.教你制作UI设计规范,设计小白看过来于是就上网搜了很多别人做的设计规范, 自己依葫芦画瓢做了一份, 满心欢喜的给到开发的时候,却被告知很多东西都派不上用场,比如字体规范里写的一级标题, 每个人所认为的一级标题是不一样的, 所以光写一级标题的话, 别人也不知道具体指的是哪里。 https://www.hxsd.com/information/12992/
15.移动端ui设计规范移动端ui设计规范 进入思维导图模式 ?APP架构 ?启动 ?提供启动图 ?合适的方向启动 ?快速进入APP ?重启前恢复原状态 ?为新用户提供指导 ?增强趣味性 ?加载 ?明确加载状态 ?至少要有一个加载的图标,可以表达正在发生的状态。更好的方式是:使用类似进度条的形式,显示明确的进度,让用户https://zhimap.com/mhtml/96d08419563c4463b1d50c9efba4eba4
16.UI设计规范android规范中,720*1280px尺寸下,状态栏的高度是多少? 96px 24px 48dp 48px *9. 某app标题栏为深蓝色,标题栏标题用什么颜色的字体?【多选题】 黑色 浅灰 绿色 白色 *10. 甲方需要在产品列表页加入悬浮button,你设计的悬浮button大小和内部图标大小?【多选题】 https://www.wjx.cn/jq/28381693.aspx
17.android文字格式安卓手机字体格式如何设置AndroidUI设计字体的大小规范 1、在做app页面尺寸设计时,首先需要确定你所要设计的界面长宽,文字字体大小以及所使用的文字层级,通常情况下,我们都是按照4: 1的比例来设定界面的尺寸为常见:4: 1的比例设计在设计过程中比较常见的手法是:1。 2、注:android规范提供的尺寸单位是dp,若设计稿尺寸设为720 x http://chengdu.cdxwcx.cn/article/dijpggj.html
18.一步步教你制作UI设计规范在多人团队里,通常不同的设计师负责不同的流程,如果没有UI设计规范,不同的设计师就会对相同的组件做出不同的方案。产生大量重复工作,效率比较低。而制作设计规范和UI KIT之后,则可以直接利用KIT里的组件快速搭建好页面,把设计师从基础工作中释放出来,大大提升设计效率。 http://www.situedu.com/news/uid/2490.html
19.网页设计规范怎么做?记住这4点就够了网页设计也属于UI设计范畴,是近几年的大热门。随着互联网时代的到来,网页UI设计也开始被越来越多的企业重视,正是如此,UI设计也可以说是目前设计界中薪资最高的存在。 那么对于目前学习网页设计的小伙伴而言,如何才能做好网页设计,拿到这份高薪呢?关于这一点,墨刀认为做好UI设计的核心是明确网页设计规范,今天就来和https://modao.cc/design/web-design-standards.html
20.ui的ios设计规范苹果ui设计理念本文分别从控件+布局+模态情景+手势交互+动画+字体等六个方面介绍了一些iOS平台设计的基础规范,有志于App设计的童鞋推荐收藏起来。 1、框架UI的元素分为4类: A:栏:状态栏目和导航栏的结合体; B:内容视图:应用显示的内容信息,包括相关的交互行为,例如滚屏、插入、删除等操作进行排序; https://blog.51cto.com/u_16213657/11369485