| UI设计 | 您所在的位置：网站首页 › ui设计中字体大小规范 › UI设计 |
UI设计
|
前段时光在研讨字体，那么索性把迩来的进修进行了一下梳理，供大师参考。 字体——界面设计的基石 一、在用户界面中，每一个单词和字母都至关主要。好的字体即是好的设计。字体成了界面设计的基石，而我们设计师，则是这些这类「信息基石」的修造者。 二、固然在界面设计上，有很有多渺小的细节须要斟酌：好比均衡、定位、层级和构造，可是有了好的案牍和字体，就胜利了 95% 。 好的字体设计或排版，都是为了进步用户浏览体验。那么，若我们把握了人的浏览体验要素，即可胜利一半！在如许一个条件下往做用户界面的字体设计，便可游刃有余了。也可以在设计之前给本身制订一套字体设计模板，以便于日后的设计工作。 别的，盘算机屏幕、Kindle 电子书和纸质印刷品的浏览体验是分歧的。浏览电脑屏幕时，影像是不稳固的，时常会刷新，并且屏幕也在发光；浏览纸质印刷品时，影像是稳固的，不会刷新，并且报纸反射光，不会发光。盘算机屏幕的刷新和发光会让眼睛疲惫。这篇文章重要针对盘算机屏幕的界面字体设计。一、字体的选择 1、准确应用巨细写（英文中的巨细写题目） 因为我们浏览习惯的题目，全年夜写单词读起来会比巨细混写的单词慢一些。并且现在全年夜写的题目居右“高声夸大”的意味。 ·人们以为全年夜写单词是高声夸大的语气，也不习惯浏览，是以尽量罕用 !
须要用户引起留意的是“撤消”和“断定”是以这里应用了全年夜写方法。 2、选择适合的字体 对于字体我们年夜致可以分为衬线字体和无衬线字体两种类型。
· 衬线字体和无衬线字体的可读性雷同
不常用的字体和过度花哨的字领会干扰模式辨认，下降浏览速度。 - 当人们感到字体难读时，会把这种判定转嫁到文本内容上，以为内容自己难以懂得或难以实现。 • 进步辨识度 • 低调（不要太花哨）一个完善的 UI 字体让人意识不到它的存在，毫不会鹊巢鸠占。字体应当是便利用户完成义务的，而不该为用户添加认知上的累赘。 • 高的X-height • 宽比例 • 宽松的字母间距 • 平顺的笔画 二、字号 对于字体设计来说，字号很是主要，它应当到达足以轻松浏览。 这里要提到一个概念“X高度”顾名思义，X高度是指某字体小写字母X的高度。分歧字体有分歧的x-hight，所以即使统一个字号，看上往也会巨细纷歧。 Tahoma、Verdana等设计交完的字体居右较年夜的X高度，是以更合适在屏幕上浏览，较年夜的“X高度”能让字体看上往更年夜些。
( 字高是指小写字母「x」的高度。x-height 越高，小屏浏览体验就越好。但字高也不克不及过年夜，要否则 n 和 h 难以区分。) · 选择足够年夜的字号，以便利各年纪段的读者浏览 · 对于在线内容，应选择X高度达的字体，是字体显得较年夜！ 推举字号 App bar Title style, Medium 20sp 按钮： English: Medium 14sp, all caps Dense: Medium 15sp, all caps Tall: Bold 15sp 副题目 英文: Regular 16sp (device), 15sp (desktop) Dense: Regular 17sp (device), 16sp (desktop) Tall: Regular 17sp (device), 16sp (desktop) 主题 1 English: Regular 14sp (device), 13sp (desktop) Dense: Regular 15sp (dense), 14sp (desktop) Tall: Regular 15sp (device), 14sp (desktop) Text contrast ratios Minimum: 4.5:1 Preferred: 7:1中文/日文/韩文： Button：Medium 15SP Caption: Regular 13 SP Body1: Regular 15sp(Device) , Regular14sp (Desktop) Body2: Medium 15sp(Device) , Medium14sp (Desktop) Subheading: Regular 17sp(Device) , Regular16sp (Desktop) Title: Medium 21sp Headline: Regular24sp Display1: Regular 34sp Display2: Regular 45sp Display3: Regular 56sp Display4: light 111sp英文及相似英文字体： Button：Medium 14SP Caption: Regular 12SP Body1: Regular 14sp(Device) , Regular3sp (Desktop) Body2: Medium 14sp(Device) , Medium13sp (Desktop) Subheading: Regular 16sp(Device) , Regular15sp (Desktop) Title: Medium 20sp Headline: Regular24sp Display1: Regular 34sp Display2: Regular 45sp Display3: Regular 56sp Display4: light 111sp三、行高/行间距 行距是影响易读性很是主要的身分，过宽的行距会会让文字落空延续性，影响浏览；而行距过窄，则轻易呈现跳行。 好比12号字体，行间距是12px—18px，段落间距则是18px—24px。 别的，行高/段落之间的空缺=0.754。行间距正好是段落间距的75%长短经常见的。 好比简书16号字体，行间距27px/段间距36px=75%。文字字号自己比拟年夜，所以行间距也不须要严厉依照1—1.5倍的比例设置，不外行间距和段间距的比例合适75%，看起来很不错，如许的视觉后果让人在浏览时坚持一种节拍感，这就是在现实情形中将规范的机动利用。 四、色彩 文本色彩与布景色彩太附近长短常难以浏览的。文本中有太强烈的对照也你长短常难以浏览的。尤其是亮色文本和深色布景。 文本应当保持在一个最低的比例4.5：1来包管其易读性。那么7：1是最优的选择。 这些色彩组合起来也应该斟酌到他的对照的比率是可以让用户感知到他们之间的分歧。 推举色彩Button：Black 87% Menu: Black87% Caption: Black 54% Body1: Black 87% Body2: Black87% Subheading(副题目): Black87% Title: Black87% Headline: Black87% Display1: Black54% Display2: Black54% Display3: Black54% Display4: Black54%五、每行最优字数 每行字数较多时读的更快，可是人们偏好短行** 假如一行文字过长，视线移动间隔长，很难让人留意到段落出发点和终点，浏览比拟艰苦；假如一行文字过短，眼睛要不断往返扫视，损坏浏览节拍。
我们的浏览视线 是以我们可以让内容区的每一行承载适合的字数，来进步易读性。 · 每行100个字符时浏览速度最快，可是人们偏好较小的行宽（每行45-72个字符） · 假如浏览速度很主要，就用较年夜的行款1（每行100字符） · 假如浏览速度不那么主要，就用较小的行宽（每行45-72个字符） · 对于多页的文章，可以斟酌用断航分栏版式（每行45个字符） Google Meterial Design中建议： 文章主题段落40—60字符为最优选择 一个好的浏览体验最好每行60个字符。每行有准确的字符数目是你的文本可读性的要害。 太宽 ·假如一行文本太长太宽，用户的眼睛在浏览时将会很艰苦。由于这个长度会应用户很清楚那边是这行的开端和停止。而且在一年夜篇文章中往连续读哪一行文字长短常艰苦的。 太窄 ·假如一行太短，眼睛将须要不断地往返穿梭，打乱浏览者的韵律。太短的行也会使人有严重感，使他们停止这一个之前就要开端读下一行。
文章推举 ：http://baymard.com/blog/line-length-readability |
【本文地址】