暗黑模式芯勘,深色模式箱靴,夜間模式你真的懂嗎?

其實是想更新一篇長文荷愕,但是呢衡怀,為了讓自己看起來經(jīng)常更新,所以我把長文分成了兩篇路翻。

第一篇主要講暗黑模式;

第二篇主要講iOS13交互優(yōu)化茄靠;

一首歌的時間就可以看完了茂契,Have a good day!

▇ 前言?

之所以要寫是因為有一部分人仍對暗黑模式有一些不同的誤解。

描述不合理之處還請指正慨绳。

首先講兩大系統(tǒng)對設計的定義掉冶。

◤iOS 設計主題和設計原則

(具體描述做了刪減)

關鍵詞:尊重真竖、限制、習慣

設計主題著重描述的是對于內(nèi)容的凸顯厌小;設計原則著重強調(diào)交互體驗恢共。沒有因為暗黑模式而對主題和原則做過多更新。

◤Material Design設計目標和原則

Material Design是一種結合了傳統(tǒng)優(yōu)秀設計準則以及科學技術創(chuàng)新的視覺設計語言璧亚。(Material Design之后簡稱MD)

關鍵詞:開放讨韭、創(chuàng)意、品牌

MD本質(zhì)上是印刷設計的延伸癣蟋,通過MD自身的介紹透硝、目標、原則可以看出疯搅,它主要強調(diào)的是視覺效果濒生,排版、層級幔欧、創(chuàng)意罪治、品牌等這些信息。

那么意味著在這套系統(tǒng)下設計師會有很強的創(chuàng)造性和表現(xiàn)欲礁蔗;對于用戶內(nèi)容識別觉义、用戶體驗提及較少。

◤前言小結

iOS更側重于用戶體驗和內(nèi)容引導交互瘦麸,MD側重視覺設計和品牌傳遞谁撼。

一款產(chǎn)品的成功因素有很多,優(yōu)秀的用戶體驗和品牌傳遞絕對是其中之一滋饲。

在咨詢公司的我意識到傳統(tǒng)企業(yè)(甲方)開始推動/干預設計厉碟,做為設計濕需要了解更多設計以外的事情,以幫助你更精準的理解客戶的需求屠缭。(比如:定位箍鼓、運營、用戶呵曹、業(yè)務線款咖、信息整合以及未來發(fā)展趨勢等)。

你了解的信息會輔助你對體驗奄喂、品牌铐殃、定位有更深的思考,完成產(chǎn)品的升級跨新。

所以說設計規(guī)范和原則只是幫助我們別犯一些低級錯誤富腊,具體落地實施考慮的點會更多。

不過涉及到暗黑模式域帐,由于大前提的不同赘被,所以設計風格也會略有不同是整。

▇ Dark Mode

◤小科普

1、暗黑模式真的能夠省電嗎民假?

暗黑模式確實會省電浮入,但也是基于你的手機屏幕是OLED屏幕,OLED屏幕在黑色像素下幾乎不發(fā)光羊异,所以才會有省電的效果事秀。(iPhoneX以下都是LED屏幕,沒有明顯省電效果球化,6S飄過~~)

2秽晚、暗黑模式是否會護眼?

并不會筒愚,是的赴蝇,不要再YY了。暗黑模式僅僅只是減少了光污染巢掺,讓眼睛更加舒適句伶。造成眼睛損傷的是藍光和頻閃(具體是啥自己上網(wǎng)查,不做贅述)事實上并沒有減少藍光陆淀,也沒有解決頻閃的問題考余。所以并沒有,唯一有用的是夜覽模式轧苫,開啟后會頁面變黃楚堤,一定程度上會減少藍光的攝入。

◤iOS Dark Mode

層級:

在瀏覽官方文檔時含懊,沒有發(fā)現(xiàn)任何關于層級方面的介紹身冬,唯一介紹了層級的就是通過顏色和透明材質(zhì)做區(qū)分。所以整體上來說iOS更偏向扁平岔乔。

顏色:

官方給出了一組系統(tǒng)色以及在特殊情況下使用的不透明灰色(6種)酥筝,通過light&Dark不同的顏色比較可以看出,暗黑模式下降低了顏色的飽和度雏门,提高明度嘿歌。

