BigCoke

网页布局论——文字可读性及配色
前言  最近看到一些网站都不好好排版,配色也很奇怪,比如这个:@桥粮我直接拿你网站当反面教材不...
扫描右侧二维码阅读全文
01
2019/03

网页布局论——文字可读性及配色

在阅读前,请先保证你有一定Html+CSS基础,否则我不保证你阅读本文后会有任何帮助。

前言

  最近看到一些网站都不好好排版,配色也很奇怪,比如这个:

@桥粮我直接拿你网站当反面教材不会打我吧2333

  之前还看到一个配色亮瞎眼(整个姨妈红),排版毫无规律可言(导航全是无序列表,样式丝毫没改,强行加上了一堆毫无修饰作用的特效,还把样式没有优化好的评论区放到首页,我怀疑他是学了HTML和JavaScript,把CSS忘了),简直是无序

于是我就写下了这篇文,当然我也不是大佬,前端也还在学习,只是谈谈自己对网页布局的见解~

保证文字可读性

  什么是文字可读性?就是在一个网页上文字的易读度,网页上的很多因素都会影响文字可读性,导致用户在浏览网站时阅读困难,例如:图片背景、文字与背景的配色相似性······

文字颜色与背景颜色

  通常我们都是黑字白底,这样的做法最轻松。但是这样的配色很容易看腻,最好的方式是做到文字不纯黑,背景不纯白,当然并不是说你不能使用近似白色的背景和近似黑色的字体,你可以参考一下@保罗大佬的[Single主题]
(https://paugram.com/)
  淡灰色的背景色和深灰色的字体看起来其实也很舒服,我个人认为字体颜色不用太纠结,背景最好不纯白。(white/#ffffff/rgb(255,255,255))就好~
  当然这也不意味着你不能使用白色背景,在一些情况下,例如一个有边框和阴影的盒子,背景浅灰色反而奇怪。所以要合理安排背景色,一般body背景浅灰,盒子或者post-item之类的白色,就很舒服,只要自己看着好看就好~

用颜色区分文本的重要性

  我通常有这样一个习惯,一些不那么重要的文本,例如:日期、分类、评论数、摘要,我会用较浅的灰色作为文字颜色,而正文和标题这些相对重要的文本,我会用较深的、近似于黑色的颜色。
  平常这个方法也用的比较多,一些人会给版权声明等内容加上显眼的红色,但这也不能成为你大量使用辣眼姨妈红的理由。

处理好图片背景

  为了保证文字可读性,一些人会避免使用图片背景,但其实在文字下面并不是不可以使用图片背景,使用图片背景后,我们通常会给文本内容套上一个父元素(没有图片背景的时候照理也应该有一个),做成类似盒子的样式,控制好透明度,就可以愉快的使用图片背景啦~
  通常不透明度设置在在0.9左右为佳,个人这么认为~

  我并不建议你使用opacity来设置透明度,最好是用rgba(红,绿,蓝,不透明度)来设置背景透明,因为opacity会使其子元素也透明。

好好配个色行吗

色号禁令单

在你阅读本文后,如果真想做好网页布局,你不能使用一下的高亮颜色作为页面主体颜色。

颜色示例 颜色代码(16进制)
#FF00FF
#00FFFF
#00FF7F
#00FF00
#FFFF00
#FF0000

  除此之外,其他所有看起来比较亮眼的颜色都尽量不要使用


  以及这些看起来令人作呕的颜色都请你拒绝使用。

颜色示例 颜色代码(16进制)
#D2B48C
#808000
#D8BFD8
#DDA0DD

  除非是某些确实需要的情况,都请你在排版中拒绝使用这类颜色。

合理配色

  一些颜色是冤家,结合起来就会非常奇怪。特别是几种跳跃度特别高的颜色。我们来体验一下,如果页面中没有任何间隔地出现以下两组颜色,哪一种你更能适应?


  这或许有些许的夸张,但事实的确如此,同类色在同一个父元素内更容易让人接受。

  不过,同类色中也会有些跳跃性极强的颜色组合。

我色盲,不知道怎样配色怎么办?这些链接说不定能帮到你。

不同区块的配色

  在网站页眉,通常使用天蓝、适中的红色、舒适的绿或者深沉的黑作为巨幕、导航栏等的配色。
  而在页脚,我们通常会使用灰色、黑色,甚至不配色,直接和主体同一个颜色,因为页脚的信息不那么重要。
  主体的配色就是之前说的,背景不纯白,酱紫的,如果页眉蓝色这样的色彩与主题的灰色不搭配,可以尝试白色~


未完待续~~~


本文由 BigCoke 所撰,未注明内容均为原创,
并采用 CC BY 4.0 进行授权许可,转载请注明源地址
原文地址:https://cokewithice.com/p/191.html

Last modification:March 1st, 2019 at 09:04 pm

Leave a Comment

2 comments

  1. 七越

    沙发表示很舒服

    1. BigCoke
      @七越

      ∠( ᐛ 」∠)_看来你继承了我的基因