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

編輯導(dǎo)讀：自從19年蘋果發(fā)布會推出了深色模式后，越來越多的APP開始更新了深色模式。本文作者以社區(qū)產(chǎn)品即刻為例，進(jìn)行了一次深色模式的適配練習(xí)并復(fù)盤整理，供大家一同參考和學(xué)習(xí)。

一、寫在前面

在2019年iOS13和安卓P發(fā)布后，帶來了一個新的模式名為「Dark Mode」即深色模式，隨后一些頭部產(chǎn)品也都相繼更新為用戶帶來了更好的使用體驗(yàn)。

需要注意的是深色模式非夜間模式，iOS文檔中也說明了內(nèi)容與背景的色彩對比率要達(dá)到7:1來滿足用戶在白天強(qiáng)光下和夜晚弱光下的多場景需求。

即刻曾經(jīng)作為一個日活300w+的老牌社區(qū)產(chǎn)品由于某些原因消失了一年，在近期又回歸到我們視野中，那就以即刻為例嘗試進(jìn)行一次社區(qū)產(chǎn)品的Dark Mode適配，為即友們帶來更好的產(chǎn)品體驗(yàn)。

二、深色模式給即友們帶來哪些好處？

1. 節(jié)省電量

在OLED屏的手機(jī)屏幕上，白色畫面越少功耗越低。所以當(dāng)深色模式中界面元素以黑色形式出現(xiàn)時相當(dāng)于關(guān)上了屏幕的燈（像素點(diǎn)）這時會比淺色模式大幅降低手機(jī)功耗，從而達(dá)到省電，增加待機(jī)時間的目的。

(圖為不同面積的白色畫面下調(diào)整屏幕亮度，對功耗的影響)

數(shù)據(jù)來源：《顯示比較：筆記本電腦上的OLED與IPS-功耗與效率》

2. 專注內(nèi)容

用戶更易被深色背景上展示的圖文、視頻等內(nèi)容所吸引，加強(qiáng)沉浸感，提高瀏覽效率。用官方的話說就是“使前景內(nèi)容在較暗的背景下脫穎而出”。

3. 保護(hù)視力

在夜晚弱光環(huán)境下深色模式會與周圍的暗色環(huán)境相融合，刷到凌晨4點(diǎn)也不會亮瞎眼睛。

三、定義設(shè)計(jì)目標(biāo)

本次以iOS版即刻7.0進(jìn)行適配，著手設(shè)計(jì)前查閱了iOS人機(jī)界面指南中Dark Mode部分，蘋果為深色模式規(guī)定了五項(xiàng)設(shè)計(jì)原則：

1. 保持視覺風(fēng)格的一致
2. 保持平臺的一致
3. 保持信息層級的一致
4. 保持操作規(guī)則的一致
5. 易于開發(fā)者實(shí)現(xiàn)

解讀官方文檔也就是說，深色模式要在風(fēng)格、交互行為、信息層級的感知上和淺色模式保持一致。遵循官方文檔的建議，定義設(shè)計(jì)目標(biāo)為：

1. 保持與淺色模式下全局的一致性；
2. 易于開發(fā)者實(shí)現(xiàn)。

四、執(zhí)行設(shè)計(jì)策略

1. 保持與淺色模式下全局的一致性

采取由整體到局部的形式，首先對界面整體信息層級進(jìn)行分析，在深色模式下還原，再將界面中所承載的具體元素單獨(dú)處理。分為兩部分：信息層級的一致和視覺特征的一致。

（1）信息層級的一致

淺色模式中，界面通常會以陰影來體現(xiàn)層級空間，但在深色模式下加深色陰影并不直觀，淺色陰影反而有種發(fā)光的效果，合理的解決方案是通過顏色深淺來體現(xiàn)層級，即傳統(tǒng)感知上離用戶較近的內(nèi)容顏色較亮。

