中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：隨著iOS 13的發(fā)布，深色模式逐漸走入我們的視野，用戶也逐漸開始使用深色模式；深色模式采用文字前景與深色背景的對(duì)比度，在設(shè)計(jì)方面也有一些難題；本文作者分享了關(guān)于深色模式的歷史以及對(duì)深色模式的理解，我們一起來看一下。

近一年，隨著iOS和安卓陸續(xù)支持了深色模式，各個(gè)團(tuán)隊(duì)的一通操作，也的確為用戶帶來“眼前一黑”的體驗(yàn)，深色模式也成為了前陣子業(yè)界最火的話題之一。

只是當(dāng)設(shè)計(jì)師看了無數(shù)的關(guān)于深色模式的討論；當(dāng)無數(shù)產(chǎn)品跟進(jìn)上線了深色模式；再當(dāng)無數(shù)App的深色模式被罵的改了又改，回頭來看看，你說的黑，到底是什么黑。

一、我所經(jīng)歷過的深色模式

雖然說，我真正開始做UI設(shè)計(jì)是近年，但是曾經(jīng)還是體驗(yàn)過很多深色模式的界面的；甚至有很多產(chǎn)品，天生就是深色模式。

可以發(fā)現(xiàn)，史前的深色模式，要么是因?yàn)榧夹g(shù)原因，要么就一些對(duì)注意力和對(duì)比度需求比較特殊的場景，還有可能是因?yàn)?#8230;微軟的Geek們一些對(duì)深色的一些蜜汁執(zhí)著吧。

1. 故事的開始其實(shí)都是深色模式：命令行界面

啥？這也算深色模式？你說的對(duì)，要說深色模式是個(gè)近年來才進(jìn)入我們視野的話，其實(shí)深色模式真的是一個(gè)古老的東西，甚至比現(xiàn)在大行其道的“淺色模式”歷史更悠久。

所以，這個(gè)深色模式，要追溯到什么時(shí)候呢？大概就是這個(gè)時(shí)候吧；畢竟那個(gè)時(shí)候，CRT顯示器要不就是黑屏，要不就只顯示白點(diǎn)，那只能這樣了。

但是等到GUI出現(xiàn)之后，界面就變成了白色；除了視覺上的變化，在交互上，其實(shí)GUI和命令行最大的設(shè)計(jì)上的區(qū)別，是產(chǎn)生了“容器”和“空間層級(jí)”的概念。

不得不說，GUI真是一個(gè)偉大的發(fā)明呀。可是界面層級(jí)的問題，在白色界面下得到了很好的解決，這個(gè)也恰好是今天在做深色模式的時(shí)候，界面上最大程度被削弱的信息部分。

既然有一個(gè)“容器”，那必須得有個(gè)底，而且大家都習(xí)慣于白紙黑字，所有的界面都變成了白色了，好像白色會(huì)給人一種更加被“包裝好”的感覺；從此以后黑色界面的時(shí)代就過去了，只存在于黑客電影中。

而電腦，也逐漸成為了“白色家電”，和GUI設(shè)計(jì)的風(fēng)格融為一體。

2. 移動(dòng)深色模式的先驅(qū)：夜間手機(jī)閱讀器

2G時(shí)代，當(dāng)PC正在白色UI上一去不復(fù)回時(shí)，移動(dòng)端似乎在深色模式上找到了屬于自己的場景：夜間閱讀；UC瀏覽器 / Opera / Zaker / 各類信息流閱讀器。

因?yàn)樵诘凸庹障滦枰３值蛯?duì)比度來護(hù)眼，所以陸續(xù)推出了深色閱讀模式；這也是深色模式在GUI時(shí)代第一次走進(jìn)了大眾的視野中。

3. 讓人無法接受的深色模式：Windows高對(duì)比度模式

在Windows推出了相當(dāng)長的一段時(shí)間里，黑色界面就不再出現(xiàn)了。

