亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

  本文轉(zhuǎn)載已獲「Alibaba Design」官方授權(quán)  

         未經(jīng)授權(quán)者，不得私自轉(zhuǎn)載或編輯       

         阿里設(shè)計(jì)自媒體合作成員-UX小學(xué)      

原文來(lái)源于 AlibabaDesign ，作者釘釘設(shè)計(jì)中心

釘釘?shù)?Dark Mode 設(shè)計(jì)

隨著iOS13和Android 10的普及，為應(yīng)用設(shè)計(jì) Dark Mode 也是業(yè)內(nèi)的趨勢(shì)之一，及時(shí)適配這一特性，遵循平臺(tái)的新能力也是大家目前設(shè)計(jì)工作中紛紛遇到的挑戰(zhàn)。

釘釘也在iOS13上線后迅速跟進(jìn)了這一設(shè)計(jì)，并在過(guò)程中沉淀了適合大設(shè)計(jì)團(tuán)隊(duì)快速適配的方案：

內(nèi)容

1.為什么要為應(yīng)用設(shè)計(jì) Dark Mode

2.選擇合適的 Dark Mode 設(shè)計(jì)思路

3.Dark Mode的視覺(jué)設(shè)計(jì)需要注意什么

4.如何協(xié)同不同業(yè)務(wù)的設(shè)計(jì)師快速適配Dark Mode

為什么要做 Dark Mode

Dark Mode 的開(kāi)發(fā)和設(shè)計(jì)不是一個(gè)小工程，開(kāi)始后可能會(huì)耗費(fèi)團(tuán)隊(duì)內(nèi)部比較大的資源，如何說(shuō)服團(tuán)隊(duì)的決策者開(kāi)發(fā)Dark Mode ，下面是一些比較客觀的參考理由：

OLED的省電特性

隨著OLED屏幕的逐漸普及，為使用OLED的設(shè)備開(kāi)啟 Dark Mode 可以有效降低設(shè)備的功耗。因?yàn)樵贠LED屏幕下，黑色的區(qū)域是完全關(guān)閉了像素單元的使用。

引用：AnandTech和NotebookCheck的OLED分析顯示了功耗如何取決于OLED屏幕的亮度水平。我們可以看到，當(dāng)有一個(gè)全黑的屏幕時(shí)，OLED顯示屏在任何亮度下的功耗都保持恒定，對(duì)于白色的屏幕，曲線會(huì)逐漸變陡。但是大約5％的白色屏幕和<1％的明亮屏幕的曲線幾乎相同，只是在較高的亮度范圍內(nèi)變化很小。

注意：在OLED下使用純黑色背景會(huì)暴露的問(wèn)題是，因?yàn)楹谏峭耆P(guān)閉像素，所以在純黑色背景上展示內(nèi)容，在滑動(dòng)的時(shí)候因?yàn)殚_(kāi)啟關(guān)閉像素點(diǎn)的延遲會(huì)產(chǎn)生拖尾的模糊效果，部分應(yīng)用的解決方案是不使用純黑色的背景，使用深灰的背景色，我們?cè)O(shè)計(jì)的時(shí)候特意和Apple的人咨詢過(guò)該問(wèn)題，對(duì)方給的答復(fù)是：這個(gè)是他們已知的問(wèn)題，后期應(yīng)該會(huì)有相應(yīng)技術(shù)上的優(yōu)化。

專注

就像我們?yōu)槭裁丛谠O(shè)置彈窗的時(shí)候都要用黑色的遮罩作為彈窗的背景，蘋(píng)果發(fā)布會(huì)都會(huì)用黑色的背景來(lái)突出演示的內(nèi)容，黑色的背景能讓用戶更加專注于核心的內(nèi)容。在辦公場(chǎng)景下，專注是一件非常重要的事，提升用戶對(duì)使用內(nèi)容的專注度才能提升用戶的工作效率。

你一眼就看見(jiàn)了幕布上的內(nèi)容，和庫(kù)克的膚色