由于OLED屏幕特性，在純黑背景上劃動內(nèi)容會產(chǎn)生一定程度的拖影，文字尤為明顯，就像燈泡（像素點(diǎn)）打開和關(guān)閉的感覺，所以應(yīng)避免使用純黑作為背景，尤其像即刻這樣以文字為主的產(chǎn)品，會非常影響閱讀體驗(yàn)。

分析淺色模式下界面的信息層級關(guān)系，提取全局背景色、內(nèi)容部分背景色，并在深色模式下一一對應(yīng)，保持視覺統(tǒng)一，首先看下兩大系統(tǒng)是如何做層級劃分的。

iOS13：

iOS規(guī)范中官方給出了兩組背景色，分別為：系統(tǒng)背景色(System Backgrounds)：運(yùn)用在全局的基礎(chǔ)背景元素。分組背景色(System Grouped Backgrounds)：運(yùn)用在承載內(nèi)容的分組背景元素。

兩組背景色也定義了主要、次要、三級三組顏色來體現(xiàn)不同的層級結(jié)構(gòu)，每組顏色也給出了對應(yīng)的背景色和前景色建議。

蘋果為了緩和黑白灰背景下視覺的無趣，在背景色中都加入了少許的藍(lán)色來提升質(zhì)感。

Android P：

在material design的深色模式下由低到高分別為界面定義了10個層級，由0dp-24dp，表面高度越高，離隱含光源就會越近，表面也就會越淺，這點(diǎn)和iOS的設(shè)計(jì)比較一致，區(qū)別在于material design將最深的顏色使用深灰（#121212）而非純黑色（#000000），目的在于深灰可以代表更廣泛的顏色而非極限的黑色，也能適當(dāng)降低背景與內(nèi)容的對比度。

為了保留品牌標(biāo)識，material design可以在默認(rèn)背景色的基礎(chǔ)上疊加低透明度的品牌色變成帶有品牌色的背景色。

即刻的層級劃分

拆解即刻的主要界面層級，發(fā)現(xiàn)大多界面整體層級不會太多，設(shè)計(jì)手法較為扁平。對于內(nèi)容型產(chǎn)品來說我認(rèn)為這樣的設(shè)計(jì)目的在于引導(dǎo)用戶更加沉浸在內(nèi)容里，在做深色模式適配時也應(yīng)遵循沉浸感的整體體驗(yàn)（即使深色模式自帶沉浸屬性）。

對主要界面的層級大致了解后，選擇從首頁入手通過背景色對深色模式進(jìn)行層級還原。在淺色模式的背景色中，即刻選擇在淺灰中加入少許藍(lán)色來表現(xiàn)質(zhì)感，為了在深色模式中還原這一設(shè)計(jì)語言。

在這里我選擇material design深色模式的配色方式，更加利于自定義。全局背景色選擇深灰（#121212）疊加6%不透明度的輔助藍(lán)色（#04A9F5），再在全局背景色基礎(chǔ)上疊加不同透明度的白色來配置不同層級的內(nèi)容背景色。帶有藍(lán)色的背景色長時間瀏覽要比純灰色更舒適，也滿足了設(shè)計(jì)語言的延續(xù)。

（2）視覺特征的一致性

整理基礎(chǔ)元素文字、圖標(biāo)、圖片等，還有其他元素如毛玻璃背景、加載、空狀態(tài)、默認(rèn)圖等，在深色模式下這些視覺特征需要單獨(dú)處理以保證在深色模式下保持和諧。

1）品牌色

為了讓深色模式中的品牌色，我同樣采取在每個顏色上疊加不透明度的方式降低飽和度，在界面中就不會顯得太扎眼。

2）文字

即刻的文字色主要有三個層級，適配深色模式時由于內(nèi)容型產(chǎn)品文字占比很大，大量純白色文字會使界面對比度過大，瀏覽很費(fèi)力，所以均降低不同程度的透明度的來還原三個層級，并保證主要內(nèi)容的色彩對比率在7:1以上。

