અંધકાર સમય આવી રહ્યો છે

અથવા એપ્લિકેશન અથવા વેબસાઇટ માટે ડાર્ક મોડ ડેવલપ કરતી વખતે શું ધ્યાનમાં રાખવું

2018 એ બતાવ્યું કે ડાર્ક મોડ્સ રસ્તા પર છે. હવે જ્યારે આપણે 2019 માં અડધા રસ્તે છીએ, અમે વિશ્વાસ સાથે કહી શકીએ: તેઓ અહીં છે, અને તેઓ દરેક જગ્યાએ છે.

જૂના લીલા-પર-કાળા મોનિટરનું ઉદાહરણ

ચાલો એ હકીકતથી શરૂઆત કરીએ કે ડાર્ક મોડ બિલકુલ નવો કોન્સેપ્ટ નથી. તે ઘણા લાંબા સમયથી ઉપયોગમાં લેવાય છે. અને એક સમયે, હકીકતમાં, લાંબા સમય સુધી, તેઓ આ એકમાત્ર વસ્તુનો ઉપયોગ કરતા હતા: મોનિટર્સ "ગ્રીન-ઓન-બ્લેક" વિવિધતાના હતા, પરંતુ માત્ર એટલા માટે કે જ્યારે કિરણોત્સર્ગના સંપર્કમાં આવે ત્યારે અંદરની લ્યુમિનેસન્ટ કોટિંગ લીલોતરી ગ્લો બહાર કાઢે છે. .

પરંતુ રંગ મોનિટરની રજૂઆત પછી પણ, ડાર્ક મોડ અસ્તિત્વમાં રહ્યો. આવું કેમ છે?

આજે દરેક બીજી વ્યક્તિ તેમની એપ્લિકેશનમાં ડાર્ક થીમ ઉમેરવાની ઉતાવળમાં છે તેના બે મુખ્ય કારણો છે. સૌ પ્રથમ: કમ્પ્યુટર્સ દરેક જગ્યાએ છે. જ્યાં પણ આપણે જોઈએ છીએ ત્યાં અમુક પ્રકારની સ્ક્રીન છે. અમે સવારથી મોડી રાત સુધી અમારા મોબાઈલનો ઉપયોગ કરીએ છીએ. ડાર્ક મોડની હાજરી તમારા સોશિયલ ફીડ દ્વારા "છેલ્લી વખત" સ્ક્રોલ કરવા માટે જ્યારે તમે પથારીમાં જતા પહેલા પથારીમાં હોવ ત્યારે આંખનો તાણ ઘટાડે છે. નેટવર્ક્સ (જો તમે મારા જેવા છો, તો "છેલ્લી વખત" નો અર્થ 3-કલાકની સ્ક્રોલ હોઈ શકે છે R/EngineeringPorn. ડાર્ક મોડ? હા, કૃપા કરીને! )

બીજું કારણ નવી ડિસ્પ્લે પ્રોડક્શન ટેકનોલોજી છે. મોટી કંપનીઓના ફ્લેગશિપ મોડલ - Apple, Google, Samsung, Huawei - બધા OLED સ્ક્રીનોથી સજ્જ છે, જેને LCD ડિસ્પ્લેથી વિપરીત, બેકલાઇટિંગની જરૂર નથી. અને તે તમારી બેટરી માટે ખરેખર સારા સમાચાર છે. કલ્પના કરો કે તમે તમારા ફોન પર કાળા ચોરસની છબી જોઈ રહ્યા છો; એલસીડી સાથે, બેકલાઇટ સમગ્ર સ્ક્રીનને પ્રકાશિત કરશે, ભલે તે મોટાભાગની કાળી હોય. પરંતુ જ્યારે OLED ડિસ્પ્લે પર સમાન છબી જોવામાં આવે છે, ત્યારે બ્લેક સ્ક્વેર બનાવે છે તે પિક્સેલ્સ ખાલી બંધ થઈ જાય છે. આનો અર્થ એ છે કે તેઓ ઊર્જાનો ઉપયોગ કરતા નથી.

