前端设计师如何提高UI界面中的阅读性

发布网友 发布时间：2022-05-03 06:22

我来回答

共2个回答

热心网友 时间：2022-04-20 01:28

影响UI界面阅读性的几种情况：

文字大小

而文字作为设计的一个组成部分，阅读性就必须得到保证。

在网页中，我们常见的文字大小一般是14px、16px，最小的字体一般是12px的。标题类的字体大小一般都在18px以上。网页中字体的大小尽可能的选用偶数，如果是奇数的话，字体显示出来的边缘会有一些毛边，不利于阅读。

字体的选择

不同的字体表达的情感诉求是不一样的，这些外形不一样的字体也会造成阅读性的易难程度。

文字的字间距

调整文字字间距的情况比较少见，但是特殊情况下是会做相对应调整的。都知道，字和字之间是有间距的，我们打出来的字体都是有默认的固有间距。通常情况下默认的固有间距是不需要我们去调整的，只有在特殊情况下才需要对字间距做相对应的调整。

文字的行间距

行间距需要调整的地方就比较多。在整个段落中，每行的字符数对于整体的可读性起着主要作用。如果文字段落非常宽，阅读性则差。文字设计得太密集也不行，会给读者的眼睛带来压力，造成混乱。所以段落的行间距在设计的时候就需要留心。

文字的行间距

段落与段落之间需要有一定的距离，如果段落间距离过小，同样影响视线的移动，过大则容易导致上下文的联系变得松散。段间距比较常见的设置为2.0em。

文字的颜色和对比度

文字颜色与相应背景也至关重要。如果在绿色背景上写绿色文字，就难以阅读了。设计师选择浅色字深色背景，或是深色字浅色背景，都是有原因的。对比使得字符容易阅读。

文中提及的关于文字设计来提高UI界面的可读性，说白了其实不过是选择什么字体设定什么参数，但恰恰有可能是你看似一个不重要的数值，而导致整个界面的阅读性丢失。当用户打开阅读性差的界面，可能不过几秒就会关闭，这对产品来说是相当大的损失。所以说到底，前端设计师们在设计这些界面的时候，一样要认真对比，保证界面优美的情况下还能有效的阅读。

热心网友 时间：2022-04-20 02:46

内容的可读性强调的是用户理解某一内容的难易程度。你需要思考语言是否简单易懂？思维是否清晰？信息是否有用？结构是否合理？内容的易读性强调的是用户如何查看内容以及如何区分内容。你需要确保用户可以顺利查看内容；确保用户可以区分内容并准确识别内容，让用户快速了解页面上的信息。

如何提升界面设计的可读性和易读性呢？你可以从这几个方面入手。

背景色。错误的配色方案极可能会带来糟糕的可读性，进而导致失败的用户体验，致使用户无法快速浏览数据、文字，或者其他任何内容。不同的背景色会带来不同的阅读感知，比如文字很多的页面，倾向于使用浅色背景，并可以采用多种配色方案；页面上图片很多常常采用深色背景，这样可以突出图片，带来更为震撼的视觉效果。

排版。要做好排版，这些问题都要注意：1）留白（负空间）：元素之间的空白区域；2）对齐：放置并对齐文本；3）字间距：字和字之间的间距；4）字母间隙：两个字母之间的间距；5）行距：文本线之间的间距；6）行长：一行文字的长度。

3、视觉层次。视觉层次帮助设计师合理组织和布局UI元素，以便用户可以根据对象的物理差异（例如大小、颜色、对比度、样式等）来区分信息。如果标题的层次结构和正文的排版可以很好的让用户get到这个内容就是他们想看的，他们就会真正去阅读。

4、分屏显示

分屏显示就是采用深色背景和浅色背景两种方案来展示不同的内容。通常使用浅色背景来展示文本居多的页面或者核心数据块，深色则展示图片或少文字的内容，这不仅确保了可读性，还形成了页面对比，一举两得。

5、自定义选项

个性化用户界面可以更加准确地把控用户偏好，比如让用户去自定义背景颜色和文字大小。自定义功能对增加内容可读性具有重大影响，因为凡事都是因人而异，你很难去了解并照顾到每一个用户，但是用户自己知道自己喜欢什么，所以给他们选择的机会就好了。

以上就是UI设计师提高界面设计可读性和易读性的几个方法，如果你想成为高薪高职的UI设计师，一定要具备扎实的理*底和较多的设计经验。

杭州UI设计学习课程涵盖手绘基础、C4D三维设计、H5推广页面设计等知识点，授课的内容实时更新，集结当前流行设计软件及最新设计趋势，将产品知识、交互知识、动效知识融入到UI学习课程当中，学员可掌握新颖，热门的专业技术。