|
阅读：1927
回复：2
|
[好文分享]前端设计师如何提高UI界面中的阅读性
阅读体验是ui设计中必不可少的一项，良好的设计应该都是可读的设计，如果信息都无法正常而清晰的传达，那么设计就失去了意义。设计的可读性和排版设计息息相关，这也就跟设计师的设计功底息息相关。下面简单介绍文字影响UI界面阅读性的几种情况。
文字大小 文字的大小无论在ui界面或者网页当中任何一个地方，都起到一定的作用。而文字作为设计的一个组成部分，阅读性就必须得到保证。那么，如何去选择字体的大小能达到比较好的效果呢？ 在网页中，我们常见的文字大小一般是14px、16px，最小的字体一般是12px的。标题类的字体大小一般都在18px以上。我一般给客户做网站，正文一般会选择14px的字体，标题类的会采用22px加粗的一个字体。有一些特殊的界面设计上，标题可能要求更大，字体也要细一些的，这些需要单独做变化。网页中字体的大小尽可能的选用偶数，如果是奇数的话，字体显示出来的边缘会有一些毛边，不利于阅读。 在ui界面当中，在字体大小的选择上需要多斟酌一下，正文的自号大小和标题的大小应该有所区分，可以在黄金比例的字号上稍微找寻一个适合阅读的字号比例。在苹果6的界面下，我们常见到的标题大都是34px的，部分的app的界面系统在部分标题下会使用到36px。这里再补充一点，无论什么系统，在UI界面中标题或正文的字体一定要选用偶数，因为在开发界面的时候，字号大小换算是要除以二的。  对字号的选择如果还拿捏不准的话，还选择一些工具来进行辅助选择，比如Modular Scale（链接打不开看这：http://www.modularscale.com），可以借鉴下里面的字体比例。 字体的选择 都知道字体有宋体、黑体、楷体、手写体等多种字体形式，不同的字体表达的情感诉求是不一样的，这些外形不一样的字体也会造成阅读性的易难程度。 字体样式对易读性和快速浏览非常重要，所以我们可以先来了解下ui界面下如何选择字体。 1）iOS系统中用的字体是苹果官方字体系列。 苹果官方系列字体以SF和SF Compact 两套字体为主。SF和SF Compact 分别又命名为Text和Display两个子字体系列。Text 系列字体用于小文本显示，而Display 系列字体用于较大的字体显示。
Roboto系列字体有6种字样：Thin、Light、Regular、Medium、Bold 和 Black。 Noto系列字体有7种字样：Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。 文字的字间距 调整文字字间距的情况比较少见，但是特殊情况下是会做相对应调整的。都知道，字和字之间是有间距的，我们打出来的字体都是有默认的固有间距。通常情况下默认的固有间距是不需要我们去调整的，只有在特殊情况下才需要对字间距做相对应的调整。 大标题因为字号比较大，在一些特定的界面上，大标题的字间距会被缩小。这个调整是细微的，可能我们都没察觉。那也侧面说明调整过的字间距还是合适我们眼睛阅读的。 文字的行间距 行间距需要调整的地方就比较多。在整个段落中，每行的字符数对于整体的可读性起着主要作用。如果文字段落非常宽，阅读性则差。文字设计得太密集也不行，会给读者的眼睛带来压力，造成混乱。所以段落的行间距在设计的时候就需要留心。 行间距设置可选择在字体大小的120%到145%之间，这个比例是我个人觉得比较合适舒服的，大家可以试试。 文字的段间距 段落与段落之间需要有一定的距离，如果段落间距离过小，同样影响视线的移动，过大则容易导致上下文的联系变得松散。段间距比较常见的设置为2.0em。 文字的颜色和对比度 文字颜色与相应背景也至关重要。如果在绿色背景上写绿色文字，就难以阅读了。设计师选择浅色字深色背景，或是深色字浅色背景，都是有原因的。对比使得字符容易阅读。 文中提及的关于文字设计来提高UI界面的可读性，说白了其实不过是选择什么字体设定什么参数，但恰恰有可能是你看似一个不重要的数值，而导致整个界面的阅读性丢失。当用户打开阅读性差的界面，可能不过几秒就会关闭，这对产品来说是相当大的损失。所以说到底，前端设计师们在设计这些界面的时候，一样要认真对比，保证界面优美的情况下还能有效的阅读。 |
|
|
2楼#
发布于：2017-11-24 10:22
|
|
|