但是準(zhǔn)確的說，實(shí)際上保留了一個(gè)主題功能；這個(gè)主題可以讓用戶設(shè)計(jì)用戶界面的配色，從比較早期的Windows開始（忘了具體是哪個(gè)版本），Windows保留了高對(duì)比度的主題。

（雖然這個(gè)效果真的…沒辦法接受）

可能也是因?yàn)闆]怎么走心吧…也可能它只是一個(gè)高對(duì)比度模式，微軟對(duì)于容器和控件層級(jí)的解決辦法，就是通過白線來分割；雖然看起來非常沒有質(zhì)感，不夠優(yōu)雅，但是的確能解決問題。

它從來沒有真正流行過。但是可以看到，微軟的設(shè)計(jì)師心中，也許還是為黑色主題留了一塊位置的；結(jié)果過了一段時(shí)間，他們果然找到了方向，在一款不入流的MP3上線實(shí)驗(yàn)了。

4. 深色中的曙光：Zune UI

在10多年前，iPod以及其夸張的流行度橫掃全球的時(shí)候，曾經(jīng)冒出來各種“iPod殺手”；但是這些大多數(shù)都是噱頭而已，并沒有真正的對(duì)iPod造成影響。

但是有一款同樣不入流的MP3，它雖然依然沒有對(duì)iPod市場造成影響，但是設(shè)計(jì)品質(zhì)卻尤其的高，并且極大的影響了后代的UI設(shè)計(jì)，并且就是Zune。

Zune是2006年發(fā)布的，它從來沒有流行過，自身系統(tǒng)生態(tài)不行，還碰上了iPod這種魔鬼對(duì)手；但是你很難想象這樣的UI是在08年的時(shí)候出現(xiàn)的，如此扁平、現(xiàn)代、簡潔又優(yōu)雅。

這里展示一下我家收藏的Zune HD：

那時(shí)候的Dark Mode，非常直白的用3D來表達(dá)了界面層級(jí)，甚至還有景深、視差滾動(dòng)等十分大膽的界面效果。

靜態(tài)視覺上看起來非常扁平，但是加上動(dòng)效后就很好的凸顯了界面層級(jí)；背景的黑色，就好像無盡的太空，而所有的組件都是在空中漂浮的，給人科幻的想象；加上動(dòng)效和冷酷的線條，整體看起來非?？帷?/p>

5. 究極版的Zune UI：Windows Phone

是一個(gè)不入流的操作系統(tǒng)…但是這段歷史一定是軟粉很熟悉的了；Windows Phone首發(fā)的時(shí)候，我入手了臺(tái)諾基亞的Lumia 800。

先不說這個(gè)和主流操作系統(tǒng)極度差異化的UI設(shè)計(jì)，這個(gè)暗色主題是真的很優(yōu)秀。

來，聊聊暗色主題——Lumia 800作為WP的首發(fā)機(jī)型，使用的是AMOLED屏幕。

這個(gè)帶來了什么結(jié)果呢？就是屏幕的邊界感幾乎沒有了；當(dāng)年還沒有全面屏，手機(jī)邊框還可以停航母，但是這樣的UI設(shè)計(jì)的確讓邊界感變得很低了，看起來屏幕內(nèi)容和機(jī)身更加整體。

另外，它的動(dòng)效也更流暢了，雖然沒有容器，但是依然可以通過酷炫的動(dòng)效、視差滾動(dòng)等極度有創(chuàng)意的方式來區(qū)分界面層級(jí)，真的是…（默默豎起大拇指）。

可惜，這些視覺效果極佳的界面，可能還是比較浪費(fèi)空間吧，后期在Windows Phone 10中也沒有保留下來，也隨著Windows Phone的淡出退出了歷史舞臺(tái)。

在那個(gè)時(shí)候，還是白色UI的天下，無論是Windows，iPod優(yōu)雅的All-white設(shè)計(jì)，大家都在忙著給界面做上實(shí)體的質(zhì)感，這樣的設(shè)計(jì)必然是過于超前的。

超前一步是先鋒，超前兩步是先烈；微軟在深色模式上的執(zhí)著，就這樣成為了歷史的先烈，一直沒有進(jìn)入主流的視野。

