<label id="2a06w"><tt id="2a06w"></tt></label><label id="2a06w"><tt id="2a06w"><em id="2a06w"></em></tt></label><menu id="2a06w"></menu>
  • <dfn id="2a06w"><var id="2a06w"><label id="2a06w"></label></var></dfn>
    <sup id="2a06w"><button id="2a06w"><em id="2a06w"></em></button></sup>
    <dfn id="2a06w"><var id="2a06w"></var></dfn>
    <dfn id="2a06w"></dfn>
  • <dfn id="2a06w"><code id="2a06w"><ins id="2a06w"></ins></code></dfn>
  • <small id="2a06w"><samp id="2a06w"></samp></small>
  • <dfn id="2a06w"><table id="2a06w"><center id="2a06w"></center></table></dfn>
    <label id="2a06w"><tt id="2a06w"><em id="2a06w"></em></tt></label>
    <strike id="2a06w"><form id="2a06w"></form></strike>
    <menu id="2a06w"><tt id="2a06w"></tt></menu>

    將想法與焦點和您一起共享

    網(wǎng)站建設(shè)中為暗模式設(shè)計發(fā)布者:本站     時間:2022-04-02 09:04:01

    黑暗模式越來越受歡迎。大多數(shù)手機和平板電腦界面都可以選擇讓用戶切換到深色,而不是標(biāo)準的淺色默認配色方案。

     

    素馬設(shè)計認為大多數(shù)用戶對于是否使用深色或淺色用戶界面都有明顯的偏好。

     

    這就是為什么越來越多的設(shè)計師在他們的項目中添加暗模式選項的原因。雖然它可能需要更多的工作和很多思考,但它可以幫助為用戶創(chuàng)建更強大的聯(lián)系和個性化元素。這里有更多關(guān)于這種設(shè)計趨勢的信息。

     

    什么是暗模式?

     



     



     

    深色模式是一種在設(shè)計中使用深色背景和淺色文本元素的配色方案。很長一段時間以來,我們一直在創(chuàng)建黑暗的網(wǎng)站和項目,但“黑暗模式”已經(jīng)變得更加重要,因為在大多數(shù)用戶界面中都調(diào)用了切換選項。

     

    您可以在沒有光的替代方案的情況下在暗模式下設(shè)計一些東西。

     

    這種趨勢更側(cè)重于同時包含兩者的項目。雖然主要設(shè)計有一個淺色界面-淺色背景和深色文本元素-翻轉(zhuǎn)是深色模式。用戶可以在他們的設(shè)備上切換明暗模式。

     

    該選項完全植根于用戶偏好。一些用戶只是更喜歡暗模式。其他人說,黑暗模式可以減少眼睛疲勞,并且在晚上試圖避開盡可能多的光線時使用的破壞性更小。

     

    從設(shè)計的角度來看,黑暗模式似乎更喜怒無常,更時尚。每個網(wǎng)站都是光明的,但只有一些是黑暗的。這種關(guān)聯(lián)甚至可以與一些生活在黑暗模式領(lǐng)域的行業(yè)和品牌聯(lián)系起來,例如視頻游戲服務(wù)、流媒體視頻和音頻。

     

    歸根結(jié)底,有些用戶更喜歡深色模式,為他們設(shè)計可以增加用戶和與設(shè)計的交互。雖然暗模式不是必需品,但它是一種趨勢設(shè)計技術(shù)。您不僅可以在移動設(shè)備上找到它,而且一些桌面網(wǎng)站也提供了一個選項。

     

    為什么你應(yīng)該考慮暗模式

     



     

    暗模式為用戶和您帶來了一些好處。雖然主要好處是用戶偏好和創(chuàng)建用戶想要的東西,并將以他們想要的交互方式工作,但剩余的好處可能是更多的用戶和更多的交互。

     

    考慮添加暗模式設(shè)計的其他原因包括:

     

    在黑暗中,用戶的眼睛會更容易。人們越來越習(xí)慣于根據(jù)環(huán)境條件在暗模式和亮模式之間切換。

    深色背景可以提供對視覺效果的關(guān)注,可以引起對文本元素的關(guān)注。

    對于有一些視力障礙的人來說,深色模式可能更可取,如果您有該選項,則可以使設(shè)計更易于使用。

    暗模式可以延長電池壽命。

    它看起來很酷,你想嘗試一下。

     

    暗模式設(shè)計的11個設(shè)計技巧

     



     

    如果要實現(xiàn)暗模式,請記住以下提示:

     

    1.暗模式和亮模式不僅僅是黑底白字或白底黑字。這實際上可能是太多的對比。考慮一個不是純黑色的黑色或深色選項。材料設(shè)計建議是#121212。深藍色和紫色也可以很好地作為暗模式的背景選擇。

     

    2.對深色背景上的顏色使用相同的概念。在某些情況下,純白色可能太亮并導(dǎo)致眼睛疲勞。使用明亮的,不是很白的色調(diào)。

     

    3.對于白色以外的顏色,請避免使用高度飽和的顏色。它們可能沒有與深色背景形成足夠的對比。堅持使用調(diào)色板中較淺的顏色變體。大多數(shù)設(shè)計師為此創(chuàng)建了第二個“深色”調(diào)色板。

     

    4.為文本創(chuàng)建顏色層次結(jié)構(gòu)。(即使在淺色背景下,這也是一個好主意。)這個概念也源于MaterialDesign,它使用淺色文本的層次進行注釋。高強調(diào)級別(87%白色的透明度)適用于最大、最重要的文本;中等強調(diào)白色(60%)用于大部分正文,包括正文;和禁用的文本(38%白色)是輕微可見的。

     

    5.想想元素在黑暗中的實際外觀,并在不同的光線下測試設(shè)計。請記住,用戶經(jīng)常在黑暗環(huán)境中使用黑暗模式,這會影響屏幕上的顯示方式。

     

    6.暗模式應(yīng)該帶有一個關(guān)閉/打開開關(guān)。這是一些用戶會喜歡而其他用戶不會喜歡的東西。相應(yīng)地計劃并使用常用圖標(biāo)來表示此功能。

     

    7.如果您沒有白色版本或顏色不包含足夠的對比度,則徽標(biāo)可以在深色模式下呈現(xiàn)獨特的情況。在深色模式下將徽標(biāo)放在白色容器中以解決此問題。確保創(chuàng)建一種看起來有意的樣式,并為徽標(biāo)在盒裝元素內(nèi)留出一點呼吸空間。

     

    8.在深色模式下,小而緊湊的調(diào)色板更容易管理。

     

    9.在為深色模式創(chuàng)建調(diào)色板時考慮情緒。這并不像改變背景顏色并留下其余部分那么簡單。黑暗模式天生會吸引人們不同的情緒狀態(tài)。這可能會影響您在網(wǎng)站或應(yīng)用程序主題的深色版本中規(guī)劃顏色的方式。

     

    10.注意主要參與者制定的指導(dǎo)方針。蘋果和谷歌都有一套暗模式原則。您可以在此處找到Apple的人機界面指南,并在此處找到Google的MaterialDesign文檔。

     

    11.不要忘記可訪問性規(guī)則,并根據(jù)通用標(biāo)準測試您的深色模式調(diào)色板。你可以在這里測試你的顏色。



    選擇我們,優(yōu)質(zhì)服務(wù),不容錯過
    1. 優(yōu)秀的網(wǎng)絡(luò)資源,強大的網(wǎng)站優(yōu)化技術(shù),穩(wěn)定的網(wǎng)站和速度保證
    2. 15年上海網(wǎng)站建設(shè)經(jīng)驗,優(yōu)秀的技術(shù)和設(shè)計水平,更放心
    3. 全程省心服務(wù),不必擔(dān)心自己不懂網(wǎng)絡(luò),更省心。
    ------------------------------------------------------------
    24小時聯(lián)系電話:021-58370032
    關(guān)鍵詞標(biāo)簽:上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開發(fā)
    99人妻中文字幕视频在,亚洲无码视频在线免费看,久久国产乱子伦免费精品,日本中文字幕色视频网站
    <label id="2a06w"><tt id="2a06w"></tt></label><label id="2a06w"><tt id="2a06w"><em id="2a06w"></em></tt></label><menu id="2a06w"></menu>
  • <dfn id="2a06w"><var id="2a06w"><label id="2a06w"></label></var></dfn>
    <sup id="2a06w"><button id="2a06w"><em id="2a06w"></em></button></sup>
    <dfn id="2a06w"><var id="2a06w"></var></dfn>
    <dfn id="2a06w"></dfn>
  • <dfn id="2a06w"><code id="2a06w"><ins id="2a06w"></ins></code></dfn>
  • <small id="2a06w"><samp id="2a06w"></samp></small>
  • <dfn id="2a06w"><table id="2a06w"><center id="2a06w"></center></table></dfn>
    <label id="2a06w"><tt id="2a06w"><em id="2a06w"></em></tt></label>
    <strike id="2a06w"><form id="2a06w"></form></strike>
    <menu id="2a06w"><tt id="2a06w"></tt></menu>