זמנים אפלים מגיעים

או מה צריך לזכור בעת פיתוח מצב כהה עבור אפליקציה או אתר אינטרנט

2018 הראתה שמצבים אפלים בדרך. עכשיו, כשחצינו את 2019, אנחנו יכולים לומר בביטחון: הם כאן, והם בכל מקום.

דוגמה למוניטור ישן ירוק-על-שחור

נתחיל מהעובדה שמצב אפל הוא לא מושג חדש בכלל. זה היה בשימוש די הרבה זמן. ופעם, למעשה, במשך זמן רב, זה היה הדבר היחיד שהם השתמשו בו: מוניטורים היו מהזן "ירוק-על-שחור", אבל רק בגלל שהציפוי הזוהר בפנים פולט זוהר ירקרק בחשיפה לקרינה .

אבל גם לאחר הצגתם של צגים צבעוניים, מצב כהה המשיך להתקיים. למה זה כל כך?

ישנם שני מניעים עיקריים המסבירים מדוע היום כל אדם שני ממהר להוסיף נושא אפל ליישום שלו. קודם כל: מחשבים נמצאים בכל מקום. בכל מקום שאנחנו מסתכלים יש איזה שהוא מסך. אנו משתמשים במכשירים הניידים שלנו מהבוקר עד מאוחר בלילה. הנוכחות של מצב כהה מפחיתה את עומס העיניים כשאתה במיטה לפני השינה "בפעם האחרונה" גוללת בפיד החברתי שלך. רשתות. (אם אתה כמוני, "פעם אחרונה" עשויה להיות גלילה של 3 שעות R/EngineeringPorn. מצב כהה? כן בבקשה! )

סיבה נוספת היא טכנולוגיות ייצור תצוגה חדשות. דגמי דגל של חברות גדולות - אפל, גוגל, סמסונג, Huawei - מצוידים כולם במסכי OLED, שבניגוד לצגי LCD, אינם דורשים תאורה אחורית. ואלה באמת חדשות טובות עבור הסוללה שלך. דמיין שאתה צופה בתמונה של ריבוע שחור בטלפון שלך; עם LCD, התאורה האחורית תאיר את כל המסך למרות שרובו שחור. אבל כשצופים באותה תמונה על צג OLED, הפיקסלים המרכיבים את הריבוע השחור פשוט כבויים. זה אומר שהם לא צורכים אנרגיה בכלל.

סוגים אלה של צגים הופכים את המצבים האפלים למעניינים הרבה יותר. על ידי שימוש בממשק כהה, אתה יכול להאריך משמעותית את חיי הסוללה של המכשיר שלך. בדוק את העובדות והנתונים מ-Android Dev Summit בנובמבר האחרון כדי לראות בעצמך. מצבים כהים כמובן הולכים יד ביד עם שינויים בממשק המשתמש אז בואו נשפר את הידע שלנו!

מצבים כהים 101

קודם כל: "כהה" אינו זהה ל"שחור". אל תנסו להחליף רקע לבן בשחור, כי זה לא יאפשר להשתמש בצללים. עיצוב כזה יהיה סופר שטוח (בצורה רעה).

חשוב לזכור את העקרונות הבסיסיים של הצללה/תאורה. אובייקטים מוגבהים יותר צריכים להיות בהירים יותר בצל, לדמות תאורה והצללה מהחיים האמיתיים. זה מקל על ההבחנה בין המרכיבים השונים וההיררכיה שלהם.

שני ריבועים אפורים זהים עם צל, אחד על רקע שחור 100%, השני על #121212. ככל שהאובייקט עולה, הוא הופך לגוון בהיר יותר של אפור.

בעיצוב כהה, אתה עדיין יכול לעבוד עם צבע הבסיס הרגיל שלך כל עוד הניגודיות בסדר. בואו נסביר עם דוגמה.

בממשק זה, הפעולה העיקרית היא הכפתור הכחול הגדול בסרגל התחתון. אין בעיה מבחינת ניגודיות במעבר בין מצב בהיר או כהה, הכפתור עדיין מושך את העין, האייקון ברור ובסך הכל הכל בסדר.

כאשר משתמשים באותו צבע בדרכים שונות, למשל בטקסט, יהיו בעיות. נסה להשתמש בגוון (הרבה) פחות רווי של הצבע הראשי, או חפש דרכים אחרות לשלב צבעי מותג בממשק.

משמאל: אדום על שחור נראה רע. מימין: הפחיתו את הרוויה והכל נראה טוב. - משוער. תִרגוּם

כנ"ל לגבי כל צבעים חזקים אחרים שאולי השתמשת בהם, כגון צבעי אזהרה או שגיאה. גוגל משתמשת בשכבת-על של 40% שכבה לבנה על גבי צבע השגיאה המוגדר כברירת מחדל הנחיות לעיצוב חומרים בעת מעבר למצב כהה. זוהי נקודת התחלה די טובה מכיוון שהיא תשפר את רמות הניגודיות כדי להתאים לתקני AA. אתה, כמובן, תמיד יכול לשנות את ההגדרות כראות עיניך, אך הקפד לבדוק את רמות הניגודיות. אגב, כלי שימושי למטרה זו הוא התוסף Sketch - סטארק, שמראה בדיוק כמה ניגודיות יש בין 2 שכבות.

