全庫模式 用戶模式 表模式_暗模式,亮模式和用戶的故事

全庫模式 用戶模式 表模式

I have been working on designing a UI for an app that has individuals over the age of 60 as its main audience. At some point, I found my design more appealing in dark mode. As a UX designer, I know that my opinions and preferences don’t matter and I have to see what the real user prefers. However, because of the pandemic restrictions, I was unable to do one-on-one user research to find out what the users prefer.

我一直在為一個以60歲以上的人群為主要受眾的應用程序設計UI。 在某種程度上,我發現我的設計在黑暗模式下更具吸引力。 作為UX設計師,我知道我的意見和偏好并不重要,我必須了解真正用戶的偏愛。 但是,由于流行病的限制,我無法進行一對一的用戶研究以找出用戶的偏愛。

My designed UIs for T2D patients over the age of 60 in both dark and light mode provided as a sample

外賣 (Takeaways)

Based on my findings in research studies, articles, blog posts and user comments, my key takeaways for deciding about using dark/light mode at designs are as follows:

根據我在研究報告,文章,博客文章和用戶評論中的發現,決定在設計中使用暗/亮模式的主要要點如下:

  1. You have to design for both modes and provide the user with the option of switching between them.(accessible and inclusive design)

    您必須為兩種模式進行設計,并向用戶提供在兩種模式之間進行切換的選項。
  2. For text-heavy screens, light background with dark text is preferred as default (legibility)

    對于文本較多的屏幕,默認使用淺色背景和深色文本(易讀性)
  3. For messaging interfaces, light background with dark text is preferred as default(semantic interpretation)

    對于消息傳遞接口,默認使用深色背景的淺色背景作為默認設置(語義解釋)
  4. For people experiencing Migraine, dark theme is preferred as default (health)

    對于經歷偏頭痛的人,默認使用深色主題(健康)
  5. For people with long hours of working with screens, dark UI is preferred as default (preference)

    對于長時間使用屏幕的人,默認使用深色UI(首選)

研究方法 (Research Approach)

I looked up academic research papers, articles published on the internet, blog posts, and any other possible resource that I might find the answer through. One of the most interesting resources I found was the comments people left for some of these articles and blog posts. They were actual users of dark and light themes that expressed their opinions about their preferences and most of the time with an extensive explanation about the reason for their preferences.

我查找了學術研究論文,在互聯網上發表的文章,博客文章以及其他可能找到答案的可能資源。 我發現的最有趣的資源之一是人們對這些文章和博客文章發表的評論。 他們是深色和淺色主題的實際用戶,他們表達了他們對喜好的看法,并且在大多數時候對喜好的原因進行了廣泛的解釋。

None of the resources that I found compelled me toward using or not using either of these modes. Most of the old resources have only explored this subject for text reading use cases only. Many of the new resources based their arguments on those old ones (as it seems to be reasonable to do so!). However, I didn’t only rely on academic studies and tried to find more clues and synthesize my own conclusion.

我發現的任何資源都沒有強迫我使用或不使用這兩種模式。 大部分舊資源僅將本主題用于文本閱讀用例。 許多新資源的論據都是基于那些舊資源的(因為這樣做似乎是合理的!)。 但是,我不僅依靠學術研究,還試圖尋找更多線索并綜合自己的結論。

I found that I can explore this subject from the following perspectives:

我發現我可以從以下角度探討這個主題:

  • Legibility (How readable is it?)

    易讀性(可讀性如何?)
  • Aesthetics (How beautiful is it?)

    美學(它有多美?)
  • Personal Preferences (Who prefers what?)

    個人首選項(誰喜歡什么?)
  • Emotional effects (How does it affect emotions?)

    情緒影響(它如何影響情緒?)
  • Semantic Interpretation (How does it affect understanding?)

    語義解釋(它如何影響理解?)
  • Visual fatigue (Which one makes the eye tired?)

    視覺疲勞(哪個會使眼睛疲勞?)
  • Technology benefits (Which one is technologically preferred?)

    技術優勢(技術上優先選擇哪一種?)
  • Health conditions (Which one is better for health?)

    健康狀況(哪種對健康有益?)

