# 这 10\+ 个「每日最佳网站」让你大开眼界！过节、看展、刮腿毛，水准高还超有趣 - 作者：吴淇 - 发布时间：2022-02-10 09:42 - 原文：https://www.ifanr.com/app/1468857 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/34-1.gif) 年前，OPPO 获得了 FWA 的「每日最佳网站」奖项。 获奖作品是 OPPO 未来科技大会 2021（OPPO INNO DAY 2021），这场线上虚拟大会对于 OPPO 也是一次全新尝试，往年的未来科技大会都是在线下举办。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/01-8.jpg) ▲ OPPO 未来科技大会 2021 的获奖页面. 图片来自：[FWA](https://thefwa.com/cases/oppo-inno-day-2021) ![](https://s3.ifanr.com/wp-content/uploads/2022/01/02.gif) ▲ OPPO 未来科技大会 2021. 图片来自：Twitter @VirtualVerse\_X 给 OPPO 颁奖的 FWA 全称为 Favourite Website Awards，创立于 2000 年，作为一个优秀网站收录平台运营至今。FWA 从 35 个国家（地区）请来 500 位评审，评出「每日最佳网站」、「每月最佳网站」、「年度观众投票奖」和「年度最佳网站」。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/07-1.jpg) ▲ OPPO 未来科技大会 2021. 图片来自：[Hypebeast](https://hypebeast.com/2021/12/oppo-technology-virtual-playground-inno-world-oppo-day-2021) 除了 FWA，知名网站 Awwwards 每天也在给全世界网站打分和颁奖。 Awwwards 有着相对完善的评分系统，评分依据 4 个要素——设计、实用性、创新性和内容，而且采用业内专家和真实用户的实名制打分。业内专家评分中，还会将偏离平均值最远的 3 个评分剔除，以提升公正度。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/09-4.jpg) ▲ Awwwards 2021 年「年度最佳网站」投票页面. 图片来自：[Awwwards](https://annual.awwwards.com/?utm_source=resources&utm_medium=home&utm_campaign=AOTY2021) 2020 年才成立的 Orpetron 网站设计奖，也是一位后起之秀。每天都在 YouTube、Instagram 和推特更新的它，喜欢用电脑和手机同时展示获奖网站，这让它收获了一批忠实粉丝。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/12-2.gif) ▲ 图片来自：[Orpetron官网](https://orpetron.com/) 最能发掘创意的艺术网站 It’s Nice That 也有个收录网站的栏目——「Double Click」（双击），从 2019 年开始每月分享 5 个网站，每次看完都让人不禁想惊呼：「网站还能这么有意思」。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/13-9.jpg) ▲ 「Double Click」（双击）栏目. 图片来自：[It’s Nice That](https://www.itsnicethat.com/double-click?page=1) 如果想找一些有趣甚至有点搞怪的网站，loadmo 网站想必是不错的选择，它背后是著名创意平台 DVTK。关注重点在手机屏幕的 loadmo，就连网站界面都是手机屏幕框，动态展示持续收录的网站。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/15-1.gif) ▲ 图片来自：Instagram @loadmo.re loadmo 在 Instagram 上的发帖方式也相当有意思，用实物手机打开网站让你站一侧浏览，或者请来名人 IP 手举卡片来张「代言照」。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/ezgif.com-gif-maker2.gif) ▲ 图片来自：Instagram @loadmo.re 我们从以上平台中精选了一些很有特点，也有点不可思议的网站作品，浏览的同时一起「涨知识」。 ### 现在流行在网站开大会、办大型活动 综观 FWA、Awwwards 和 Orpetron 近一年的获奖名单，活动类网站的成绩非常耀眼。 这也难怪，当疫情席卷全球，网站设计师和开发人员都在纷纷将原本在线下举办的活动搬到线上，比如来自美国洛杉矶的 Active Theory 团队，在网上办起会议和活动可是一把「好手」。 2020 年初，Active Theory 推出了用来举办线上活动的 Dreamwave 平台，这是基于微型网站发展出的新事物——微观宇宙，它被视为元宇宙中以社交驱动为目的而打造的沉浸式虚拟空间。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/16-2.gif) ▲ 在 Dreamwave 平台上举办的线上虚拟活动. 图片来自：[Medium](https://medium.com/active-theory/introducing-dreamwave-microverses-1d3e0364eff) Active Theory 在创建平台不久后推出了好评产品——线上音乐节 Secret Sky 2020。在音乐节期间，来自 163 个国家（地区）的 16 万观众来到了这个虚拟礼堂，共享音乐盛宴。 然而，Active Theory 并不满足于这样的成功，在接下来的 Secret Sky 2021，针对先前的问题个个击破，最后交出了让人惊艳的迭代产品，刷新了线上办活动的设计水准和技术要求。 在空间内看节目就是对着一块四四方方的屏幕吗？Active Theory 觉得让观众静静待在小空间里欣赏音乐，是他们在 2020 年的失败。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/17-2.gif) ▲ 单一 3D 表演环境的 Secret Sky 2020. 图片来自：[FWA](https://thefwa.com/cases/secret-sky-music-festival) 在 2021 年的音乐节直播中，屏幕被融进了3D 环境和氛围中，绝不是简单的叠加层。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/20-1.gif) ![](https://s3.ifanr.com/wp-content/uploads/2022/01/25.gif) ▲ Secret Sky 2021. 图片来自：FWA 音频聊天新功能的加入，也让参与音乐节的我们，更加「真实在场」。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/22-2.gif) ▲ Secret Sky 2021. 图片来自：[Medium](https://medium.com/active-theory/secret-sky-2021-7aedbbc5c894) Active Theory 还从游戏《Sky 光遇》和《英雄联盟》中「偷师」，打造了可以让观众闲逛的自然环境。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/24-4.jpg) ▲ 来自游戏和动漫的场景灵感. 图片来自：[Medium](https://medium.com/active-theory/secret-sky-2021-7aedbbc5c894) 为了配合音乐节打造出年轻而有趣，但又不幼稚的角色，团队从游戏 *Journey*、吉卜力工作室作品和音乐节组织人 Porter Robinson 想法中汲取灵感，设计出穿着斗篷，有着表情符号眼睛的人物角色。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/23-7.jpg) ▲ 吉卜力工作室的头像灵感（图左）和音乐人 Porter Robinson 的创意（图右）. 图片来自：[Medium](https://medium.com/active-theory/secret-sky-2021-7aedbbc5c894) ![](https://s3.ifanr.com/wp-content/uploads/2022/01/21-7.jpg) ▲ 角色人物的设计手稿. 图片来自：[Medium](https://medium.com/active-theory/secret-sky-2021-7aedbbc5c894) ![](https://s3.ifanr.com/wp-content/uploads/2022/01/26-4.jpg) ▲ 为 VR 设置的手臂数据. 图片来自：[Medium](https://medium.com/active-theory/secret-sky-2021-7aedbbc5c894) 此外，Active Theory 还打造了一个名为魔方世界（Cube World）的三维空间，黑暗环境中闪烁的灯光与迷幻的特效让整个音乐节更加带感。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/18.gif) ▲ 魔方世界. 图片来自：[Medium](https://medium.com/active-theory/secret-sky-2021-7aedbbc5c894) 网址： 以下推荐 3 个办活动很给力的网站。 #### 1. 2020 年迪拜虚拟世博会（Virtual Expo Dubai 2020） ![](https://s3.ifanr.com/wp-content/uploads/2022/01/38-2.jpg) ▲ 2020 年迪拜虚拟世博会. 图片来自：[Awwwards](https://www.awwwards.com/sites/virtual-expo-dubai-2020) 实际在 2021 年 11 月才发布的 2020 年迪拜虚拟世博会，凭着在设计和技术上的高难度，当之无愧地拿下了 FWA 2021 年的「年度观众投票奖」，还同时获得 Awwwards 和 Orpetron 的「每日最佳网站」。 拿奖早已拿到手软 的 Dog Studio，在谈起这个网站时也是一把汗水一把泪，坦言它的庞大规模已经击穿了过往经历的天花板。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/39-1.gif) ▲ 2020 年迪拜虚拟世博会. 图片来自：Instagram @dogstudio.co > 70 个定制展馆，85 个主题展馆，2 个公园，4 个主要主题展馆，1个展览中心。所有这些都要重新建模、纹理化，加入照明效果并加入到一个基于 WebGL 程序语言的空间中。 > > 地图只是冰山一角，因为我们的团队需要围绕展馆构建完整的用户体验，以及处理整个项目过程中会发生的所有活动和事务。 > > ——Dog Studio ![](https://s3.ifanr.com/wp-content/uploads/2022/01/40.gif) ▲ 2020 年迪拜虚拟世博会. 图片来自：Instagram @dogstudio.co 网址： #### 2. 游戏大奖微观宇宙（The Game Awards Microverse） ![](https://s3.ifanr.com/wp-content/uploads/2022/01/27-3.jpg) ▲ The Game Awards Microverse. 图片来自：[FWA](https://thefwa.com/cases/the-game-awards-microverse) 游戏大奖是视频游戏行业的年度盛会之一，2020 年在流媒体上的播放量超过 8300 万。2021 年 12 月 9 日举办的最新游戏大奖，Active Theory 被请来设计线上虚拟空间，让观众可以访问观看 3 小时的直播。 游戏大奖的活动现场被设计成一个有漂浮行星、古老巨人和特殊地形的抽象世界。观众可以通过完成游戏任务，获得专属房间、头像定制等升级功能。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/28-4.jpg) ▲ The Game Awards Microverse. 图片来自：[FWA](https://thefwa.com/cases/the-game-awards-microverse) > 目前，元宇宙如何演变与创新的讨论激烈，其中大部分与游戏有关，因此让粉丝参与到游戏大奖中是非常有意义的。 > > ——Dreamwave 创意总监兼联合创始人安迪·塞兰德 (Andy Thelander) ![](https://s3.ifanr.com/wp-content/uploads/2022/01/37-2.gif) ▲ The Game Awards Microverse. 图片来自：[VR Scout](https://vrscout.com/news/the-game-awards-hosting-vr-watch-party-in-the-microverse/) 网址： #### 3. 圣丹斯电影节（Sundance Film Festival） ![](https://s3.ifanr.com/wp-content/uploads/2022/01/30-2.jpg) ▲ 圣丹斯电影节线上网站. 图片来自：[Medium](https://medium.com/active-theory/sundance-new-frontier-3448cf67d2c0) 专为独立电影人和电影作品而设的圣丹斯电影节，今年已迎来了第 38 年，然而这个线下盛典也在去年进军线上架构虚拟空间，成为新前沿（New Frontier Experience）的重要部分。 圣丹斯电影节团队给网站设计的方向，却是疫情下尤为流行的视频会议软件 Zoom，希望让与会者在自己居住的地方见到来自世界各地的友人。 但事实上，视频会议通常会将界面均匀划分成几个框框，不容易让与会者沉浸到广阔的虚拟空间中。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/31-3.jpg) ▲ 以视频会议为灵感的早期界面设计. 图片来自：[Medium](https://medium.com/active-theory/sundance-new-frontier-3448cf67d2c0) 经过一番思考，接下项目的 Active Theory 为观众设计了移动头像——卡通型的化身上顶着一个圆形屏幕，里面是我们的头像。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/32-2.jpg) ![](https://s3.ifanr.com/wp-content/uploads/2022/01/33-3.jpg) ▲ 虚拟人物设计过程. 图片来自：[Medium](https://medium.com/active-theory/sundance-new-frontier-3448cf67d2c0) 网站以太空宇宙飞船为主题打造，包括太空花园、电影派对、画廊和电影院，在 2022 年 1 月 20 日至 28 日正式开放，购买价值 50 没有的门票后即可通过电脑或 VR 耳机访问。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/36-1.gif) ![](https://s3.ifanr.com/wp-content/uploads/2022/01/34-1.gif) ▲ 圣丹斯电影节线上网站. 图片来自：[Medium](https://medium.com/active-theory/sundance-new-frontier-3448cf67d2c0) 网址： ### 用交互设计改造传统的「告示板」网站 传统的网站设计有点像是过去墙上用来公布信息的宣传板，上面排列着信息，等待访客阅览。然而，在游戏、视频、影视盛行环境下成长与生活的我们，这类网站往往给我们一种过时的感觉，难以聚焦我们的注意力。 好的交互设计在当下的网站设计中，不仅能够吸引我们的注意力，更重要的是，它还可以将背后的故事，用最感人的方式讲出来。 这并不是一件易事，不恰当或者过多的交互设计，都会将注意力从故事上转移，故事也就讲不下去了。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/41.gif) ▲ 图片来自：[Giphy](https://giphy.com/gifs/godaddy-lvnL6wYoupYX2xwnhk) 全球交互式设计工作室 Makemepulse 团队人员的技术非常过硬，偏偏他们更关注讲故事体验。如果用户为作品创意、故事情节和情感着迷，忽视了背后的高难度技术，他们反倒会更开心。 Makemepulse 会从电子游戏、电影和艺术等媒体汲取养分，用在创造用户体验上。在游牧部落（Nomadic Tribes）网站设计中，Makemepulse 更像是电影导演，前半部分时间都在编写故事，反复调整灵感版。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/42.gif) ▲ 游牧部落获得 Awwwards 的「每日最佳网站」. 图片来自：[It’s Nice That](https://www.itsnicethat.com/articles/double-click-march-makemepulse-digital-300321) 网址：https://2019.makemepulse.com/ 在一次访谈中，Makemepulse 还分享了自己的珍贵经验。 > 到虚拟世界之外的地方寻找灵感，从电影、视频游戏、音乐、活动、自然以及生活中能让你享受的事物中，更有可能找到有价值的创意角度，用户也更容易有共鸣，给出回应。 > > ——Nicolas Rajabaly（Makemepulse 的联合创始人） ![](https://s3.ifanr.com/wp-content/uploads/2022/01/45.gif) ![](https://s3.ifanr.com/wp-content/uploads/2022/01/43.gif) ▲ Makemepulse 为柏林 Alte Nationalgalerie 设计的网站——神奇的倒影（Magical Reflections）获得 FWA 的「每日最佳网站」. 图片来自：[FWA](https://thefwa.com/cases/magical-reflections) 网址： 以下推荐 3 个很擅长用交互空间「讲故事」的网站。 #### 1. 鲜味乐园（Umami land） ![](https://s3.ifanr.com/wp-content/uploads/2022/01/46-1.jpg) ▲ 鲜味乐园. 图片来自：[FWA](https://thefwa.com/cases/umami-land) 同时获得 Awwwards 的「每月最佳网站」和 FWA 的「每日最佳网站」的鲜味乐园，是一个虚构的日本饮食文化公园，通过游戏式的互动引出 Google 搜索结果，让用户了解更多日本料理。 Google 趋势显示全球对日本食品和外卖的搜索量飙升，因此 Google 启动了一个宣传日本美食的项目。 最初想通过日本旅行来吸引游客的 Google，在全球疫情的背景下改变了主意，找来全球设计公司 Media.Monks 设计宣传网站。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/51.gif) ▲ 鲜味乐园. 图片来自：[Awwwards](https://www.awwwards.com/sites/umami-land) Media.Monks 接下项目后，首先整理出一份最吸引人的日本料理菜单，从外观、味道以及背后的历史文化开始深入研究。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/53.gif) ▲ 鲜味乐园. 图片来自：[Awwwards](https://www.awwwards.com/umami-land-by-google-wins-site-of-the-month-february-2021.html) 然后，Media.Monks 将每种食物变成了公园内的不同区域，用食物作为场景美术灵感，同时每个场景又必须让菜肴看起来更美味可口。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/52.jpg) ▲ 鲜味乐园. 图片来自：[FWA](https://thefwa.com/cases/umami-land) 举个例子，作为日本料理核心的大米被设计成公园的主要街道。在这里，游客可以找到用大米制作的菜式，以及大米的常见配菜，如腌制蔬菜和蘑菇。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/47-1.jpg) ▲ 鲜味乐园. 图片来自：[Awwwards](https://www.awwwards.com/umami-land-by-google-wins-site-of-the-month-february-2021.html) 与平常去任何公园景点类似，游客可以在商店购买有意义的纪念品。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/48-1.jpg) ▲ 鲜味乐园的纪念卡片. 图片来自：[Awwwards](https://www.awwwards.com/umami-land-by-google-wins-site-of-the-month-february-2021.html) 网址： #### 2. 冲入风暴（Into the Storm） ![](https://s3.ifanr.com/wp-content/uploads/2022/01/54.jpg) ▲ 冲入风暴. 图片来自：[Awwwards](https://www.awwwards.com/sites/into-the-storm) 由 Media.Monks 操刀设计的另一个网站——冲入风暴（Into the Storm），走的却是截然不同的风格——交互式纪录片。 如名称所暗示一般，进入网站的每一位用户，将化身为救援人员，冲入风暴抢救幸存者。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/56.gif) ▲ 冲入风暴. 图片来自：[Awwwards](https://www.awwwards.com/case-study-u-s-air-force-into-the-storm-by-mediamonks-wins-site-of-the-month-march-2021.html) 这部「纪录片」源于一个真实故事——2010 年 8 月 8 日，一架民用飞机在阿拉斯加南部的楚加奇山脉坠毁，美国空军的一个特种作战小组接到救援任务，最终成功将幸存者带回安全地道。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/57.gif) ▲ 冲入风暴. 图片来自：[Awwwards](https://www.awwwards.com/case-study-u-s-air-force-into-the-storm-by-mediamonks-wins-site-of-the-month-march-2021.html) 为了达到更逼真的效果，Media.Monks 从三个要素全面还原，即故事、环境和互动。从团队绘制的第一个故事版可以看到，整个事件的所有信息和细节都被纳入考虑。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/55-1.jpg) ▲ 设计过程中的第一个故事版. 图片来自：[Awwwards](https://www.awwwards.com/case-study-u-s-air-force-into-the-storm-by-mediamonks-wins-site-of-the-month-march-2021.html) 由于位置偏远无法实地采景，Media.Monks 从Google 地球获取了屏幕录像，用专门的软件还原地貌的同时，还会让视角尽可能接近地面，让画面更像是通过救援人员眼睛看到的。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/58.jpg) ▲ 从 Google 地球中提取的图像数据. 图片来自：[Awwwards](https://www.awwwards.com/case-study-u-s-air-force-into-the-storm-by-mediamonks-wins-site-of-the-month-march-2021.html) ![](https://s3.ifanr.com/wp-content/uploads/2022/01/59.gif) ▲ 在 3D 软件中还原山脉地形. 图片来自：[Awwwards](https://www.awwwards.com/case-study-u-s-air-force-into-the-storm-by-mediamonks-wins-site-of-the-month-march-2021.html) 救援人员的音频资料也被用了进来，解释他们使用什么工具和做了什么事情，让体验更为真实。此外，这个网站还拥有很高的教育宣传价值，可以激励人们参与真实的救援行动。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/60.jpg) ▲ 声音设计界面. 图片来自：[Awwwards](https://www.awwwards.com/sites/into-the-storm) 网址： #### 3. 普罗米修斯燃料（Prometheus Fuel） ![](https://s3.ifanr.com/wp-content/uploads/2022/01/61.jpg) ▲ 普罗米修斯燃料. 图片来自：[FWA](https://medium.com/active-theory/prometheus-2d3c05b88ec0) 一举拿下 FWA 2021 年「年度最佳网站」和 Awwwards 的「每月最佳网站」的普罗米修斯燃料（Prometheus Fuel），将我们拉回到科幻小说盛行的过去年代，观看了一部公路电影。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/63.gif) ![](https://s3.ifanr.com/wp-content/uploads/2022/01/64.gif) ▲ 普罗米修斯燃料. 图片来自：[Awwwards](https://www.awwwards.com/prometheus-by-active-theory-wins-site-of-the-month-may-2021.html) 虽然这部公路电影的主角看起来 70 年代福特的 Mustang Fastback，实质上这却是燃料广告。这款燃料非常特别，是由空气中的二氧化碳过滤生成的。 基于品牌选定的复古未来主题的视觉风格，网站的故事分成两个章节——「新时代的诞生」和「充满可能的世界」。用户可以通过垂直方向的滚动，欣赏整个故事。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/65.jpg) ▲ 第一章节的故事版. 图片来自：[Medium](https://medium.com/active-theory/prometheus-2d3c05b88ec0) ![](https://s3.ifanr.com/wp-content/uploads/2022/01/66.jpg) ▲ 第二章节的故事版. 图片来自：[Medium](https://medium.com/active-theory/prometheus-2d3c05b88ec0) 为了让用户拥有更强的参与感，有趣的时刻被添加了交互式指令，因此用户可以点击或按住一个按键，与屏幕上的元素进行互动。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/62.gif) ▲ 网站的交互效果. 图片来自：[Medium](https://medium.com/active-theory/prometheus-2d3c05b88ec0) 网址： ### 因为手机和手指才变得有意思的网站 在移动设备十分普及的当下，很多网站是在手机屏幕上展示，虽然屏幕变小了，但是触屏方式给网页的设计打开了另一扇窗户，这吸引了一批网页设计师想要在手机屏幕上做创新设计。 因为对「网站看起来相似」、「一次又一次地重复相同的模板」这些现况的不满，首尔创意设计师 Yehwan Song 萌生了创建为手指设计网站的想法。 命名为「今天我走路（Today I Walked）」的网站，正是这个想法的最终成品。在智能手机屏幕上，用户的手指可以化作双脚，在屏幕中的街道四处行走，窄小的屏幕却装进了整个街区。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/71.gif) ▲ 今天我走路（Today I Walked）. 图片来自：Instagram @yehwan.yen.song 后来 Yehwan 还依据这个概念，加入脚印等互动元素推出了新网站——手指在走路（fingerwalking.kr）。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/73.gif) ▲ 手指在走路（fingerwalking.kr）. 图片来自：Instagram @loadmo.re 熟悉运用复杂编码的 Yehwan，持续探索后推出名为当我站在这里（While I’m Standing Here）的网站——将带有符号和字母的小方块放在屏幕上，屏幕便立刻显现依据物件补全的图像。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/72.gif) ▲当我站在这里（While I’m Standing Here）. 图片来自：Instagram @yehwan.yen.song 在早期的实验中，Yehwan 用套上残缺字母图案的手指在屏幕上做弹琴动作，敲下来的瞬间，屏幕与手指套上的图案组成了完整的「hey」（嘿）。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/70.gif) ▲ hey 网站互动效果. 图片来自：Instagram @yehwan.yen.song > 我开始思考我们如何在日常生活中使用手指，指出某物或者用手语交流。我们用手指直接触摸屏幕上的这一时刻，在视觉效果上是可以变得激动人心和很有意思的。 > > ——Yehwan Song ![](https://s3.ifanr.com/wp-content/uploads/2022/01/74.gif) ▲ 不要触摸（Don’t touch）. 图片来自：Instagram @yehwan.yen.song 以下推荐 3 个在手机屏幕上很有趣的网站。 #### 1. 来和我一起刮毛吧（Come Shave With Me） ![](https://s3.ifanr.com/wp-content/uploads/2022/01/67.gif) ▲ 来和我一起刮毛吧. 图片来自：Instagram @loadmo.re 虽然被大多数网友称呼为「刮腿毛的网站」，在设计说明页面上却标明这是个毛茸茸的上腹部。疫情背景下，居家隔离的经历让设计师脑中冒出了一个想法——「不如做一款虚拟皮肤，大家可以一起在线刮毛」。 手指放到屏幕上，会出现一把刮刀，手起刀落，一排毛发便被刮了下来。 有趣的是，虚拟皮肤上毛发生长的速度很快，才刚刚刮完的地方，立马又会长出新的毛发。 这个网站由 Alexandra Barancova、Jae Perris 与 Moniker 合作完成，这背后的目的分享背后资助人创意产业基金会 NL 的最新研究。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/76.jpg) ▲ 网站说明页. 图片来自：Comeshave 网址： #### 2. 忙碌模拟器（Busy Simulator） ![](https://s3.ifanr.com/wp-content/uploads/2022/01/69.gif) ▲ 忙碌模拟器. 图片来自：[loadmo](https://loadmo.re/posts/busy-simulator) 语音或视频会议中受不了想要结束怎么办？创意总监兼技术专家 Brian Moore 设计出忙碌模拟器，用来模拟手机中常用的应用程序，通过播放通知声音，让你可以假装很忙碌。 Designtaxi 网站还有趣地加上一句评论：「通过表现得很忙碌，你实际上可能会完成更多的工作。」 每个应用程序图标下都配有一个进度条，原来「忙碌」的程度也可以随意调试。 网址： #### 3. iPod.js ![](https://s3.ifanr.com/wp-content/uploads/2022/01/68.gif) ▲ iPod.js. 图片来自：Instagram @loadmo.re 如果怀念 2000 年代初期的 iPod，不妨尝试一下这个网站——连接到 Spotify 或 Apple Music，感受从 iPod 里传来的音乐。 就连转动方向盘的那种「咔哒」音效，也被细致地还原了。 网址： 在一次重新构想网站的在线活动中，Yehwan Song 说出了一些希望打破条条框框的设计师的心声——「我的目标是让网页设计可以更加多样化，我尝试将网站概念从以用户为中心，转变为以内容为中心。」 也就是说，过于重视用户体验的设计理念，不可避免地让网站设计出现同质化的问题。简单而顺畅的交互，或许对用户很友好，但在做这些减法的过程中，有意思的想法也可能会被过滤掉，被当成残渣冲入下水道。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/75.gif) ▲ 将个人网站做成有贴纸的「伪 Instagram 页面」的设计师 Rachel Kim. 图片来自：Instagram @9imyen 专门收录有趣网站的 loadmo 也在 Instagram 上借用哲学教授 E. Selinger 的文章摘录发声：「Selinger 谈到了科技行业如何沉迷于对『无摩擦体验』的追求，但当一切都很平滑顺畅，我们还能去感受和思考什么呢？我们还能够体验什么？」 因为，用不同以往的方式去设计网站，或许会让我们的「直觉」变得不舒服，但这点不舒服，反倒可以引起我们的思考，以及与新事物产生对视。 ![](https://s3.ifanr.com/wp-content/uploads/2022/01/1111.jpg)