我来教你什么样的网站设计用户体验好。

沟通在设计里起到至关重要的作用,有助于在网站和用户之间建立起明确的关系,还可以帮助用户实现他们的目标,这一点非常重要。当我们在网页设计里谈到沟通时,通常指的是文字。文字在沟通过程里起到至关重要的作用:

“网站里95%以上的信息是以书面语言的形式呈现的。”

好的字体版式可以使阅读毫不费力,而糟糕的排版则使用户无法阅读。优化字体版式可以优化你的用户界面。接下来给大家讲讲字体排版的一些规则,帮助你增加文本的可读性和易读性。

网站设计

1、保持最少的字体使用数量

使用超过3种以上的字体,会使网站看起来毫无结构,非常的不专业。请记住,太多的不同尺寸和类型的字体会破坏设计布局。要想避免这种状况出现,就要限制字体的数量。

总之,把字体数量限制到最少(两种字体是足足有余的,通常一种就足够了),保证整个网站使用相同的字体。如果使用超过一种字体的话,要确保根据字符宽度来匹配字体。以下面的组合为例,左边Georgia和Verdana字体组合有相似的字型,而右边的Baskerville和Impact组合中,Impact字型太粗而遮盖了它配对字体的衬线部分。

确保根据字符宽度来匹配字体,进行互补

2、尽量使用标准字体

字体嵌入服务(如Google Web Fonts或者Typekit)有很多有趣的字体供你选择,给你的设计带来一些新鲜、意想不到的效果。而且也非常容易操作使用。以Google为例:

・选择任何一种字体比如Open Sans。

生成代码粘贴到你的HTML文档中。

完成啦!

所以能出什么问题呢?

不过这种方法却有一个问题,用户更习惯标准字体,因此标准字体阅读起来会更快。除非你的网站对特定的字体有强烈的需求,比如为了品牌推广或者创建一个身临其境的体验,不然一般情况下最好选择系统字体。安全的做法是使用一种系统字体,比如Arial、Calibri、Trebuchet等等。要记住好的字体版式可以将读者吸引到内容本身,而不是版式上。

3、限制每一行的文字长度

每一行的文字长度决定了文本的易读性。不应该由设计来支配文本宽度,而是要由易读性决定。看看下面Baymard Institute给出的建议:想要有一个良好的阅读体验,那么每一行大概要有60个字符左右的宽度。每一行正确的字符数是文本易读性的关键。

每一行如果太短的话,眼睛就得来回地看,会打破读者的阅读节奏;如果一行文字太长,读者注意力会很难集中到内容上。图片来源:Material Design

对于手机端来说,每一行则应该在30至40个字符长度内。下面则是手机端的两个网站例子。第一个每一行有50至75个字符(而这个应该是印刷和桌面端的理想长度),第二个则使用了最佳的30至40个字符长度。

网页设计里可以通过使用em或者pixel单位来限制文本宽度,来达到每一行最理想的字符数。

4、选择在不同尺寸下都有良好效果的字体

用户会通过不同的设备访问你的网站,而不同的设备有不同的尺寸和分辨率。大多数的用户界面需要不同尺寸的文本元素(复制按钮、段落标签、章节标题等等),选择一个在不同尺寸和粗细下都能保持很好的可读性和易读性的字体,这点非常重要。

Roboto字体,by Google

确保你选择的字体在更小的屏幕上也能阅读。避免使用连体字,比如下面的Vivaldi字体,尽管它们很好看,但是很难阅读。

Vivaldi字体在小屏幕上很难阅读

网站设计

5、选择可以分辨不同字母的字体

很多字体的有些字母会比较容易搞混,特别是“i”和“L”(比如说下面的例子),还有一些字母之间的间距太短,比如“r”和“n”在一起看起来像“m”。所以当你选择字体时,确保你的字体在不同环境下不会给读者带来困扰。

6、避免全都大写

所有文本都是大写字母,在一些不需要阅读的地方是可以的(比如缩略词或者logo里),但是当你的信息需要读者去阅读时,不要强迫你的读者去分辨所有的大写段落。就像Miles Tinker在他的里程碑作品《Legibility of Print》中所说的,与小写字体相比,大写字体大大降低了浏览和阅读的速度。

7、不要过于减少行间距

字体版式中,我们对于两行字之间的空白距离称作“行间距”。通过增加行间距,可以提高可读性。一般来说,行间距应该比字符高度高30%左右,这样有利于可读性。

合适的间距有助于可读性,图片来源:Microsoft

Dmitry Fadeyev指出,正确使用段落之间的间距,可以提高20%的理解力。正确使用间距的技巧是提供给读者易于理解的内容,然后去除多余的细节。

