首页 > 优化 > 关键词 > UI设计最新资讯 > 正文

UI设计暗黑模式指南,助你增强用户体验

2020-12-30 08:36 · 稿源:站长之家

从手机屏幕到大屏电视,黑暗模式的UI设计随处可见。暗黑主题更能表达力量、奢华、精致和优雅。然而,暗黑模式UI设计也带来多种挑战,如果没做好,就无法满足人们的期望。因此,在决定采用这种模式之前,设计师们应该先谨慎考虑。

不管怎么说,黑暗模式设计风格的数字产品已经成为一大趋势。虽然人们常说暗模式可以减少眼睛疲劳,但并没有证据证明这是真的。在某些情况下,它还被认为可以节省电池寿命。而在本文中,我们要说的是暗黑主题是一种美学选择。

暗黑模式VS与明亮模式

不是所有的界面都适合暗黑主题。设计师应该考虑品牌与文化的契合度,色彩心理,并考虑情感影响后再选择。这些都需要微妙的平衡。

比如对对于千禧一代来说,金融应用可能会通过暗黑主题达到很酷的效果,但它可能不适合针对普通人群的大型银行网站。当大家只想查看余额和支付账单时,过暗的色调、太时髦的设计可能会让人变得更令人沮丧。

B2B SaaS应用程序暗黑模式UI设计是出了名的困难。标准的web UI组件,比如数据表、小部件、表单和下拉列表,在暗黑模式的UI上看起来很奇怪。因为许多配色方案并不适用于深色UI,某些品牌和产品(取决于类型、背景和环境因素)并不适合这种模式,而且可能是一个不可克服的挑战。

那些之前从未接触过暗黑模式UI设计的设计师,如果决定投入其中的话,可能会发现自己陷入了一个艰难而未知的境地。在暗黑模式设计规范是多变的,陷阱更是层出不穷。

不过,使用暗黑模式UI设计也有很多好处:

  • 设计是极简的,只有少数内容类型

  • 它适合一些特定的情景,例如夜间娱乐应用程序

  • 创造一个引人注目的,富有特色的外观

有些情况下不推荐使用:

  • 有大量文本时(在深色背景下阅读比较困难)

  • 有很多混合的内容类型

  • 设计需要多种配色的情况下

图片

在暗黑模式UI设计中形成对比