對于簽名文字等輔助型信息，個人認(rèn)為可以不必強(qiáng)制7:1，或4.5:1，否則文字間的主次關(guān)系會變得很弱。

3）圖標(biāo)

規(guī)范中建議深色模式下將線型圖標(biāo)轉(zhuǎn)為面型來幫助用戶建立體量感，但為了更傾向用戶習(xí)慣，高頻使用的功能圖標(biāo)依舊保持與淺色模式一致，所以在這里并沒有將線型圖標(biāo)重新繪制面型樣式。

即刻的圖標(biāo)色與文字色使用的是一套顏色，所以在深色模式中也順應(yīng)使用了這套顏色，白色圖標(biāo)保持不變。

對于彩色圖標(biāo)，采取適當(dāng)降低飽和度和明度的方法與暗色背景更融合不突兀。

4）圖片

深色模式下的對比下，飽和度較高的圖片會顯得格外突出，就像燈泡一樣明亮晃眼，我們無法控制用戶會發(fā)什么樣色彩的圖片，所以統(tǒng)一做處理，在圖片上疊加一層10%不透明度的全局背景色來緩和這種情況。

（首頁兩模式對比）

（WCAG色彩對比率測試）

5）其他元素

個性化圖片背景：

在即刻的個人主頁、圈子主頁頂部都會出現(xiàn)可編輯的圖片背景滿足用戶個性化需求，默認(rèn)狀態(tài)為頭像放大模糊出現(xiàn)毛玻璃的效果。經(jīng)觀察發(fā)現(xiàn)在背景圖片上部會疊加一層帶有透明度漸變的深色滿足背景層上信息的識別性，這樣的設(shè)計(jì)手法發(fā)現(xiàn)只需按深色模式規(guī)范適配文字、標(biāo)簽和頭像就能和整體界面較好融合，所以背景圖片不做處理。

加載：

即刻的加載動畫其實(shí)直接用在深色模式也可以，不會突兀，但在視覺上感知比較弱，所以我將加載動畫顏色以背景色為基礎(chǔ)提亮來提升用戶對界面狀態(tài)的感知。

默認(rèn)圖：

由于只會在網(wǎng)絡(luò)不佳時出現(xiàn)，所以默認(rèn)圖是容易被忽略的一個點(diǎn)，但不作處理在深色模式下就會顯得非常突兀，淺色模式即刻選擇了背景色作為默認(rèn)圖，深色模式也一樣處理。

空狀態(tài)：

由于很多空狀態(tài)的插圖是沒有考慮到深色背景的情況，在顏色上沒辦法很好融合，所以可能要重新繪制兩套圖來適配兩個模式。

啟動頁：

當(dāng)系統(tǒng)界面和APP界面都是深色時，一個白色啟動頁的出現(xiàn)就像被燈泡晃到眼睛一樣難受，所以深色模式時啟動頁也需要做一下適配來避免這種情況發(fā)生。

2. 易于開發(fā)者實(shí)現(xiàn)

深色模式的適配是一個長期持續(xù)的工作，尤其是對體量龐大的APP需要投入更多精力，所以對設(shè)計(jì)和開發(fā)來說，一個易實(shí)現(xiàn)的迭代和交付方案對效率提升有著重要作用。

顏色

因?yàn)橛辛松钌Ｊ?，所以界面中同一位置的顏色變成兩種，在iOS13官方文檔中將顏色的變化稱之為動態(tài)顏色，并且通過語義命名的方式來代表深淺兩種顏色，即使用語義（systemBlue）表示系統(tǒng)淺色模式藍(lán)（#007AFF），系統(tǒng)深色模式藍(lán)（#0A84FF）兩種顏色，這樣的命名方式更便于管理和記憶，也更符合開發(fā)者思維。

