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

iOS 13帶來(lái)暗黑模式，這樣的設(shè)計(jì)對(duì)于用戶(hù)體驗(yàn)有什么作用呢？產(chǎn)品如何要適配暗黑模式，有哪些問(wèn)題需要注意呢？

其實(shí)是想更新一篇長(zhǎng)文，但是呢，為了讓自己看起來(lái)經(jīng)常更新，所以我把長(zhǎng)文分成了兩篇。

第一篇主要講暗黑模式；第二篇主要講iOS 13交互優(yōu)化。

前言

之所以要寫(xiě)，是因?yàn)橛幸徊糠秩巳詫?duì)暗黑模式有一些不同的誤解。

描述不合理之處還請(qǐng)指正。

首先講兩大系統(tǒng)對(duì)設(shè)計(jì)的定義。

iOS 設(shè)計(jì)主題和設(shè)計(jì)原則

(具體描述做了刪減)

關(guān)鍵詞：尊重、限制、習(xí)慣

設(shè)計(jì)主題著重描述的是對(duì)于內(nèi)容的凸顯；設(shè)計(jì)原則著重強(qiáng)調(diào)交互體驗(yàn)。沒(méi)有因?yàn)榘岛谀Ｊ蕉鴮?duì)主題和原則做過(guò)多更新。

Material Design設(shè)計(jì)目標(biāo)和原則

Material Design是一種結(jié)合了傳統(tǒng)優(yōu)秀設(shè)計(jì)準(zhǔn)則以及科學(xué)技術(shù)創(chuàng)新的視覺(jué)設(shè)計(jì)語(yǔ)言（Material Design之后簡(jiǎn)稱(chēng)MD）。

關(guān)鍵詞：開(kāi)放、創(chuàng)意、品牌

MD本質(zhì)上是印刷設(shè)計(jì)的延伸，通過(guò)MD自身的介紹、目標(biāo)、原則可以看出，它主要強(qiáng)調(diào)的是視覺(jué)效果，排版、層級(jí)、創(chuàng)意、品牌等這些信息。

那么意味著在這套系統(tǒng)下，設(shè)計(jì)師會(huì)有很強(qiáng)的創(chuàng)造性和表現(xiàn)欲；對(duì)于用戶(hù)內(nèi)容識(shí)別、用戶(hù)體驗(yàn)提及較少。

小結(jié)

iOS更側(cè)重于用戶(hù)體驗(yàn)和內(nèi)容引導(dǎo)交互，MD側(cè)重視覺(jué)設(shè)計(jì)和品牌傳遞。

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

在咨詢(xún)公司的我意識(shí)到傳統(tǒng)企業(yè)（甲方）開(kāi)始推動(dòng)/干預(yù)設(shè)計(jì)，做為設(shè)計(jì)濕需要了解更多設(shè)計(jì)以外的事情，以幫助你更精準(zhǔn)理解客戶(hù)的需求（比如：定位、運(yùn)營(yíng)、用戶(hù)、業(yè)務(wù)線(xiàn)、信息整合以及未來(lái)發(fā)展趨勢(shì)等）。你了解的信息會(huì)輔助你對(duì)體驗(yàn)、品牌、定位有更深的思考，完成產(chǎn)品的升級(jí)。

所以說(shuō)，設(shè)計(jì)規(guī)范和原則只是幫助我們別犯一些低級(jí)錯(cuò)誤，具體落地實(shí)施考慮的點(diǎn)會(huì)更多。

不過(guò)涉及到暗黑模式，由于大前提的不同，所以設(shè)計(jì)風(fēng)格也會(huì)略有不同。

Dark Mode

小科普

1）暗黑模式真的能夠省電嗎？

暗黑模式確實(shí)會(huì)省電，但也是基于你的手機(jī)屏幕是OLED屏幕，OLED屏幕在黑色像素下幾乎不發(fā)光，所以才會(huì)有省電的效果（iPhoneX以下都是LED屏幕，沒(méi)有明顯省電效果）。

2）暗黑模式是否會(huì)護(hù)眼？

并不會(huì)，是的，不要再YY了。

暗黑模式僅僅只是減少了光污染，讓眼睛更加舒適。造成眼睛損傷的是藍(lán)光和頻閃。事實(shí)上并沒(méi)有減少藍(lán)光，也沒(méi)有解決頻閃的問(wèn)題，所以沒(méi)有；唯一有用的是夜覽模式，開(kāi)啟后會(huì)頁(yè)面變黃，一定程度上會(huì)減少藍(lán)光的攝入。

iOS Dark Mode

層級(jí)：在瀏覽官方文檔時(shí)，沒(méi)有發(fā)現(xiàn)任何關(guān)于層級(jí)方面的介紹，唯一介紹了層級(jí)的就是通過(guò)顏色和透明材質(zhì)做區(qū)分。所以，整體上來(lái)說(shuō)iOS更偏向扁平。

顏色：官方給出了一組系統(tǒng)色以及在特殊情況下使用的不透明灰色(6種)。

通過(guò)Light&Dark不同的顏色比較可以看出，暗黑模式下降低了顏色的飽和度，提高明度。

在實(shí)際頁(yè)面中，可以看出字體顏色層級(jí)分為三層，閱讀清晰，經(jīng)過(guò)測(cè)試，即使是在烈日當(dāng)空的天氣，文字依然清晰可見(jiàn)。

設(shè)計(jì)要點(diǎn)：

• 設(shè)計(jì)需聚焦于內(nèi)容，UI作為背景來(lái)凸顯內(nèi)容；
• Light和dDark模式需要保證界面能夠正常使用，所以顏色和icon上可能需要作出不同調(diào)整；
• Dark模式下無(wú)論怎么調(diào)整對(duì)比度和透明度，內(nèi)容需要清晰舒適。

