咨询电话:186 7916 6165 咨询电话:186 7916 6165 (微信同号)    在线QQ:181796286
DESIGN SHARING ·
设计分享
关注开优网络 关注前沿
网站设计如何使用单色调色板
视差效果比较:5点需要考虑的要素

暗色调色板以及动画的使用

发表日期:2018-04-12    文章编辑:南昌开优网络    浏览次数:6613    标签:

你有没有注意到最近正在“兴起”的一种“黑暗系”设计风格模式?设计师们正在尝试一些更有趣、偏向于黑暗的设计模式,并且将这种模式以及风格融入了动画元素中。

这些动画可以是简单的单个动作,或是比较复杂的进行多个元素或路径的动作,盘旋效果和完整的电影体验。现在,让我们深入了解这个网站设计趋势,并探索一些可以使它成为你项目中一个亮点的方法。

1.关于这个趋势




暗系风格动画是一种将两种元素结合在一起的趋势——一个是黑色单色调色板,而另一个是很酷的动画效果。其结果往往是令人惊叹的分层设计,微妙但表现出一种独特的个性。

尽管这一趋势在实际的网站设计中项目中并不好使用,而且在移动端的用户体验上并不能做好完美的适应,但这种视觉模式的驱动因素是兴趣的建立。由于黑暗元素的存在,用户不得不专注于设计的内容。

当用户看到动画元素并开始寻找其中微妙的变化和影响时,就会产生一个神秘的因素来驱动用户与这些元素进行交互或接触。然后,接下来会发生什么呢?

每一种网页设计都有不同的组合方式。没有哪种特定类型的动画效果是最好或最值得推荐和使用的,也没有哪种固定的颜色必须使用,尽管很多设计都偏向于使用丰富的黑色和灰色。

动画其实可以像悬停效果一样简单,也可以像专门制作的视频一样精致。

它之所以能起到作用的原因是因为它在用户之间唤起了一种神秘感,并且用户想要解决这个神秘的问题。

2.为什么它能发挥作用



实际上,我们很难解释为什么这种设计趋势如此有效。尤其是当你在没有看到实际的网站设计项目的情况下思考这个问题时,你不会想到暗系风格的动画模式会获得成功。

· 没有太多的颜色。

· 只有非常小的对比元素。

· 这些设计简直太简单了。

但也许这就是为什么这一趋势行得通的原因。它打破了规则,而这些元素足以吸引用户走进你的设计。

另一个因素是,黑暗系总是和“神秘”这一关键词紧密相连,并且,人们总是喜欢神秘的事物。他们希望自己能够看到其中隐藏的元素,或者解决一个复杂的问题。带有动画效果的暗色方案为用户提供了一种解开谜团的“原始冲动”。

这些项目也有明显的情感吸引力。基于黑暗的颜色在情感方面总是表现为喜怒无常的。这些调色板的颜色变化是复杂而有趣的(无论如何,从设计的角度来看)。这种富有深度的元素很难表达,但值得探索。

综合所有的情感和神秘感,你就能知道为什么用户会被这种视觉模式吸引。

3.它不一定只能是黑的



虽然大部分相关的设计都是采用黑色的调色板,但它们并不是硬性要求。

其他深色的色调同样也可以很有效,同时,它赋予设计师创造一个不同于黑暗动画设计的能力,并能够将色彩调色板结合与客户的品牌色基础。

无论你最后选择何种颜色,制作这些动画的关键在于丰富的色彩选择。一种混灰色调(混合一种颜色和灰色)或混黑色调(混合一种颜色和黑色)可以为单色调色板提供一个不同的范围(你可以参考上面案例中FedEx设计中不同的紫色)。

虽然对比不是这个设计趋势的重点,但它很重要。在单色设计中如果没有足够的对比度,动画就会迷失在背景中,使设计无效。

4.一些“预防点”

这种设计趋势并不适用于所有的网站设计项目,而且很难有效地做到这一点。暗系风格动画或背景也有一些你需要“预防”的缺点:

· 在移动设备上,这并不是很好的选择;

· 一些固有的兼容性或可访问性的问题;

· 有些用户可能没有足够的视觉兴趣;

· 这对导航和呼叫行动按钮可能具有挑战性;

· 环境条件,比如灯光等会使设计更加难以看到;

· 一些用户不会接受这种“严肃”的氛围;

· 用户可能很快会对设计感到厌倦,减在站点停留的时间。

5.关于尝试这个设计趋势的一些提示




如果你并不害怕这个设计趋势可能带来的挑战,并且有一个能够与暗色调动画设计方案相匹配的网站设计项目的话,那么你可以做一些事情来帮助确保项目的成功。

· 坚持单页/单屏设计:太多的时髦的设计元素会让人难以承受,如果你打算使用这个概念,请将其限制为一个单页或只是在一屏上展示。

· 使用对比色:白色文字在黑暗背景下非常有效,其他元素也一样。确保有关按钮、导航元素、消息和操作的元素很容易被看到或识别。虽然动画和背景可能没有明显的差别,但其他元素必须易于识别。

· 简化动画:过于复杂的动画可能会破坏设计的整体。坚持简单的动作和效果,不要太快。

· 分层设计:使这个概念工作的最终因素是分层设计。在背景和动画元素之间建立分离,使之具有真实的感觉。分层还将帮助你规划足够的对比度以使元素可见。

· 使用粗体文本:文本元素不仅仅只是包含大量的色彩对比,你可能需要使用一个醒目的粗体,以确保文本不会被“掩盖”于设计中。它应该跳出来,用粗体来强调文字,简单的笔触来确保字体的可读性。

6.接下来呢?



与任何设计趋势一样,这个趋势将在接下来的一段时间里继续发展。虽然我们无法预测接下来会发生什么,但有些设计却提供了线索。

在虚拟现实世界中,暗色和动画可能是一个有特色的设计,VR是目前游戏和视频的主要发展领域,它已经使用了大量的暗色。

这一设计趋势可能非常适合一些类型的项目,比如新的Blair Witch项目中的视频预告片/游戏网站。

黑暗配色方案已经存在一段时间了,但这一新的与类似彩色动画的转折是有趣的。它往往是设计师们绝对会感兴趣的趋势之一,这一部分是由于它给用户带来的挑战,而不是因为它的喜怒无常。

无论通过哪种方式,这种风格都被更频繁地使用。虽然它对仅仅对于某些类型的项目很有效,但它可能是混合设计的一种有趣的方式。在你选择将一个暗系风格动画设计加入你的项目必备元素清单之前,先尝试使用幻灯片效果或简单的一些交互动作,看看用户是否能够接受,然后在决定是否需要更完整和针对性的使用它们。