围观|深沉有范儿的暗色系网站都是怎么设计出来的?

发布日期:2018-07-02
浏览次数:136
  

优秀的网站设计总是能够快速触动用户情绪,引起他们的情感共鸣。今天小飞就特意整理了一些氛围独特情绪深沉的暗色系网站,希望可以给大家带来一些启示。尽管大部分暗色系网站看上去可能有点"丧",但并不是所有网站都是这样的(当然这也与用户对暗色的认知有关)。快来一起看看吧!



暗色系设计

在了解暗色系网站设计之前,我们一定要首先明确暗色并不是单单指黑色,它还包括调过色(叠加黑色)的其他颜色或阴影色(叠加阴影)。以Hoologan这个网站为例,它使用了黑色的背景营造出了昏暗的氛围。但这里真正出彩的元素还是调过色的金黄色(暗金色),它既符合背景视频的基调,还让页面在视觉呈现上足够有趣。





下面我们来看看暗色系设计在网站中的不同应用实例:



叠加黑色

将黑色透明层叠加到图像上是营造深沉氛围、创建暗色系设计最常见的一种方法。当然,叠加的黑色不同,网站的呈现也会有所不同。你是想要叠加深一点的黑色还是浅一些的黑色?你希望用户透过叠加层看见图片或背景吗?一般来说,透明度低的黑色叠加层几乎会遮盖住背景上的所有元素,它在整个设计中的参与度会比较低;而透明度高的黑色叠加层既可以让视觉元素透过其呈现出来,还能与前景元素(如文本或CTA按钮)产生互动。Fhoke就在自己的网站上使用了透明度高的黑色叠加层。一方面,用户可以透过叠加层看到背景视频中的动作;另一方面,黑色叠加层同前景中的白色字体、橙色滚动栏都形成了一定的反差,更能抓住用户的视线。





阴影效果

阴影效果几乎是所有暗色系网站设计的标配,它可以给网站带来一种独特的神秘感,帮助激发用户的好奇心,引导用户在网站上进行探索。这也是为什么设计师们喜欢在网站中使用暗色系设计。在Clear Motion这个网站首页上,笼罩在汽车周围的阴影就起到了很大的作用。当用户看到这样的页面时,他们会不由自主地进行文本阅读,因为他们想了解会想知道:为什么这辆车看起来是这样的?它有什么特殊之处?





毫无修饰的暗色布局

相比那些放满各种元素的网站,毫无修饰的暗色布局反而是通过营造空无一物的氛围来吸引用户探索网站。当然,这里的暗色背景也助力不少(可帮助营造神秘感)。Dubois这个网站,虽然不是毫无修饰暗色布局的典型代表,但它的页面上也没有多少元素,只有很多个小点,这些小点和黑色背景一起让页面的神秘感更强了。仔细观察,你还会发现这些点是有颜色的,这是为了引导用户去注意网站的文本,因为Dubois网站的品牌信息和导航菜单设计不同于常规,它们是位于第一屏滚动页的下方(也就是第二屏的上方)。





字体选择

看到Punk is Not Dead的首页,你会有什么样的感觉?这个网站风格鲜明,视觉上很吸引人,是一种独特的暗色系设计。这主要归功于网站的字体选择,它奠定了整个网站的基调、如果网站字体换成普通的,网站感觉就会截然不同了。另外,字体的尖锐、不规则边缘和并不那么友好的可读性也让它与网站的主题"朋克"保证了高度一致。当然,这里的黑色背景和明亮字体色彩也为网站添色不少。





黑白配色

黑白配色是暗色系设计中很常见的一种配色方案。尽管黑白配色设计不像全黑设计有那么强烈的戏剧感,但它也是非常有趣的,因为黑白两色可以和其他各种元素形成反差和对比。黑白配色的强烈对比通常会促使用户视线快速移动。就像用户在看这个Super Rebel网站一样,他们的视线可能首先会停留在页面上方的黑色、白色图片,然后快速跳转到其他杂志风格的区块。当然,这种设计有时会用户觉得信息负载。





图片选择

图片的选取对于暗色系设计中的氛围营造也有很大的影响。Jimmy chin就在自己的"关于"页面上使用一张轮廓分明的黑色图片,这里图片的颜色、光线和选择成就了网站的整体情绪,风格独树一帜。相反,如果这张图片是多彩的,比如上衣是浅黄色,下身是灰色,整个感觉就会完全不同了。




氛围轻松的暗色系设计

尽管这大部分暗色系设计看上去都比较深沉,但暗色并不就等同于阴郁,它也可以用来创建轻松、活力一点的设计。Atom就使用了黑色背景,但页面上的卡通风格人物让网站显得十分欢快。



说实话,相比明亮色系设计,暗色系设计的用户接受度可能没有那么高,但这并不意味在网站中使用暗色系设计不可取,它同样可以用来传递特定的情绪信息,营造独特的氛围效果。如果你想要尝试这种类型的设计,不妨勇敢尝试一下吧!

登录后即可发表评论,立即登录.