精雕细琢!用于创建出色用户体验的十大排版规则
浏览:369 时间:2022-5-6

对于网页和应用程序,良好的排版不仅可以使用漂亮的字体,还可以实现高可读性和可识别性。视觉设计和内容风格也应保持一致。

尽管这些要求似乎与“高”的需求一样空洞,但要进行一些培训并不困难。

因此,今天的文章将为您提供10个排版规则,可以帮助您改善用户体验。每条规则都附有一个实用案例,以帮助您理解和应用。

 可读性原则

网页必须使用非serif字体的想法已经过时,但此声明背后的核心思想已过时:文本必须易于阅读。

要选择易于阅读的字体,应避免使用手写字体,哥特字体和过于新颖的字体。当然,如果它是一个需要艺术字体来装饰的场景,那是另一回事。

具有出色可读性的字体也具有良好的可识别性,并且它们通常没有特殊的“显眼”。这些字体应该是“透明的”,以便用户可以畅通无阻地接受,这就是它们的工作方式。

 确保行间距足够宽

行间距是影响用户阅读体验的关键因素之一。过于密集会使阅读变得困难,并且透气的线间距可能非常吸引人。特别是现在,大量用户正在手机和平​​板电脑上阅读,并且相对宽的行间距对于阅读大量内容的容易性具有相当大的缓解作用。

控制行间距涉及几个变量:

·字体大小

·段落长度

·字体样式

·屏幕宽度

非常令人遗憾的是,没有固定的转换公式可以帮助您完成这项工作,但您可以这样做:

·对于大多数站点,最佳行间距应为字体高度的125%

·对于大多数移动设备,最佳行间距是字体高度的150%

·松散的行间距(例如直线作为行间距)使内容更容易识别和扫描

·控制线间距的紧密度,用眼睛查看段落进行测试,根据感觉进行调整

选择有字母含有大圆角的字体

对于西方字体,具有较大圆角和内部空间的字体更易于阅读。明显的圆形曲率使得B和R等字体易于识别,而内部空间则是O和Q等字母的符号。

紧凑和密集的字体使得难以识别眼睛,并且在纸质媒体上流行的更宽的标题字体非常好,因为当字体被加宽时,不同字母之间的差异变得更加明显。圆角较大的字体似乎更接近为儿童设计的字体,童年时字体的美学理解伴随着人们的生活。

 让字体更大一点

毫无疑问,适当放大字体会让你感觉更舒服。当然,字体的大小通常取决于您的实际需求,在处理大部分文本时需要注意。

虽然不同的设计师在处理文本时有不同的想法,但通常每个人都认为每行的字符数应该控制在45到60之间(中文也有一个习惯的数字),而在移动端,这个数量通常需要减半看起来足够舒服。

 找x高度较高的字体

与中文字体不同,西方字体有顶部和下降,小写字母x的高度是字体的x高度。小写字母的总体比例将直接影响阅读体验。

具有相对高x高度的字体更容易阅读,换句话说,小写字母的高度更接近大写字母的高度。理想情况下,字体的x高度介于大写字母高度的三分之二到四分之三之间。

 显示字体的字距调整

仔细的字距可以创建良好的排版。

身体里面有很多内容,仔细调整所有字母之间的字距是不现实的,这是没有必要的。但对于标题字体和显示字体,字距调整是非常必要的。不同字母的笔划角度是不同的,并且每对字母之间的距离被适当地调整以使它们看起来像自然对。这个细节可以使您的设计在许多网站设计中脱颖而出。

实际上,中文和日文字体布局也使用了字距调整技术。在使用平假名和片假名的日本,通常在标题的布局和显示字体中使用字距调整以确保整体视觉。经验。

仔细思考比例

当您为某个项目选择字体样式时,考虑后续设计的不同部分的大小比例会很有帮助。听起来好像有很多计算工作要做,但它不一定很麻烦,对整个项目都有很大的帮助。

我们前面提到的行间距是要考虑的比率之一。另外,如何设置标题,字幕和正文的字体大小比例,如何设置大小以营造视觉和谐感。开始控制比例可能不太好,但是Tut Plus有一个很好的教程可以帮助你理解这一点。

 笔画统一的字体最理想

看着笔画的风格,笔画的宽度无疑是最重要的。由于缺乏对比度,超精细笔划通常难以识别,而过厚和过厚的笔划可能具有相同的问题,并且阅读非常昂贵。如果字体的对比度太强而且太突然,则可能会导致一些显示问题。

事实上,解决方案并不困难。最好选择中等笔画和相对一致笔画的字体。这些字体与更多背景兼容,并且相对更具可读性和适应性。

 克制地使用字体

仅使用两种字体。同样,只能使用两种字体。

控制字体类型的数量应该是每个项目的目标。太多的用户喜欢在界面中疯狂地填充各种不同类型的字体,这对于眼睛来说是灾难性的,难以阅读,甚至使用户感到厌烦。

您可以选择两种字体系列作为常用字体——并且最多可以选择一种用于显示的艺术字体——然后坚持这些字体。考虑每种字体的使用时间和位置,这应该与字体的颜色,大小和位置有关。此外,字体的使用应在不同页面和不同设备上保持一致。

 提升对比度

有许多时尚的网页设计可以减少背景和文本之间的对比,创造出酷炫和融合的效果,但内容对用户来说非常低识别和不友好。

您的内容是网站的核心之一,因此重要性无可置疑。增强内容和背景之间的对比度,以便在屏幕上清晰地识别每个单词,使用户可以轻松获取信息。

网站包含的文本内容越多,布局设计就越重要。布局结构舒适稳定,对比度明显和谐,安全的颜色是您所要做的。