关键词
- 网站分享
- UI 设计
- 工具网站
前言
作为一名冲浪多年的互联网人员，收藏夹有着堆积如山的各种神奇网站，虽然在笔者这边基本吃灰了，但或许刚好有你需要的~ 本期笔者会从技术视角分享几个有意思的网站，看看有没有你刚好用得上的吧~
谷歌地球 (Google Earth)
加载
技术表现： ★★★★★
实用指数： ★★★★★
地址： earth.google.com
一用让人眼前一亮，再用让技术党为之震撼的产品，美丽的蔚蓝色的星球，配合超强的 3D 交互技术，使每个互联网用户都能身临其境的观赏到世界的角角落落，还能当作旅游前的初步路线考察。
不敢想如果上地理课时老师能在大荧幕放这个配合讲解会有多震撼。
点评： 从开发者控制台简单解析了一下发现有 WebGl、GIS、PWA、WASM、Web Workers、Protobuf 等技术痕迹，笔者虽然没怎么做过 GIS，但 PWA、WASM、Protobuf 和 Web Workers 应该是常与 GIS 项目协作的，否则没法做到这么流畅。至于美术风格是一如既往的谷歌 Material Design +设计，整体极简，且富有沉浸感。
默认
珠穆朗玛峰山下
测量功能
Bruno Simon
默认
技术表现： ★★★★★
实用指数： ★★
地址： bruno-simon.com/
一个能玩的网站，除了基础交互外，作者还在网页中加入了物理引擎、碰撞音效等，你可以像玩赛车游戏一样，在网站里开车“漂移”，撞倒写着他技术栈的广告牌，或者把车开到对应的区域来查看他的作品和联系方式。可以看作是一个解压网站。
点评： 作品集性质网站，表现力非常猛，从控制台上看用到了 pwa 缓存、glb 模型文件、threejs、以及各种贴图和 Web worker 等技术，但实际上要做出这种效果，纯计算机科班是远远不够的，还需要有图形学、美术设计、物理建模等基础。合理怀疑作者前端是副业，主业是学建模的。
保龄球玩法
跳高玩法
FauxID.com
功能展示
技术表现： ★★
实用指数： ★★★★★
地址： fauxid.com/
这是一款地址生成器，虽然可以生成其他税务信息，但主要的还是围绕地址来生成，众所周知，工具型垂类网站，其核心价值在于精准解决用户痛点。因此在开发时，往往会优先保证功能的可用性，而不是在前端性能和交互体验上做过多投入，这个网站就是个典型的例子。
如果各位有线上国际支付的需求，那就需要填写对应的税务信息，当我们不想提供真实信息时，这个网站就完美的解决了我们的需求，同时该网站也是同类型中广告内容最少之一。
点评： 网站前端方面没有看出有什么特别的技术，甚至每次生成还得全量加载，大概率前端都没分离，但仔细一想，这是非常合理且合适，首先这种产品大部分用户都是用完即走，不会在网站上停留太长时长，极少情况才会触发其他 UX 交互，其次这样能大幅减少开发时间，作者的商业定位非常清晰，深刻理解这个工具站的核心是数据，不是交互。
生成美国免税区信息
蔷薇花园
首次加载
技术表现： ★★★★★
实用指数： ★★★
地址： iirose.com/
一进来你以为是个游戏，进去一用你以为是聊天平台，再用一会你发现是个社交论坛，操作一下左边菜单，发现是个大杂烩，聚合了群聊、点播音乐、二手交易、虚拟炒股、内嵌浏览器、广播、发红包等等功能。
点评： 混合了日系 ACG 游戏、现代极简等风格制作而成，作者在美术与 CSS 方面造诣很深，但由于功能较为繁琐且教程非强制，初感对大龄用户不太友好，社区目前的用户也是年轻二次元居多，从控制台看网络协议有 WS、 http1.1、 http2，以及 jQuery 和 php，缓存机制有 PWA，http1.1 应该是因为要兼容老项目的原因，但是作为一个功能性为主的社交平台，这些无上大雅，优化要结合实际需求，而且笔者在实际体验中并没有碰到卡顿问题。
房间
侧边设置
内嵌浏览器
阿里司法拍卖
官网首页
技术表现： ★★★
实用指数： ★★★★★
地址： sf.taobao.com/
高级二手交易平台，拍卖一直是一种人们眼中高大上的行为，但借助此网站，平民百姓也可以过过瘾。
这平台有非常多低至百元的货品可以起拍，除了房车地等高价格货品，还有手机、首饰、字画等，虽然东西可能不太吉利，但如果只是用来体验拍卖、以及理解机构的运作是非常不错的。
❝
跟电视里的一样，部分货品开拍后会有专门抬价的托，请谨慎出价
点评： 从前端技术来看，这个网站确实没有太多花哨的特效，UI 风格也非常务实。但这恰恰说明了它的定位：一个功能优先、承载复杂业务的平台，网站用户群体也不是一群追求页面好看，高交互的人群，拍卖这种技术架构应该就是从经典的电商技术架构变种而来，说明了一个优秀的技术架构能承载非常多元的业务。
iPhone手机竞拍
拍卖土
债券拍卖
YUME 梦乡
首页
技术表现： ★
实用指数： ★★★
地址： yume.ly/
非常有意思的梦境记录网站，在这里可以看到别人记录下来的梦以及对其进行留言互动，也可以自己把梦境上传记录，青少年时期是最多梦的时候，如果你们在该网站能看到跟自己做的梦相似的，那或许就很有意思了。
点评： 依旧是一个工具性质的网站，UI 风格略古早，http 协议用的全是 1.1 版本，没有特殊的优化，甚至 ssl 证书都懒得配，但正如我上面说的，这类型网站对优化方面要求不高，而且虽然 UI 古早，但看起来没有别扭，经典的卡片式列表布局，间距给得很大，观感还行。
内容和留言
标签筛选
总结
网站的类型有很多，工具性的、宣传性的、炫技性的，每种类型的网站在开发过程中注重的点都不一样。
工具性网站通常为了快速解决痛点，都是以最小实现单元来做，加上后续迭代；运营较久的网常为了兼容老代码，通常不会做很多破坏性的更新；产品宣传性的网站，在保证各方面均衡的前提下，通常会尽可能美观；炫技性的网站，通常也是技术最前沿的，很多个人站点也是如此。
作为一名开发者，分析和理解不同产品背后技术取舍的能力——无论是出于性能、成本、商业定位还是历史原因——或许比单纯追逐最新的框架更有价值。因为技术最终是为目的服务的，理解了这一点，才能做出更成熟的工程决策。