I defined a table(ish) structure, in which each of the defined aspects forms a row, and Dark and Light modes define a column each. Then I started to exploit facts out of my readings and placed them in the correct location in the table.

我定義了一個table(ish)結構,其中每個定義的方面都形成一行,并且Dark和Light模式分別定義了一列。 然后,我開始利用我的讀數中的事實,并將其放置在表中的正確位置。

The structure of my findings from various resources. Just shows how I approached. No readable content.
Structuring my findings from various resources
利用各種資源構建我的發現

The left and right columns are light and dark mode respectively and each row represents one of the criteria I mentioned before. Red squares are against that mode in the specific criterion and greens are in favor of that mode. (Blue square is the reference related to each fact.)

左列和右列分別是明暗模式,每一行代表我前面提到的標準之一。 在特定條件下,紅色方塊反對該模式,綠色方塊贊成該模式。 (藍色正方形是與每個事實相關的參考。)

There have been some situations where the resource discussed one mode instead of explaining the benefits of the other. So I divided up my findings into two categories, the ones favoring a mode and the ones against it.

在某些情況下,資源討論了一種模式而不是解釋另一種模式的好處。 因此,我將調查結果分為兩類,一類贊成一種模式,另一類反對這種模式。

A finding against light mode related to Health (left card in red), And a finding in favor of Legibility of light mode (right)
A finding against light mode related to Health (left card in red), And a finding in favor of Legibility of light mode (right card in green)
與健康相關的光照模式的發現(左卡為紅色),有利于光照模式的易讀性的發現(右卡為綠色)

研究成果 (Research Results)

After categorizing all the findings (Affinity finding), I synthesized the results of my (micro)research. Though I couldn’t find so many clues for every criteria, some of them with few findings were supported with strong research papers that made me compelled to conclude based on even a single finding. Here are the results for each criteria:

對所有發現進行分類(親和力發現)后,我綜合了我的(微型)研究的結果。 盡管我找不到每個標準的太多線索,但其中一些發現很少的證據得到了強有力的研究論文的支持,這些論文使我不得不基于一個發現就得出結論。 以下是每個條件的結果:

1- Legibility:

1-易讀性

  • Research results support the legibility of dark text on light background more than light text on dark background [1].

    研究結果支持淺色背景上的深色文本的可讀性比深色背景上的淺色文本[1]更多。
  • The smaller the font, the better it is for users to see the text in light mode[2].

    字體越小,用戶在淺色模式下查看文本的效果就越好[2]。
  • Higher luminance of light background leads to an improved perception of details [3].

    較高的背景光亮度可以改善對細節的感知[3]。

2- Aesthetics:

2-美學

I couldn’t find any structured and unbiased research on this issue. However, based on my explorations, I can say the overall number of users who left comments in favor of the beauty of the dark mode exceed from the comments supporting the light mode. (see for example comment sections at [4] and [5])

在這個問題上,我找不到任何結構合理的研究。 但是,根據我的探索,我可以說留下評論支持暗模式之美的用戶總數超出了支持亮模式的評論。 (例如,請參見[4]和[5]的注釋部分)

3- Personal Preferences:

3-個人首選項:

Research studies show that dark themes are widely used among professions that heavily rely on working on computer screens [1].

研究表明,深色主題在嚴重依賴于在計算機屏幕上工作的專業人士中得到廣泛使用[1]。

Large companies play an important role in forming preferences of their users. For example:

大型公司在形成用戶偏好方面起著重要作用。 例如:

  • As Jon Friedman (Head of Microsoft Office design) states in his article [6], Customer choice was why Microsoft brought darker UI theme to desktop apps in office 2010, and also they brought it to more Microsoft experiences like Teams, due to its popularity.

    正如喬恩·弗里德曼(Jon Friedman,Microsoft Office設計負責人)在他的文章[6]中指出的那樣,客戶的選擇就是為什么Microsoft在Office 2010中為桌面應用程序帶來了更暗的UI主題,并且由于其受歡迎程度,他們也將其帶入了更多的Microsoft體驗,例如Teams 。

  • Apple somehow convinces their users for using dark mode by stating: “ Dark Mode makes it easier to stay focused on your work, because your content stands out while darkened controls and windows recede into the background.” [7]

    蘋果通過某種方式說服用戶使用暗模式:“暗模式可以使您更輕松地專注于您的工作,因為當暗的控件和窗口退回到背景時,您的內容就顯得突出了。” [7]

  • Google states that dark theme has many benefits and provides guidelines for developers to utilize it on Android devices [8].

    Google指出深色主題有很多好處,并為開發人員在Android設備上使用它提供了指南[8]。

4- Emotional Effects

4-情感效果

Research studies approve that proficient color design increases pleasure, whereas inappropriate use of colors results in boredom, which in turn negatively affects mood and lessens the User Experience[9]. However, I couldn’t find any study or enough feedback from users to have any conclusion about emotional effects of dark/light themes.

研究表明,熟練的色彩設計可以增加愉悅感,而色彩使用不當則會導致無聊,反過來又會對情緒產生負面影響并減少用戶體驗[9]。 但是,我找不到任何研究或用戶的足夠反饋,無法得出有關暗色/淺色主題的情感影響的任何結論。

5- Semantic Interpretation

5-語義解釋

A research study [1] shows that for chat interfaces, dark themes increase the probability of interpreting an ambiguous message negatively compared to light themes. However, I couldn’t find any similar study for other types of UIs (e.g. photo galleries).

一項研究[1]顯示,對于聊天界面,與淺色主題相比,深色主題增加了負面解釋歧義消息的可能性。 但是,對于其他類型的UI(例如,照相館),我找不到任何類似的研究。

6- Visual fatigue

6-視覺疲勞

A research study by Nielsen Norman Group [2] states that there is no significant difference between dark and light themes in making people more tired. Also after reading users’ comments at[2,4,5], I can confirm this finding independently. There are users who found the dark mode so disturbing and some users who found it a relief. Finding an affinity requires conducting academic research studies considering age, visual status, gender, etc.

尼爾森·諾曼小組(Nielsen Norman Group)進行的一項研究[2]指出,深色和淺色主題在使人更疲勞方面沒有顯著差異。 同樣,在閱讀了[2,4,5]上用戶的評論后,我可以獨立地確認這一發現。 有些用戶發現暗模式非常令人不安,有些用戶發現它很輕松。 尋找親密關系需要進行年齡,視覺狀態,性別等方面的學術研究。

7- Technology

7-技術

OLED screens display black by deactivating pixel elements altogether. This way, true deep blacks can be achieved without the consumption of any power and this is one of the main reasons many users mentioned for their use of dark themes[1]. However, using any shades black (like dark gray) dissolves this benefit (i.e. not every dark mode design saves power!).

OLED屏幕通過完全停用像素元素來顯示黑色。 這樣,就可以在不消耗任何功率的情況下實現真正的深黑色,這是許多用戶提到使用深色主題的主要原因之一[1]。 但是,使用任何深淺的黑色(如深灰色)都可以消除此好處(即,并非每種深色模式設計都可以節省功率!)。

8- Health

8-健康

A research study [10] confirms that near night-time, prolonged exposure to bright computer screens negatively affects sleep, circadian cycles and is known to cause headaches. Another one [2] states that even though performance in light mode may be better in the short term, there may be a long-term cost associated with it. From my exploration in users’ comments on blog posts [2, 4, 5], I found that users who have experienced some sort of eye disease or visual impairment, or the ones dealing with Migraine found the dark mode more comfortable.