但是這樣超前的設(shè)計(jì)理念，一直保留到了今天，并且后繼有人了。

二、今天進(jìn)入我們視野的深色模式

很神奇的是，對(duì)于深色模式，iOS和Android給出的規(guī)范確實(shí)是不同的方向的；我想當(dāng)年早早的做了深色/黑夜模式的廠商，也沒想到今天竟然會(huì)發(fā)展成這樣吧。

深色模式是如何進(jìn)入我們的視野的？

我們可以看到在過去的2年中，曾經(jīng)出現(xiàn)過2個(gè)高峰：

• 第一個(gè)高峰是去年WWDC，蘋果第一次發(fā)布了iOS13的測試版，并且最大的特性就是支持了深色模式。
• 第二個(gè)高峰就是隨著iOS 13隨著iPhone 11系列正式發(fā)布，大量的App開始為深色模式適配。

1. 深色模式到底有啥好的？

為啥要做深色模式？大概就4點(diǎn)：

專注內(nèi)容：深色和淺色在空間關(guān)系的感知上，的確是有很大差距的。

可以說，之所以深色UI帶來最體驗(yàn)上的差別，就是讓屏幕看起來更無界，更專注于內(nèi)容；基于這樣的需求，有些產(chǎn)品天生需要更多的專注力，一開始就是黑的；例如視頻播放器、開發(fā)工具、游戲平臺(tái)、股票平臺(tái)之類的產(chǎn)品。

另外，蘋果應(yīng)該還是非常希望弱化跑馬邊框和劉海的存在感的；在淺色模式下，會(huì)加劇跑馬邊框和劉海的存在感，但是在深色模式下，界面UI就會(huì)立馬和機(jī)身融為一體——這也是為何蘋果也十分樂意擁抱深色模式的原因。

體驗(yàn)刷新：目前有很多手機(jī)系統(tǒng)或者App提供了換膚的功能。但是這個(gè)換膚大多都帶有很強(qiáng)的個(gè)性和主題性，每個(gè)主題能命中的用戶其實(shí)并不是很多；相比之下，直接把整個(gè)系統(tǒng)變黑，新鮮感滿滿，接受度也很高。

降低界面刺激：在OLED的屏幕下，深色UI會(huì)使得像素點(diǎn)完全不發(fā)光，只保留有內(nèi)容的成分，大大降低了屏幕的亮度，也降低的對(duì)眼睛的刺激；很多車用的界面一直是深色UI，就是為了防止夜間屏幕亮度對(duì)于駕駛員過于刺激了。

持久續(xù)航：最后，這個(gè)僅僅是在OLED屏幕上，深色模式的確能降低每個(gè)像素的發(fā)光量，從而達(dá)到節(jié)約功耗，提升續(xù)航的效果。

2. 太難了，一上深色模式馬上就被罵

深色模式雖然好處多多，iOS 13正式上線也1年時(shí)間了，但是剛開始這段時(shí)間的好多App，每上線了深色模式，卻被輿論推上了風(fēng)口浪尖。

我認(rèn)為由于不同的用戶對(duì)于深色模式的預(yù)期不一樣，有些用戶的預(yù)期是一個(gè)低對(duì)比度的黑夜模式，有些用戶只是想換個(gè)主題而已；導(dǎo)致設(shè)計(jì)師兩邊不討好，有些產(chǎn)品的深色模式也是被罵的改了又改。

3. 暗黑模式 or 黑夜模式？

隨著iOS和Android系統(tǒng)級(jí)支持，正式把深色模式帶進(jìn)了尋常百姓家，不同的產(chǎn)品大面積的開始適配深色模式。

現(xiàn)在的深色模式。和以往不同的是，這是近年來第一次深色GUI進(jìn)入了主流視線，而今天的各種容器變得更加多變，層級(jí)更加豐富。

iOS使用不同的灰色和動(dòng)效來表達(dá)界面層級(jí)，而Android主要通過陰影來表達(dá)，所以底色不能做成純黑，不然陰影就體現(xiàn)不出來了。

