你說的黑是什麼黑上榜經歷2020年11月30日 189期站酷文章總榜第5名

你說的黑是什麼黑上榜經歷2020年11月30日 189期站酷文章總榜第5名

你說的黑是什麼黑,觀點,騰訊ISUX,原創文章站酷網,中國設計師互動平台。

近一年,隨著iOS和安卓陸續支持了深色模式,各個團隊的一通操作,也的確為用戶帶來“眼前一黑”的體驗。深色模式也成為了前陣子業界最火的話題之一。只是當設計師看了無數的關於深色模式的討論;當無數產品跟進上線了深色模式;再當無數App的深色模式被罵的改了又改,回頭來看看,你說的黑,到底是什麼黑。

Chapter 1

——————————

我所經歷過的深色模式

雖然說,我真正開始做UI設計是近年,但是曾經還是體驗過很多深色模式的界面的。甚至有很多產品,天生就是深色模式。可以發現,史前的深色模式,要么是因為技術原因,要么就一些對注意力和對比度需求比較特殊的場景,還有可能是因為...微軟的Geek們一些對深色的一些蜜汁執著吧...

故事的開始其實都是深色模式:命令行界面

啥?這也算深色模式?你說的對。要說深色模式是個近年來才進入我們視野的話,其實深色模式真的是一個古老的東西,甚至比現在大行其道的“淺色模式”歷史更悠久,所以,這個深色模式,要追溯到什麼時候呢?大概就是這個時候吧。畢竟那個時候,CRT顯示器要不就是黑屏,要不就只顯示白點,那隻能這樣了。

但是等到GUI出現之後,界面就變成了白色。除了視覺上的變化,在交互上,其實GUI和命令行最大的設計上的區別,是產生了“容器”和“空間層級”的概念。

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

既然有一個“容器”,那必須得有個底,而且大家都習慣於白紙黑字,所有的界面都變成了白色了,好像白色會給人一種更加被“包裝好”的感覺。從此以後黑色界面的時代就過去了,只存在於黑客電影中。

而電腦,也逐漸成為了“白色家電”,和GUI設計的風格融為一體。

移動深色模式的先驅:夜間手機閱讀器

2G時代,當PC正在白色UI上一去不復回時,移動端似乎在深色模式上找到了屬於自己的場景:夜間閱讀。 UC瀏覽器/ Opera / Zaker / 各類信息流閱讀器。因為在低光照下需要保持低對比度來護眼,所以陸續推出了深色閱讀模式。這也是深色模式在GUI時代第一次走進了大眾的視野中。

讓人無法接受的深色模式:Windows高對比度模式

在Windows推出了相當長的一段時間裡,黑色界面就不再出現了。但是準確的說,實際上保留了一個主題功能。這個主題可以讓用戶設計用戶界面的配色,從比較早期的Windows開始(忘了具體是哪個版本)。 Windows保留了高對比度的主題。

(雖然這個效果真的...沒辦法接受)

可能也是因為沒怎麼走心吧...也可能它只是一個高對比度模式,微軟對於容器和控件層級的解決辦法,就是通過白線來分割...雖然看起來非常沒有質感,不夠優雅,但是的確能解決問題。

它從來沒有真正流行過。但是可以看到,微軟的設計師心中,也許還是為黑色主題留了一塊位置的。結果過了一段時間,他們果然找到了方向,在一款不入流的MP3上線實驗了。

深色中的曙光:Zune UI

在10多年前,iPod以及其誇張的流行度橫掃全球的時候,曾經冒出來各種“iPod殺手”,但是這些大多數都是噱頭而已,並沒有真正的對iPod造成影響。

但是有一款同樣不入流的MP3,它雖然依然沒有對iPod市場造成影響,但是設計品質卻尤其的高,並且極大的影響了後代的UI設計。並且就是Zune。

Zune是2006年發布的。它從來沒有流行過。自身系統生態不行,還碰上了iPod這種魔鬼對手。但是你很難想像這樣的UI是在08年的時候出現的。如此扁平、現代、簡潔又優雅。

(這裡展示一下我家收藏的Zune HD)

那時候的Dark Mode,非常直白的用3D來表達了界面層級,甚至還有景深,視差滾動等十分大膽的界面效果。靜態視覺上看起來非常扁平,但是加上動效後就很好的凸顯了界面層級。背景的黑色,就好像無盡的太空,而所有的組件都是在空中漂浮的,給人科幻的想像,加上動效和冷酷的線條,整體看起來非常酷。

究極版的Zune UI:Windows Phone

是一個不入流的操作系統...但是這段歷史一定是軟粉很熟悉的了。 Windows Phone首發的時候,我入手了台諾基亞的Lumia 800。

先不說這個和主流操作系統極度差異化的UI設計,這個暗色主題是真的很優秀。

