2021 年,网站设计还有什么看头 | 企划会议

我们发现了几个有趣的趋势。

△ Feels FM——一个以 emoji 表情符号为动力的点唱机。

过去一年的疫情影响了无数人的生活,在“后疫情年代”的世界,网站设计师的角色也会发生相应的变化。一个网站如何设计才能脱颖而出?人们会对什么样的内容感兴趣?网站设计又需要传递给读者怎样的信息?根据美国斯坦福大学的报告显示,75% 的用户仅凭视觉设计就会对公司网站的信誉度做出判断。

我们浏览了 2020 年至今颇受欢迎的网页设计案例,并在此基础上梳理了 5 个大方向,试图从交互性、适应性、传播策略和科技输出等几个方面呈现最新的网页设计趋势。

在过去一年出圈的网站设计

#01

/ 要玩得顺手 /

过去这独特的一年,让不少人终于有了成为“阿宅”的机会:上网课、在家办公、视频开会......有没有意识到,电脑屏幕在迅速霸占你的双眼? 这也让不少设计师和品牌方都迅速反应,以在网站增设一些交互设计来吸引读者驻留。

Nike React

https://www.nike-react.com/

△ 形象化展示产品枕头般的蓬松质感。图片来源|Nike Reactor 官网主页

这其实是 Nike 的一条产品定制线——Nike React,它是一款主打轻便的跑鞋。打开网页,就会出现各种个性化定制的选项,比如踩下去的质感(棉花感 or 弹跳感)、跑步时的应用场景(菜鸟 or 专业),包括颜色配色,都可以自主选择。

 为何有效 

# 以有趣的方式输出产品信息

# 交互性体验增加用户驻留时长

在 Nike 这条产品线的网页设计里,一般以文字形式呈现出来的产品信息,它都换成交互性游戏的方式,让屏幕那端的人瞬间抓住跑鞋的材质和特性:轻盈、舒适、便捷。而根据亚马逊关键词搜索分析排名工具 SEMRush 显示,如今每月有近 6000 万用户登录 Nike 的网站,平均每次都花费大约 7 分钟的时间。

无独有偶,在去年一整年,意大利品牌 Gucci 也上线了各种网页版交互性游戏,以吸引用户在线逗留,在居家隔离的情况下以游戏的方式了解新品内容。对很多服饰鞋履品牌来说,试穿和体验永远是最重要的。但是如何在接触实物前就把产品的特性告诉大家,就需要更有趣、更新鲜的玩法。

△ 由网站设计案例精选站 Awwwards 整理的 2020 年 Gucci 网页设计。图片来源|https://www.awwwards.com/

#02

/ 要看得顺眼 /

随着屏幕使用时间的增长,网页设计就必须考虑到在任何时刻都让人“看得顺眼”。你会发现,手机有不少 App 都支持起了夜间模式:微信有,Gmail 有,读书软件也有……这是顺应长时间阅读群体的全新设计方向。科技资讯网站 Slashdot 曾经发起过一项“关于其在线用户是否会在手机或电脑端使用夜间模式”的线上民调,数据显示,有约 68% 的用户愿意在手机和电脑客户端使用夜间模式。而根据澳洲创意设计素材网站 Envato 的设计趋势预测来看,夜间模式也是 2021 网站设计的重头戏之一。

estudio/nk

https://www.estudionk.com/en

△ 网站首页即可一键切换日夜模式。图片来源|estudionk.com 官网

来自巴西设计工作室 estudio/nk 在网页上设计了一个小按键,以便用户一键切换日夜模式。仔细观察的话,他们的夜间模式并不是纯粹的反色设置,而是相应调整了配色的灰度,还设计了一个视觉层次结构,突出高亮读者会注意的信息,把相对不重要的元素对比度降低。

 为何有效 

# 增强用户使用频次

# 有益视觉/电池寿命

# 个性化配色更受欢迎

虽然切换日夜模式看起来不过是轻微的调整,但这可以极大地增强用户的使用频率,并且让人愿意长时间在页面停留。Envato UI 设计师 Sean Feehan 表示,根据对蓝光曝光影响的研究来看,转向更多提供黑暗模式设置的产品,对人们的视觉和手机的电池寿命都有益。

△ 通过 Slack 插件支持可持续办公的页面,使用了墨绿+粉色的主视觉。图片来源|Greenlist 网站主页

不仅如此,人们对视觉舒适度的要求还延伸到了网站整个配色设计。除了适配日夜模式之外,网站的主色调也在逐渐走向舒适化。Envato 网站的 UX 设计师 Tahlia Giannopoulas 在这项设计趋势预测中表示,随着人们对自然问题的日益重视,不少网站配色也转向朴实的暖色调,而这与我们通常在屏幕上看到的明亮、炫目的冷色调相比,“是一个颇受欢迎的变化”。

#03

/ 要关注身心 /

在过去的一年里,健康危机成了许多人关注的主题,优先考虑医疗保健和情绪健康的设计也应运而生,它着重于向读者传达出积极的信息,而非沉重的现实。

Feels FM

https://feelsfm.co.uk/

Feels FM 是一个以 emoji 表情符号为动力的点唱机。直接选一个代表你此刻心情 emoji,输入你的心情和出生年份,就可以直接生成一张属于你的音乐播放列表。

△ 直接输入表情就可以创建歌单。图片来源|FeelsFM 官方网站