מה עם הטקסט?

הכל פשוט כאן: שום דבר לא צריך להיות 100% שחור ו-100% לבן ולהיפך. לבן מחזיר גלי אור בכל אורכי הגל, שחור סופג. אם תציב 100% טקסט לבן על רקע שחור של 100%, האותיות ישקפו אור, יימרחו ויהפכו פחות קריאות, מה שישפיע לרעה על הקריאה.

אותו דבר לגבי רקע לבן של 100%, המשקף יותר מדי אור מכדי להתמקד במלואו במילים. נסו לרכך מעט את הצבע הלבן, השתמשו באפור בהיר עבור רקעים וטקסט על רקע שחור. זה יפחית את עומס העיניים, ימנע מתח היתר שלהם

מצב כהה כבר כאן ולא ייעלם

כמות הזמן שאנו מבלים מול מסכים הולכת וגדלה כל הזמן, ובכל יום חדש צצים בחיינו מסכים חדשים, מרגע התעוררות ועד שאנו נרדמים. זו תופעה חדשה למדי, העיניים שלנו עדיין לא הורגלו לעלייה הזו בזמן המסך בשעת ערב מאוחרת. כאן נכנס לתמונה מצב האפל. עם הצגת התכונה הזו ב-macOS וב-Material Design (וככל הנראה גם ב-iOS), אנו מאמינים שבמוקדם או במאוחר היא תהפוך לברירת המחדל בכל היישומים, הן בנייד והן בדסקטופ. ועדיף להיות מוכן לזה!

הסיבה היחידה לא ליישם מצב כהה היא כאשר אתה בטוח ב-100% לחלוטין שהאפליקציה שלך משמשת אך ורק באור יום בהיר. עם זאת, זה לא קורה לעתים קרובות.

כדאי להזכיר כמה דברים שידרשו תשומת לב מיוחדת בעת יישום מצב אפל, מעבר לעקרונות הבסיסיים שסוכמו קודם לכן.

מבחינת נגישות, מצב כהה הוא לא הכי נוח, מכיוון שהניגודיות בדרך כלל נמוכה יותר, מה שבתורו לא משפר את הקריאות בכלל.

מקור

אבל תארו לעצמכם שאתם מתכוננים לשינה, אתם באמת רוצים לישון, אבל ממש לפני שאתם נרדמים, אתם זוכרים שאתם צריכים לשלוח למישהו הודעה סופר חשובה שלא יכולה לחכות אפילו לילה אחד. אתה תופס את הטלפון שלך, מדליק אותו ו-AAAAAH... הרקע הבהיר של ה-iMessage שלך ​​ישאיר אותך ער עוד 3 שעות. בעוד שטקסט בהיר על רקע כהה לא נחשב לנגיש ביותר, מצב כהה ממש בשנייה הזו להגדיל את הנוחות במיליון. הכל תלוי במצב בו נמצא המשתמש כרגע.

בגלל זה אנחנו מאמינים מצב כהה אוטומטי רעיון כל כך מגניב. הוא נדלק בערב ונכבה בבוקר. המשתמש אפילו לא צריך לחשוב על זה, וזה מאוד נוח. טוויטר עשתה עבודה מצוינת עם הגדרות המצב האפל שלה. בנוסף, יש להם גם רק מצב כהה וגם מצב כהה עוד יותר עבור כל מסכי ה-OLED הללו, חיסכון בסוללה וכל מה שקשור לזה. חשוב לציין כאן: תנו למשתמש אפשרות לעבור ידנית מתי שהוא רוצה: אין דבר גרוע יותר משינוי אוטומטי של הממשק ללא יכולת לעבור חזרה.

לטוויטר יש מצב כהה אוטומטי שנדלק בערב ונכבה בבוקר.

כמו כן, כאשר מפתחים ערכת נושא, כדאי לזכור שחלק מהדברים פשוט לא ניתנים לחושך.

קח עורך טקסט כמו Pages. אתה יכול להפוך את הממשק לכהה, אבל הגיליון עצמו תמיד יהיה לבן, המדמה גיליון נייר אמיתי.

דפים עם מצב כהה מופעל

אותו דבר לגבי כל סוגי עורכי יצירת התוכן, כגון Sketch או Illustrator. למרות שניתן להפוך את הממשק לכהה, משטח היצירה איתו אתה עובד תמיד יהיה לבן כברירת מחדל.

שרטוט במצב כהה ועדיין יש משטח יצירה לבן בהיר.

אז בלי קשר לאפליקציה, אנו מאמינים שמצבים אפלים יגיעו למערכת ההפעלה שבה אתה משתמש, כלומר עדיף להתכונן לעתיד. יהיה חשוך. 

אם אתה רוצה ללמוד עוד על פיתוח ממשקי משתמש כהים, הקפד לבדוק את ההנחיות חומר עיצוב, זה היה מקור המידע העיקרי שלנו עבור מאמר זה.

מקור: www.habr.com