Android Dark Mode

• 對(duì)比度：深色表面和100％白色文字的對(duì)比度至少為15.8：1；
• 深度：在較高的高度下，組件通過(guò)顯示較淺的表面顏色來(lái)表示深度；
• 去飽和度：原色被去飽和度，因此它們?cè)谒泻０胃叨壬暇ㄟ^(guò)至少4.5：1的Web Content Accessibility Guidelines（WCAG）AA標(biāo)準(zhǔn)；
• 有限的顏色：大表面使用深色表面顏色，且強(qiáng)調(diào)的顏色有限（淺色，不飽和色和明亮色，飽和色）；
• 層級(jí)：MD有非常清晰的層級(jí)刻度，輔助設(shè)計(jì)師完成布局和配色。

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

顏色：

• 關(guān)于背景色，采用的是深灰色，而不是純黑色，這是因?yàn)镸D它的特征之一就是投影。如果是純黑背景，投影看起來(lái)就像是外發(fā)光。所以，會(huì)選擇深灰色。
• 關(guān)于系統(tǒng)色，MD選用200基色原色，以達(dá)到WCAG最低對(duì)比度要求4.5:1。

設(shè)計(jì)要點(diǎn)：

• 通過(guò)低對(duì)比度的灰色保留鮮艷的；
• 顏色：使用情感化但要清晰可讀；
• 減少高對(duì)比度模糊，滿(mǎn)足閱讀效果；
• 簡(jiǎn)化UI獲取可瀏覽的信息。

小結(jié)

應(yīng)該選擇哪種系統(tǒng)的設(shè)計(jì)規(guī)范來(lái)完成應(yīng)用適配呢？

iOS對(duì)比度要求是7:1，字體顏色層級(jí)分為主、次、末和標(biāo)簽色，顏色不會(huì)特別突出。依舊遵循iOS的傳統(tǒng)美德，主次分明，清晰易讀，注重信息設(shè)計(jì)。

MD對(duì)比度要求是15.8:1，對(duì)頁(yè)面結(jié)構(gòu)劃分了明顯的層級(jí)，做了非常明細(xì)的規(guī)定，這對(duì)于一個(gè)新手設(shè)計(jì)師來(lái)說(shuō)有利于快速掌握頁(yè)面布局結(jié)構(gòu)和色彩的選擇。但對(duì)色彩的高對(duì)比度要求，導(dǎo)致文字顏色缺乏，整體閱讀性降低。

所以，從整體對(duì)比來(lái)看，iOS暗黑模式更加合理；當(dāng)前最佳適配給到「微信讀書(shū)」。

App完美適配Dark Mode會(huì)成為系統(tǒng)增值，反之會(huì)造成極大的體驗(yàn)損傷。

1）關(guān)于系統(tǒng)增值

為什么會(huì)說(shuō)系統(tǒng)增值，而不是應(yīng)用增值呢？

• 暗黑模式是系統(tǒng)功能，而應(yīng)用只是做適配。如果應(yīng)用做了適配，那么用戶(hù)心理已然接受了這是系統(tǒng)切換帶來(lái)的結(jié)果。
• 暗黑模式后UI設(shè)計(jì)被弱化，品牌傳遞在這一個(gè)層面便被弱化了，使應(yīng)用更加同質(zhì)化。那么要體現(xiàn)出應(yīng)用的差異性就需要從產(chǎn)品服務(wù)本身和交互方式下手，當(dāng)然這也是機(jī)遇之一。

2）關(guān)于體驗(yàn)損傷

a. 非完全適配

以百度網(wǎng)盤(pán)為例：在首頁(yè)中優(yōu)秀的配色，清晰的對(duì)比度，以及智能推薦和分類(lèi)布局都在強(qiáng)調(diào)內(nèi)容和交互的引導(dǎo)，讓人眼前一亮；但啟動(dòng)頁(yè)、發(fā)現(xiàn)頁(yè)、大部分二級(jí)頁(yè)面并未適配，未能完全適配便推出暗黑模式這是對(duì)用戶(hù)體驗(yàn)最大的損傷。

當(dāng)然，敢于嘗鮮是一件值得鼓勵(lì)和尊重的事，畢竟百度云盤(pán)是最早推出暗黑模式的應(yīng)用之一。

b. 顏色選擇對(duì)比度不足

以知乎為例，知乎在文本顏色選擇時(shí)，選擇了對(duì)比度較低的灰色，通過(guò)字重做了區(qū)分，頁(yè)面整體看起來(lái)很和諧。但是知乎核心在于內(nèi)容瀏覽，無(wú)法在最短時(shí)間看清標(biāo)題，而且在強(qiáng)光環(huán)境下無(wú)法正常瀏覽，對(duì)用戶(hù)造成一定的影響，更類(lèi)似于夜間模式。

當(dāng)然暗黑模式也有它的好處：

• 用戶(hù)專(zhuān)注于內(nèi)容：用戶(hù)焦點(diǎn)在內(nèi)容區(qū)域，使內(nèi)容脫穎而出，其他UI元素隱于暗黑；
• 用戶(hù)瀏覽時(shí)長(zhǎng)增加：舒適的視覺(jué)體驗(yàn)，減少了用戶(hù)的眼部疲勞，也會(huì)相對(duì)增加用戶(hù)瀏覽時(shí)長(zhǎng)（個(gè)人猜測(cè)，無(wú)支撐）。

說(shuō)了這么多，到底要不要在下次大版本迭代中將暗黑適配提上日程呢？

首先你要有一個(gè)清晰的認(rèn)識(shí)，暗黑模式適配坑很多。

作者：Don；微信：YZJNETNWZ

本文由 @UI設(shè)計(jì)師-小八主子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議