网络日志

[极致用户体验] 一行简单的样式,让网页有「高级感」

我是HullQin,公众号线下聚会游戏的作者(欢迎关注公众号,发送加微信,交个朋友),转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏,不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢~我有空了会分享做游戏的相关技术。

1. 遇到问题:自己写网页样式,总是没有「高级感」

如果不给你任何组件库,让你从0开发一个网页,自己设计样式,你该怎么做?

你也许遇到过这种感觉:我的网页色号都是精心挑选的,设置了某个背景色、某个点缀色,但看着没有「高级感」。

举个例子

这是我之前开发的一个网页:

我设置了背景色#fee9f5,点缀色#e8e4f5(真的精心挑选了几个小时)。但感觉,很普通。

2. 寻找问题解决方案

为了得到答案,我尝试打开了ant design。

我希望看看它的导航栏,用了什么样式,能看起来那么有「高级感」。

还是很好找的,因为抛开“位置”相关的样式,剩下的就可以排除法得到了。答案是:box-shadow

也就是说,给你的导航栏,加上这个样式,那么它就会看起来有「高级感」,或者称之为:「立体感」。

header {
  box-shadow: 0 2px 8px #f0f1f2;
}

3. 关于解决方案的思考:为什么加阴影后视觉体验变好了?

太阳照射,大树会有阴影,任何3D物件都会有阴影。

当然,我们视网膜内呈现的其实都是平面图形,只是我们在3D世界生活,大脑养成了这样的认知习惯:

如果看到的东西都有阴影,它很可能是个3D物件(因为只有有高度的物品才能挡住太阳光线,形成阴影。0高度的东西,是不会有阴影的)。

类比浏览器

我们可以把浏览器当作一张纸,而我们的网页代码可以在纸上绘制、或者放置各种元素。

如果你是在纸上绘制了所有东西,那么它们只是一幅平面图形

但如果你在纸上放置了东西,那么它将是个3D物件,是有高度的。我们需要借助阴影,让大脑潜意识认知到它的高度。

给导航栏加阴影,意味着导航栏高度比主体部分高,就像导航栏压在了网页上。

以此类推,我们可以给任何东西加阴影,只要你认为,它是放置在网页上,而不是绘制在网页上。

4. 有哪些css可以实现阴影样式?

阴影样式的实现不少,这里介绍3种常用的,绝对能覆盖日常阴影场景:

  1. box-shadow
  2. text-shadow
  3. filter里的drop-shadow

box-shadow

它是给盒子模型加阴影,即border那一圈的阴影,它是「容器」的阴影。至于容器内部放什么元素,不会影响它的形状。

例子:导航栏(Header)的阴影、菜单(Menu)的阴影、卡片容器(Card)、按钮(Button)的阴影。

box-shadow: offset-x offset-y blur-radius spread color inset;

分别表示:水平阴影偏移、垂直阴影偏移、模糊距离、阴影尺寸、阴影颜色、将外部阴影(outset)改为内部阴影。

这些其实不用刻意去记忆,当你调试好喜欢的阴影参数,保存下来,以后就用同一份,就够了。

text-shadow

它是给文本的阴影,文本是什么形状,阴影就是什么形状。

例子:非常适合给「emoji按钮」加阴影,因为阴影会跟emoji长得一模一样~

text-shadow: offset-x offset-y blur-radius color;

分别表示:水平阴影偏移、垂直阴影偏移、模糊距离、阴影颜色。

filter里的drop-shadow

它是给图片加阴影,阴影会跟图片里不透明元素一模一样。(如果你的图片是完全不透明的,效果相当于box-shadow了,这时候建议直接用box-shadow,性能更好)

相对上面2个,它确实是用的比较少的一种,但特殊场景下,你一定会喜欢。

filter: drop-shadow(offset-x offset-y blur-radius color);

分别表示:水平阴影偏移、垂直阴影偏移、模糊距离、阴影颜色。

5. 加了阴影后的效果

你可以再看看文章封面图,能发现哪里有阴影吗?

我希望每个可交互元素(主要是按钮),都是放置上去的,表明按钮可以「按」,所以每个按钮都有了阴影。

文章开头的例子

还记得文章开头的例子吗?这是给它加了阴影后的效果,「立体感」油然而生:

具体包括这些样式:

header {
  box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
}
img {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
}
.text-shadow {
  text-shadow: 0 2px 4px rgb(0 0 0 / 15%);
}

img:active {
  box-shadow: 0 4px 8px -1px rgb(0 0 0 / 20%), 0 2px 6px -2px rgb(0 0 0 / 20%);
}
.text-shadow:active {
  text-shadow: 0 3px 6px rgb(0 0 0 / 40%);
}
  • header作用在导航栏上,模糊距离大(6px),表明厚厚的导航栏放在了网页上。
  • img作用在所有图片上,且模糊距离小(3px),表明一张张薄薄的照片放在了网页上。如果你按下它,阴影会变更深。
  • .text-shadow作用在导航栏的主页按钮上、导航栏右上角的✨上、动态右下角的💬上,表明这些文字都放在了网页上,并且可以点击。如果你按下它,阴影会变更深。

为什么按下后(active态)阴影会变深?

主要是因为,我的网站主要是给移动端用的,为了让用户形成「反差」的感觉,让用户知道,按了哪个元素。

如果你感兴趣,我上篇文章着重介绍了这点,欢迎阅读《用户体验好的 Button,在手机上不应该有 Hover 态》

建议

😂 建议不要滥用阴影,因为那会让网页看起来脏脏的。

你看掘金,多么干净。只有「悬浮按钮」使用了明显的阴影,表明它具有高度。

6. 写在最后

如果你像我一样,喜欢代码纯粹一点,不夹杂冗余功能,就可以自己写阴影样式,封装自己所需的组件 😎

如果你只是为了完成别人的需求,还是直接用组件库吧,就没这么多要操心的了。也许组件库功能很重、体积很大,但考虑全面 😁

我是HullQin,公众号线下聚会游戏的作者(欢迎关注公众号,发送加微信,交个朋友),转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏,不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢~我有空了会分享做游戏的相关技术。