佳木斯新闻:做一个引起极度舒适的““深色”模式”,「到底有多」难?

admin 6个月前 (03-23) 科技 38 0

Sunbet (<申博>)

Sunbet (<申博>)www.1888ss.com{是当(前)各类}实时网站<中>‘更新最迅速’、影响力最大《的》网络综合【新闻共享平】台,旨《在》为您提供最新鲜最“{准}确《的》”热点时事,「这里有越搜越热《的》」最新最远话题,(还有热心)网友《在》‘线’交流, 让您抓[住世界最新一刻,{把握关注要点《的》最新}动态,<利用精>{准}权威《的》大数据「网络新闻平台」,真正实现坐家<中>,览世界《的》小目标,《在》短时间内先人一步获得最新资讯,‘引领网’络资讯新生活

,

本文来自微信公众(号):爱范儿(ID:ifanr), 作者[:<李超凡>,‘题图来自’:Medium


(盼望着),(盼望着),(微信《的》)“(‘深(色)模式’)”《正式上》‘线’了。


“(‘深(色)模式’)”“是这两年用户”呼声最高《的》〖功能〗之一,<不过> iOS “和” Android 也是去年才开始适配(‘深(色)模式’),似乎越是大型《的》〖应用〗“和”平台,《《在》推出》“(‘深(色)模式’)”<这个>‘问题’(上就越是谨慎)。



去年微信团队曾《在》微博 以打趣《的》口吻回应[称,“【不】忍心占用用户珍贵《的》夜晚”。「不打扰」,一直是(微信《的》)温柔。


可很「多」人不知道《的》是,要给用户提供一个引起 极[「度」舒适《的》“(‘深(色)模式’)”,【其实并不是简】单《的》从白变黑,尤其是对于一款国民级〖应用〗“来说”,当<中>涉及《的》设计“和”开发『量』,甚至不比重新开发一遍“少”。


(‘深(色)模式’)《的》黑,〖是什么黑〗


(‘深(色)模式’)(Dark Mode)‘也’被叫做「暗黑模式」,『顾名思义』,“它给人最直观《的》”感受,就是黑。


「但」“(‘深(色)模式’)”<要实现理想《的》视觉体>验,绝不是将底(色)变黑,【将文字变】白这么简单。Google 《在》 Material Design <中>对于(‘深(色)模式’)<中>列出《的》设计规范<中>,(第一条)就是“「不要使用」 100% 《的》纯黑”。



UI 设计师 Ilke Verrelst 曾指出[,不要《在》纯白背《景》上〖显〗示<纯黑文字>,<反之亦>然,「这是基本《的》」设计规则。


〖为什么〗〖呢〗?〖因为纯白(色)会反〗射所有波长《的》光‘线’,『而纯黑(色)会吸』收所有光‘线’,〖这〗是对比「度」最大《的》两种(颜(色)),白底黑字时, 文字过于刺 眼[[,而黑底白字时,『文字又』可能难以辨认。



【如果《在》同时一】个页面上【大面积使用纯白(色)或】者纯黑(色),「反而会《在》长时间阅读时」让 眼[睛感到疲劳。虽然有大『量』研究已经证明(‘深(色)模式’)并不护 眼[,「但」如果它让用户使用 app ‘时更’加不适,那同样与(‘深(色)模式’)开发{《的》初衷背道而驰}。


〖此外纯黑〗“和”纯白《的》高对比「度」,{会让页面}无法通过『阴影』效果来构建视觉层次。<比>如下图<中>两个方框<中> 灰(色)方块[,《在》左侧纯黑《的》方框<中>,几乎看不到 灰(色)方块[《的》『阴影』。而右侧深灰(色)方框<中>,『阴影』《的》变化则明〖显〗得「多」。


佳木斯新闻:做一个引起极度舒适的““深色”模式”,「到底有多」难? 第1张


其实“深灰(色)”也是很「多」〖应用〗《在》(‘深(色)模式’)<中>所使用《的》背《景》(色),这次微信更新《的》(‘深(色)模式’)里,聊天背《景》用《的》就是深灰(色)(#181818)


文字(颜(色))也是一样,比如《在》亮(色)模式下偏暗(色)调《的》文字,《在》(‘深(色)模式’)下会变得难以阅读。因此也需要选择合适《的》(颜(色)), 既[能清晰〖显〗示,「也减轻用户《的》视觉疲劳」。


佳木斯新闻:做一个引起极度舒适的““深色”模式”,「到底有多」难? 第2张


如果你觉得对比不够明〖显〗,“不妨来看一”下 Twitter “和” iOS 模式(‘深(色)模式’) 。Twitter 提供了两种(‘深(色)模式’),「分别是」“昏暗(Dim)”“和”“熄灯(Light out)”,(前)者背《景》(色)为深灰(色),后者基本是纯黑(色)。


从 Medium <上一位 作者[> Pudge 给出《的》对比图来看,《在》 Twitter 纯黑背《景》《的》(‘深(色)模式’)下「《的》」界面下,(通栏列表)几乎与背《景》融〖为一体了〗。而 iOS 《在》(‘深(色)模式’)下《的》这些地方用了稍亮《的》灰(色),感觉更加自然了。


佳木斯新闻:做一个引起极度舒适的““深色”模式”,「到底有多」难? 第3张


打开(微信《的》)(‘深(色)模式’),{你也能看到}类似《的》设计。《在》“『朋友圈』”“ 视频[(号)”“《扫一扫》”等可交互《的》〖功能〗栏上,都采用比深灰(色)背《景》更亮《的》灰(色)。


佳木斯新闻:做一个引起极度舒适的““深色”模式”,「到底有多」难? 第4张


由于(‘深(色)模式’)下容易出「现难以」区分两个元素《的》 情况[,这种方式能让(颜(色))《在》不【同《的》外观】模式下都具备足够《的》对比「度」。


不只是背《景》(色),《在》低对比「度」《的》(‘深(色)模式’)(下之下),一般模式之下《的》各种(色)彩几乎都要重新设计。


“比如很「多」” app 《的》品牌(色)饱“和”「度」都比较高,然而高饱“和”(色)则是(‘深(色)模式’)《的》大忌之一。正如(前)文所说,「这种对比「度」十分影」响视<觉体>验,因此必须降低这些(颜(色))《的》饱“和”「度」,比如 Google 《的》(‘深(色)模式’)就会给“『错误提示』”《的》红(色)一层 40% 透明《的》白(色)图层。


佳木斯新闻:做一个引起极度舒适的““深色”模式”,「到底有多」难? 第5张


『看起来容易非常容易』对不对?


对于一些轻『量』级 app {或许是}《的》,「但」对于一些规模庞大,代码结构复杂《的》 app “来说”,『要给各个页面』、每个图标“和”元素都重新“调整”配(色),〖真《的》会让程序员分分〗钟吐血。


如果把(‘深(色)模式’)看作给『房子刷漆』,给一间小『房子刷漆』《的》难「度」,“和”一个几十栋楼《的》大型小区无法〖显〗然无法相提 并论[。


佳木斯新闻:做一个引起极度舒适的““深色”模式”,「到底有多」难? 第6张


(对于月活超过) 11 亿《的》微信“来说”,这〖显〗然不是一件一蹴而就《的》事情。


很「多」 app 都做了(‘深(色)模式’),(真)《的》有那么难吗?


《的》确,《在》微信上‘线’(‘深(色)模式’)之(前),《就有一些》 app 就推出了(‘深(色)模式’),比如知乎,「但」这些〖应用〗《的》深(色)基本沿用了原来《的》“《夜》间模式”,体验一言难尽,可以参考下面这些用户《的》评论。


佳木斯新闻:做一个引起极度舒适的““深色”模式”,「到底有多」难? 第7张


很「多」人会把(‘深(色)模式’)与《夜》间模式划上等(号),「但」实际上两者并非完全是一回事。《夜》间模式{主}要照顾是暗《光条件》下《的》场《景》,而(‘深(色)模式’)还需要兼顾(亮光环境下)《的》使用。


『设计网站』 UX Planet ‘{主}编’ Nick Babich 列出《的》“「暗黑模式」 8 个设计{准}则”(就有这)么一条,“要分别《在》灯光“和”黑暗条〖件进行测试〗”。纵观现《《在》推出》(‘深(色)模式’)《的》 app,能让人《在》亮光环境下依「然愿意使用《的》并」不「多」。


除此之外,《在》一些〖应用〗上《的》部分功《能模块》,(往往还不能直接变)为深(色)。尤其是《在》一些文字编辑「《的》」界面,白(色)或者浅(色)背《景》才能「让人」产生“《在》纸张上书写”『《的》感』觉。


佳木斯新闻:做一个引起极度舒适的““深色”模式”,「到底有多」难? 第8张


俄罗斯最大《的》搜索引擎 Yandex 《在》设计邮箱客户端时就遇到了类似《的》‘问题’,后来他们通过一种基于 CSS 变『量』《的》方法解决,让(‘深(色)模式’)《在》保持一定对比「度」“和”亮「度」自适应地“调整”。


这样《的》‘问题’《在》很「多」电商 app 上更〖显〗明〖显〗,因为大『量』商品《的》图片“和” 视频[都是以浅(色)背《景》为{主}。如果要只把背《景》变深(色),就会〖显〗得十分刺 眼[。「但」如果要“调整”海『量』《的》商品图片底(色),工作『量』则十分巨大。


针对<这个>‘问题’,苹果给出《的》建议是采用“语义化(颜(色))”(Semantic Colors)进行适配。所谓语义化(颜(色)),就是不再通过某一(色)值来描述(颜(色)),{而是根}据用途来描述,『让界面元素可以自』动适配当(前)《的》外观模式。


去年被淘宝称为“史上难「度」最大适配”《的》 iOS 内测(‘深(色)模式’),(颜(色))《的》适配就是采用了“语义化(颜(色))”《的》原理。


佳木斯新闻:做一个引起极度舒适的““深色”模式”,「到底有多」难? 第9张

图片来自:‘阿里巴巴国际’UED


按照淘宝《的》介绍,(这种方案大大降低了对)所有页面进行进行(颜(色))语义化设置《的》难「度」,『让』绝大「多」数场《景》无需修 改代码就可以自[动适配(‘深(色)模式’),可以《在》短时间内快速、高质『量』适配(‘深(色)模式’)。


总《的》“来说”,给〖应用〗适配(‘深(色)模式’)《的》技术难「度」本身并不高。「但」要兼顾《的》细节却非常「多」,如果碰上『量』级十分大《的》〖应用〗,复杂程「度」就会超乎想象。


为什么需要(‘深(色)模式’)?


(‘深(色)模式’)《的》作用过去常【常被夸大】。其实(‘深(色)模式’)不仅不护 眼[,《在》很「多」场《景》其实反而会降低阅读效率。『有研究』视觉研究表明,人 眼[天生就是更喜欢(前)暗后亮(dark-on-light)


佳木斯新闻:做一个引起极度舒适的““深色”模式”,「到底有多」难? 第10张


「既」然如此,花费这么「多」资源适配(‘深(色)模式’)到底有没有必要〖呢〗?


谈论一款产品或一项〖功能〗《的》可用性,不能脱离用户《的》使用场《景》。(‘深(色)模式’)未必所有产品《的》设计趋势,「但」好《的》(‘深(色)模式’)却让不“少”必要《的》场《景》体验更加人性化。


爱范儿《在》之(前)一篇文章<中>,科普了(‘深(色)模式’)《的》用途。Android 开发者网站《的》黑暗{主}题开发指导则介绍了(‘深(色)模式’)《的》三大优势:


  • 大幅减“少”电『量』《的》消耗

  • 为视力不佳《的》用户与对强光敏感《的》用户提供更好《的》可视性

  • 让任何人都能《在》暗光环境<中>使用智能手机


不久(前)《财富》 杂[志发布了全球 100 个最伟大《的》现代设计,同时指出了好设计《的》标{准},已经从一种纯粹《的》产品(美学),变为了一个产品或《服务》能否更好地去实现特定目《的》、〖功能〗,以及能否为社会带来持续《的》影响。


对于 iPhone 、微信这些产品“来说”,(‘深(色)模式’)可以说是延续这种设计理念《的》一部分。


本文来自微信公众(号):爱范儿(ID:ifanr), 作者[:<李超凡>

Sunbet声明:该文看法仅代表作者自己,与本平台无关。转载请注明:佳木斯新闻:做一个引起极度舒适的““深色”模式”,「到底有多」难?

网友评论

  • (*)

最新评论

文章归档

站点信息

  • 文章总数:642
  • 页面总数:0
  • 分类总数:8
  • 标签总数:1010
  • 评论总数:267
  • 浏览总数:7544