在實際頁面中可以看出字體顏色層級分為三層,閱讀清晰茁影,經(jīng)過測試宙帝,即使是在烈日當空的天氣,文字依然清晰可見募闲。


設計要點:

1步脓、設計需聚焦于內(nèi)容,UI作為背景來凸顯內(nèi)容;

2沪编、light和dark模式需要保證界面能夠正常使用,所以顏色和icon上可能需要作出不同調(diào)整年扩。

3蚁廓、dark模式下無論怎么調(diào)整對比度和透明度,內(nèi)容需要清晰舒適厨幻。

◤Android Dark Mode

對比度:深色表面和100%白色文字的對比度至少為15.8:1

深度:在較高的高度下相嵌,組件通過顯示較淺的表面顏色來表示深度

去飽和度:原色被去飽和度,因此它們在所有海拔高度上均通過至少4.5:1的Web Content Accessibility Guidelines(WCAG)AA標準况脆。

有限的顏色:大表面使用深色表面顏色饭宾,且強調(diào)的顏色有限(淺色,不飽和色和明亮色格了,飽和色)

層級:

MD有非常清晰的層級刻度看铆,輔助設計師完成布局和配色。

在主視圖Dark模式下使用不同透明度+投影的形式表示深度盛末,Light模式下只是通過投影做區(qū)分弹惦。

顏色:

關于背景色,采用的是深灰色悄但,而不是純黑色棠隐,這是因為MD它的特征之一就是投影,如果是純黑背景投影看起來就像是外發(fā)光檐嚣。所以才會選擇深灰色助泽。

關于系統(tǒng)色,MD mark mode選用200基色原色嚎京。以達到WCAG最低對比度要求4.5:1.

設計要點:

1嗡贺、通過低對比度的灰色保留鮮艷的;

2挖藏、顏色:使用情感化但要清晰可讀暑刃;

3、減少高對比度模糊膜眠,滿足閱讀效果岩臣;

4、簡化UI獲取可瀏覽的信息宵膨。

◤ Dark Mode 總結


應該選擇哪種系統(tǒng)的設計規(guī)范來完成應用適配呢架谎?

iOS對比度要求是7:1,字體顏色層級分為主辟躏、次谷扣、末和標簽色,顏色不會特別突出。依舊遵循iOS的傳統(tǒng)美德会涎,主次分明裹匙,清晰易讀,注重信息設計末秃。

MD對比度要求是15.8:1概页,對頁面結構劃分了明顯的層級,做了非常明細的規(guī)定练慕,這對于一個新手設計師來說有利于快速掌握頁面布局結構和色彩的選擇惰匙。但對色彩的高對比度要求,導致文字顏色缺乏铃将,整體閱讀性降低项鬼。

所以從整體對比來看iOS暗黑模式更加合理;

當前最佳適配給到「微信讀書」劲阎。

App完美適配Dark Mode 會成為系統(tǒng)增值绘盟,反之會造成極大的體驗損傷。

關于系統(tǒng)增值

為什么會說系統(tǒng)增值悯仙,而不是應用增值呢奥此!

1、暗黑模式是系統(tǒng)功能雁比,而應用只是做適配稚虎。如果應用做了適配,那么用戶心理已然接受了這是系統(tǒng)切換帶來的結果偎捎。

2蠢终、暗黑模式后UI設計被弱化,品牌傳遞在這一個層面便被弱化了茴她,使應用更加同質(zhì)化寻拂。那么要體現(xiàn)出應用的差異性就需要從產(chǎn)品服務本身和交互方式下手,當然這也是機遇之一丈牢。

關于體驗損傷

1祭钉、非完全適配;

以百度網(wǎng)盤為例己沛,在首頁中優(yōu)秀的配色慌核,清晰的對比度,以及智能推薦和分類布局都在強調(diào)內(nèi)容和交互的引導申尼,讓人眼前一亮垮卓;但啟動頁、發(fā)現(xiàn)頁师幕、大部分二級頁面并未適配粟按,未能完全適配便推出暗黑模式這是對用戶體驗最大的損傷。

