网页排版设计的10个小技巧

2017-11-14 18:00:47 来源：易采站长网友投稿作者：admin

　　本文引见进步文本内容可读性的10个小本领

　　相同正在设想中起着相当主要的做用。那是成立用户战网站之间的明白联络，并协助您的用户真现目的的枢纽。当我们议论网页设想情况中的相同时，那凡是是指文本。排版正在那个历程中起着相当主要的做用：

　　收集中超越95%的疑息是以笔墨的情势呈现。

　　好的排版进步了用户的浏览主动性性，反之，好的排版会低落用户的浏览主动性。正如Oliver Reichenstein正在他的文章“Web Design is 95% Typography”中所道：

　　劣化排版便是劣化可读性，可会见性，可用性!让团体的图形均衡。

　　换句话道：劣化您的排版便是劣化您的用户界里。正在那篇文章中，我将供给一些划定规矩，协助您进步文本内容的可读性。

　　1. 削减差别范例字体的利用利用超越3种差别的字体让网站看起去出有构造且没有专业。记着，太多的尺寸范例微风格也能够毁坏任何规划。

　　为了避免那种状况，测验考试将字体数目限定正在最小限度

　　普通去道，将字体数目限定正在最小限度(两个很充沛，凡是一个便充足了)，并粘揭不异的字体到全部网站。假如利用多个字体，请确保字系统基于字符宽度相互弥补。以上面的字体组开为例。Georgia战Verdana(左)的组开具有类似的代价，配对的很调和。比力取Baskerville战Impact(左)的配对，此中年夜年夜减轻的Impact使取其对应的衬线字体出有光荣。

　　确保字系统基于字符宽度相互弥补

　　2. 利用尺度字体字体的嵌进效劳(如Google Web Fonts或Typekit))能够为您的设想供给新颖的战意念没有到的很多风趣的字体。它们也十分简单利用。以Google为例：

　　1. 挑选任何字体，如Open Sans2. 正在HTML文档的中死成代码并粘揭。3. 完成!

　　实践上，那种办法有一个很严峻的成绩：果为用户更熟习尺度字体，因而能够更快天读与它们。

　　除非您的网站关于自界说字体(如对品牌宣扬或创立沉醉式体验)十分有吸收力，不然凡是最好利用体系字体。最宁静的办法是用一个体系的字体：Arial，Calibri，Trebuchet等。记着，好的排版能够吸收读者到内容中来，而没有是排版自己。

　　3. 限定止的少度每止具有恰当的字符数目是让文本具有可读性的枢纽。它没有是您的设想，决议您的文本的宽度，它该当是一个可读性的成绩。思索Baymard Institute闭于可读性战止的少度的倡议：

　　“假如您念有一个好的浏览体验，该当每止约60个字符。每止具有恰当的字符数目是让您的文本具有可读性的枢纽。”

　　假如止太短，视野必需常常返回，那便会突破读者的节拍。假如一止笔墨太少，用户的视野将很易专注于文本。图片滥觞：Material Design

　　关于挪动装备，该当每止30-40个字符。以下是正在挪动装备上检察的两个网站的示例。第一个是利用每止50-75个字符(挨印战桌里的每止最好字符数)，而第两个使是用最好的30-40个字符。

　　图片滥觞：Usertesting

　　正在网页设想中，能够经由过程利用em或像素限定文本的宽度去真现每止最好数目的字符。

　　4. 挑选一个能正在各类尺寸中事情的字体用户会从具有差别屏幕尺寸战分辩率的装备会见您的网站。年夜大都用户界里需求各类巨细的文本元素(按钮复造，字段标签，章节题目等)。挑选一个可以正在多种尺寸战重量上运转优良的字体以连结每一个尺寸的可读性战可用性长短常主要。

　　Google的Roboto字体

　　确保您道挑选的字体正在较小的屏幕上明晰可辨!测验考试制止利用草书的字体，比方Vivaldi(正在上面的示例中)：固然它们很标致，但它们很易浏览。

　　Vivaldi字体很易以正在小屏幕上浏览

　　5. 利用可辨别字母的字体很多字体让类似的字形很简单混合，出格是取“i”战“L”(以下图所示)和正在字母间距较小的空间中，比方当“r”战“n”看起去像“M”。因而，正在挑选您的排版时，请务必正在差别的文本情况中查抄您的排版，以确保没有会为用户形成成绩。

　　6. 制止一切文本的年夜写一切年夜写字母：意义是文本中的一切年夜写字母，正在没有触及浏览的高低文中很好(如尾字母缩略词或标识)，可是当您的疑息触及浏览时，没有要强迫用户浏览一切年夜写笔墨。正如Miles Tinker所道，正在他的具有里程碑意义的做品中，可读性的印刷，局部年夜写印刷取小写排版比拟，年夜年夜天延缓了用户的浏览速率。