一項研究[10]證實,接近夜間,長時間暴露于明亮的計算機屏幕會對睡眠,晝夜節律周期產生負面影響,并已知會引起頭痛。 另一人[2]指出,即使在短期內在輕模式下的性能可能會更好,但可能會產生與之相關的長期成本。 通過對博客文章[2、4、5]中用戶評論的探索,我發現經歷過某種眼部疾病或視力障礙的用戶,或者與偏頭痛相關的用戶發現暗模式更為舒適。

反射 (Reflection)

This was a one-day exploration of the resources I found on the internet to find an answer to the simple question of using dark or light UI for people over the age of 60. It is clear to me that the leading reason for using dark UI by many large companies has no root in scientific research and is mostly concerned with marketing decisions and following trends. However, these decisions raise a lot of questions regarding mental and physical health of users that can be explored by researchers.

這是對我在互聯網上發現的資源的為期一天的探索,以找到針對60歲以上人群使用深色或淺色UI的簡單問題的答案。我很清楚,使用深色UI的主要原因許多大型公司的研究都沒有扎根于科學研究,并且主要關注營銷決策和趨勢。 但是,這些決定引起了很多有關用戶心理和身體健康的問題,研究人員可以探討這些問題。

I am confident that my findings can be used for designing interfaces on mobile devices and computer screens but cannot be employed at designing for VR/AR environments. This is another area of study that we need to explore more from the users’ perspective.

我相信我的發現可以用于設計移動設備和計算機屏幕上的界面,但不能用于設計VR / AR環境。 這是我們需要從用戶角度進行更多研究的另一個研究領域。

翻譯自: https://uxdesign.cc/the-story-of-dark-mode-light-mode-and-the-user-87782f180ae5

全庫模式 用戶模式 表模式

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/274444.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/274444.shtml
英文地址,請注明出處:http://en.pswp.cn/news/274444.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Rollup 與 Webpack 的 Tree-shaking

大家好,我是若川。我持續組織了近一年的源碼共讀活動,感興趣的可以 點此掃碼加我微信 lxchuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試…

聚類與分類的主要區別在于:_經驗在于細節:分析流服務的用戶體驗

聚類與分類的主要區別在于:看不見的差異 (The Invisible Difference) When app markets mature the overlap in features and designs grows closer as they catch up and copy each other. The more similar the apps are to one another, the more important the …

asp.net 動態創建TextBox控件 如何加載狀態信息

接著上文Asp.net TextBox的TextChanged事件你真的清楚嗎? 這里我們來說說狀態數據時如何加載的。雖然在Control中有調用狀態轉存的方法,但是這里有一個判斷條件 if (_controlState > ControlState.ViewStateLoaded) 一般的get請求這里的條件是不滿足…

從零實現一個迷你 Webpack

大家好,我是若川。我持續組織了近一年的源碼共讀活動,感興趣的可以 點此掃碼加我微信 lxchuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試…

ios 刷新遮罩遮罩_在Adobe XD中進行遮罩的3種方法

ios 刷新遮罩遮罩Are you new to Adobe XD? Or maybe you’re just stuck on how to create a simple mask? Here are 3 quick tips for how to mask your photos and designs in Adobe XD.您是Adobe XD的新手嗎? 或者,也許您只是停留在如何創建簡單的…

C#除法運算

C#中進行算術運算容易牽扯到類型的自動轉換,這種自動轉換稱之為隱式轉換,當然還可以人為的強制轉換 隱式轉換要求:不丟失精度,而且轉換前后都為數值 強制轉換:容易丟失可能會丟失精度 1 namespace 除法運算2 {3 cl…

Vite 4.0 正式發布!

