小编分享网页设计使用文字需要了解什么技巧。

网页中的信息主要是通过文字来传达的,纯文本文字或是图片中的文字,都是在传达信息,图片作为辅助让网页更加精致美观。网页设计使用文字的注意点有很多,比如文字的字体、大小、颜色、排版等等都是有技巧的,要合理有效的组织起来。

接下来跟着网页设计一起来看使用文字的技巧。

  1、不要使用过多的字体

网站排版中建议最多不要超过3种字体类型,不然会使网站看起来松散和不专业,不仅太多的字体类型会造成这种问题,太多的字体尺寸也会破坏网页布局。当然在图片中可以使用一些创意性字体如手写字体,让页面更加鲜活。

而在中英文排版中,建议大家中文使用标准中文字体,而英文、数字和字符使用标准的英文字体。以下面的图为例,是否可以对比处那个美观一些。

  2、使用标准字体

网页设计时使用标准字体,一是这些字体是用户熟悉的字体、方便更好的阅读,二是确保各个设备都支持这些字体。中文网站常用的标准字体有微软雅黑、宋体,英文网站常用的标准字体有Arial、Calibri,尽可能选择标准字体,不是每位用户都可以在自己的设备上看到同一个字体,如果用户设备上没有适合的字体,用户有可能看不到。

网页设计使用文字需要了解什么技巧?

  3、限制一行文字的长度

限制一行文字的长度,方便用户阅读的同时也让网页更加规范。保证每一行文字的字符数量是文本可读的关键。不是设计师来定义文本的宽度,而是根据用户的可读性来定义。

太宽-会使得单行文字太长,读者的眼睛会难于专注文字。因为长时间阅读容易串行,大段的文本中很难找到正确的行。

太短-会使得用户的眼睛经常回到下一行文本,会打破读者的阅读节奏,长时间阅读造成视觉疲劳。太短也会倾向于向读者发出一种信号,使得读者没有读完当前这行就去跳到下一行阅读,可能会忽略潜在的重要词句。

4.选择用有多个字重并显示良好的字体

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

注意,为了保证在屏幕上清晰可辨,尽量避免使用衬线体,尽管他们很漂亮。

5、使用识别度高的字体

在选择英文体的时候,有些字体的个别字母极易混淆,特别是“i”和“L”(如下图所示);以及文字之间的间距。许多中文字体在使用较小字体的时候笔画会粘到一起(上图),不容易辨别;所以在选择字体类型的时候,请检查你选择使用的字体,确保不会为用户和产品造成不必要的损失。

  6、避免在界面中大段的使用大写字母

不要所有文本使用大写字母,强制用户阅读大写字母,首字母大写,具有特殊含义的缩写等情况除外,与小写字母相比,大量的使用大写字母会严重降低用户的阅读效率和愉悦感。

  7、将行间距控制在字体的1.5-2倍之间

在文字文字排版中,我们又一个特殊的术语,用于表示行与行之间的距离:行间距(或行高)。为了保证文本的可读性和易读性,使文本形成线性的阅读感受,将行间距控制在字体大小的1.5-2倍之间(中文字体)。英文字体推荐使用默认行间距,或根据默认行间距微调。

  8、适当的颜色对比度

通常情况下,文本和背景尽量避免使用相同或相似的颜色。文本越明显,用户能够扫描和阅读的速度越快。当然,学会通过文本颜色、大小和背景的颜色关系来控制视觉层级也是必要的。

与背景相比,小文本和背景的对比度至少为4.5:1

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

灰色通常作为辅助色使用,根据之前的项目经验,给大家分享一套我自己一直在使用的灰色,灰的有层次,清晰的区分信息层级是必要的

9、避免将文字着色为红色或绿色

色盲和色弱是必须要照顾到的一部分用户,特别是在男性中(8%的男性是色盲)建议使用处颜色以外的其他方式来区分重要的信息(如下划线,加粗等)。避免使用红色和绿色单独传达信息。因为红绿色盲是最常见的色盲形式。