所以這個(gè)真的是不同人的期待都是不一樣的。

三、微云的深色模式落地

眾所周知，微云為用戶提供了非常強(qiáng)大的照片和文件的備份功能，用戶有非常大的機(jī)會(huì)在夜間或者系統(tǒng)的深色模式下，查看文件和各種媒體。

所以，不管是僅僅刷個(gè)深色主題，還是降低視覺刺激，這兩邊的用戶需求都是合理的，其實(shí)并不沖突；因此在真正設(shè)計(jì)深色模式的。

深色模式并不是簡單的把整個(gè)界面反色了那么簡單，還是要考慮到所有用戶的需求，在設(shè)計(jì)啟動(dòng)前期就定義了適配原則。

體驗(yàn)一致：

• 操作系統(tǒng)內(nèi)體驗(yàn)一致：參照iOS其他原生App體驗(yàn)建立設(shè)計(jì)原則；
• App內(nèi)體驗(yàn)一致：從控件層面入手刷新體驗(yàn)。

內(nèi)容聚焦

• 降低邊框存在感：純黑底色，充分發(fā)揮OLED屏幕的無邊界的感受；
• 降低異形屏對(duì)內(nèi)容容器邊框的破壞：降低iPhone劉海存在感。

視覺柔和：

• 采用純黑大標(biāo)題底色，上劃時(shí)漸變出深色毛玻璃效果，并且降低標(biāo)題欄的透明度；
• 適用非純白字色，防止頁面對(duì)比度過高導(dǎo)致夜間對(duì)眼睛的刺激太強(qiáng)；
• 重新審視分割線的運(yùn)用，對(duì)于分割容器用的分割線做了重新設(shè)計(jì)，改用色塊來分割。

項(xiàng)目落地時(shí)，像微云這樣的大型項(xiàng)目，有著幾百個(gè)頁面，直接一個(gè)一個(gè)頁面刷一定會(huì)出一些問題，所以需要從抽象到具體，逐漸落地成型。

1. 色板更新，注意Check對(duì)比度

在更新色板時(shí)，需要特別注意的就是對(duì)比度。

對(duì)比度這個(gè)東西，在黑暗模式下變得尤其為妙；如果品牌主色是一個(gè)相對(duì)比較深的顏色，即使可能飽和度比較高，在深色模式下依然會(huì)導(dǎo)致對(duì)比度不足。

如何Check對(duì)比度是否符合要求呢？這里推薦一個(gè)網(wǎng)站可以參考：http://www.msfw.com/Services/ContrastRatioCalculator

當(dāng)你輸入兩個(gè)色值后，會(huì)有個(gè)對(duì)比度的數(shù)值出來；推薦值是7:1是比較推薦的對(duì)比度，大于4.5:1是可用，但是基于視覺柔和的原則，3:1算是一個(gè)最小極限值；但是如果大面積的對(duì)比度過高，也不適用我們視覺柔和的原則。

2. 刷組件，輸出范例頁面，此時(shí)開發(fā)可以并行開發(fā)

由于在深色模式下，為了使界面看起來更渾然一體，各個(gè)容器之間的層級(jí)差異，深色模式加強(qiáng)了深色毛玻璃的運(yùn)用；毛玻璃蓋在內(nèi)容上會(huì)展示出迷人的背景模糊效果，在一級(jí)界面中的導(dǎo)航欄都采用了這樣的設(shè)計(jì)。

定義各個(gè)容器的高度，并將各個(gè)高度的容器賦予統(tǒng)一的底色。

在定義了大規(guī)則后，就可以輸出給開發(fā)正式動(dòng)工了。

3. 梳理所需的模塊，并輸出所有的一級(jí)頁面

由于不是所有的規(guī)則都是統(tǒng)一的，因此還是需要同步的輸出很多典型的頁面，這個(gè)輸出頁面量大概是50+多個(gè)；但是由于在前期刷了組件，因此在這步并不太需要單獨(dú)去考慮每單個(gè)界面，大概拼湊一下組件，遇到問題單獨(dú)處理就OK。