源碼共讀我新出了:第40期 | vite 是如何解析用戶配置的 .env 的鏈接:https://www.yuque.com/ruochuan12/notice/p40也可以點擊文末閱讀原文查看,歡迎學習記筆記~12 月 9 日,Vite 4.0 正式發布。下面就來看看 Vite 4.0 有哪些更新吧…

代碼復審

我們CodingCook復審的是WWW的代碼,他們的項目是時間管理助手(TimeLine)。只是跟根據自己的經驗來看,不一定準 先說一下整體的感覺。WWW的代碼用了應該是比較符合面向對象的思想,借口,封裝隨處可見&#xff…

圖像標注技巧_保護互聯網上圖像的一個簡單技巧

圖像標注技巧補習 (TUTORIAL) Have you ever worried about sharing your images on the Internet? Anytime you upload something to the web you risk the chance of your work being used (without permission) by another.您是否曾經擔心過要在Internet上共享圖像&#xf…

【VueConf 2022】尤雨溪:Vue的進化歷程

大家好,我是若川。我持續組織了近一年的源碼共讀活動,感興趣的可以 點此掃碼加我微信 lxchuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試…

WCF netTcpBinding寄宿到IIS7

config配置文件不多說 <?xml version"1.0" encoding"utf-8" ?> <configuration><system.serviceModel><behaviors><serviceBehaviors><behavior name"myBehavior"><serviceMetadata/></behavior…

ar軟件測試工具_如何為用戶測試制作快速的AR原型

ar軟件測試工具We had a project recently with an element of AR-based interaction, which it turned out was impossible to create as a prototype in either Invision or Framer (our current stack). This had a massive impact on our ability to test with users in a …

未來ui設計的發展趨勢_2025年的未來UI趨勢?

未來ui設計的發展趨勢Humans are restless.人類是不安的。 Once we find something that works, we get used to it and we crave the next big thing. The next innovation. When will the future finally arrive? And when it does, how long will it take us to get used …

內存泄露檢測 vld

VLD是一款開源檢測內存泄露軟件的簡稱&#xff1a;Visual Leak Detector 網站&#xff1a;http://vld.codeplex.com/ 使用&#xff1a; 1. 安裝vld 或者 下載相關 .h&#xff0c;lib&#xff0c;dll 文件 2. 方法很簡單&#xff0c;只要在包含入口函數的.cpp文件中包含vld.h就可…

Monorepo 在網易的工程改造實踐

大家好&#xff0c;我是若川。我持續組織了近一年的源碼共讀活動&#xff0c;感興趣的可以 點此掃碼加我微信 lxchuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試…

這一年,Vue.js 生態開源之旅帶給我很大收獲~

大家好&#xff0c;我是若川。我持續組織了近一年的源碼共讀活動&#xff0c;感興趣的可以 點此掃碼加我微信 lxchuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試…

CSSyphus:煩躁不安的煩惱設計指南。

I’m trapped at home with my website. Or maybe it’s trapped at home with me. While some are using the weird lump of time provided by lockdown to indulge in baking, dancing, painting, singing, I’m using it to play around with code.我 被自己的網站困在家里。…

重構與臭豆腐4

重構要繼續&#xff0c;臭豆腐要做。   這個重構中各種提取類&#xff0c;方法&#xff0c;字段&#xff0c;可以方便的理解&#xff0c;如果使用了設置模式就更加邏輯清晰了。切東西也要講究刀法的。 重構可以方便的使用設計模式。設計模式為重構提供了目標。 比如多個if 可…

你構建的代碼為什么這么大?如何優化~

大家好&#xff0c;我是若川。我持續組織了近一年的源碼共讀活動&#xff0c;感興趣的可以 點此掃碼加我微信 lxchuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試…

用戶體驗需求層次_需求和用戶體驗

用戶體驗需求層次Shortly after the start of 2020 I led the development of a new website, and it went live in August. A week before the deployment, I paused development and took a step back in order to write about the project. Taking that pause, that step ba…