跳到主要内容
界面图谱Interface Atlas
☰
EN
风格Style / Visual Language

复古互联网

Retro Web

别名:老网页早期互联网个人主页风格Web 1.0old-school webretro website

这是什么

借用早期个人网站与桌面浏览器的视觉语言:灰色凹凸边框、衬线文字、蓝色下划线链接、侧栏目录和访客计数器。它表达的是手工制作网页的亲切感;不等同于像素艺术,也不需要牺牲今天的键盘操作、响应式布局和阅读体验。

开发规格

字体

衬线正文、系统字体菜单、可读的蓝色下划线链接。

色彩

浅灰窗口、白色内容、深蓝标题栏与链接。

边框

方角与 2px 凹凸边框,无模糊投影。

阴影

使用边框明暗方向表达凹凸,不加模糊阴影。

间距

紧凑但保持足够触控面积,窄屏目录换行。

动效

即时切换,避免闪烁和自动滚动。

状态反馈

当前页加粗、焦点有清晰轮廓,表单反馈使用实时区域。

风格演示

同一张页面,直接操作

目录与 Back / Forward / Home 在 Home / About / Projects / Links / Guestbook 间往返,本地地址随导航更新,Go 打开原生地址对话框,可输入 home/about/projects/links/guestbook(支持 goodoldnet/ 前缀)并计入站内历史;未知或外部地址提示未找到且不外跳;菜单、Search、Favorites、窗口控制都有可返回的本地行为。留言校验空白输入并展示正常提交结果,明确刷新清空、不发送服务、不写浏览器存储。

整页预览 · 直接交互

独立打开 ↗

使用时关注什么

  • 01逐一操作 GoodOldNet 原导航和主 CTA,检查对应内容与返回路径,不只是点击提示。
  • 02用 Go 输入 projects 与 goodoldnet/guestbook 后检查历史前进/后退;再试未知/外部地址,确认未找到反馈且不会外跳。
  • 03用键盘和 390px / 320px 检查重排、焦点、校验;区分工具栏重载和内部清空,核对刷新后状态复位。

✓ 适用场景

  • 个人主页、爱好者站点、互联网历史展览或怀旧创意项目。
  • 希望强调手工整理、慢慢发现和个人表达的内容。

✕ 不适用场景

  • 高密度工作系统或依赖可信支付与身份验证的关键流程。
  • 不要复制闪烁文字、弹窗广告、固定宽度和过小触控目标等旧网页缺陷。

常见形式

个人主页

Personal homepage

目录侧栏、短文和精选链接组成的手工小站。

旧浏览器窗口

Vintage browser window

用标题栏、菜单和凹凸边框营造桌面窗口层次。

实现要点

border-styletext-decorationfont-family:focus-visibleflex-wrap

用 inset/outset 或多层阴影表达灰色面板层次;正文使用可读字号,链接保留下划线。视觉样张可以还原固定构图,真实交互区必须换行并支持键盘。留言只用组件状态,明确不持久保存。

交给 AI

四层 Prompt 从「它是什么」一路写到「可直接执行的任务」;切到 Agent 任务层,还能叠加视觉风格与附加要求,再一键复制给你的 Coding Agent。

用当前风格完成 GoodOldNet 同品牌完整页面,从原首屏延续到内容、具体操作结果和返回路径,而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。preview.brand 与共享 REFERENCE_BRANDS 保持一致;首屏结构、实际导航与素材以 ReferenceStyleScene 为准。

复用 GoodOldNet 的 #c4c4c4 灰窗口、#164479→#387ebd 蓝色标题栏、inset/outset 凹凸边、Times New Roman 正文与 Arial 菜单。默认内容保持 21% / 54% / 25% 目录/正文/小图三栏与蓝色下划线站内入口,真实阅读区沿用白底深蓝字。窄屏通过现有 toolbar/menu 换行与单列内容重排,不能仅缩小固定旧浏览器;窗口、地址和目录仍由 DOM 组成,焦点、当前页与状态反馈保留语义。

完整页面操作:
目录与 Back / Forward / Home 在 Home / About / Projects / Links / Guestbook 间往返,本地地址随导航更新,Go 打开原生地址对话框,可输入 home/about/projects/links/guestbook(支持 goodoldnet/ 前缀)并计入站内历史;未知或外部地址提示未找到且不外跳;菜单、Search、Favorites、窗口控制都有可返回的本地行为。留言校验空白输入并展示正常提交结果,明确刷新清空、不发送服务、不写浏览器存储。

静态封面、详情演示与 /style-scenes/retro-web/(英文 /en/style-scenes/retro-web/)共用 renderer;静态封面不嵌套真实按钮,详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流,不用占位链接、仅变颜色或一句 toast 代替结果。

操作状态仅存在当前页面内存;刷新、工具栏重载/重置与模式切换均恢复初始状态,不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作,不暗示跨页或持久保存。

提供返回、取消或清空/重置路径,说明仅当前页内存的状态边界;不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排,保留可读字号和触控目标,不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点;弹层支持关闭和焦点返回,表单校验与结果可被辅助技术读到;尊重 prefers-reduced-motion。

不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排;报告实际运行的检查与待验项,不将实现要求写成已通过结论。

附加要求:
- 支持深色模式
- 尊重 prefers-reduced-motion
- 不新增依赖
- 完成后运行现有检查并列出修改文件

可直接交给 Coding Agent,可叠加风格与附加要求

相关概念

像素风Pixel Art UI

用硬像素边缘、有限色板与点阵字形表示「游戏机记忆」的界面视觉语言。锯齿即正确, 缩放必须整数倍,抖动网点做过渡。刻意站在抗锯齿的对立面。

风格相似概念
拟物化Skeuomorphism

用现实世界的材质与物理形态表示数字控件的视觉语言:皮革缝线、木质纹理、拉丝 金属、玻璃光泽,按钮做成可以按压的实体,开关做成拨杆。界面元件拥有高光、 投影与倒角,"看起来像什么"直接暗示"能怎么用"。

风格相似概念
Y2K 千禧美学Y2K Aesthetic

复刻千禧年前后数码乐观主义的视觉语言:镀铬液态金属、iMac 糖果半透明塑料、 气泡字与闪光星形、粉紫蓝渐变配银白高光。它混合了对未来的天真想象与低分辨率 3D 的笨拙质感,甜腻、闪亮、毫不克制。

风格相似概念
标签页Tabs

用一排可切换的标签把同一区域的内容分成互斥视图:标签头常驻可点击,仅当前 标签对应的面板可见,其余隐藏。适合把高度相关的几类内容压缩在同一区域内 就地切换,避免整页跳转。键盘上用左右方向键在标签间移动,是可访问性的经典范例。

组件搭配使用

容易混淆

像素风Pixel Art UI

像素艺术由点阵与有限色板定义;复古互联网由页面结构、超链接和旧浏览器视觉语汇定义,可包含照片与常规文字。

参考来源

Markdown 版(给 Agent) · JSON