iOS 13帶來暗黑模式，這樣的設計對于用戶體驗有什麼作用呢？産品如何要适配暗黑模式，有哪些問題需要注意呢？

其實是想更新一篇長文，但是呢，為了讓自己看起來經常更新，所以我把長文分成了兩篇。

第一篇主要講暗黑模式；第二篇主要講iOS 13交互優化。

前言

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

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

首先講兩大系統對設計的定義。

iOS 設計主題和設計原則

(具體描述做了删減)

關鍵詞：尊重、限制、習慣

設計主題着重描述的是對于内容的凸顯；設計原則着重強調交互體驗。沒有因為暗黑模式而對主題和原則做過多更新。

Material Design設計目标和原則

Material Design是一種結合了傳統優秀設計準則以及科學技術創新的視覺設計語言（Material Design之後簡稱MD）。

關鍵詞：開放、創意、品牌

MD本質上是印刷設計的延伸，通過MD自身的介紹、目标、原則可以看出，它主要強調的是視覺效果，排版、層級、創意、品牌等這些信息。

那麼意味着在這套系統下，設計師會有很強的創造性和表現欲；對于用戶内容識别、用戶體驗提及較少。

小結

iOS更側重于用戶體驗和内容引導交互，MD側重視覺設計和品牌傳遞。

一款産品的成功因素有很多，優秀的用戶體驗和品牌傳遞絕對是其中之一。

在咨詢公司的我意識到傳統企業（甲方）開始推動/幹預設計，做為設計濕需要了解更多設計以外的事情，以幫助你更精準理解客戶的需求（比如：定位、運營、用戶、業務線、信息整合以及未來發展趨勢等）。你了解的信息會輔助你對體驗、品牌、定位有更深的思考，完成産品的升級。

所以說，設計規範和原則隻是幫助我們别犯一些低級錯誤，具體落地實施考慮的點會更多。

不過涉及到暗黑模式，由于大前提的不同，所以設計風格也會略有不同。

Dark Mode

小科普

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

暗黑模式确實會省電，但也是基于你的手機屏幕是OLED屏幕，OLED屏幕在黑色像素下幾乎不發光，所以才會有省電的效果（iPhoneX以下都是LED屏幕，沒有明顯省電效果）。

2）暗黑模式是否會護眼？

并不會，是的，不要再YY了。

暗黑模式僅僅隻是減少了光污染，讓眼睛更加舒适。造成眼睛損傷的是藍光和頻閃。事實上并沒有減少藍光，也沒有解決頻閃的問題，所以沒有；唯一有用的是夜覽模式，開啟後會頁面變黃，一定程度上會減少藍光的攝入。

iOS Dark Mode

層級：在浏覽官方文檔時，沒有發現任何關于層級方面的介紹，唯一介紹了層級的就是通過顔色和透明材質做區分。所以，整體上來說iOS更偏向扁平。

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

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

在實際頁面中，可以看出字體顔色層級分為三層，閱讀清晰，經過測試，即使是在烈日當空的天氣，文字依然清晰可見。

設計要點：

• 設計需聚焦于内容，UI作為背景來凸顯内容；
• Light和dDark模式需要保證界面能夠正常使用，所以顔色和icon上可能需要作出不同調整；
• Dark模式下無論怎麼調整對比度和透明度，内容需要清晰舒适。

Android Dark Mode

• 對比度：深色表面和100％白色文字的對比度至少為15.8：1；
• 深度：在較高的高度下，組件通過顯示較淺的表面顔色來表示深度；
• 去飽和度：原色被去飽和度，因此它們在所有海拔高度上均通過至少4.5：1的Web Content Accessibility Guidelines（WCAG）AA标準；
• 有限的顔色：大表面使用深色表面顔色，且強調的顔色有限（淺色，不飽和色和明亮色，飽和色）；
• 層級：MD有非常清晰的層級刻度，輔助設計師完成布局和配色。

在主視圖Dark模式下，使用不同透明度 投影的形式表示深度，Light模式下隻是通過投影做區分。

顔色：

• 關于背景色，采用的是深灰色，而不是純黑色，這是因為MD它的特征之一就是投影。如果是純黑背景，投影看起來就像是外發光。所以，會選擇深灰色。
• 關于系統色，MD選用200基色原色，以達到WCAG最低對比度要求4.5:1。

設計要點：

• 通過低對比度的灰色保留鮮豔的；
• 顔色：使用情感化但要清晰可讀；
• 減少高對比度模糊，滿足閱讀效果；
• 簡化UI獲取可浏覽的信息。

小結

應該選擇哪種系統的設計規範來完成應用适配呢？

iOS對比度要求是7:1，字體顔色層級分為主、次、末和标簽色，顔色不會特别突出。依舊遵循iOS的傳統美德，主次分明，清晰易讀，注重信息設計。

MD對比度要求是15.8:1，對頁面結構劃分了明顯的層級，做了非常明細的規定，這對于一個新手設計師來說有利于快速掌握頁面布局結構和色彩的選擇。但對色彩的高對比度要求，導緻文字顔色缺乏，整體閱讀性降低。

所以，從整體對比來看，iOS暗黑模式更加合理；當前最佳适配給到「微信讀書」。

App完美适配Dark Mode會成為系統增值，反之會造成極大的體驗損傷。

1）關于系統增值

為什麼會說系統增值，而不是應用增值呢？

• 暗黑模式是系統功能，而應用隻是做适配。如果應用做了适配，那麼用戶心理已然接受了這是系統切換帶來的結果。
• 暗黑模式後UI設計被弱化，品牌傳遞在這一個層面便被弱化了，使應用更加同質化。那麼要體現出應用的差異性就需要從産品服務本身和交互方式下手，當然這也是機遇之一。

2）關于體驗損傷

a. 非完全适配

以百度網盤為例：在首頁中優秀的配色，清晰的對比度，以及智能推薦和分類布局都在強調内容和交互的引導，讓人眼前一亮；但啟動頁、發現頁、大部分二級頁面并未适配，未能完全适配便推出暗黑模式這是對用戶體驗最大的損傷。

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

b. 顔色選擇對比度不足

以知乎為例，知乎在文本顔色選擇時，選擇了對比度較低的灰色，通過字重做了區分，頁面整體看起來很和諧。但是知乎核心在于内容浏覽，無法在最短時間看清标題，而且在強光環境下無法正常浏覽，對用戶造成一定的影響，更類似于夜間模式。

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

• 用戶專注于内容：用戶焦點在内容區域，使内容脫穎而出，其他UI元素隐于暗黑；
• 用戶浏覽時長增加：舒适的視覺體驗，減少了用戶的眼部疲勞，也會相對增加用戶浏覽時長（個人猜測，無支撐）。

說了這麼多，到底要不要在下次大版本疊代中将暗黑适配提上日程呢？

首先你要有一個清晰的認識，暗黑模式适配坑很多。

作者：Don；YZJNETNWZ

本文由 @UI設計師-小八主子 原創發布于人人都是産品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部