这个由 Studio Something 创建的在线点播平台,联合了苏格兰一家关怀情绪健康的慈善机构 See Me 一同制作,旨在为 8 至 26 岁的年轻人提供一个可以使用音乐表达自己感受的地方。

 为何有效 

# 符合年轻一代的语言方式

# 传递人与人之间相互支持的信念

此前,在英国广播公司 BBC 的一项调查中可以了解到,在 2012 年 到 2017 年的 5 年时间里,苏格兰寻求心理健康支持的大学生增加了三分之二,而在苏格兰儿童关爱和保护中心 CELCIS 透露出来的数据中, 只有 26% 的年轻人表示会告诉别人,他们自己有否在心理问题。

但 Feels FM 找到了适合年轻人的表达渠道,并且用并不复杂的提问方式,鼓励大家在线表达他们的情绪问题。在上线一个月的时间里,他们就吸纳了将近 7 万名用户,其中有 5000 名回答了网站上的问题,而且写下了自己当下的心情。

尤其是在疫情期间,更多网站在设计中融入了轻松愉悦的内容,比如表情包或者手绘插图。对于网页设计师来说,充满活力的设计,代表着人与人之间友好、包容和相互支持的信念,并能向外界传达出积极的信息ーー对“后疫情时代”的用户来说,这很重要。

△ 澳洲保险公司 AHM 和健康相关的主页插图。图片来源|AHM 网站主页

#04

/ 要旗帜鲜明 /

网页建站平台 Wix 旗下在线编辑器 editorx 出具的《2021 年网页设计趋势》报告显示,许多设计师已经把他们的创意技能“用于他们所信仰的事业,从抗议图形到呼吁种族、环境和政治正义的运动”。比如,在去年种族歧视成为热议话题的时候,Nike 也直接把标语从“Just Do It.”改成了“For Once, Don't Do It.”

△ Nike 为响应 #BLM 出的在线广告标语。图片来源|editorx.com

Patagonia

https://www.patagonia.com/activism/

△ 打开网站就能看到彰显着品牌理念的标语。图片来源|Patagonia 官方网站

户外服装品牌 Patagonia 的网站首页的一句“We’re in business to save our home planet.”(“我们为拯救地球家园而生。”)简单明了地向外界传达出他们呼吁的声音,他们的目标是利用其周边既有的资源,来应对这个时代的气候危机。

 为何有效 

# 建立品牌和用户之间的紧密关系

# 从社会议题出发传递品牌观念

眼下更多彰显性别、环境和政治正义的运动,也清楚地表明了这一点:读者需要旗帜鲜明的口号,品牌也需要直接传达出自己的立场和理念,让每一个读者对网站内容产生直接的认知。在 2021 年,网页设计将继续作为一种工具,和社会议题密切关联。

△ 英国女性卫生品牌 Bodyform 对生理期疼痛出的广告宣传。图片来源|campaignsoftheworld.com

#05

/ 要设身处地 /

在网页浏览的过程中,最容易让人有阅读疲惫感的是长篇文字内容。媒体网站也往往需要图片和场景的辅助,才能够完整地呈现故事本身。而一些新兴技术比如 AR 和 3D 场景重建,则可以吸引更多人进入虚拟现实中,美国一家网站建设公司 Webflow 表示,这种“将视觉效果、文本、视频和音频融合在一起的网站设计,可以提供丰富的用户体验”,这也让它们成为了网页设计的新宠之一。

Google Arts & Culture “蓝屋游踪”

https://artsandculture.google.com/exhibit/%E8%97%8D%E5%B1%8B%E9%81%8A%E8%B9%A4/mwISvFMz5yygKw

△“蓝屋游踪”的360°在线全景浏览,可点击门框步入展厅。图片来源|Google Arts & Culture

Google Arts & Culture 在多年前就推出了线上观展的体验,随着技术应用的逐渐深入,已经有越来越多展览项目能够让用户在线体验“实地考察”。比如这个《蓝屋游踪》的在线浏览项目,就可以通过鼠标指引走向,点击进入展厅或放大作品,再配合文字注释,观看一个老香港“社区博物馆”的方方面面。

 为何有效 

# 增加环境体验的深度

# 不同应用场景的支持

很长时间以来,网站的设计和排版都受限于二维的平面上,但如今可以应用更新的、当代的方式,为阅读体验增加深度,而随着“云逛展”、“在线时装秀”等应用场景的扩展,它也将是未来最新的设计趋势之一。

比如《纽约时报》这个项目,采访了一对位于罗得岛的夫妇,他们在过去几年间他们一直试图将自己居住的阁楼变成“艺术空间”。

△ 由数百张照片 3D 场景合成重建的屋内全景。图片来源|纽约时报

数以百计的书籍、唱片、画作四处堆叠,如果仅通过文字和照片形容清楚这些繁杂的信息变得很困难。《纽约时报》最终用一种 3D 场景的重建技术(“环境摄影测量”),拍摄了数十张至数百张静态照片,然后用软件使其“缝合”形成 3D 网格,读者便可以亲临其境般感受整个空间。

我们需要什么样的网站?

网页已经不是一个仅供人们获取知识的地方,优秀网页设计也绝非排版舒适那么简单。它牵涉到好玩的互动游戏、易于阅读的视觉体验,甚至是更个性的表达、价值观的输出。线上浏览是人们直观感受的第一步,建立起初步的体验感之后,才会去深入了解和认同品牌及故事背后的文化,并满足彼此不断变化的价值需求。

所以,你在关注什么内容,未来又想要看到怎样的网站呢?

(0)

相关推荐