美學(xué)選擇

引用Mac OS HIG里的一句話：

給予用戶多一種美學(xué)的選擇，給予用戶使用界面的新鮮感和驚喜感，會(huì)增加用戶使用應(yīng)用的愉悅度和粘性。但是注意，Dark Mode 不是夜間模式，用戶可以在任何時(shí)間任何環(huán)境下使用它。

選擇合適的 Dark Mode 設(shè)計(jì)思路

市面上有好多版本的Dark Mode，有iOS和安卓系統(tǒng)的「可用性優(yōu)先」設(shè)計(jì)，還有知乎等大部分閱讀類軟件為領(lǐng)頭的「護(hù)眼式」設(shè)計(jì)，每個(gè)方法有各自的優(yōu)勢(shì)和缺點(diǎn)：

可以看到，在界面上，文字和背景對(duì)比在兩種設(shè)計(jì)思路上的差異

釘釘作為一個(gè)有眾多人使用的工具型應(yīng)用，不需要用戶過(guò)于沉浸式的閱讀，所以即使在深色下，仍然要追求信息的高效傳達(dá)，保障用戶使用時(shí)信息的對(duì)比度和可讀性。

Dark Mode 的視覺(jué)設(shè)計(jì)要點(diǎn)

在釘釘?shù)?Dark Mode 設(shè)計(jì)中，并不是在設(shè)計(jì)一個(gè)夜間使用的釘釘，用戶有可能在白天，在戶外陽(yáng)光下使用 Dark Mode 的釘釘，為了滿足這些極端場(chǎng)景，界面的UI視覺(jué)需要注意以下幾點(diǎn)：

足夠的顏色對(duì)比：保障可用性

前面說(shuō)到深色模式不是夜間模式，所以界面的元素一定要讓用戶能清晰的識(shí)別，閱讀，使用。

根據(jù)WCAG2.0 對(duì)比度的標(biāo)準(zhǔn)，界面元素和背景的對(duì)比度至少要滿足 AA 級(jí)標(biāo)準(zhǔn)，即最低 4.5:1 的對(duì)比度。在iOS的規(guī)范中，建議對(duì)比度至少滿足7:1；在谷歌的規(guī)范中，因?yàn)樯婕暗讲煌尘皩蛹?jí)的概念，甚至要求主要文字和最深色背景的對(duì)比度達(dá)到15.8:1。釘釘在設(shè)計(jì)的時(shí)候，主要考慮優(yōu)先適配iOS平臺(tái)，所以整體的顏色設(shè)計(jì)對(duì)比上，對(duì)于主要的文字信息要求滿足7:1的對(duì)比標(biāo)準(zhǔn)，而彩色信息至少滿足4.5:1的對(duì)比度標(biāo)準(zhǔn)。

使用軟件在設(shè)計(jì)時(shí)實(shí)時(shí)測(cè)試顏色的對(duì)比是否符合標(biāo)準(zhǔn)

關(guān)于如何測(cè)試該顏色是否符合該對(duì)比度標(biāo)準(zhǔn)，有很多在線網(wǎng)站或者工具都可以測(cè)試，我們使用了Contrast這款工具，可以在Mac app store付費(fèi)下載。

避免大面積的鮮艷彩色使用：

在深色模式下突然出現(xiàn)的大面積鮮艷彩色因?yàn)闀?huì)有較高的明度和飽和度，會(huì)和深色背景形成強(qiáng)烈的對(duì)比，從而讓用戶不適。所以在 Dark Mode 的設(shè)計(jì)中，盡量避免出現(xiàn)大面積和鮮艷彩色和深色背景的界面。如果一定要出現(xiàn)，建議適當(dāng)降低彩色的飽和度和明度盡可能減少對(duì)視覺(jué)的沖擊。

適當(dāng)調(diào)整某些彩色的展示效果

某些在白色背景下符合對(duì)比度標(biāo)準(zhǔn)的彩色，在深色背景下不一定符合對(duì)比度標(biāo)準(zhǔn)或者看著舒適，所以在深色背景下，要適當(dāng)調(diào)整這些色彩的飽和度和明度。

