UI DESIGN UX DESIGN UI DESIGN UX  

 ARTICLE :2021/12/3：）

（全文共3671字，阅读6-8min）

现在有很多网页设计比赛，但Awwards可能是其中最著名的。在这个平台上获得提名或获胜是交互设计高度专业化的标志，同时也证明着不断适应新的UI/UX要求和挑战的能力。

用户和有资格的评审团成员可以投票选出当天、月和年度的最佳网站。他们根据6个标准来评估网站:设计、可用性、创意、内容、移动和开发者表现。

在本文中，将分析2021年的十大最佳网站的优势与劣势，并阐述它们之间的共同点。

2021 年 10 月的最佳网站表明:可以尝试字体组合的更多可能性。

·优势 

对于标题，这件作品的设计师混合了两种字体：

·一种大胆而简单的

·一种精致且边缘锐利的

将不同的字体变成贯穿整个网站并使其易于识别的主题。该网站的极简主义也证明这样一个事实：不同的字体不会分散观众的注意力。

事实上，设计师运用四种字体组成同一个网站。网页整体设计简约，采用黑白设计，带有明亮的红色光标，触感很好。同时有一个黑暗模式：对于那些想要在黑白中创建网站的人来说，这是必备的。

对角滚动也是这个网站的一个强项，同时如何处理其 404 页面，也使该项目真正脱颖而出。

·劣势 

该网站的最低分是可用性。尽管混合字体很有趣，但创作者并没有以任何方式突出显示标题：

此外，将照片与光标一起拖动的屏幕会使文本不可读：

9 月份获胜的最佳完全是关于网格的。它们是水平线和垂直线的集合，创建有助于排列设计元素的图案。

·优势 

该网站是用黑白制作的，整体也是简约风格。由于大排版，主页具有强烈的瑞士风格。并没有照片或彩色插图，而是引入了许多几何形状：用户可以通过滚动来移动它们。网站的许多部分都采用水平布局：可从右向左滚动。

这个网站 具有强大而清晰的用户体验副本，这在决定本月最佳网站时也是一个加分项。

这个网站最有趣和最令人满意的部分是……疯狂模式！顶部有一个按钮可以打开它，还有“网格”模式。可以通过观看飞来飞去的形状来真正了解创作者对这个项目投入了多少心思：

·劣势 

这个网站的最低分是可用性。一些用户可能厌倦了用鼠标制作几个完整的滚动条，让黑色方块“跳过”主页开头的巨大字母。富有表现力的排版很好，但它会损害平均使用体验。

8 月的获奖者是一个供用户观看有关互联网的虚拟节目的网站。

·优势 

一开始，会看到加载动画，需要用户按“go”才能继续。

主页很简单，不提供滚动，背景中有螺旋 3D 动画和网格。音乐让观众为观看视频做好准备，他们可以部分或整体观看这些视频。

尽管该网站可能有点混乱和响亮，但它的强大方面当然是制作的故障效果。就你打开了太多的电视：

但是该网站并非适合所有人，但也不适合日常使用——它是一场表演，它的 UI/UX 设计也是如此。

·劣势 

这个页面的可用性也比较低。在网站的任何页面上，用户都没有太多的自由，尽管左上角有一个小的汉堡菜单。

与 2021 Awwwards 的其他一些获奖者不同，7 月最佳网站设计并不是极简主义风格。虽然它有基本的排版，并且没有很多副本，但它的动画可能是我们今年见过的最复杂的。

·优势 

设计师在主页上制作了 3 个级别的 WebGL 动画：灰尘颗粒、方块和虫状线条。在主页加载之前，加载屏幕会建议您使用耳机以获得更好的体验：音乐无处不在。

用户通过游戏化保持参与：3 个用 WebGL 制作的游戏。它们独特而酷，各有特色，但会让用户感到焦虑或紧张。

·劣势 

该网站的低分在于设计、可用性和开发人员绩效。所有这些游戏和动画都需要时间来加载，这是一个缺点。同时谐波状态对用户来说变成了迷幻状态。

想象一下，自己作品集在 Awwwards 上赢得了6 月最佳网站。很疯狂吧？但这确实是一个现实。

·优势 

有人说“在你发现一个人的目标之前不要判断他们的投资组合”，但显然一个这么酷的网站必须得到一些评论。该网站使用 WebGL、GLSL 和 Javascript。

主页是用黑白构建的，在水平滚动中压缩了作品片段。开发人员不仅出售个人的才能，而且将他的投资组合提升到一个新的水平。单击任何作品，它就会发挥其全部潜力。

