# Web 2.0 高光（Web 2.0 Glossy）

镜语 · 版式与界面 / 年代风格

- 别名：Web 2.0、水晶按钮、Beta 风、2006 年网页
- 口语：「那种亮晶晶像果冻的按钮」「图标下面还有倒影」「像早年的 Flickr、Twitter」
- 一句话：水晶高光按钮、倒影、Beta 徽章和柔和渐变的 2005–2010 年网页
- 是什么：Web 2.0 原本指 2004 年前后兴起的「用户参与」网站（博客、相册分享、视频站、社交网络）；视觉上，这一时期流行水晶质感按钮、顶部高光、倒影、圆角渐变、Beta 徽章和标签云，后来常被统称为 Web 2.0 风格
- 缺了就不像：水晶高光按钮；圆角渐变框；镜面倒影
- 加了更像：Beta 星形徽章；标签云；细斜条纹背景；大号友好字体
- 适合用在：怀旧向内容、复古产品发布页，唤起 2006 年前后互联网的乐观气氛；讲社交网络和 UGC 平台历史时，作为那个时期的典型界面；只借一两个符号（Beta 徽章、标签云）给现代界面加一点玩笑感
- 看哪里：看按钮上半部分那条白色高光和底部的反光，它让按钮像一块湿润的糖果；Logo 旁边斜贴着星形「Beta」徽章，头像下面有淡出的倒影。标签云用字号大小表示热度，悬停按钮时高光变亮
- 注意：高光、渐变、倒影和描边同时叠满会显得廉价；当年的好作品也会控制数量；水晶按钮需要清楚的文字对比度，浅色高光上放白字会看不清
- 描述示例：做一个 Web 2.0 高光风格（Glossy Web 2.0，约 2006 年）的个人主页：浅蓝到白的竖向渐变背景加细斜条纹，白色圆角内容框带 1px 浅灰描边；按钮是饱满的绿色或橙色水晶按钮，上半部分有一层半透明白色高光，底边略深，悬停时更亮；头像和 Logo 下方有淡出的镜面倒影，Logo 旁斜贴一个红色星形「Beta」徽章；用 Lucida Grande／Helvetica 一类圆润无衬线字，加一块字号大小不一的标签云
- 易混：
  - [拟物化](https://idea.ameng.dev/terms/skeuomorphism.md)：Web 2.0 高光是抽象的糖果光泽，拟物化则模仿具体材料，如皮革、纸和金属
  - [扁平化](https://idea.ameng.dev/terms/flat-design.md)：扁平化正是对这种高光、倒影和渐变的反动，全部去掉
- 相关：[早期网页](https://idea.ameng.dev/terms/web-1-0.md)、[Y2K 网页](https://idea.ameng.dev/terms/y2k-web.md)、[水面倒影](https://idea.ameng.dev/terms/reflection.md)、[斜面](https://idea.ameng.dev/terms/bevel.md)

## 来源与延伸阅读

- [Web Design Museum · Flickr 2005](https://www.webdesignmuseum.org/gallery/flickr-2005)
- [Web Design Museum · YouTube 2005](https://www.webdesignmuseum.org/gallery/youtube-2005)
- [Web Design Museum · Twitter 2007](https://www.webdesignmuseum.org/gallery/twitter-2007)
- [Wikipedia · Web 2.0 词条](https://en.wikipedia.org/wiki/Web_2.0)

网页版（含演示）：https://idea.ameng.dev/terms/web-2-0-gloss