為了適配深色模式，釘釘?shù)牟噬隽瞬煌潭鹊恼{(diào)整

弱化白色界面

如果應(yīng)用中不可避免的要出現(xiàn)一些白色背景的界面，可以使用遮罩或者降低白色明度的方式來(lái)處理，避免在界面切換時(shí)對(duì)眼睛的刺激。

如何協(xié)同不同業(yè)務(wù)的設(shè)計(jì)師快速適配 Dark Mode

確定了視覺(jué)設(shè)計(jì)的方案之后，如何協(xié)同更多設(shè)計(jì)師快速適配，針對(duì)大的設(shè)計(jì)團(tuán)隊(duì)是很大的難題。

釘釘早期還沒(méi)遇到 Dark Mode 的時(shí)候就有考慮過(guò)未來(lái)多主題設(shè)計(jì)的需求，并根據(jù)這樣的需求思考了一套特殊的顏色管理方案，因?yàn)橹黝}切換涉及到業(yè)務(wù)線內(nèi)大量的設(shè)計(jì)師協(xié)同工作，對(duì)于一個(gè)幾十個(gè)人的設(shè)計(jì)團(tuán)隊(duì)，如何讓不同設(shè)計(jì)師更快的協(xié)同起來(lái)，降低設(shè)計(jì)師重復(fù)工作的成本，適配自己所在業(yè)務(wù)的界面，是工作中不得不思考的一個(gè)問(wèn)題。釘釘這套顏色管理方案在 Dark Mode 的設(shè)計(jì)，多業(yè)務(wù)協(xié)同中發(fā)揮了巨大的作用。

在釘釘早期的版本中，設(shè)計(jì)顏色庫(kù)的管理十分換亂，命名也是沒(méi)有任何含義的簡(jiǎn)單代碼，當(dāng)開(kāi)發(fā)遇到?jīng)]有顏色字典中沒(méi)有的對(duì)應(yīng)顏色或者是字典中已經(jīng)有這個(gè)顏色但是開(kāi)發(fā)找不到的時(shí)候，久而久之，顏色字典就會(huì)變成如下的局面：

描述：同樣的顏色對(duì)應(yīng)了多個(gè)無(wú)序的顏色代碼，設(shè)計(jì)師和開(kāi)發(fā)也不知道這個(gè)顏色用在了什么地方。

如果用這樣的方案做多主題適配，每個(gè)設(shè)計(jì)師要熟知不通主題下的配色，十分復(fù)雜。

這就是我們這套顏色方案的核心思路：讓每位設(shè)計(jì)師簡(jiǎn)單記住一套顏色，即可適配多套主題

下面帶大家一步步開(kāi)始了解釘釘如何建立全新的顏色庫(kù)：

為顏色建立命名系統(tǒng)

為了解決上述問(wèn)題，首先我們要賦予每個(gè)顏色特定的含義，也就是這個(gè)顏色在代碼中對(duì)應(yīng)的「代號(hào)」應(yīng)該是能讓后續(xù)使用的人知道這個(gè)顏色會(huì)被用在什么地方的。設(shè)計(jì)師使用這些顏色的時(shí)候，不應(yīng)該是記憶16進(jìn)制的代碼，應(yīng)該是記憶這個(gè)顏色的「代號(hào)」，也就是顏色的key。接下來(lái)我們以釘釘?shù)男骂伾珟?kù)作為案例說(shuō)明：

在這套顏色中，我們賦予每個(gè)顏色一個(gè)key來(lái)代表他們的名字，方便設(shè)計(jì)師更好的記憶顏色：

基礎(chǔ)的UI顏色用「Common.使用場(chǎng)景.color」命名，比如背景色，我們命名為common_bg_color，鏈接的顏色，命名為：common_link_color;

而彩色用「Common.什么顏色.color」來(lái)命名，比如藍(lán)色，命名為：common_blue1_color;

