如何设计一个沉浸感非常强的页面

无论是网页,还是 APP 的 UI,甚至是海报,沉浸感都非常重要,强烈的沉浸感不仅可以给人眼前一亮的感觉,也可以让用户快速进入你想要的状态甚至情绪。

以下是一些方法,此方法被使用在目前的 Argon You 上:

确定氛围

确定你想要营造的氛围,例如优雅、温馨、幽静、空旷等,情绪、感受都可以作为氛围,例如悲伤、凉爽、可爱等。

确定背景图片和主题色

如果氛围已确定,那么就可以寻找符合氛围的背景图片了,通常选择唯美小清新风格,也可以使用 GIF 图片来达到动态效果。

主题色必须选自图片的主要颜色,而且只能有一个,页面几乎所有颜色都必须基于这个主题色,不能轻易改变色相。

小贴士:可以通过改变主题色的 Alpha 值(透明度)来改变颜色的明度。
在不透明的背景下,可以通过改变主题色的 Alpha 值来改变颜色的明度,明度的变化方向取决于背景颜色。
例如,#ff000055(半透明的红色)在#ffffff(白色)的背景下,实际呈现的是粉色。但如果背景颜色是#000000(黑色),实际呈现的是暗红色。
这种障眼法很有效,无需复杂的计算就能改变某种颜色的明度。
前提是,背景颜色必须是白色或黑色,而且是不透明的。

透明毛玻璃效果

将页面上所有(或大部分)容器元素都变成透明的,但需要配合背景颜色和毛玻璃效果来保障文字的可读性。背景颜色通常使用半透明的白色或黑色,而且 Alpha 值必须适中,例如#ffffff88

毛玻璃的模糊强度也需要适中,通常使用 10px过多的毛玻璃效果会有严重的性能问题(特别是网页),因此最好尽可能地复用效果,例如背景全面覆盖一层毛玻璃效果,容器元素只需要设置背景颜色即可。

小贴士:毛玻璃效果在网页的实现(CSS)

backdrop-filter: blur(Y px);

Y:模糊强度

在没有特别声明的情况下,内容均为原创,请遵守CC BY-NC-SA 4.0版权协议!
暂无评论

发送评论 编辑评论

注意事项:
  1. 请遵守法律,友善发言。
  2. 评论被回复后没有提醒,请自行关注,敬请见谅。
  3. 无关的内容请移步留言板。
  4. 支持Markdown,可以使用第三方图床插入图片。

				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
呼呼
上一篇
下一篇