4. 通過持續(xù)的交付體驗(yàn)，補(bǔ)充需要的資源

由于深色模式涉及的頁面眾多，狀況也比較多。有些比較深的頁面，可能沒有走查到；因此可以建立一份騰訊文檔，日常體驗(yàn)過程中遇到的任何問題，可以在文檔中記錄，并且由開發(fā)哥實(shí)時(shí)更新優(yōu)化情況。

四、工程師視角的深色模式

深色模式中，為了深色模式的落地，開發(fā)哥給了非常大的支持；我們采訪了騰訊高級(jí)工程師Gemi，聊聊開發(fā)視角的深色模式的適配。

1. 深色模式的適配中，希望得到設(shè)計(jì)師的輸出順序是怎么樣的？

在這個(gè)項(xiàng)目中，首先希望還是能得到一些最大的規(guī)則性的東西，例如導(dǎo)航欄是怎么變的，哪些控件是怎么變的，顏色都是怎么變的，這樣我們可以先開始工作；這樣可以完成大部分的頁面，等設(shè)計(jì)師給出了然后再去對(duì)照一個(gè)個(gè)頁面，再對(duì)一些特殊情況做特殊處理。

2. 開發(fā)層面，有什么前期的好習(xí)慣，會(huì)更加有利于后期做深色模式的適配呢？

首先，希望在設(shè)計(jì)上盡量使用統(tǒng)一的規(guī)范；因?yàn)樵谇捌谠O(shè)計(jì)師給到適配規(guī)范的時(shí)候，開始刷界面是比較快的，但是會(huì)發(fā)現(xiàn)有很多界面覆蓋不到；這是由于前期設(shè)計(jì)用了太復(fù)雜的邏輯，或者做了特殊邏輯；這種情況就需要個(gè)頁面單獨(dú)處理，這個(gè)過程比較費(fèi)時(shí)。

另外，因?yàn)槲⒃圃谇捌谟昧撕芏鄆OS的原生控件，這類控件在適配的時(shí)候可以直接適配，不需要做其他額外的工作。

使用原生控件的好處就是——蘋果會(huì)替你思考很多問題，節(jié)約很多后期的工作量；如果前期有定義色板，并且這個(gè)規(guī)則比較科學(xué)的話，那僅僅靠修改色板就可以解決很多問題。

3. 為了使開發(fā)者快速兼容深色模式，蘋果有做什么方便開發(fā)者的事情？

我感受到的最直觀的2件事情：

第一件事情是圖片資源的支持了深色模式：Xcode支持在原有的圖片資源基礎(chǔ)上，附加一個(gè)深色模式的圖片資源，就好像2倍圖和3倍圖；只要直接把深色模式圖片的資源拖入就行，并沒有額外的工作量。

第二件事情是顏色：比如說白色，你可以指定這個(gè)白色在深色模式下直接變成黑色；如果產(chǎn)品體量不大可以考慮這個(gè)快速適配的能力，不過這個(gè)功能在比較復(fù)雜的產(chǎn)品中不太好用，因?yàn)榘咨赡茉谏钌Ｊ较聦?duì)應(yīng)著不同的黑，這個(gè)時(shí)候還是色板最穩(wěn)妥。

五、結(jié)語

本文主要分4個(gè)部分：

• 第一章：聊了聊深色模式的歷史；
• 第二章：討論了今天不同的用戶對(duì)深色模式不同的期待，以及世界上OS大廠的站隊(duì)；
• 第三章：介紹了微云App在10月份的更新，適配深色模式的心路歷程；
• 第四章：談了一下開發(fā)視角的深色模式適配。

在蘋果等操作系統(tǒng)大廠的推動(dòng)下，加上業(yè)界對(duì)深色模式一通操作和討論之后，眾多App兼容了深色模式。

本文從深色模式的歷史，規(guī)范，設(shè)計(jì)以及實(shí)現(xiàn)的角度淺淺的聊了一下深色模式，也歡迎大家各抒己見。

本文由 @騰訊ISUX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議。