那么為什么要把基礎(chǔ)UI和彩色區(qū)分開(kāi)呢？

因?yàn)橄裎淖?、分割線、背景這些基礎(chǔ)UI的顏色會(huì)隨著深淺模式的變化而從灰色變成淺色，或者從淺色變成灰色，所以我們需要用使用場(chǎng)景去命名他們。

而按鈕和圖標(biāo)等元素用的藍(lán)色，紅色，橙色等等的彩色，并不會(huì)隨著主題的切換變成其他的顏色，或者他們還是藍(lán)色，紅色，橙色，只是為了配合深淺色調(diào)的變化會(huì)有對(duì)應(yīng)的色值微調(diào)。

注意：一旦確定一個(gè)key，對(duì)應(yīng)的色值可以方便的調(diào)整，但是謹(jǐn)慎更換key的名稱，因?yàn)橐坏└鼡Q名稱，代碼中調(diào)用過(guò)這個(gè)key的地方都會(huì)產(chǎn)生問(wèn)題。

構(gòu)建基礎(chǔ)UI顏色

基礎(chǔ)UI顏色就像設(shè)計(jì)中的點(diǎn)線面，是組成我們界面中的基本元素。

拋開(kāi)彩色的場(chǎng)景，基礎(chǔ)UI的使用場(chǎng)景其實(shí)只有文字、前景、背景和分割線，這幾個(gè)元素組成了大部分的界面場(chǎng)景。

我們建議給予文字色4個(gè)等級(jí)，前景色2個(gè)等級(jí)，背景色2個(gè)等級(jí)，和2個(gè)等級(jí)的分割線顏色，即可滿足基礎(chǔ)UI的大部分場(chǎng)景：

增加彩色

根據(jù)業(yè)務(wù)和品牌的需求，繼續(xù)為顏色庫(kù)添加UI中會(huì)遇到的彩色，并適當(dāng)添加多個(gè)等級(jí)滿足不同場(chǎng)景。彩色會(huì)用在諸如按鈕的背景，行動(dòng)點(diǎn)，圖標(biāo)，標(biāo)簽等等地方。

比如按鈕的背景是藍(lán)色，我們就使用common.blue1.color，那為什么不把按鈕顏色命名為common.botton.bg.color呢？因?yàn)檫@個(gè)藍(lán)色不僅會(huì)用在按鈕上，也可能用在藍(lán)色標(biāo)簽上，藍(lán)色的icon上，如果以「使用場(chǎng)景」命名，就會(huì)增加好多的顏色名稱，但是其實(shí)他們?cè)谏顪\模式下都是使用藍(lán)色，所以用顏色命名，一個(gè)key就能覆蓋好幾個(gè)key能解決的問(wèn)題。

注意的是色值表中還給了通用的黑色，白色和灰色，因?yàn)樵谀承﹫?chǎng)景下，深淺的切換不會(huì)影響這些中性色，即使他們不是「彩色」。

特殊的業(yè)務(wù)用色處理

那Common開(kāi)頭的方式是為什么呢？以Common開(kāi)頭的key代表著顏色是通用到不同業(yè)務(wù)中的基礎(chǔ)釘釘色值，而一旦某個(gè)業(yè)務(wù)需要增加配合業(yè)務(wù)使用的特殊顏色，則可以用「業(yè)務(wù).使用場(chǎng)景」來(lái)新增一個(gè)key，這樣即使有更多的顏色，也能追溯到這個(gè)顏色被使用在了什么地方，方便管理。

這樣的一套key會(huì)有什么優(yōu)勢(shì)？

更快適應(yīng)多主題

通過(guò)這套key作為中介，核心設(shè)計(jì)師確定key值對(duì)應(yīng)的顏色并確定在多主題下可行之后，設(shè)計(jì)團(tuán)隊(duì)的其他設(shè)計(jì)師只要在一種模式下用key來(lái)標(biāo)注顏色，開(kāi)發(fā)在代碼中用key寫(xiě)入顏色，即可快速適應(yīng)多主題并保證方案可行，不必去記憶多套主題的具體色值。而對(duì)于適配后的驗(yàn)收，也可以根據(jù)出問(wèn)題的顏色場(chǎng)景快速定位問(wèn)題顏色來(lái)調(diào)整；

