恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
推荐一组优秀的黑色系网站
0.0°
2017-07-11 原创文章 经验/观点 举报 6518 3 7 0

黑色,是亮度最低的非彩色。黑色在不同的场景下有不同的含义,但黑色在设计运用过程中,经常给人传递的是一种庄重、神秘、秘密、稳重等等的一系列视觉感受,相比白色而言,黑色肯定显得没有那么纯白洁净和友好,所以我们在用黑色作为网站的主色调的时候,一定要慎重,因为用不好的话,可能这个网站就会给人一种消极感受。


当然,也有很多设计师将黑色用的出神入化的,今天我们一块来学习这些优秀的黑色系网站,分享一下到底这些网站好在哪里。


Image title

Gillemore 杜松子酒的网站,第一视觉感受应该就是酷、大气。的确黑色和白色的相互搭配可以营造出酷的视觉感受,除此网站中还运用了大量不同灰色来做调和,整个网站给人一种黑白灰相互碰撞的视觉体验,图片的选取也格外用心,在黑白灰基调的图片中,着重突出其中的一些彩色元素,使得网站变色活泼跳跃,不会太压抑沉闷,这样的设计无疑是很成功的。


Image title

MINI 5-DOOR HATCH这个网站我之前也拿来当过案例分析,在色彩对比的那一章节中。这个网站也是我个人比较喜欢的黑色系网站之一,整个网站首页设计采用了无彩色和有彩色的对比,整体画面色彩对比特别明显,容易彰显个性和主题。黑色的底色、白色的字体和灰色logo,无彩色的黑白灰都运用到了。有彩色选用了蓝色,比较明亮,也跟产品的颜色相呼应。在整个画面当中,倘若没有蓝色出现,画面会变得枯燥单调,加入蓝色之后,整个画面鲜活起来了。


Image title

除了上面的MINI采用这种黑色做网站的主色调,可以看到奔驰SLS AMG系列产品官网也采用了一样的黑色设计,色彩搭配也同样采用了这种无彩色和有彩色的搭配做对比。黑色和黄色的搭配可以起到警示的作用,特别醒目。想想我们路边一些警示牌,基本都是黑色和黄色搭配在一块的。采用的也是这种原理,黄色和黑色在一起就会变得很跳跃。除此还有很多汽车网站也喜欢用这种黑色做主色,主要可以凸显酷炫的视觉感受和速度激情感。


Image title

Procision摄像机官网,跟上面的两个案例有点相似,一样是黑色的底色,添加红色和白色做调和,网站第一眼看到的就是产品,这种表现手法特别容易突出产品。整个网站的表现形式都是一致的,很协调。除此,这个网站也采用了我前面说的,颜色叠加图片的表现形式。


Image title

Luiz Argenta这个网站,第一眼我以为是做智能家居的,仔细一看,其实是做葡萄酒的,界面沉稳但也温馨。对比前面的一些列网站,可以放心当黑色作为背景色的时候,产品的色彩选择跟黑色对比强烈的时候,这个情况可以看到整体的视觉效果是特别抓眼球的。


Image title

像上图禅道项目管理软件的英文网站,主色调采用了黑色和蓝色相结合,这个网站也是我在几篇分享中常拿来举例的典型例子,还是说到幻灯片的设计,上一篇的分享其实有跟大家说过,这种图片加颜色叠加的表现形式特别容易出效果,这个网站就是,其次,网站中加入一部分的白色和蓝色,会让整个网站充满活力和呼吸感。这个其实很重要,很多网站从头到尾都是黑色的,这样容易给用户产生一定的压抑感,所以设计师们可以适当的加入一些其他的颜色做调和。


Image title

AQUATILIS EXPEDITION这个网站特别酷,我给大家截图的不是他们的首页,而是内页设计。个人觉得内页的设计更出彩,虽然是黑色为主调,但网站还应用了多种表现手法,比如图片的叠加,五彩斑斓的图片设计师可以处理得统一协调,这是一种设计能力的体现,再来网站中加入了诸多的设计元素,小却精致,比如背景不是一个千篇一律的黑,而是加了一些类似细胞生物的元素,这些元素会游动,丰富了整个页面,增加了页面的活跃性。这个网站吸引我的第一眼不是设计,而是设计师在页面上花的一些小心思,和整个界面的整体配色。


Image title

除了上面说的一些汽车、运动、游戏类网站喜欢用黑色做主色之外,还有一类网站喜欢用黑色来表达,那就是一些个人网站、设计公司或是设计机构的网站,通常这类网站主要为了宣扬他们的个性。比如上面RONIN Amsterdam的网站。


Image title

Impero国外设计公司网站我之前也给大家推荐过,这个网站的黑色不是满屏的,它中间穿插了几个屏其他颜色的设计,使得整个网站不会太沉闷,也增加了网站的整体呼吸感。


Image title

Good Spirit Bar威士忌酒吧这个网站我喜欢这个配色,黑白加上这种咖色,给人一种休闲舒适的感觉。不过如果不看内容,这个网站很容易被误以为是个咖啡厅的网站。网站版式的上的设计其实都还不错,但是有个个人小的意见就是不知道设计师是否有意在一些衔接的地方留白的,个人会觉得在上下两个区块的衔接中间可以不用留白,因为网站中间已有大部分的白色做调和。当然,这也只是个人的意见,并非就是正确的,毕竟每个人的审美不都是一样的。


Image title

Loic Nottet 个人网站,这个网站就是纯黑白灰构成,网站主要就是酷,最后底部的白色设计很好,不突兀,但是也使整个网站鲜活起来。


综合我们上面给大家推荐的这些黑色系列网站,我们可以发现当黑色作为主色系时,大都会采用无彩色和有彩色的一个色彩对比出现,而有彩色的选取大都是饱和度纯度特别高的颜色,这样的颜色对比很容易出效果,也很容易抓眼球。但是黑色背景也要慎用,特别是文字内容多的情况下,黑底白字的识别性其实不高,会比较耗费用户的精力。


好了,本期的内容就分享到这里,如果你想要了解更多,想要看到更多的网站资源,可以联系小编,小编可以把相关网站链接打包给你。


更多详情可关注微信公众号:小乔设计,转载原文请标注出处!

更新:2017-07-11

收藏

3人已收藏

  • 19

    作品

  • 94

    粉丝

  • 0

    关注

  • 超实用!网站导航栏设计形式总结
  • 前端设计师如何提高UI界面中的阅读性
  • 如何设计一个交互好转化率高的表单
  • 前端设计师必收的5款免费响应式布局测试工具
相关标签

    猜你喜欢

      2017-07-11 原创文章 经验/观点 举报 6518 3 7 0

      推荐一组优秀的黑色系网站

      0.0°

      你确定要举报推荐一组优秀的黑色系网站

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年07月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      7
      3
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录