使用同樣的方法，將顏色使用語義命名，這里我參考了釘釘設(shè)計(jì)團(tuán)隊(duì)的顏色命名系統(tǒng)避免一些坑，例如：即刻的品牌黃色：淺色（#FFE40F）深色（#FFEE6F）就可以用語義命名：（common_顏色_color），就可以使用。需要注意的是，在實(shí)際項(xiàng)目中的命名過程需要和開發(fā)共同進(jìn)行，定義出一套彼此都容易理解的命名方案。

將即刻中的顏色分為基礎(chǔ)元素色、通用組件色、彩色三種。

• 基礎(chǔ)元素色：文字色、背景色、分割線色，這里根據(jù)規(guī)范定義了3種文字色、4種背景色和1種分割線色。
• 特殊通用組件色：將可點(diǎn)擊功能圖標(biāo)色、文字鏈接色定義為特殊通用組件色。
• 彩色：將界面中運(yùn)用在各處的品牌色、輔助色、黑白灰等每個動態(tài)色用顏色命名，方便靈活運(yùn)用。

需要注意的是有些顏色不需要變化的組件，如在標(biāo)簽中的文字、按鈕中的文字是不隨模式變化的，這時就不能選擇基礎(chǔ)元素的文字色了，而是要選擇彩色中對應(yīng)的顏色。

圖片

深色模式的圖片比淺色模式更暗一些，開發(fā)者可以選擇疊加濾鏡的方式，也可以選擇降低透明度的方式，我在本次適配中選擇了疊加深色濾鏡，感覺在復(fù)雜界面下會比降低透明度更保險一些。

圖標(biāo)

深色模式的圖標(biāo)相比都改變了顏色，所以得選擇重新繪制一套深色圖標(biāo)替換，不過單色的SVG格式功能圖標(biāo)可以直接修改來適配不需要單獨(dú)繪制，但PNG圖片就不可以了。

五、總結(jié)

1. 本次深色模式適配思路

• 在前期參考足夠多的資料，了解使用深色模式的原因，官方的要求，避免踩坑。
• 根據(jù)前期資料與項(xiàng)目目的定義設(shè)計(jì)目標(biāo)，圍繞設(shè)計(jì)目標(biāo)將界面元素由整體到局部進(jìn)行拆解，逐一嘗試深色模式方案。
• 測試深色模式方案在多種場景下的可行性，調(diào)整優(yōu)化，制定色彩規(guī)范。
• 與開發(fā)共同討論高效實(shí)現(xiàn)方法，并在后期持續(xù)走查發(fā)現(xiàn)未適配到的或效果不理想的位置。

2. 一些建議

基于深色模式適配的挑戰(zhàn)性，個人覺得不是所有產(chǎn)品都必須要適配，或要將適配項(xiàng)目提上排期，有幾種情況不是太建議馬上著手去做適配工作：

• 處于快速迭代，界面功能布局頻繁改動的產(chǎn)品，成本大，收益小。
• 在項(xiàng)目密集階段且人員不足時，設(shè)計(jì)開發(fā)測試在任務(wù)緊張的情況下，還要分很多精力在深色模式適配上，可能導(dǎo)致兩項(xiàng)工作都沒辦法專注，所以也不是很推薦。

本次以即刻為例的深色模式適配復(fù)盤就到這里了，如有不嚴(yán)謹(jǐn)?shù)牡胤綒g迎交流提出意見或建議，同時也為大家提供iOS+Android深色模式組件庫文件下載。

• 地址鏈接：https://pan.baidu.com/s/1_-qzv2FJtKI4kVjKJR6meg
• 提取碼：3pj4

（界面對比展示）

參考資料：

• iOS人機(jī)界面指南-Dark ModeMaterial Design-dark theme釘釘Dark Mode設(shè)計(jì)
• 優(yōu)酷暗黑模式設(shè)計(jì)指南
• Web內(nèi)容可訪問性指南（WCAG）2.1
• 顯示比較：筆記本電腦上的OLED與IPS-功耗與效率

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

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