更方便的管理記憶

相比記憶一個(gè)16進(jìn)制的顏色色值或者是RGB顏色，對(duì)于設(shè)計(jì)師來(lái)說(shuō)，如果是一級(jí)文字，在開(kāi)發(fā)詢問(wèn)的時(shí)候快速告訴他是Lv1，如果是主題藍(lán)色，快速告訴開(kāi)發(fā)是Blue1，諸如此類，對(duì)于設(shè)計(jì)師的記憶和與開(kāi)發(fā)間的溝通都是極大的提效。同時(shí)因?yàn)樵O(shè)計(jì)師和開(kāi)發(fā)溝通必須使用已有的key的名稱，而不是傳統(tǒng)的色值，也能在一定程度更加規(guī)范顏色的使用不超出規(guī)范的界限。

更快速的迭代和開(kāi)發(fā)管理

在代碼中，所有的顏色都有了名稱，不論是對(duì)當(dāng)下的調(diào)整還是未來(lái)的版本迭代，都能更清晰的追溯和管理。

一旦在拿到實(shí)際Demo后，某個(gè)元素的顏色使用起來(lái)有問(wèn)題，也可以快速通過(guò)對(duì)字典的調(diào)整調(diào)整線上所有使用該key的顏色的效果。而遇到真的規(guī)范無(wú)法滿足的顏色，也可以靈活添加，并且通過(guò)命名這一環(huán)節(jié)讓顏色的追溯更有跡可循。

如何使用和管理這套顏色？

在設(shè)計(jì)團(tuán)隊(duì)內(nèi)，由專門(mén)的設(shè)計(jì)師管理增加key的權(quán)限，避免不同業(yè)務(wù)設(shè)計(jì)師隨意添加規(guī)范外的顏色而使顏色混亂。

而在開(kāi)發(fā)側(cè)，真正將顏色導(dǎo)入開(kāi)發(fā)的庫(kù)中的時(shí)候，通用也就是Common開(kāi)頭的key只能由專門(mén)的開(kāi)發(fā)有添加和編輯的權(quán)限，這些key的管理會(huì)更加嚴(yán)格，因?yàn)楸挥迷诖罅康臉I(yè)務(wù)中；業(yè)務(wù)單獨(dú)增加的key在已經(jīng)由設(shè)計(jì)側(cè)負(fù)責(zé)人錄入設(shè)計(jì)側(cè)的表格后，可以讓自己業(yè)務(wù)對(duì)應(yīng)的開(kāi)發(fā)自由添加。

特殊場(chǎng)景的處理

對(duì)于相機(jī)，音視頻等注重沉浸體驗(yàn)的界面，這些界面在深淺模式下都會(huì)保持同樣的配色，對(duì)于這種界面，建議能使用彩色key則使用彩色key，如果彩色key無(wú)法滿足，可以允許在代碼中不使用key，因?yàn)檫@些頁(yè)面沒(méi)有適配多主題的需求。

如何配合使用

規(guī)則建立好了，但是顏色難免會(huì)涉及到修改和迭代，如何及時(shí)的同步到大家使用方式和更新維護(hù)，這事釘釘團(tuán)隊(duì)內(nèi)使用的方法：

• 建立表格+同步盤(pán)實(shí)時(shí)同步更新管理
  建立顏色表格，并使用同步盤(pán)實(shí)時(shí)同步給設(shè)計(jì)團(tuán)隊(duì)和開(kāi)發(fā)負(fù)責(zé)人，保證大家手里使用的規(guī)范是最新的。

