“黑白配”网站设计太单调?可能只是方法没找对

Time:

Author:漠漠睡

在网页设计中,色彩是提升页面视觉效果、吸引用户注意力的重要手段。设计师通过使用精妙的配色方案,来提升页面的可观赏性以及整个网站的“水准”。但随着人们的审美趣味不断改变和提高,对好看的要求不再局限于“五彩斑斓”,视线也越来越多地转向“单调”、“缺乏个性”的黑白色。而事实上,只要注入一定的设计思考和创意,元素搭配恰到好处、融合适当的交互,“黑白配”也能带给用户充满趣味和格调的视觉感受。

黑白图像元素

图片来源于网络

虽然说黑白图像是创造“无色”设计的方法,但这种“无色”在视觉上这种风格却往往极具冲击力。例如,在时尚杂志Imagista的网站设计中,不仅使用黑白图像作为网站主要的视觉点,网站的弹出广告也具有相同的黑白元素。即便没有颜色的点缀,只要选定合适的风格类型的图片,这种因为日常生活并不常见的“色彩”就更显新潮,黑白图像也可以马上吸引用户的注意力。

借用色彩营造层次

图片来源于网络

为庆祝世界著名导演库布里克诞辰90周年(3月7日为库布里克逝世周年日),粉丝为其设计了个人网站。网站展示了他生前的日常生活,以及他的电影创作道路,这其中包含了他执导的被誉为“现代科幻电影技术的里程碑”的《2001太空漫游》,以及世界影史最伟大的恐怖片《闪灵》。整个网站用经典的黑白作为主要配色,同时用明亮的红色点缀,借助视觉化的设计来驱动用户不断浏览,交互不仅在上下左右布局上富有层次,而且在视觉纵深上的考虑也十分周详。

打造沉浸式体验

图片来源于网络

这个百科知识网站致力于帮助用户了解宇宙和太阳系相关的知识,深入探索行星和宇宙空间。在宇宙黑暗的背景下,用户看到木星表面清晰的地貌所构成的纹路,在高度视觉化的UI设计和动效加持下的交互,让用户不再需要枯燥的阅读,而通过不断的浏览,就能了解头顶那片深邃、神秘的宇宙空间。整个网站的底色和宇宙的黑色保持一致,为用户极力营造遨游太空的沉浸式的体验。

视觉滚动差

这个个人作品集网页在设计上从背景图片,页面文案以及鼠标悬浮效果等,都采用了极其简约的黑白配色,把“黑白配”深入应用到网页的方方面面,使整款设计更加干净整洁、协调统一。结合视觉滚动差设计,整个网页更加流畅实用,而通过3D技术展示的页面图片和设计作品,也将整体视觉效果提升一个层次。

图片来源于网络

​水平滚动

图片来源于网络

水平滚动的网页并不常见,因为按照人们的浏览习惯来说,这算得上一种反人类操作。但就图片展示而言,水平滚动是最具优势的,它提供了展示作品更多细节的可能。在以上案例中,作品本身也非常适合采用水平滚动,黑白配色风格与作品图片形成的深刻对比,让作品的色彩和形象更加突出,让用户获得一种漫步于画廊的感受,实现创意和现实的完美结合。

创建趣味交互

图片来源于网络

用黑白色呈现的在线摄影和多媒体博物馆,本身就显得很有逼格,在采用黑白配色方案的同时,利用黑色页面背景和白色视觉光点,更易于突出展示界面内容的特点。另外,设计中还融入简单的交互,用户滑动鼠标,光点即跟随变化,进而展开或隐藏界面导航。

打造沉浸式体验

图片来源于网络

这个百科知识网站致力于帮助用户了解宇宙和太阳系相关的知识,深入探索行星和宇宙空间。在宇宙黑暗的背景下,用户看到木星表面清晰的地貌所构成的纹路,在高度视觉化的UI设计和动效加持下的交互,让用户不再需要枯燥的阅读,而通过不断的浏览,就能了解头顶那片深邃、神秘的宇宙空间。整个网站的底色和宇宙的黑色保持一致,为用户极力营造遨游太空的沉浸式的体验。

虽然提到黑白风格的网页设计,常常会关联到“极简主义”,但事实上黑白配色的应用是极其灵活的。只要艺高胆大,黑白配的网页设计,还有许多可与之“组合”的技巧供人探索,最经典的黑和白也能玩出无限花样。