我做了一个白噪音网站「泡泡白噪音」,并给它重新设计了一次 - V2EX
爱意满满的作品展示区。
tf141

我做了一个白噪音网站「泡泡白噪音」,并给它重新设计了一次

  •  1
     
  •   tf141 Dec 25, 2025 2333 views
    This topic created in 140 days ago, the information mentioned may be changed or developed.

    如果你常年在电脑前工作,可能会有一种感受:

    你需要一点声音, 但不想被音乐牵着情绪走; 你需要一些工具, 但不想面对复杂的系统和压力。

    市面上的白噪音产品,要么太吵,要么太工具化。 于是我开始做 「泡泡白噪音」 一个把声音、专注、解压与情绪恢复放在同一个空间里的网站。

    这次上线的,是它的全新改版版本


    一个首页,承载绝大多数使用场景

    这次改版,我从首页开始推翻重来。

    你现在看到的是一个偏 Bento Box 的布局,每一个模块都是一个独立的小工具:

    • 声景预设与 Lofi 视频卡片
    • 专注番茄钟
    • 待办清单
    • 久坐提醒 / 喝水助手
    • 自定义提醒闹钟
    • 可全屏的当前时间

    它们都在首页,但不会争抢注意力。 打开网页,就可以开始进入状态。

    Image


    声音不只是播放,而是一块可以反复打磨的「声音画布」

    声音依然是泡泡白噪音的核心。

    目前网站内包含多种类型的声音分类:

    • 自然:雨声、海浪、鸟鸣、篝火
    • 场景:咖啡馆、林间、窗外雨
    • Lofi:适合长时间学习与写作
    • ASMR / 噪音:键盘声、轻触声、白噪 / 粉噪

    一个比较重要的设计是: 每一个声音卡片,都不止一种版本。

    你可以自由组合多条音轨,并为每一条独立调节音量, 慢慢调出最适合当下的声音比例。

    Image


    视频卡片:让屏幕也安静下来

    除了声音,这次我加入了 Lofi 视频卡片

    你可以在专注时切换不同的温馨背景视频:

    • 夏日微风
    • 霓虹雨夜
    • 怀猫小憩
    • 宁静书房

    它们并不是为了“好看”, 而是作为一种低存在感的环境陪伴, 让屏幕不再是冰冷的白色。

    Image


    赛博解压:让手也参与进来

    有时候,我们的焦虑并不是靠“听”就能解决的。

    所以我在泡泡白噪音里添加了一组偏交互式的解压工具

    • 电子木鱼:敲一下,打断焦虑循环
    • 静心念珠:一颗一颗拨动,节奏自然放慢
    • 灵动键盘:模拟不同机械轴体的敲击声效,每一次点击都是一种 ASMR 体验

    Image


    视觉疗愈:给大脑一点“无意义的美”

    除了声音,我也加入了一些纯粹的视觉疗愈模块

    • 空灵竖琴:拨动光束即可演奏旋律
    • 灵感曼陀罗:随手涂鸦,对称生成几何艺术
    • 心流光绘:夜晚开启,看万千粒子随指尖起舞

    Image


    灵感笔记:只记录,不打扰

    在专注或放松的过程中, 偶尔会冒出一些零碎的想法。

    泡泡白噪音内置了一个极简的灵感笔记工具

    • 不联网、不同步、不分析
    • 纯本地保存

    Image


    心理调节:当你真的需要慢下来

    包括一些调节状态的小工具:

    • 深呼吸引导:4-7-8 / 箱式呼吸
    • 疗愈音钵:感受音频共振带来的舒缓与平衡

    Image


    还有一些不抢镜、但很耐用的小工具

    在声音、视频卡片之外,「泡泡白噪音」里还保留了一组更偏辅助状态的小功能。

    Image


    给注意力一个稳定节奏

    舒尔特方格:一个经典但有效的注意力训练工具。 专注节拍:提供稳定的 BPM 节奏提示与简洁视觉反馈。

    Image


    给环境一点“低存在感”的支持

    柔光补光灯:将屏幕变成一盏可调节亮度与色温的环境灯。 舒缓轻音:不抢注意力的轻音乐。

    Image


    给当下一个“无需思考”的出口

    每日抉择:把选择权交给随机的小转盘。 电子烟花:点击即绽放,纯粹用来短暂分散注意力。

    Image


    写在最后

    泡泡白噪音像是一个安静、自持的数字空间: 你需要时,它就在; 不用时,也不会打扰你。

    体验地址:www.ppbzy.com


    泡泡白噪音 打开即用 无需注册 让声音与光,替你挡住一部分世界

    25 replies    2026-01-0 17:08:13 +08:00
    shawnhuang233
        1
    shawnhuang233  
       Dec 25, 2025   1
    很舒服 感谢
    lokya
        2
    lokya  
       Dec 25, 2025   1
    还不错 收藏了,题主厉害
    tf141
        3
    tf141  
    OP
       Dec 25, 2025
    @shawnhuang233 谢谢支持
    tf141
        4
    tf141  
    OP
       Dec 25, 2025
    @lokya 感谢收藏,有什么意见可以在网站进行反馈
    Heanes
        5
    Heanes  
       Dec 25, 2025   1
    主题很舒服
    tf141
        6
    tf141  
    OP
       Dec 25, 2025
    @Heanes 这次改版重点打磨了 UI ,毕竟白噪音网站就要主打舒服放松
    caryRowen
        7
    caryRowen  
       Dec 25, 2025   1
    a11y 也很好,好奇作者有过这方面经验吗。屏幕阅读器用户表示很棒
    bigant071
        8
    bigant071  
       Dec 25, 2025   1
    看着舒服,听着也舒服
    adajoy
        9
    adajoy  
       Dec 25, 2025
    xj3hd
        10
    xj3hd  
       Dec 25, 2025
    界面设计的很舒服
    自己就是设计师吗?
    tf141
        11
    tf141  
    OP
       Dec 25, 2025
    @caryRowen 谢谢反馈! a11y 方面做了点基础的,比如所有交互按钮都添加了 title 属性提供上下文,关键操作按钮有 aria-label ,使用语义化的 HTML 结构。不过说实话还有很多可以改进的地方(比如键盘导航、焦点管理等),一直在学习中。很高兴听到屏幕阅读器用户觉得体验不错,这对我是很大的鼓励!如果有具体建议欢迎随时告诉我。
    Winter1723
        12
    Winter1723  
       Dec 25, 2025
    感谢分享
    tf141
        13
    tf141  
    OP
       Dec 25, 2025   1
    @xj3hd 不是专门的设计师,不过比较在意审美,所以打磨了很久
    fairytale110
        14
    fairytale110  
       Dec 25, 2025 via Android
    很好啊,点赞,一个小小的建议,电子木鱼可以改成木鱼声音吗哈哈哈哈
    xj3hd
        15
    xj3hd  
       Dec 25, 2025
    @tf141 #13 厉害
    tf141
        16
    tf141  
    OP
       Dec 25, 2025
    @fairytale110 木鱼声音调整了一下,你可以再试试看
    gzldc
        17
    gzldc  
       Dec 25, 2025   1
    不错,我想全屏展开放在副屏 背景有点不太友好。有办法支持竖屏显示吗 或者自定义背景
    stayhungerman
        18
    stayhungerman  
       Dec 26, 2025
    1 、深呼吸模块,增加提示音,用户才能闭眼完成。
    2 、解压泡泡模块,不同风格,要有不同的提示音。
    tf141
        19
    tf141  
    OP
       Dec 26, 2025   1
    @gzldc 感谢反馈,已经优化视频的竖屏显示方式,另外现在支持自定义背景功能,可以直接使用本地的图片或视频
    tf141
        20
    tf141  
    OP
       Dec 26, 2025
    @stayhungerman 感谢反馈,已经添加相关功能
    Naqin
        21
    Naqin  
       Dec 26, 2025   1
    太牛了,以收藏。希望能有雪相关的音效
    body007
        22
    body007  
       Dec 26, 2025
    已收藏,太棒了。
    tf141
        23
    tf141  
    OP
       Dec 26, 2025
    @Naqin 感谢反馈,已经在自然分类添加几种下雪音效
    gzldc
        24
    gzldc  
       Dec 26, 2025
    @tf141
    Memfei
        25
    Memfei  
       Jan 5
    太巧了,今天搜白噪音网站刚用了一会儿,没想到这么快刷到作者帖子了
    About     Help     Advertise     Blog     API     FAQ     Solana     4059 Online   Highest 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 143ms UTC 05:08 PVG 13:08 LAX 22:08 JFK 01:08
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86