來,聊聊暗色主題。 Lumia 800作為WP的首發機型,使用的是AMOLED屏幕。這個帶來了什麼結果呢?就是屏幕的邊界感幾乎沒有了。當年還沒有全面屏,手機邊框還可以停航母,但是這樣的UI設計的確讓邊界感變得很低了,看起來屏幕內容和機身更加整體。

另外,它的動效也更流暢了,雖然沒有容器,但是依然可以通過酷炫的動效、視差滾動等極度有創意的方式來區分界面層級,真的是...(默默豎起大拇指)

可惜,這些視覺效果極佳的界面,可能還是比較浪費空間吧,後期在Windows Phone 10中也沒有保留下來,也隨著Windows Phone的淡出退出了歷史舞台。

在那個時候,還是白色UI的天下,無論是Windows,iPod優雅的All-white設計,大家都在忙著給界面做上實體的質感,這樣的設計必然是過於超前的。超前一步是先鋒,超前兩步是先烈...微軟在深色模式上的執著,就這樣成為了歷史的先烈,一直沒有進入主流的視野。

但是這樣超前的設計理念,一直保留到了今天,並且後繼有人了。

Chapter 2

——————————

今天進入我們視野的深色模式

很神奇的是,對於深色模式,iOS和Android給出的規範確實是不同的方向的。我想當年早早的做了深色/黑夜模式的廠商,也沒想到今天竟然會發展成這樣吧。

深色模式是如何進入我們的視野的?我們可以看到在過去的2年中,曾經出現過2個高峰。第一個高峰是去年WWDC,蘋果第一次發布了iOS13的測試版,並且最大的特性就是支持了深色模式。第二個高峰就是隨著iOS 13隨著iPhone 11系列正式發布,大量的App開始為深色模式適配。

深色模式到底有啥好的?

為啥要做深色模式?大概就4點:

專注內容:深色和淺色在空間關係的感知上,的確是有很大差距的。可以說,之所以深色UI帶來最體驗上的差別,就是讓屏幕看起來更無界,更專注於內容。基於這樣的需求,有些產品天生需要更多的專注力,一開始就是黑的。例如視頻播放器,開發工具,遊戲平台,股票平台之類的產品。

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


體驗刷新:目前有很多手機系統或者App提供了換膚的功能。但是這個換膚大多都帶有很強的個性和主題性,每個主題能命中的用戶其實並不是很多。相比之下,直接把整個系統變黑,新鮮感滿滿,接受度也很高。


降低界面刺激:在OLED的屏幕下,深色UI會使得像素點完全不發光,只保留有內容的成分,大大降低了屏幕的亮度,也降低的對眼睛的刺激。很多車用的界面一直是深色UI,就是為了防止夜間屏幕亮度對於駕駛員過於刺激了。


持久續航:最後,這個僅僅是在OLED屏幕上,深色模式的確能降低每個像素的發光量,從而達到節約功耗,提升續航的效果。

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

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

我認為由於不同的用戶對於深色模式的預期不一樣。有些用戶的預期是一個低對比度的黑夜模式,有些用戶只是想換個主題而已。導致設計師兩邊不討好,有些產品的深色模式也是被罵的改了又改。

暗黑模式or 黑夜模式?

隨著iOS和Android系統級支持,正式把深色模式帶進了尋常百姓家。不同的產品大面積的開始適配深色模式。

現在的深色模式。和以往不同的是,這是近年來第一次深色GUI進入了主流視線,而今天的各種容器變得更加多變,層級更加豐富。 iOS使用不同的灰色和動效來表達界面層級,而Android主要通過陰影來表達,所以底色不能做成純黑,不然陰影就體現不出來了。

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

Chapter 3

——————————

微雲的深色模式落地

眾所周知,微雲為用戶提供了非常強大的照片和文件的備份功能,用戶有非常大的機會在夜間或者係統的深色模式下,查看文件和各種媒體。

所以,不管是僅僅刷個深色主題,還是降低視覺刺激,這兩邊的用戶需求都是合理的,其實並不衝突。因此在真正設計深色模式的。深色模式並不是簡單的把整個界面反色了那麼簡單,還是要考慮到所有用戶的需求,在設計啟動前期就定義了適配原則。

體驗一致

1. 操作系統內體驗一致:參照iOS其他原生App體驗建立設計原則,

2. App內體驗一致:從控件層面入手刷新體驗。


內容聚焦

1. 降低邊框存在感:純黑底色,充分發揮OLED屏幕的無邊界的感受,

2. 降低異形屏對內容容器邊框的破壞:降低iPhone劉海存在感。


視覺柔和

1. 採用純黑大標題底色,上劃時漸變出深色毛玻璃效果,並且降低標題欄的透明度

2. 適用非純白字色,防止頁面對比度過高導致夜間對眼睛的刺激太強

3. 重新審視分割線的運用,對於分割容器用的分割線做了重新設計,改用色塊來分割

