UI设计关于字体的一些事

好记性不如烂笔头

移动端的设计字体选择:

iOS设计中中文字体常用冬青黑体或华文细黑

安卓设计中英文字体:Roboto,中文字体:Noto

移动端的设计字体字号:

导航主标题字号:40-42px,在内文展示中大的正文字号32px, 副文是26px,小字20px

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

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

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

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

网页端的设计字体:

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

各字体的常用场景:

方正正中黑系列:中黑系列的字体笔画比较锐利而浑厚,一般运用在标题文字中。

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

汉仪菱心简/造字工房力黑/造字工房劲黑

在这几个字体中,他们有着共同的特点,字体非常的有力而厚实。基本都是以直线和斜线为主。适合广告和专题使用。在使用这类字体的时候我们可以使用字体倾斜的样式,让文字显得更为活力。在这三种字体中,菱心和造字工房力黑在笔画、拐角的地方采用了圆和圆角。而且笔画也比较的疏松,更多的有些时尚而柔美的气氛。而劲黑这款字体相对更为厚重和方正。这类字体使用在大图中偏多,效果比较突出。

相关用色:

在界面中的文字分为三个层级,主文、副文、提示文案等。

在白色的背景下,字体的颜色层次其实就是黑、深灰、灰色。常用的色值是#333333;#666666;#999999。在界面中还经常会用到背景色#eeeeee。

分割线则采用#e5e5e5或#cccccc的颜色值,一个深一些,一个浅一些。

你可能感兴趣的:(UI设计关于字体的一些事)