આ પ્રકારના ડિસ્પ્લે ડાર્ક મોડ્સને વધુ રસપ્રદ બનાવે છે. શ્યામ ઇન્ટરફેસનો ઉપયોગ કરીને, તમે તમારા ઉપકરણની બેટરી જીવનને નોંધપાત્ર રીતે વિસ્તૃત કરી શકો છો. તમારા માટે જોવા માટે ગયા નવેમ્બરના એન્ડ્રોઇડ ડેવ સમિટના તથ્યો અને આંકડાઓ તપાસો. અલબત્ત ડાર્ક મોડ્સ UI ફેરફારો સાથે એકસાથે જાય છે તેથી ચાલો આપણા જ્ઞાનને બ્રશ કરીએ!

ડાર્ક મોડ્સ 101

સૌ પ્રથમ: "શ્યામ" એ "કાળો" સમાન નથી. સફેદ પૃષ્ઠભૂમિને કાળા સાથે બદલવાનો પ્રયાસ કરશો નહીં, કારણ કે આ પડછાયાઓનો ઉપયોગ કરવાનું અશક્ય બનાવશે. આના જેવી ડિઝાઇન સુપર ફ્લેટ (ખરાબ રીતે) હશે.

શેડિંગ/લાઇટિંગના મૂળભૂત સિદ્ધાંતોને ધ્યાનમાં રાખવું મહત્વપૂર્ણ છે. ઓબ્જેક્ટો જે વધુ એલિવેટેડ છે તે છાયામાં હળવા હોવા જોઈએ, વાસ્તવિક જીવનની લાઇટિંગ અને શેડિંગનું અનુકરણ કરવું જોઈએ. આ વિવિધ ઘટકો અને તેમના વંશવેલો વચ્ચે તફાવત કરવાનું સરળ બનાવે છે.

પડછાયા સાથે બે સરખા ગ્રે ચોરસ, એક 100% કાળી પૃષ્ઠભૂમિ પર, બીજો #121212 પર. જેમ જેમ પદાર્થ વધે છે, તે ભૂખરા રંગનો હળવો શેડ બની જાય છે.

ડાર્ક થીમમાં, જ્યાં સુધી કોન્ટ્રાસ્ટ બરાબર હોય ત્યાં સુધી તમે તમારા નિયમિત બેઝ કલર સાથે કામ કરી શકો છો. ચાલો એક ઉદાહરણ સાથે સમજાવીએ.

આ ઇન્ટરફેસમાં, મુખ્ય ક્રિયા નીચેની પટ્ટીમાં મોટું વાદળી બટન છે. લાઇટ અથવા ડાર્ક મોડ વચ્ચે સ્વિચ કરતી વખતે કોન્ટ્રાસ્ટના સંદર્ભમાં કોઈ સમસ્યા નથી, બટન હજી પણ આકર્ષક છે, આઇકન સ્પષ્ટ છે અને એકંદરે બધું બરાબર છે.

જ્યારે સમાન રંગનો વિવિધ રીતે ઉપયોગ કરવામાં આવે છે, ઉદાહરણ તરીકે ટેક્સ્ટમાં, ત્યાં સમસ્યાઓ હશે. મુખ્ય રંગના (ઘણા) ઓછા સંતૃપ્ત શેડનો ઉપયોગ કરવાનો પ્રયાસ કરો અથવા ઇન્ટરફેસમાં બ્રાન્ડ રંગોને સમાવિષ્ટ કરવાની અન્ય રીતો શોધો.

ડાબે: કાળા પર લાલ ખરાબ દેખાય છે. જમણે: સંતૃપ્તિ ઘટાડે છે અને બધું સારું લાગે છે. - આશરે અનુવાદ

તે જ અન્ય કોઈપણ મજબૂત રંગો માટે જાય છે જેનો તમે ઉપયોગ કર્યો હોય, જેમ કે ચેતવણી અથવા ભૂલ રંગો. Google તેમના ડિફોલ્ટ એરર રંગની ટોચ પર 40% સફેદ સ્તર ઓવરલેનો ઉપયોગ કરે છે સામગ્રી ડિઝાઇન માર્ગદર્શિકા ડાર્ક મોડ પર સ્વિચ કરતી વખતે. આ એક ખૂબ જ સારો પ્રારંભિક બિંદુ છે કારણ કે તે AA ધોરણો સાથે મેળ કરવા માટે કોન્ટ્રાસ્ટ સ્તરોમાં સુધારો કરશે. તમે, અલબત્ત, તમને યોગ્ય લાગે તેમ હંમેશા સેટિંગ્સ બદલી શકો છો, પરંતુ કોન્ટ્રાસ્ટ લેવલ તપાસવાની ખાતરી કરો. માર્ગ દ્વારા, આ હેતુ માટે એક ઉપયોગી સાધન છે સ્કેચ પ્લગઇન - સ્ટાર્ક, જે દર્શાવે છે કે 2 સ્તરો વચ્ચે કેટલો કોન્ટ્રાસ્ટ છે.

