其實是想更新一篇長文荷愕,但是呢衡怀,為了讓自己看起來經(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)