項目落地時,像微雲這樣的大型項目,有著幾百個頁面,直接一個一個頁面刷一定會出一些問題,所以需要從抽像到具體,逐漸落地成型。

1. 色板更新,注意Check對比度

在更新色板時,需要特別注意的就是對比度。

對比度這個東西,在黑暗模式下變得尤其為妙。如果品牌主色是一個相對比較深的顏色,即使可能飽和度比較高,在深色模式下依然會導致對比度不足。

如何Check對比度是否符合要求呢?這裡推荐一個網站可以參考:

http://www.msfw.com/Services/ContrastRatioCalculator

當你輸入兩個色值後,會有個對比度的數值出來。推薦值是7:1是比較推薦的對比度,大於4.5:1是可用,但是基於視覺柔和的原則,3:1算是一個最小極限值。但是如果大面積的對比度過高,也不適用我們視覺柔和的原則。

2. 刷組件,輸出範例頁面,此時開發可以並行開發

由於在深色模式下,為了使界面看起來更渾然一體,各個容器之間的層級差異,深色模式加強了深色毛玻璃的運用。毛玻璃蓋在內容上會展示出迷人的背景模糊效果。在一級界面中的導航欄都採用了這樣的設計。

定義各個容器的高度,並將各個高度的容器賦予統一的底色。

在定義了大規則後,就可以輸出給開發正式動工了。

3. 梳理所需的模塊,並輸出所有的一級頁面

由於不是所有的規則都是統一的,因此還是需要同步的輸出很多典型的頁面。這個輸出頁面量大概是50+多個。但是由於在前期刷了組件,因此在這步並不太需要單獨去考慮每單個界面,大概拼湊一下組件,遇到問題單獨處理就OK。

4. 通過持續的交付體驗,補充需要的資源

由於深色模式涉及的頁面眾多,狀況也比較多。有些比較深的頁面,可能沒有走查到,因此可以建立一份騰訊文檔,日常體驗過程中遇到的任何問題,可以在文檔中記錄,並且由開發哥實時更新優化情況。

Chapter 4

——————————

工程師視角的深色模式

深色模式中,為了深色模式的落地,開發哥給了非常大的支持。我們採訪了騰訊高級工程師Gemi,聊聊開發視角的深色模式的適配。

Q1:深色模式的適配中,希望得到設計師的輸出順序是怎麼樣的?

A1:在這個項目中,首先希望還是能得到一些最大的規則性的東西,例如導航欄是怎麼變的,哪些控件是怎麼變的,顏色都是怎麼變的。這樣我們可以先開始工作。這樣可以完成大部分的頁面,等設計師給出了然後再去對照一個個頁面,再對一些特殊情況做特殊處理。

Q2:開發層面,有什麼前期的好習慣,會更加有利於後期做深色模式的適配呢?

A2:首先,希望在設計上盡量使用統一的規範。因為在前期設計師給到適配規範的時候,開始刷界面是比較快的,但是會發現有很多界面覆蓋不到。這是由於前期設計用了太複雜的邏輯,或者做了特殊邏輯。這種情況就需要個頁面單獨處理,這個過程比較費時。

另外,因為微雲在前期用了很多iOS的原生控件,這類控件在適配的時候可以直接適配,不需要做其他額外的工作。使用原生控件的好處就是,蘋果會替你思考很多問題,節約很多後期的工作量。如果前期有定義色板,並且這個規則比較科學的話,那僅僅靠修改色板就可以解決很多問題。

Q3:為了使開發者快速兼容深色模式,蘋果有做什麼方便開發者的事情?

A3:我感受到的最直觀的2件事情。

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

第二件事情是顏色。比如說白色,你可以指定這個白色在深色模式下直接變成黑色。如果產品體量不大可以考慮這個快速適配的能力,不過這個功能在比較複雜的產品中不太好用,因為白色可能在深色模式下對應著不同的黑,這個時候還是色板最穩妥。

Chapter 5

——————————

結語

本文主要分4個部分:

第一章:聊了聊深色模式的歷史;

第二章:討論了今天不同的用戶對深色模式不同的期待,以及世界上OS大廠的站隊;

第三章:介紹了微雲App在10月份的更新,適配深色模式的心路歷程;

第四章:談了一下開發視角的深色模式適配。

在蘋果等操作系統大廠的推動下,加上業界對深色模式一通操作和討論之後,眾多App兼容了深色模式。本文從深色模式的歷史,規範,設計以及實現的角度淺淺的聊了一下深色模式,也歡迎大家各抒己見。

感謝閱讀,以上內容由騰訊ISUX團隊參與設計,版權歸SUPERFICTION、騰訊ISUX分別所有,轉載請註明出處,違者必究,謝謝您的合作。註明出處格式:

文章來自公眾號:

騰訊ISUX

(https://isux.tencent.com/articles/qq-sf)

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。