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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
深色风格界面设计指南
0.0°
2018-10-27 好文转载 教程 原作者: 力力nevergg 举报 1964 5 5 0

作为一名设计师,制定和把控设计风格是我们的职责。在开始设计一个产品的时候,我们往往会根据产品的功能,受众,以及想要表达的情感来确定设计风格,其中配色是一开始就需要考虑的。在配色的选择上,最常用的就是白底黑字的浅色风格。

Image title


前一段时间疯传的 Google All White 设计风格,白色的界面非常干净清爽


浅色的配色之所以成为主流,是因为它有很多优点,最大的好处就是可读性非常强,根据研究表明,浅色背景上的深色文本的可读性要优于深色背景上的浅色文本,因此这么多年来,杂志和报刊从来都是白底黑字的,我们也习惯了这样的阅读方式,当需要设计的界面中有很多文字的时候,尽量还是要选择浅色风格。


以浅色作为背景还有一个好处,就是可以和任何品牌色都能很好得搭配,这一点是深色背景做不到的,现在流行极简的设计风格,白色和浅灰色的界面可以营造出干净的感觉,这种设计风格基本上可以适用大部分的产品。


深色风格界面


浅色风格的界面有如此多的好处,但还是有很多情况下设计师会使用深色,并且创造出很多惊艳的设计作品。和明亮的界面不同,黑色的背景可以最大程度得减少视觉干扰,集中用户的注意力,并将主体产品凸显出来,深色风格的对比度更强,也更容易营造氛围。

Image title


苹果的 Apple TV 官网页面,使用深色背景,模拟了一个晚上在家看电视的场景,很有身临其境的感觉,让产品脱颖而出


还有一个优点是,深色的配色风格很容易表现出科技感和品质感,因此在很多科技行业和奢侈品行业,深色风格都被广泛使用,如下图中的百年灵手表官网就使用了暗色作为主色调:

Image title


黑色的背景让前面的手表更加突出,让人把目光焦点放到手表上,细节彰显的淋漓尽致


另外,在这个信息爆炸的时代,人们越来越离不开手机和电脑,据统计,平均每人每天需要盯着屏幕至少两个小时以上,一些特殊的行业比如我们设计师,程序员,还有金融从业者,很多人甚至每天需要在电脑面前工作十几个小时,眼睛疲劳和眼睛疾病成为了很大的困扰。暗色背景可以最大限度得减少光线对眼睛的刺痛,因此很多专业软件,比如 Ps,编程软件以及炒股软件的界面都是深色的,以保护使用者的眼睛。

Image title

Image title

使用深色背景的专业软件 Bloomberg Anywhere iOS 和 Atom 编辑器


大多数与娱乐相关的设计,都使用了深色的配色,深色的配色可以让用户获得更沉浸的体验,不容易被其他元素干扰,并且这是和用户的使用场景相关的,当人们结束了一天回到家,天色渐晚,打开电视和游戏机,开始最惬意的放松时间,不希望被打扰,和深色的配色风格完美契合。因此我们可以发现,不管是各大电视应用,还是 Steam 和暴雪战网这些游戏平台,都采用了沉浸式的深色主题。

Image title

Image title

使用深色背景的游戏平台和 NETFLIX


需要注意

有些情况下需要我们警惕,不适合使用深色主题,其中有一个就是视觉层级比较复杂的时候,比方说如果需要设计一个复杂的 Dashboard 控制中心,里面有各种不同的组件,表单和图形,层级也非常复杂,用深色的界面很难将这些元素做出区分,而浅色的界面上可以使用各种灰度和投影来帮助我们布局,可以使用的颜色也更多,更容易设计出有条理的界面。

Image title


当界面中元素比较复杂的时候,尽量使用浅色背景


小诗有一个还不错的微信订阅号,里面有很多UI方面的学习资源和素材,还有一些破解版的软件(ps2019、ai等)有兴趣的朋友可以关注“联梦实训基地”订阅号,了解更多!

更新:2018-10-27

收藏

5人已收藏

联梦小诗

有想学设计的可以私聊我哦

  • 7

    作品

  • 3

    粉丝

  • 1

    关注

  • 一款可以使用将近 2000 款字体的神器,你值得拥有!
  • UI 设计新人如何接私单?来看高手的经验!
  • 用这个方法来自学UI,你才会有成长
  • AI教程!手把手教你打造精致的进程条
相关标签

    猜你喜欢

      2018-10-27 好文转载 教程 原作者: 力力nevergg 举报 1964 5 5 0

      深色风格界面设计指南

      0.0°

      你确定要举报深色风格界面设计指南

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年10月27日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      5
      5
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录