运动设计是动态和流畅的。在水平滚动的二重奏中，它可以制作完美的幻灯片。但是，右侧的幻灯片不可滚动，这有点令人失望。可以直接单击它们或使用箭头键进行导航。

·劣势 

它的最低分数是可用性和开发人员标准。我们可以指出一个没有实际用途的无用菜单，因为它太小了：

什么比福特野马更好？答案是：一辆动画 3D 福特野马穿越 3D 动画沙漠。

·优势 

该网站是一个风格化的 WebGL 交互式故事，通过滚动讲述来展开。这绝对是2022 年的趋势，一种叙事形式，随着每个滚动插图、字体、文本片段和其他元素开始变得生动。

该网站使用 WebGL 动画来实现平滑。3 种主要颜色（蓝色、红色和白色）传达了出从《辐射》电子游戏中获得的 50 年代感觉，像素化也有助于渲染氛围感。

该网站通过在整个滚动旅程中使用相同的位置来创造一种存在的错觉：沙漠。一次，一个不是绿色的“绿色”站点。

·劣势 

该设计的最低分是开发商标准。具有大量动画的网站需要时间来加载，并且登陆页面对于用户来说并不是最好的选择。

该网站作为 2021 年 4 月最佳网站的获胜者出现在 Awwwards 上。

·优势 

该页面的优势包括：以创造性的方式使用徽标，例如相框，以及使用 WebGL 制作并由 Three JS 提供支持的动态 3D 动画。具有平滑的加载过渡和交互式“获取通知”按钮。总的来说，这是一个非常强大的产品展示，除了 UX 副本之外，还有很多很酷的功能。

·劣势 

总体而言，该网站在所有标准上的得分都低于其他获胜者。可能是因为该网站选择在其大部分副本中使用较小字体，不便于阅读与使用。

由美国空军赞助的网站在 Awwwards 上赢得了2021年3 月的比赛。

·优势 

这是一个关于令人难以置信的救援旅程的项目，具有出色的音景，可以跟随用户在网站上的任何地方。

在此类项目中，讲故事非常重要。该网站摒弃了鲜艳的色彩，并使用冷色调（蓝色、银色、白色）来代表下雪天气和风暴，让我们沉浸在救援任务中。在这一点上，它几乎不是一个网站，而是一个简短的纪录片。网站上的音频评论是用动画无线电波制作的。

这个故事是通过滚动讲述来传达的。没有菜单，没有弹出窗口。只有惊人的 CGI 动画。有很多microinteractions，以保持用户活跃度：可以种控制直升机和救援队。

至于技术细节，“进入风暴”项目使用了 HTML5、WebGL、GSAP 动画和 Vue JS。总的来说，这是一个非常棒的情感化项目。

·劣势 

最低分仍然是可行性的问题，用网站控制直升机是一项艰巨的任务。

你想过会爱上一个饭团虚拟形象吗？2021 年 2 月的最佳网站通过非常可爱的角色、适合视频游戏的配乐和温暖的色彩向我们介绍了日本料理的世界，这是谷歌制作的一个设计项目。

·优势 

起始页面很简单，就像 Google 的大多数教育项目一样。

这个网站有几个引人入胜的因素：

·绝对可爱的 3D 插图和动画

·可爱的副本

·小游戏

·拖拽式交互

·通过漫画泡泡演讲

·Google搜索以了解选择的餐点是否在附近供应

该网站可能会因其幼稚而惹恼一些人，但它只是试图取悦所有年龄段和国家的观众。

·劣势 

最低分是可用性和开发人员标准。有时拖动交互似乎是被迫的，因为需要一个良好的互联网连接来加载所有这些可爱的东西。

2021 年 1 月最佳网站通过符号动画和 3D 传达情感。

·优势 

这个最佳案例，不仅因为它看起来很酷（字体本来可以更好），还因为它令人信服的音频叙述。几乎没有音乐，只有声音，这一事实加深了效果。

创作者选择了蓝色调色板，不仅代表海洋，还代表深深的悲伤。地球的动画上覆盖着网。

网页设计具有年度最令人信服的号召性用语按钮之一：当用户选择捐赠金额时，屏幕会通过视觉效果显示您可以为海洋做出多少贡献：

·劣势 

有时会为一些获奖者提供额外的报告。例如，移动卓越报告。在这种情况下，移动性的得分结果是最低的（性能差，加载时间长）。