暗黑主题不是黑色主题。我们可以把它认为是一种“弱光”主题。暗色UI的主要关注点之一是体现足够的对比度,这样就能区分视觉元素,文字部分也会更加清晰。大多数设计师会认为使用黑色是实现强烈对比的最佳选择。然而,最好不要使用纯正的黑色(#000000)作为背景或表面颜色,而最好留给其他UI元素,并尽量少用。例如,纯黑色可以用于小型UI元素或边框。

图片

谷歌的Material Design 暗主题推荐使用深灰色(#121212)作为暗黑主题表面颜色,“以更广泛的深度表达环境中的立体效果和空间。”此外,许多设计师建议在定义配色方案时,在深灰色中加入微妙的深蓝色。它倾向于为数字屏幕创造一个更好的暗色调和一个更令人愉快的暗黑UI调色板。

使用灰色调的一个优点是它能给设计师更多的空间,因为可以表达更广泛的颜色范围。灰色调色板也有助于创造深度,在灰色和黑色的对比下,更容易看到阴影。

我们需要特别注意暗黑模式UI中的文本对比。

Web内容无障碍指南(WCAG)要求“文本视觉呈现/文本图像至少要有4.5:1的对比度,大号文本以及大文本图像至少有3:1的对比度。”因此,设计师需要确保内容在暗黑模式下仍保持舒适易读。。

测试其他UI元素(如卡片、按钮、字段和各种显示器和设备上的图标)之间的适当对比度也是一个好主意。如果UI元素之间存在难以察觉的区别,那么设计就会过度混合,可能会变得枯燥乏味。

图片

关注颜色

颜色在暗黑UI中会很突出。最好使用较浅的、不饱和的强调色方案。此外,当与文本一起使用时,颜色需要通过WCAG的AA标准,即文本视觉呈现/文本图像至少要有4.5:1的对比度。

在为一个暗暗黑UI定义配色方案时,谷歌建议使用有限数量的颜色,以保留大部分空间使用暗色表面。使用差异的互补色会有帮助,比如有一个主色调和两个与主色调互补色相邻的颜色。正确的配色方案有助于创造良好的对比效果。

文本和基本元素,如按钮和图标,如果出现在暗黑色背景时,应符合易读性标准。如上图UI界面所示,除了白色之外的其他颜色可以用于文本和图标。

图片

使用对比色来提高可读性。许多因素影响颜色的感知,包括字体大小和粗细、颜色亮度、屏幕分辨率和照明条件。——苹果人机界面指南

少即是多:利用负空间

成功的黑暗黑UI设计的基本元素之一是巧妙地使用负空间。如果设计得不好,深色的UI会让数字产品显得笨重。为了平衡这一点,设计师可以利用极简主义设计中的负空间,让暗黑的UI显得更轻快。极简设计如果使用得当,负空间会让黑暗的UI更容易浏览,让人们更容易吸收信息。

元素之间的负空间使布局有效,更易于浏览。UI元素周围的大量负空间更能强调重要的内容,并提供必要的“呼吸空间”,以确保设计不会过度密集和凌乱。没有呼吸空间,人们可能不会去认真去浏览,从而错过重要的信息。

充斥着太多元素和文本的界面是高质量暗黑模式UI设计的坑。通过仔细考虑暗黑模式UI中的视觉层次,设计师可以使他们的创作更容易被浏览,从而提高用户体验

图片

样式:排版

暗黑模式UI中的每一段文本都需要仔细检查。主要关注两个方面:易读性和对比度。首先,是大小问题。文本必须足够大,以保证良好的易读性(深色背景下的小文本更难阅读)。其次,文字和背景之间对比效果要充分。

设计人员可以通过增加对比度和调整较小文本的字体大小、字符间距和行高来减轻可读性障碍。

对于普通大小的文本(如果不是粗体,则小于18点),W3C AAA推荐的对比度至少为7:1。这也适用于其他UI元素:图标、文本图像和文本标签(如按钮标签)。它不仅提高了可用性,也提高了用户体验。

图片

颜色深度

暗黑主题并不意味着平淡。通过灯光主题中,照明、阴影和阴影创造了一种深度感。对于深色UI更具挑战性,因为它们主要包含带有稀疏颜色的深色表面。尽管如此,设计师可以使用三到四个层次的立体面效果和相应的颜色方案来传达文本的深度。

为什么需要深度?大多数现代设计系统使用标高系统来传达深度。我们的视觉有深度感知,我们生活在一个3D的世界里。深度有助于强调界面的视觉层次。例如,前台的元素本身会吸引注意力,比如一个警告对话框。

表面的亮度不同,表示不同的标高水平。一个更亮的表面使它更容易区分组件之间的标高,它有助于看到阴影,使每个表面的边缘更明显。暗黑UI的深度可以通过提高表面亮度来展示。

设计每个层次的表面颜色需要小心。最好不要设置超过4或5个层次,并且需要考虑到文字的对比度。如果背景颜色不够深,不足以满足白色文本和表面之间至少15.8:1的对比度,则最高(也是最亮的)表面上的文本将不会通过4.5:1标准。在某些情况下,最好在设计系统中将元素的文本颜色设置为纯正的黑色(#000000),以便在浅灰色背景下获得良好的对比度。

暗黑模式UI设计案例

基于上述原则,以下是一些出色的暗黑UI设计例子:

图片

来源:Atom Finance

Atom Finance为复杂的外观使用了黑色主题,并将颜色限制为三种。布局使用负空间,极简设计。该网站使用微妙的阴影很好地表明不同的组件在用户界面标高。

图片

图片

这两个极简主义的暗黑主题网站都使用了粗体字体。小心地使用单一强调色的阴影,以符合暗黑模式UI设计原则。

图片

尽管在SaaS应用程序中使用黑暗主题存在一些挑战,但IBM的这个数据可视化指示面板是一个典型的例子。强调色的数量保持在最小,网站使用微妙的阴影来显示不同的UI立体效果。

图片

暗黑UI设计正确的手机应用:Wego、Spotify和苹果(Android和iOS)。

Wego、Spotify和苹果的手机应用在暗黑UI设计上做得很好。这些手机应用遵循深色UI设计的原则,即只在边框上使用纯正的黑色,在不同的标高水平上使用适当的阴影元素,以及有限的强调色。

总结

使用暗黑UI需要慎重对待。设计师应该为了跟随潮流去做,而应该有一个强有力的理由,并考虑内容、使用环境和展示设计的设备。

黑暗主题适合某些数字产品,但却很难在其他产品上有好的效果。简单性是关键。它们非常适合呈现极简的内容、数据可视化、媒体站点和娱乐平台。它们不适合复杂、数据量大的B2B平台、文本量大的页面和大量不同的内容。

对于那些准备尝试新的风格边界,通过情感和美学角度探索暗黑UI的勇敢设计师来说,这充满无限可能。

注:本文编译自medium,点击这里阅读英文原文

  • 相关推荐
  • 大家在看
  • 华为获自动驾驶相关专利,可提高安全性、系统可用性及用户体验

    ​专利摘要显示:本发明公开了人工智能领域中的一种自动驾驶技术,具体涉及一种道路可行驶区域推理方法,本发明还公开了一种道路可行驶区域推理装置。采用本发明实施例有利于在道路可行驶区域感知结果异常时可获取准确的道路可行驶区域,进而提高自动驾驶系统的安全性、系统可用性及用户体验。

  • 2021年你可以尝试的8个UI设计趋势

    2021年设计趋势将会如何?你是否准备好迎接3D插图设计、玻璃形态和色彩丰富的设计趋势了呢?话不多说,本文将跟大家分享一下8个UI设计趋势。

  • 广东欢太运营的小布助手 智慧体验获用户好评

    智能语音在不同场景下的交互体验,越来越受关注。作为伴随万物互融时代而生的欢太,是以互联网为基础的全球综合性服务平台,在智能服务中现已推出小布助手、快应用、全局搜索、智能家居、健康在内的多项服务和产品。其中欢太精心运营的小布助手深度研发交互技术,建立GUI+VUI协作机制 创新“快应用融合”能力,为市场提供了优质的解决方案,共创用户AI交互体验,市场上反响热烈,获得了众多用户的好评。(广东欢太小布助手与快应用

  • 魅族售后以用户为核心 魅族17带来优质5G旗舰体验!

    说起5G手机,目前市场上也是不少,但是那个售后一直不错的魅族科技旗下的魅族17系列却是一款较为独特的5G手机,笔者认为不论是外观还是操控层面来说,魅族17都做得不错,颜值实力并存。从上市伊始,魅族17系列就备受“煤油”们青睐。而现在魅族17系列已经在外界的关注中上市半年了,黄章还给予其一系列优惠活动,吸引了更多用户的关注和喜爱。魅族17做自己,拒绝同质化面对千篇一律的同质化严重的手机设计,想要在市场中尽快脱颖而

  • 花点时间改变传统鲜花消费理念,为用户打造更为优质的购花体验

    早些年,鲜花作为轻奢品,只能流行于节日或特殊场合中使用,为了能够让鲜花走进万千女性的生活中,花点时间对此推出了“每周一花”模式,用每周一束鲜花的小确幸创新鲜花销售方式,逐渐将鲜花消费变得大众化,亲民化。花点时间一直将鲜花作为美与幸福的象征,而都市生活节奏变得越来越快,很多白领根本没有机会去享受,花点时间采用线上订购,线下派送的方法,将鲜花带来的幸福传递给每一个人,用户在花点时间相关线上,比如公众号

  • 科技赋能演唱带来新体验,全民K歌持续给用户惊喜

    在近期结束的深圳科学技术奖励大会上,腾讯音乐娱乐(深圳)有限公司的“一种歌词文件生成方法及装置”专利技术在200余项受理申请中脱颖而出,成为2020年度深圳市科学技术奖公示名单中的25项专利奖之一。该技术最早被全民K歌用于用户清唱数据及歌词文件进行对齐,解决歌词文件中没有时间信息的关键难题。近年来,全民K歌在技术领域持续打磨精进,不断探索科技赋能K歌的应用场景,为用户打造更优质新潮的K歌体验。科技持续赋能K歌,

  • 三星停止为Galaxy S10系列推送基于Android11的One UI 3.0

    几周前,三星从瑞士开始向Galaxy S10系列智能手机的用户推送基于Android11系统的One UI3.0。在开始的时候推送更新都比较顺利,但之后三星突然暂停了新系统的推送,却未说明具体的原因。这意味着三星Galaxy S10系列手机用户要暂时无法获得Oned UI3.0的更新。

  • 慢病管理模式有哪些

    慢病防控做不好健康中国实现不了中国工程院院士王陇德在以加强慢病防控 建设健康中国为主题的座谈会上提出的问题可谓振聋发聩日前发布的中国居民营养与慢性病状况报告( 2020 年)(以下简称报告)结果显示 2019 年我国因慢性病导致的死亡占总死亡885其中心脑血管病癌症慢性呼吸系统疾病死亡比例为807防控工作仍面临巨大的挑战因此了解慢性管理模式积极进行慢病防控成为了每个人都必须做的

  • 外媒称Activision旗下团队参与《暗黑破坏神2》重制开发

    ​根据国外媒体彭博社报导,Blizzard 旗下知名角色扮演游戏《暗黑破坏神2》重制版正由《Tony Hawk 滑板高手1+2》开发团队Vicarious Visions 参与开发中,而Activision Blizzard 透过将这个200名员工的工作室加入Blizzard 开发工作后,进一步巩固对Blizzard 的控制权。

  • 暴雪于财报中透露《暗黑破坏神永生不朽》预计在2021年稍晚推出

    根据外电报导指出,动视暴雪(Activision Blizzard)于美国时间周四的财报电话会议中透露,《暗黑破坏神 永生不朽(Diablo Immortal)》似乎有望在2021年内问世。 《暗黑破坏神 永生不朽》自 BlizzCon2018公开以来,已经迈入第四个年头,尽管2020年末曾在澳洲等地区开放 Alpha 技术测试,但并非所有玩家皆能抢先体验。

  • 《暗黑破坏神4》或不会于2021年推出 新重制内容筹划中

    ​Activision Blizzard 于今日稍早的财报电话会议中指出,《暗黑破坏神4》和《守望先锋2》将不会在2021年推出,并且有新重制内容准备中。

  • 比特币+淘客模式没钱途!

    而最近在淘客圈子里面也有一个新项目,备受关注,那就是把淘客和比特币相结合。即你通过该平台领取淘宝天猫优惠券消费之后,平台把原本给你的现金返利,变成了等值的比特币奖励给你。

  • 字体超市春节钜惠,牛年设计就该这么玩!

    随着大众版权付费意识越来越强,使用“正版字体”需求也越来越大。为了解决“用字贵”的难题,半年前站长之家旗下的商用字体购买平台「字体超市」正式上线,收获不少用户的好评。

  • 苹果眼镜可检测用户何时分心 并提醒用户注意休息

    近日,苹果最新公布了一项可以通过苹果眼镜检测用户注意力的专利。专利称,该苹果眼镜可以随时检测用户的瞳孔状态,从而改变眼镜亮度,并监控用户注意力,甚至还可以提醒用户休息。

  • 华为应用市场揭晓2020年度榜单 深耕细分应用品类提升用户全场景智慧生活体验

    年末岁初,各大平台陆续揭晓年度榜单,对一年来的发展变化进行总结盘点。1月14日,华为应用市场正式发布2020年度榜单,共分为年度应用、年度游戏、最受欢迎应用、年度畅销应用、最受欢迎快应用以及多终端智慧生活应用6项子榜。作为全球TOP3、月活用户超过5.3亿的应用分发平台,华为应用市场公布的这份榜单值得探究。注重创新与实用 年度应用榜单深度挖掘精品应用华为应用市场年度榜单旨在通过对精品应用的评选和推荐,为用户提供更多有内

  • “货带人”的店播模式是抖音直播的新机会

    2020的直播带货市场几乎所有人都是以“风口”的看法对待,入局捞一波就走,无数明星的假实力被曝光,要知道这类型的曝光即相当于商业圈的封杀,整个品牌圈的黑名单,下次开播没有品牌方会找他们合作。

  • 看似简陋粗糙的广告,转化效果可能比设计精美的更好

    什么样的广告更能引人入胜?很多人可能觉得需要有精美、高级的设计效果,但事实真的如此吗?最近,站长之家看到了一个有趣的观点,也就是一些简单粗糙的广告转化效果可能比那些经过精心设计的表现更好,在这里跟大家做个分享。

  • 中消协点名网络杀熟:会员用户反而比普通用户价格更贵

    日,中国消费者协会在京召开“网络消费领域算法规制与消费者保护座谈会”。 中消协在座谈会上发表了“加强网络消费领域算法规制保障消费者知情权、选择权和公平交易权”的观点和建议。

  • 网易邮箱会员新体验:小惊喜不少!

    从2020年4季度开始,网易邮箱围绕会员进行了不少推广活动。一方面,与同属网易的严选及云音乐一起推出联合会员活动。用户只需要花163元,在获得邮箱基础版会员外,还可以额外获得严选PRO或邮箱基础版会员或云音乐黑胶会员资格;还进行了多次如买会员抽iPhone12、买会员可以1499元抢购飞天茅台等会员活动。视频会员、音乐会员这类会员产品,互联网用户已经相当熟悉。邮箱会员又是什么?在网易邮箱的会员官网中,展示了一系列的会员?

  • 查干湖冬捕“开锣”,直播电商开创售鱼新模式

    每年12 月下旬至春节前是查干湖渔民进行冬季捕鱼作业的黄金期,当地的胖头鱼也进入销售旺季。与往年不同的是,今年冬捕销售出现了通过直播电商销售的新玩法。1 月9 日,抖音一哥罗永浩在交个朋友直播间率先开启了2021 查干湖冬捕胖头鱼电商直播,当晚共卖出10000 斤查干湖特产胖头鱼,销售额超50 万元,全场观看人数超800 万,罗永浩同时被吉林省松原市授予“松原特产推广大使”的荣誉称号。地处吉林省松原市的查干湖,是中国十大淡?

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签