我做了一个白噪音网站「泡泡白噪音」,并给它重新设计了一次 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
tf141
V2EX    分享创造

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

  •  
  •   tf141 1 天前 641 次点击

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

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

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

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


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

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

    你现在看到的是一个偏 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


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

    18 条回复    2025-12-26 08:20:55 +08:00
    shawnhuang233
        1
    shawnhuang233  
       1 天前   1
    很舒服 感谢
    lokya
        2
    lokya  
       1 天前   1
    还不错 收藏了,题主厉害
    tf141/td>
        3
    tf141  
    OP
       1 天前
    @shawnhuang233 谢谢支持
    tf141
        4
    tf141  
    OP
       23 小时 59 分钟前
    @lokya 感谢收藏,有什么意见可以在网站进行反馈
    Heanes
        5
    Heanes  
       22 小时 28 分钟前   1
    主题很舒服
    tf141
        6
    tf141  
    OP
       21 小时 23 分钟前
    @Heanes 这次改版重点打磨了 UI ,毕竟白噪音网站就要主打舒服放松
    caryRowen
        7
    caryRowen  
       21 小时 4 分钟前   1
    a11y 也很好,好奇作者有过这方面经验吗。屏幕阅读器用户表示很棒
    bigant071
        8
    bigant071  
       20 小时 33 分钟前   1
    看着舒服,听着也舒服
    adajoy
        9
    adajoy  
       20 小时 20 分钟前
    xj3hd
        10
    xj3hd  
       20 小时 12 分钟前
    界面设计的很舒服
    自己就是设计师吗?
    tf141
        11
    tf141  
    OP
       20 小时 10 分钟前
    @caryRowen 谢谢反馈! a11y 方面做了点基础的,比如所有交互按钮都添加了 title 属性提供上下文,关键操作按钮有 aria-label ,使用语义化的 HTML 结构。不过说实话还有很多可以改进的地方(比如键盘导航、焦点管理等),一直在学习中。很高兴听到屏幕阅读器用户觉得体验不错,这对我是很大的鼓励!如果有具体建议欢迎随时告诉我。
    Winter1723
        12
    Winter1723  
       20 小时 10 分钟前
    感谢分享
    tf141
        13
    tf141  
    OP
       19 小时 31 分钟前   1
    @xj3hd 不是专门的设计师,不过比较在意审美,所以打磨了很久
    fairytale110
        14
    fairytale110  
       18 小时 51 分钟前 via Android
    很好啊,点赞,一个小小的建议,电子木鱼可以改成木鱼声音吗哈哈哈哈
    xj3hd
        15
    xj3hd  
       18 小时 31 分钟前
    @tf141 #13 厉害
    tf141
        16
    tf141  
    OP
       15 小时 19 分钟前
    @fairytale110 木鱼声音调整了一下,你可以再试试看
    gzldc
        17
    gzldc  
       14 小时 55 分钟前   1
    不错,我想全屏展开放在副屏 背景有点不太友好。有办法支持竖屏显示吗 或者自定义背景
    stayhungerman
        18
    stayhungerman  
       3 小时 38 分钟前
    1 、深呼吸模块,增加提示音,用户才能闭眼完成。
    2 、解压泡泡模块,不同风格,要有不同的提示音。
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     4533 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 27ms UTC 03:59 PVG 11:59 LAX 19:59 JFK 22:59
    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