运动可以使一个网站脱颖而出——无论是好是坏。这是如何设计一个网站与运动为尽可能多的人享受。
巨大的力量是巨大的责任。那个老栗适用于蜘蛛侠,还为web设计师。
Webflow的高级品牌网页设计师,我的文字工作是使用Webflow来构建为Webflow来推动我们的平台的界限,探索和创新。
所以我认为永恒的蜘蛛侠的建议的本叔叔很多。Webflow是一个非常强大的平台,你可以使用它来创建一些美丽的经历。特别是在运动,我们会深入不久。但是我必须停止并认为只是因为我可以并不意味着我的东西吗应该。伊恩·马尔科姆博士(现在我们进入领土,但你明白我的意思的。)
因为网页设计师,我们有责任考虑在我们构建的一切潜在的伤害。和我爱我的工作的一部分原因是Webflow很多关心世界上做的好,特别是当谈到可访问性。我们希望我们创造的一切访问尽可能多的人。
所以,当我是负责在网站上为我们的合作没有代码设计2021创新和可访问性,我都在我的脑海中。和我学习一些新的技术,都是相当有效的。
当运动是有意义的——当它可以造成伤害
正如我所提到的,您可以构建非常复杂动画和交互Webflow站点上,而不需要知道舔CSS或Javascript。但是,正如我们设计师是不会做,我看到我们的一些社区成员感受欢乐的交互和花的力量设计趋势motion-heavy站点太远了。有时候,我们忘记使用动画高雅,忽视考虑所有观众,不仅仅是我们的设计师。
我有这种诱惑记住当我开始工作的任何代码Conf网站上。但创意团队开发了一些漂亮的插图来表示构件和元素的任何代码框架,展示这些作品旨在配合和协同工作工艺大于部分的总和。
这些插图乞求运动。我知道我们可以告诉这个故事更充分地如果游客可以看到这些元素春天生命——聚在一起,相互作用,构建美丽的东西。
这是一个实例,运动是有意义的。主题,是很重要的,与Webflow的设计界面,它是可能的。
但是我们需要考虑可访问性。运动敏感的人能体验眩晕或其他使身体生病了通过交互式的网页设计。过度运动的例子可以包括:mouse-triggered缩放、3 d缩放和模糊,视差效果,变速滚动、plane-shifted滚动,和闪烁的内容。
这就是为什么大多数移动和桌面操作系统,现在有易访问性设置,允许用户减少运动时的经验使用他们的设备视差的影响图标和在视频预览。
不幸的是,我是构建配置网站没有代码,我们还没有一个简单的方法来帮助我们的网站适应这些设置。注意:我们正在积极努力使易访问性相关的运动更容易管理。2021年4月,我们发布了一个更新确保smooth-scroll动画将尊重网站访问者的喜好禁用动画。请继续关注更多的改进我们的易访问性团队。
但是当我的同事在工程继续建造更多的可访问性的功能平台本身,我想找到一个方法来使用low-code解决的桥梁,为更多的人提供更好的体验——同样的方法中,我们鼓励我们的社区使用可访问性检查表。
经过几次试验,我登陆一个low-code解决方案,允许我为大家设计一个页面。通过创建每一帧交互svg和使用短CSS媒体查询,我可以自动将动画替换为一个静态插图的人已经告诉我通过他们的操作系统设置,他们不想运动。对于其他人,他们看到的交互来生命当他们登陆网站。
它是如何工作的:
创建动画为SVG文件
步骤1:框架完整的说明,确保外尺寸的长宽比,适用于将使用它。我用Figma,但您可以使用草图,插画家,Adobe XD,等等。
步骤2:为每个元素,将复制帧。你可能还需要一个额外的框架对任何元素,将覆盖一个元素,移动。
步骤3:在每一个复制帧,删除所有的元素说明除了将移动或覆盖另一个元素的元素。
步骤4:导出SVG文件的框架。
构建Webflow的动画
步骤5:绝对位置上的所有帧的Webflow。
得到一个简短的复习在绝对定位。
步骤6:每个SVG动画效果的不同的相互作用触发器中可用Webflow。
使用一个媒体查询隐藏动画
第七步:在您的项目中添加自定义CSS设置prefers-reduced-motion媒体查询和几类切换项目可见性的。
这是示例代码我使用:
了解更多关于使用自定义代码Webflow。
第八步:使用新的定制类添加到项目设置在一个Div包装设计师svg动画组和一个完整的,静态版本的说明。
现在,当一个网站访问者“减少运动”操作系统设置打开,你会自动提供一个静态版本的说明。作为奖励,如果你想改变你的互动,你可以编辑文件Figma和交换这些在Webflow——不需要追捕和编辑整个动画文件。
提供令人愉快的经历
最后,没有代码Conf网站收到好的反馈,甚至赢得了Awwward。我们发现识别尤其有意义,因为它表明,你可以优先考虑可访问性,同时创建一个漂亮的网站。
值得注意的是,运动的任何代码Conf网站上工作得很好,因为它相对微妙。仅仅因为Webflow支持prefers-reduced-motion,并不意味着设计师应该过载网站过度运动和假设用户设置会照顾的。过于依赖这些设置将负担你的网站访客——创建易访问的网站应该是设计师的责任。
底线是:使用微妙的运动可以帮助讲述品牌故事的细节。但是确保你有一个好的理由使用运动首先,确认你提供的经验将是愉快的,而不是有害的,尽可能多的人。
额外的资源
本文介绍了可访问性和设计运动的一个特定方面。关于制作网站的更多信息与运动更容易,看看这些资源:
了解更多关于构建一个可访问的网站在Webflow。
发表
2021年10月22日
类别
教程
.jpg)