虽然在日常生活中我们总是用这种方式告知用户绿色是表示正确的操作,红色表示错误的操作,反思一下我们是否有去考虑色盲用户的操作和体验。或许我们是不是可以考虑换一个方式去表达正确或错误?

10、避免文字闪烁

闪烁的文字或内容可能会让某些用户感到不适,对于一般用户而言,这可能分散他们的注意力或者使他们感到烦躁。

总之,文字是网页重要的部分,在文字设计、文字排版的时候,要考虑目标用户群体的阅读习惯,就好比网站用户群体主要是老年人的时候字体、间距就要大一些,否则他们阅读不方便。

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

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

(0)
创业小编创业小编管理团队
上一篇 2023年6月15日 06:59
下一篇 2023年6月15日 06:59

相关推荐

  • 移动网页设计有哪些技巧。

    越来越多的消费者选择使用移动客户端浏览企业网站或商场,因此企业对移动用户的关注度越来越高,很多企业都有自己的移动台。我们的目标是用户打开网站,看到一个漂亮的页面,也希望用户能够轻松找到自己想要的信息…

    2023年2月22日
    04
  • 界面视觉基调:纯色

    纯色的叠加效果,其实合理的话,一样会与渐变色有提升视觉张力的效果。不过要注意的是,纯色在界面设计当中的应用,有很多适合会比渐变色所呈现的效果会更加明确一些。如在图片上叠加上合理的纯色,更能够突出图片…

    2022年6月25日
    0122
  • 网页设计案例鉴赏:如何设计出潮爆的视差滚动网页

    要想网站看起来很Cool,很Chock,你可能需要添加很多设计效果和技巧。其实,视差滚动效果同样能制作出这种效果的网站。不信?Inspirr Creation就为你整理一些视差滚动的网页设计,相信你看完之後同样能制作出创意满…

    2022年6月25日 建站资讯
    0169
  • 如何保持网页导航简洁?

      对於使用者体验来说,网站的导航区域最好能够设计得简洁点。很明显,复杂且拥挤的导航设计会严重阻碍网站的整体实用性。 但其实,简洁并不意味着简单。也就是,巧妙地借助简洁的风格,去隐藏一些复杂的资讯…

    2022年6月25日
    0124
  • 怎提升界面按钮的可见即可得效果

    合格的界面按钮设计,用户看到它就知道它能够被点击,并且大致知道是点击还是触摸的形式。在界面设计流程当中,按钮这一元素一般都会以各种各样的尺寸出现。但是,要具备良好的可见即可得的效果,这并不是容易的事…

    2022年6月25日
    0131
  • 网页设计师新手必看:盘点五种风格独特的网页设计案例

    作为专业的网页设计师,设计不光是埋头苦干,更重要还是将审美提上去,而你的设计水平取决於你的审美。Inspirr Creation知道每一位设计师每天工作都非常紧张,特此整理了一些独特设计风格的网站供大家欣赏,希望对…

    2022年6月25日 建站资讯
    0221
  • 2018年网页设计趋势之平面设计

    前两期,我们已经说了「2018年网页设计趋势之色彩趋势」和「2018年网页设计趋势之3D效果」本期,Inspirr Creation将会和大家分析「2018年网页设计趋势之平面设计」。 设计趋势年年变,有的设计趋势在演变过程中逐渐…

    2022年6月25日 建站资讯
    0121
  • 2018年网页设计趋势之UI设计和动画设计

    之前,我们已经说过2018年网页设计趋势之「色彩趋势」、「3D效果」、「平面设计」这三方面的内容,在最後一期,Inspirr Creation将为各位介绍「2018年网页设计趋势之UI设计和动画设计」,希望对各位有所帮助吧! ※ U…

    2022年6月25日 建站资讯
    0124

联系我们

QQ:951076433

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