當然敢于嘗鮮是一件值得鼓勵和尊重的事,畢竟百度云盤是最早推出暗黑模式的應用之一灭将。

2疼鸟、顏色選擇對比度不足;

以知乎為例庙曙,知乎在文本顏色選擇時愚臀,選擇了對比度較低的灰色,通過字重做了區(qū)分矾利,頁面整體看起來很和諧,但是知乎核心在于內(nèi)容瀏覽馋袜,無法在最短時間看清標題男旗,而且在強光環(huán)境下無法正常瀏覽,對用戶造成一定的影響欣鳖,更類似于夜間模式察皇。

當然暗黑模式也有它的好處

用戶專注于內(nèi)容:用戶焦點在內(nèi)容區(qū)域,使內(nèi)容脫穎而出泽台,其他UI元素隱于暗黑什荣;

用戶瀏覽時長增加:舒適的視覺體驗,減少了用戶的眼部疲勞怀酷,也會相對的增加用戶瀏覽時長稻爬。(個人猜測,無支撐)

說了這么多蜕依,到底要不要在下次大版本迭代中將暗黑適配提上日程呢桅锄,首先你要有一個清晰的認識,暗黑模式適配坑很多样眠。

具體適配可以看【海邊來的設計師】公眾號《一篇吃透Dark Mode友瘤,搞定“暗黑/深色”適配》


作者:Don

微信:YZJNETNWZ

別急著走,再往下看看~

(關注公眾號回復“YuZJ”獲得完整PPT)

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末檐束,一起剝皮案震驚了整個濱河市辫秧,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌被丧,老刑警劉巖盟戏,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異甥桂,居然都是意外死亡抓半,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進店門格嘁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來笛求,“玉大人,你說我怎么就攤上這事√饺耄” “怎么了狡孔?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蜂嗽。 經(jīng)常有香客問我苗膝,道長,這世上最難降的妖魔是什么植旧? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任辱揭,我火速辦了婚禮,結果婚禮上病附,老公的妹妹穿的比我還像新娘问窃。我一直安慰自己,他們只是感情好完沪,可當我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布域庇。 她就那樣靜靜地躺著,像睡著了一般覆积。 火紅的嫁衣襯著肌膚如雪听皿。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天宽档,我揣著相機與錄音尉姨,去河邊找鬼。 笑死吗冤,一個胖子當著我的面吹牛啊送,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播欣孤,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼馋没,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了降传?” 一聲冷哼從身側響起篷朵,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎婆排,沒想到半個月后声旺,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡段只,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年腮猖,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赞枕。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡澈缺,死狀恐怖坪创,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情姐赡,我是刑警寧澤莱预,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站项滑,受9級特大地震影響依沮,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜枪狂,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一危喉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧州疾,春花似錦辜限、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽审磁。三九已至谈飒,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間态蒂,已是汗流浹背杭措。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留钾恢,地道東北人手素。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像瘩蚪,于是被迫代替她去往敵國和親泉懦。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,033評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 面試 Django REST framework 框架是一個用于構建Web API 的強大而又靈活的工具疹瘦。 通常簡...
    C丶y_04a7閱讀 447評論 0 0
  • 海星網(wǎng)絡生態(tài)是什么 海星網(wǎng)絡生態(tài)是基于區(qū)塊鏈技術崩哩,融合游戲娛樂、媒體資訊言沐、金 融科技邓嘹、社交經(jīng)濟等為一體開放完整的...
    小百合_f48d閱讀 310評論 0 0
  • 七絕榜 第一 詠史 / 作者:李夢唐 高閣垂裳調(diào)鼎時,可憐天下有微詞险胰。覆舟水是蒼生淚汹押,不到橫流君不知。 第二 步韻...
    張成昱閱讀 410評論 0 9
  • 對于孩子們: ● 讓參與者學會理解并欣賞團隊合作 ● 提高創(chuàng)意問題解決的技能 ● 提高組織能力 ● 學會欣賞對問題...
    暮云i閱讀 372評論 0 0
  • 昨天窖维,青青告訴我今年的17年他陪她一起,此刻的她就像小朋友終于得到了心儀已久的棉花糖一樣開心鸟悴。 16年陈辱,是...
    彎街小巷閱讀 235評論 0 0