layui 颜色设计感

视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感,而 layui 提供的颜色,清新而不乏深沉,互相柔和,不过分刺激大脑皮层的神经反应,形成越久越耐看的微妙影像。合理搭配,可与各式各样的网站避免违和,从而使你的 Web 平台看上去更为融洽。

主色调

  • #009688

    主色调之一

  • #5FB878

    一般用于选中状态

  • #393D49

    通常用于导航

  • #1E9FFF

    经典蓝

layui 主要是以象征包容的墨绿作为主色调,由于它给人以深沉感,所以通常会以浅黑色的作为其陪衬,又会以蓝色这种比较鲜艳的色调来弥补它的色觉疲劳,整体让人清新自然,愈发耐看。【取色意义】:我们执着于务实,不盲目攀比,又始终不忘绽放活力。这正是 layui 所追求的价值。

次色调

  • #FFB800

    暖色系

  • #FF5722

    比较引人注意的颜色

  • #01AAED

    文本链接着色

  • #2F4056

    侧边色

事实上,layui 并非不敢去尝试一些亮丽的颜色,但许多情况下一个它可能并不是那么合适,所以我们把这些颜色归为“场景色”,即按照实际场景来呈现对应的颜色,比如你想给人以警觉感,可以尝试用上面的红色。他们一般会出现在 layui 的按钮、提示和修饰性元素,以及一些侧边元素上。

中性色

他们一般用于背景、边框等

  • #FAFAFA

  • #F6F6F6

  • #eeeeee

  • #e2e2e2

  • #dddddd

  • #d2d2d2

  • #cccccc

  • #c2c2c2

layui 认为灰色系代表极简,因为这是一种神奇的颜色,几乎可以与任何元素搭配,不易形成视觉疲劳,且永远不会过时。低调而优雅!

七种色

layui 内置了七种背景色,以便你用于各种元素中,如:徽章、分割线、导航等等

  • 赤色:class="layui-bg-red"
  • 橙色:class="layui-bg-orange"
  • 墨绿:class="layui-bg-green"
  • 藏青:class="layui-bg-cyan"
  • 蓝色:class="layui-bg-blue"
  • 雅黑:class="layui-bg-black"
  • 银灰:class="layui-bg-gray"

结语

“不热衷于视觉设计的程序猿不是一个好作家!” ——贤心


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部