લખાણ વિશે શું?

અહીં બધું સરળ છે: કંઈપણ 100% કાળું અને 100% સફેદ અને ઊલટું હોવું જોઈએ નહીં. સફેદ તમામ તરંગલંબાઇના પ્રકાશ તરંગોને પ્રતિબિંબિત કરે છે, કાળો શોષી લે છે. જો તમે 100% કાળી પૃષ્ઠભૂમિ પર 100% સફેદ ટેક્સ્ટ મૂકો છો, તો અક્ષરો પ્રકાશ, સ્મીયરને પ્રતિબિંબિત કરશે અને ઓછા સુવાચ્ય બનશે, જે વાંચનક્ષમતા પર નકારાત્મક અસર કરશે.

તે જ 100% સફેદ પૃષ્ઠભૂમિ માટે જાય છે, જે શબ્દો પર સંપૂર્ણ ધ્યાન કેન્દ્રિત કરવા માટે ખૂબ જ પ્રકાશને પ્રતિબિંબિત કરે છે. સફેદ રંગને થોડો નરમ કરવાનો પ્રયાસ કરો, બેકગ્રાઉન્ડ માટે આછો રાખોડી અને કાળી પૃષ્ઠભૂમિ પર ટેક્સ્ટનો ઉપયોગ કરો. આ આંખનો તાણ ઘટાડશે, અટકાવશે તેમના ઓવરવોલ્ટેજ

ડાર્ક મોડ અહીં છે અને દૂર થશે નહીં

આપણે જેટલો સમય સ્ક્રીનની સામે વિતાવીએ છીએ તે સતત વધી રહ્યો છે, અને દરેક નવા દિવસે, આપણા જીવનમાં નવી સ્ક્રીનો દેખાય છે, આપણે જાગીએ ત્યારથી લઈને આપણે ઊંઘી જઈએ ત્યાં સુધી. આ એકદમ નવી ઘટના છે; આપણી આંખો હજી મોડી સાંજે સ્ક્રીન ટાઈમમાં આટલો વધારો કરવા ટેવાયેલી નથી. આ તે છે જ્યાં ડાર્ક મોડ અમલમાં આવે છે. macOS અને મટિરિયલ ડિઝાઇન (અને સંભવતઃ iOS માં) માં આ સુવિધાની રજૂઆત સાથે, અમે માનીએ છીએ કે વહેલા અથવા પછીના સમયમાં તે મોબાઇલ અને ડેસ્કટોપ બંને એપ્લિકેશન્સમાં ડિફોલ્ટ બની જશે. અને આ માટે તૈયાર રહેવું વધુ સારું છે!

ડાર્ક મોડનો અમલ ન કરવાનું એકમાત્ર કારણ એ છે કે જ્યારે તમને 100% ખાતરી હોય કે તમારી એપ્લિકેશનનો ઉપયોગ ફક્ત તેજસ્વી દિવસના પ્રકાશમાં થાય છે. જો કે, આ વારંવાર થતું નથી.

તે કેટલીક બાબતોનો ઉલ્લેખ કરવા યોગ્ય છે કે જેના પર ડાર્ક મોડનો અમલ કરતી વખતે ખાસ ધ્યાન આપવાની જરૂર પડશે, અગાઉ સારાંશ આપેલા મૂળભૂત સિદ્ધાંતોથી આગળ.

ઍક્સેસિબિલિટીના સંદર્ભમાં, ડાર્ક મોડ સૌથી અનુકૂળ નથી, કારણ કે તેનાથી વિપરીત સામાન્ય રીતે ઓછું હોય છે, જે બદલામાં વાંચવાની ક્ષમતામાં બિલકુલ સુધારો કરતું નથી.

સોર્સ

