恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【干货】字体影响用户体验
0.0°
2019-03-22 好文转载 经验/观点 原作者: Marcus Taylor 举报 2748 6 4 0

(開場白:不知道大家有沒有感覺,就是當一件事情有了責任之後,總是會更認真去做。)



多年前,MIT的研究人員已經證實:字体影响我们的感受--差的字体使人无意识的反感,好的字体使我们感受到高兴。

如果字体能够影响我们的情绪,那同样会影响用户体验。


几周前,我决定探究字体对用户体验的影响究竟有多大。

通過一系列的對比測試,只是在改變字体的情況下,我的網站流量提高了38%。


在開始詳細描述我的測試前,先解釋下為什麼字体對用戶閱讀有如此大大影響。


字体影响讀者的情緒:


字体通過兩種方式影响我們的情緒。


一、認知偏見

首先,我們會自然而然賦予某些字体及字体形式一定的內涵。好比我們對身邊事物的看法經常受到認知偏差和生長文化的影响。eg:在美國,无衬线字体(不了解的同學可以去google一下,二者區別)经常被用在政府書文上,而在英國,无衬线字体常常被用在小报上。


用户感受到的信息经常会因为文章字体的变化而变化。


下面是我公司博客的兩張截圖,同一篇講述如何用wordpress建站的文章,但是用了兩種相差較大的字体。


可以注意到,由於使用不同字体,相同的內容傳遞著不同的信息。


the site`s normal fonts



Image title

the comic sans font


Image title


第二張comic sans 字体看上去遠沒有第一張可信、專業。這不是字母的線條、間距或字母的其他特性造成的,而是comic sans字体聯想到孩子氣。


二、可讀性

事實上,一些字体本身比其他字体更具可讀性。如果閱讀一段文字時,我們的眼睛和大腦負荷越來越重,那我們對字体的感覺就更糟糕。


衬线字体最早用在印刷上,因為衬线有利於眼睛更快速的區分字母。


電腦剛剛問世時,分辨率還很低,衬线字体又必須用矢量創建,而矢量在早期低分辨率屏幕上無法很好的顯示。這使得早期的設計師默認使用位圖創建的无衬线字体。


在過去的幾十年間,屏幕分辨率不斷的發展。現在近距離也很難看見屏幕上的像素點,像georgia這樣的衬线字体也越來越流行。


三、字体測試


測試開始前,我最想知道:哪種字体最適合我的網站?


我在我的一篇文章上進行了3種字体的對比測試:georgia、arial、verdana。


我們通過文章的點擊次數結合頁面的跳失率和頁面停留時間等行為來評估每種字体的表現。


以下是測試字體的文章片段,你也可以預測下3種字体的測試結果,在心裡說出你覺得合適的字体。


georgia


Image title


arial


Image title


verdana


Image title


我預測georgia字体最適合我的網站,因為它可讀性很強。verdana最不適合我的網站。


和我預測的一樣,georgia確實最適合我的網站,但是verdana字体不是最差的那個。使用verdana字体時文章的點擊量比使用arial字体時多了29.1%。


Image title


同時,使用georgia字体時,平均頁面停留時間更長,這表明用戶閱讀文章的內容更多。这点已经通过热点图得到证实。



四、字號測試


在證實了georgia最適合我們的網頁後,我們同樣想知道,幾號的字体最適合用戶閱讀。


我覺得字號越大,也具有可讀性。(好吧,我預測錯了)


首先我先測試了14px、15px、16px這組字號。


在網站上使用上述相同的方法測試,結果顯示,14px的字体最適合閱讀。(ps:字號每加大一個像素,行距也相應加高了一個像素)


Image title


這個結果讓我很吃驚,我之前閱讀過的相關研究告訴我,用戶閱讀文章時,更大的字体能夠吸引用戶的注意力。並且很多可讀性很高的網站都使用了20px以上的字號。


為了二次確認我的測試結果,我測試了另一組字號:10px、14px、18px、21px。


結果再次證明,14px的字体最適合閱讀。


這次試驗讓我知道,不論分組測試哪種試驗,結果都會告訴你:對某些人奏效的事情,未必對其他人奏效。對我們的博客使用的字体,或者發表文章來說,14px的字体可能是個很好的選擇。


五、字体優化的魅力


根據測試優化字体後,我們的網站的用戶體驗有多大的提升?


自從我們整個網站使用14px的georgia字体後,我們的網站的平均跳失率從88.0%下降到80.9%,7.1%的優化。


每個頁面的平均訪問量從1.21上升到1.43,18.18%的優化,頁面的平均停留時間提高了10分鐘。


Image title


所有的這些都由分組測試(也叫A/B測試)得出的,並不是我個人觀點。使用類似VWO或Optimizely這類分組測試工具,能夠檢測出哪種字体最適合妳的讀者,哪種方案更合適。




更新:2019-03-22

收藏

6人已收藏

熊猫妹妹

偶尔酷、偶尔萌的元气少女兼设计师,不常在有事私信

  • 37

    作品

  • 255

    粉丝

  • 12

    关注

  • 2022年 UI设计趋势指南
  • Sketch 70.2 功能介绍大全
  • 做好演示文稿PPT的18个小技巧
  • 收录300+创意网站,这个网站太全了!

    猜你喜欢

      2019-03-22 好文转载 经验/观点 原作者: Marcus Taylor 举报 2748 6 4 0

      【干货】字体影响用户体验

      0.0°

      你确定要举报【干货】字体影响用户体验

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年03月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      6
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录