• 內(nèi)部宣講，用設(shè)計(jì)顏色方案的思路讓設(shè)計(jì)師記憶顏色
  將設(shè)計(jì)顏色庫(kù)的思路同步給團(tuán)隊(duì)內(nèi)所有小伙伴，幫助大家快速熟悉和記憶顏色key，用key來(lái)標(biāo)注和與開(kāi)發(fā)溝通。

• 將顏色錄入Sketch組件庫(kù)中，設(shè)計(jì)師可以快速使用
  在團(tuán)隊(duì)的Sketch設(shè)計(jì)組件中錄入規(guī)范的顏色和樣式，方便大家直接使用規(guī)范顏色，也可以在一定程度上規(guī)避非規(guī)范顏色的使用。
• 
  

色值分別在組件的色板和樣式中調(diào)用的效果

結(jié)語(yǔ)

通過(guò)合適的顏色管理方式，找到正確的視覺(jué)設(shè)計(jì)方向，可以最大程度的減少設(shè)計(jì)和開(kāi)發(fā)資源的損耗，釘釘在設(shè)計(jì)Dark Mode 的過(guò)程中，因?yàn)榻⒘肆己玫念伾芾頇C(jī)制，投入了僅1位核心設(shè)計(jì)師，和其他業(yè)務(wù)設(shè)計(jì)師極小的工作量，以及各端開(kāi)發(fā)不到一個(gè)月的時(shí)間完成了適配，整體的順序是大概是這樣的：

1.在淺色模式下定義好規(guī)范的顏色，以及對(duì)應(yīng)key的表格，開(kāi)發(fā)錄入顏色字典，根據(jù)表格將舊的顏色均替換成新的顏色key；

2.主設(shè)計(jì)師通過(guò)視覺(jué)設(shè)計(jì)定義好 Dark Mode 的顏色，并對(duì)應(yīng)key表格填入；

3.小部分核心設(shè)計(jì)師根據(jù)配色設(shè)計(jì)出幾個(gè)核心頁(yè)面，確認(rèn)配色沒(méi)有問(wèn)題；

4.將 Dark Mode 的配色上線，所有業(yè)務(wù)的設(shè)計(jì)師用線上demo驗(yàn)證配色沒(méi)有問(wèn)題（有問(wèn)題的界面大多是沒(méi)有把舊的顏色用key色值覆蓋，讓開(kāi)發(fā)替換對(duì)應(yīng)顏色為key值就好）；

5.修改所有問(wèn)題后上線。

總的來(lái)說(shuō)，Dark Mode 的適配是一項(xiàng)費(fèi)時(shí)費(fèi)力的巨大工程，但又是在當(dāng)下所有設(shè)計(jì)師不得不面臨的挑戰(zhàn)之一。畢竟因?yàn)閕OS和Android這些系統(tǒng)級(jí)別的功能調(diào)整，沒(méi)有適配 Dark Mode 的應(yīng)用很有可能被貼上「落伍」的標(biāo)簽。 

但不管如何，請(qǐng)謹(jǐn)記「形式追隨功能」，我們不是為了顯得很酷、時(shí)髦而適配 Dark Mode ，而是讓用戶使用我們的產(chǎn)品更加舒適。

希望釘釘?shù)脑O(shè)計(jì)經(jīng)驗(yàn)?zāi)軐?duì)各位在設(shè)計(jì) Dark Mode 的流程和界面上有所幫助。    

參考

AnandTech：分析AMOLED功率效率

https://www.anandtech.com/show/9394/analysing-amoled-power-efficiency

關(guān)于WCGA2.0標(biāo)準(zhǔn)：

Web Content Accessibility Guidelines (WCAG) Overview | Web Accessibility Initiative (WAI) | W3C

iOS HIG中Dark Mode 設(shè)計(jì)指導(dǎo)的章節(jié)：

Dark Mode - Visual Design - iOS - Human Interface Guidelines -  Developer

Material Design中Dark Mode 設(shè)計(jì)指導(dǎo)的章節(jié)：

https://material.io/design/color/dark-theme.html#properties

-------------本文完--------------

Powered by Froala Editor