પરંતુ કલ્પના કરો કે તમે પથારી માટે તૈયાર થઈ રહ્યા છો, તમે ખરેખર સૂવા માંગો છો, પરંતુ તમે સૂઈ જાઓ તે પહેલાં, તમને યાદ છે કે તમારે કોઈને એક અતિ મહત્વપૂર્ણ સંદેશ મોકલવાની જરૂર છે જે એક રાત પણ રાહ જોઈ શકતો નથી. તમે તમારો ફોન પકડો, તેને ચાલુ કરો અને AAAAAAH... તમારા iMessage ની લાઇટ બેકગ્રાઉન્ડ તમને બીજા 3 કલાક સુધી જાગૃત રાખશે. જ્યારે ડાર્ક બેકગ્રાઉન્ડ પર લાઇટ ટેક્સ્ટ સૌથી વધુ સુલભ માનવામાં આવતું નથી, ત્યારે આ સેકન્ડમાં ડાર્ક મોડ હોય તો એક મિલિયન દ્વારા સગવડ વધારો. તે બધું તે પરિસ્થિતિ પર આધારિત છે જેમાં વપરાશકર્તા આ ક્ષણે છે.

એટલા માટે અમે માનીએ છીએ સ્વચાલિત ડાર્ક મોડ આટલો સરસ વિચાર. તે સાંજે ચાલુ થાય છે અને સવારે બંધ થાય છે. વપરાશકર્તાને તેના વિશે વિચારવાની પણ જરૂર નથી, જે ખૂબ અનુકૂળ છે. ટ્વિટરે તેના ડાર્ક મોડ સેટિંગ્સ સાથે ખૂબ સરસ કામ કર્યું છે. વધુમાં, તેમની પાસે આ બધી OLED સ્ક્રીનો માટે માત્ર ડાર્ક મોડ અને તેનાથી પણ વધુ ડાર્ક મોડ બંને છે, જે બેટરી અને તેનાથી સંબંધિત દરેક વસ્તુની બચત કરે છે. અહીં નોંધવું અગત્યનું છે: વપરાશકર્તાને જ્યારે પણ તે ઇચ્છે ત્યારે મેન્યુઅલી સ્વિચ કરવાની તક આપો: પાછા સ્વિચ કરવાની ક્ષમતા વિના ઇન્ટરફેસને આપમેળે બદલવાથી વધુ ખરાબ કંઈ નથી.

ટ્વિટરમાં ઓટોમેટિક ડાર્ક મોડ છે જે સાંજે ચાલુ થાય છે અને સવારે બંધ થઈ જાય છે.

ઉપરાંત, થીમ વિકસાવતી વખતે, તે ધ્યાનમાં રાખવું યોગ્ય છે કે કેટલીક વસ્તુઓને ખાલી ડાર્ક બનાવી શકાતી નથી.

પૃષ્ઠોની જેમ ટેક્સ્ટ એડિટર લો. તમે ઇન્ટરફેસને ઘાટો બનાવી શકો છો, પરંતુ શીટ પોતે હંમેશા સફેદ રહેશે, કાગળની વાસ્તવિક શીટનું અનુકરણ કરશે.

ડાર્ક મોડ સક્ષમ કરેલ પૃષ્ઠો

સ્કેચ અથવા ઇલસ્ટ્રેટર જેવા તમામ પ્રકારના સામગ્રી બનાવટ સંપાદકો માટે પણ આ જ છે. જો કે ઈન્ટરફેસને ડાર્ક બનાવી શકાય છે, તમે જેની સાથે કામ કરો છો તે આર્ટબોર્ડ હંમેશા ડિફોલ્ટ રૂપે સફેદ હશે.

ડાર્ક મોડમાં સ્કેચ કરો અને હજુ પણ તેજસ્વી સફેદ આર્ટબોર્ડ છે.

તેથી એપ્લિકેશનને ધ્યાનમાં લીધા વિના, અમે માનીએ છીએ કે તમે જે ઓપરેટિંગ સિસ્ટમનો ઉપયોગ કરો છો તેના માટે ડાર્ક મોડ્સ મૂળ આવશે, એટલે કે ભવિષ્ય માટે તૈયારી કરવી શ્રેષ્ઠ છે. તે અંધારું હશે. 

જો તમે ડાર્ક UI વિકસાવવા વિશે વધુ જાણવા માંગતા હો, તો દિશાનિર્દેશો તપાસવાની ખાતરી કરો સામગ્રી ડિઝાઇન, આ લેખ માટે આ અમારી માહિતીનો મુખ્ય સ્ત્રોત હતો.

સોર્સ: www.habr.com