网页设计中的汉字排版技巧

发布时间:2020-04-23 10:30:00

在网页设计中,排版对于网站与用户之间建立良好的沟通和帮助用户实现目标起着重要的作用。

在网页设计中,排版对于网站与用户之间建立良好的沟通和帮助用户实现目标起着重要的作用。

在网页设计中,排版对于网站与用户之间建立良好的沟通,帮助用户实现自己的目标起着重要的作用。当我们谈到网页是否能与用户建立有效的沟通时,这里通常指的是文本布局的作用:

网页中95%以上的信息是文本

好的排版让用户更容易阅读,而混乱的排版让用户失去继续浏览的意图。正如奥利弗·雷森斯坦在他的文章《网络设计是95%的印刷术》中所写,排版的目的是优化可读性、访问率、可用性以及与图形的平衡

换句话说,优化布局也有助于优化界面。在本文中,我们提供了一组规则,这些规则将帮助您提高文本内容的可读性和可读性。

网站布局建议不要超过3种字体类型,否则网站会显得松散和不专业。太多的字体不仅会导致这个问题,而且太多的字体大小也会破坏网页的布局。

一般来说,将字体系列的数量限制在最低限度(2个是多个,1个通常就足够了),整个网站都遵循同样的原则。如果使用多个字体,请确保两个字体协调。以下面的字体组合为例。佐治亚州和威尔达那州相辅相成,相对和谐。与对巴斯克维尔的影响相比,会有明显的冲突感。非线性冲击明显超过巴斯克维尔的视觉冲击。

在中英文排版中,建议使用标准的中文字体,英文、数字和字符使用标准的英文字体。以下图为例,看看能不能比较一下美。

Google webfont或typekit中有很多有趣的字体,中国的字体库中也有字体嵌入服务。对于国内的设计师来说,痛苦的是中文字体会非常大,一个字体的移动量会是几兆、十兆,这样用户浏览网站的加载时间就会增加;相反,英文字体会是26个字母的情况下,加上数字标点符号,总共有几十万种字体很容易在网页上使用。

尽量选择标准字体(近年来,网站通常使用思源、平房的粗体字体,英文可以使用Arial、Calibri或其他屏幕上容易阅读的常用粗体字。如果没有特别的概念指导,尽量避免使用衬线字体,如宋体)

不是每个用户都能在终端上看到相同的字体,这意味着用户可能看不到您选择的适当字体。

用户更熟悉标准字体,因此阅读速度更快

特殊的和少量的字体可以做成。SVG格式的嵌入到web中供使用的材料

好的字体设计允许用户更多地关注内容本身而不是字体类型。

三、限制文本行的长度

文本可读性的关键是确保每行中的字符数。不是设计师定义文本的宽度,而是用户的可读性。

太宽-会使单行文字太长,读者的眼睛很难集中在文字上。由于长时间阅读容易连读,在一大段文字中很难找到正确的行。

太短-会使用户的眼睛经常回到下一行文字,会打破读者的阅读节奏,长时间阅读会造成视觉疲劳。太短也容易向读者发出信号,使读者在阅读当前行之前跳到下一行,并可能忽略潜在的重要单词和句子。

以谷歌和百度为例。我们可以看到

对于移动设备,每行应为30-40个字符(半角),显示的具体字数取决于屏幕、文本宽度和不同分辨率的字体大小。设计原则是保证用户能顺利阅读文字,文字不能太小或太大。以IOS(手机)为例,文本的最小字体大小不能小于24px,这对于用户来说太小,无法阅读。比如百度,可以作为参考。

用户将通过具有不同屏幕分辨率的终端设备访问您的网站。大多数用户界面需要不同大小的文本(标题、副标题、文本、注释等)。选择一种能够在不同屏幕分辨率的设备上运行良好的字体也非常重要,以确保其不同大小的字体具有较高的可读性和可用性。

近两年来,无论是流行的思源粗体还是平房字体都是不错的选择。当然,我认为汉仪旗黑色在家族字体数量、字体质量、屏幕显示和纸张打印等方面都不逊于前两种字体。参与字体设计的设计师都表示,思源粗体还是一种比较粗糙的字体。

此外,为了确保它们在屏幕上清晰可见,请尽量避免使用衬线,即使它们很漂亮。

在选择英文字体时,有些字体的个别字母容易混淆,特别是“I”和“L”(如下图所示),以及字距。使用较小字体(如上图)时,许多中文字体会粘在一起,不易区分;因此在选择字体类型时,请检查您选择使用的字体,确保不会给用户和产品造成不必要的损失。

不要对所有文本使用大写字母,强迫用户阅读大写字母、大写字母、有特殊意义的缩写等,只是大量的大写字母会比小写字母严重降低用户的阅读效率和阅读乐趣。

一般来说,尽量避免对文本和背景使用相同或相似的颜色。文本越明显,用户扫描和阅读的速度就越快。当然,也要学会通过文本颜色、大小和背景的颜色关系来控制视觉层次。

大文本(14px/18px以上)应与背景保持3:1以上的对比度

灰色通常用作辅助色。根据之前的项目经验,有必要共享一组灰色、灰色和层次结构,并清楚地区分我一直使用的信息级别

色盲和色弱是我必须照顾的一些用户,特别是男性(其中8%是色盲)。建议使用其他方式区分重要信息(如下划线、粗体等),而不是颜色。避免使用红色和绿色作为单独的消息。因为红绿色盲是色盲中最常见的一种。(现在想一想,那些因为红绿色盲而不能拿到驾照的童鞋,是否恨那些每分钟都要制定红绿灯规则的人。当然,这只是个玩笑。交通灯的使用是因为光学的物理通信,这里没有解释。)

虽然在我们的日常生活中,我们总是用这种方式告诉用户,绿色意味着正确的操作,红色意味着错误的操作。反思一下我们是否考虑过色盲用户的操作和体验。或许我们可以考虑用另一种方式来表达对与错?

闪烁的文本或内容可能会让一些用户感到不舒服,这可能会分散或惹恼普通用户的注意力。

尽管在网页设计中还有很多事情需要注意,最后,我想和大家分享一个观点,排版在网页设计中是非常重要的。正确的排版可以让你的网站焕然一新,而糟糕的排版会分散用户的注意力,倾向于关注他们的感受,而不是他们的内容。排版的关键是要使信息层次清晰,便于用户阅读,文字可读。文字排版不应增加使用者的认知整合,以达到尊重内容和使用者的目的。


17742004931 联系我们,谈您的需求

立即咨询 立即建站