左边文字太挤了,右边合适的间距有助于可读性,图片来源:Apple

8、确保有足够的颜色对比度

文本和背景不要使用相同或相似的颜色。文字越明显,用户能更快的浏览和阅读内容。W3C给我们建议了合适的文字和图形的颜色对比度比例:

小的文字和背景的对比度至少应该为4.5:1。

大的文字(至少14号粗体或18号常规字体以上)比例至少为3:1.

这两段文字和背景的颜色对比不明显,文字很难阅读

这两段符合颜色对比比例,文字容易阅读

一旦你选定了颜色,要在大多数设备上都测试一下。如果测试发现了问题,那么能肯定用户也会有同样的问题。

9、避免用红色或者绿色着色文字

色盲是一个常见的现象,特别是男性中8%的人是色盲。因此建议除颜色之外使用附加的信息来区分重要的内容。同样要避免仅仅使用红色和绿色来传达信息,因为红绿色盲是色盲里最常见的两种。

10、避免使用闪烁的文本

闪烁的文本可能会引发敏感的个体不适的症状,而且可能会变得让人讨厌,让用户分心。

字体排版是件大事,正确的版式可以让你的网站焕然一新,让人心情愉快。而不好的字体排版,则会使用户分心。使字体版式可读性、易读性更高,易于理解,这些是非常重要的。

“字体版式的存在是为了服务于内容的”字体版式是服务于内容的,永远不要给用户增加阅读的负担。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/275163.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
创业小编创业小编管理团队
上一篇 2023年6月13日 22:49
下一篇 2023年6月13日 22:49

相关推荐

  • 小编分享网站设计应该注意的四个行业规范是什么。

    虽然企业网站的建设都是根据具体的行业和客户的需求来定制的,没有具体的规定限制,但也有一些行业标准,无论是什么企业,要发展,企业宣传是分不开的,它需要普及,需要媒体和企业网站建设的出现。弥补这个空缺,…

    2023年6月15日
    00
  • 我来教你网站SEO该怎样提高用户体验度。

    网站SEO该怎样提高用户体验度,做好一个网站不仅要做优化推广,提高排名,网站优化关键还是看效果,大量数据显示,不一定你网站排名好,流量好,转化率就好,很多时候与用户体验有一定的联系。如今百度不断整顿低质…

    2022年10月31日
    032
  • 我来教你谷歌搜索又开始更新了,你追得上吗。

    谷歌搜索又开始更新了,你追得上吗?网络更新换代快,谷歌搜索又纷纷更新了。最近谷歌搜索又有了更新,这次更新的主要内容是对播客内容进行一种垂直推荐的的功能,主要为了帮助那些经常通过搜索来收听播客的用户更…

    2022年10月31日
    030
  • 我来分享用户体验是如何影响关键词排名的。

    用户体会网站构架网站构架的好坏,直接影响了用户的站内体会,假如进入站内,网站主页及内页都规整有条理,并且在每个页面都能让客户找到自己感兴趣的文章。那么你这个网站组织是不错的。网站翻开度网站翻开度的快…

    2023年6月30日
    00
  • 从浏览器进入网站设计过程。

    在大多数情况下,设计师仍然使用传统的设计工具在网站设计过程中创建静态屏幕模型。但有些设计师却正在进行一场巨大的飞跃,绕过它们,直接编写代码,在浏览器中构建和调整设计,并测试他们的设计,就像它们在实时…

    2023年2月19日 SEO操作
    00
  • 网站设计项目进度表。

    在你设计、制作网站时,你的客户常常会很想知道他们的网站设计到了什么阶段,网站设计是否马上能完成?我们很多人都有过这样的经历,坦白地说,这通常是因为客户不了解我们开发网站时幕后发生了什么。为什么呢?他…

    2023年2月19日
    05
  • 小编教你如今的企业网站设计有哪些不足。

    我们必须承认:设计是目前我们国内网站存在的最普遍、最严重的问题,尤其是企业网站!这里,我们所说的“设计”不仅仅是指平常我们所说的平面布局、图片设计,还有内容安排、制作技术方面的原因,当然,这里我们主要谈…

    2023年6月16日
    00
  • 如何编写一个有效的网站设计方案

    写网站设计的建议是无聊的。毫无疑问,但他们是必要之恶。建议最后一击之前,我们的客户在虚线迹象。我们需要确保我们所有的基地覆盖,我们的项目,像往常一样,一个专业的形象。 你是否打算在词创建你的网站建议,排版软…

    2019年10月23日
    0221

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息