界面设想的7个排版技能

魔幻双琪座双q

来历：知乎



出色的字体设想将读者吸引到内容上，而不是字体自己上。


排版在用户界面设想中起侧重要感化。当你在设想一个产物时，可以清楚地向用户转达它的意图和目标是相当重要的——这凡是是经过文原本实现的。这就是为什么有用的设想和杰出的排版可以在改良整体用户体验的同时发挥感化的缘由。换句话说，优化排版也可以优化UI。

虽然优化版式包括最洪流高山进步可读性，可拜候性和图形平衡，但最重要的身分仍然是可用性。终极的方针是削减和消除用户与界面之间的磨擦，而且不增加用户的认知负担。好的排版会把读者吸引到内容上，而不是笔墨自己。

“现实上，排版不是挑选字体也不是建造字体，它是为了使文本具有最好的用户体验。” —奥利弗·赖兴斯坦（Oliver Reichenstein）
排版对UI设想的重要性不容小觑，改良你的排版设想是改良全部UI的重要一步。下面是一些关于若何改良排版的倡议;

利用条理结构进步清楚度
设想师经过建立一个视觉条理来设备一个合适的结构，这个视觉条理构造了一切的视觉元素，以便用户可以轻松感知内容。排版条理结构用于经过将内容分别为分歧的款式范例来构造复制内容;题目、副题目、正文、题目等。

利用清楚的排版条理结构使文本易于阅读和扫描。
此外，它答应你突出显现关键部分，以吸援用户的留意。一个好的经历法例是在变动点巨细时，将你的尺寸翻倍或减半。例如，假如题目利用32px，则正文文本利用16px建立对照度。

题目利用2倍巨细，题目利用3倍，更活泼的利用4倍。


字母间距、行高和行长是排版元素之间调剂空缺的进程。缺少空缺能够会致使易读性差，由于很难区分放置得太靠近的单词。另一方面，太多的空缺能够会致利用户在阅读时丢失偏向。

行高
一些设想利用法式（例如Photoshop）利用“行距”一词，而其他设想利用法式则称其为“行高”。前导，行距和行高都指的是同一件事-文本在行中的垂直间距。
行高没有完善的数字，由于它取决于字体自己的设想和巨细。凡是，将线高设备为1.5倍是起点，你可以按照需要渐渐调剂。当你还利用16的根基字体时，此法则最有用。



字母间距
字母间距是指每个字母之间的间距。很少有设想师摸索字母间距，可是由于它对文本的可读性有影响，是以它可以使好的字体和出色的字体完全分歧。利用字母间距时有一些根基原则；

• 利用大写字母增加字母间距
  
• 增大字体巨细时减小字母间距
  
• 在增加字宽时减小字母间距
  

行长
行长根基上是文本框的宽度。最好利用较短的行以进步可读性，由于它们更易于阅读。屏幕上文本的倡议行长在60到80个字符的范围内，这是基于1440px的屏幕巨细和16px的字体巨细。对于移动屏幕，应将范围调剂为每行35到45个字符。



按照高低文挑选字体
在挑选字体时，重要的是要斟酌文本的高低文和潜伏的读者。有大量分歧的字体设想，每种字体都为界面带来了自己的气概和蔼概。字体挑选的视觉结果将影响用户对产物的第一印象。

“优异的设想师将文本视为内容，巨大的设想师将文本视为用户界面” –– Cameron Moll

正确的字体挑选将使你可以有用地将信息转达给受众，而毛病的挑选会致使误解和紊乱。

一个家庭 一个脸色
在一个设想中利用多种字体对用户来说能够是难以承受的。假如你不是字体配对或排版方面的专家，那末利用同一系列的字体总是一个平安的挑选——由于它们是为了一路工作而设想的。经过自动建立更具凝聚力的表面，还可以使设想进程加倍简化。

你可以寻觅带有多种挑选的家庭，以确保你有充足的变化以顺应分歧的目标。配对字体时，必须仔细计划以经过改变字体巨细，粗细和字母巨细写来发生对照。

带有额外特征(如斜体、扩大版或紧缩版)的字系统列答应更有缔造性的放置，但重要的是将其连结在最低限度。


左对齐以进步可读性
在天下上大大都地域，用户偏向于从上至下，从左至右阅读。经过在左侧对齐文本，可以进步其可读性。分歧的左侧沿为每个句子竣事后的眼睛供给了返回的位置-使阅读加倍轻易。
避免在段落的最初一行利用单个单词（也称为孀妇）也很重要。



总结一下
排版是数字时代每个设想师都需要把握的一项技术。不管你的项目目标是什么，排版在界面设想中都将发挥相当重要的感化。假如做得好，它将使你的用户受益，否则，只会障碍他们。

本文的目标只是为你供给一些入门指南和技能。终极，只要经过众多理论，你才能改良和进修。

                                                                 ·   ·   ·   

原文链接：
https://uxdesign.cc/7-typography-tips-for-interface-design-b7185e9397c4
作者：Jeremiah Lam




原文地址：https://zhuanlan.zhihu.com/p/338468248
免责声明：
1、文章部分图片源于收集，均为表示图；
2、一切文章、图片、音频视频文件等材料版权归版权一切人一切；
3、因非原创文章及图片等内容没法和版权者联系，如原作者或编辑以为作品不宜上网供阅读，或不应无偿利用，请实时告诉我们，以敏捷采纳适当办法，避免给双方形成不需要的经济损失；
4、本页面内容由爬虫法式自动收集于互联网，如无意中加害了媒体或小我的常识产权，请电邮【E-Mail:cb@yoyodoc.com】告之，我们将于24小时内删除。