یا هنگام ایجاد حالت تاریک برای یک برنامه یا وب سایت چه مواردی را باید در نظر داشت
2018 نشان داد که حالت های تاریک در راه هستند. اکنون که در نیمه راه 2019 هستیم، می توانیم با اطمینان بگوییم: آنها اینجا هستند و همه جا هستند.
بیایید با این واقعیت شروع کنیم که حالت تاریک اصلا مفهوم جدیدی نیست. برای مدت طولانی مورد استفاده قرار گرفته است. و روزی روزگاری، در واقع، برای مدت طولانی، این تنها چیزی بود که استفاده می‌کردند: مانیتورها از نوع سبز-رو-سیاه بودند، اما فقط به این دلیل که پوشش شب تاب درون آن در معرض تشعشع یک درخشش سبز رنگ ساطع می‌کرد. .
اما حتی پس از معرفی مانیتورهای رنگی، حالت تاریک همچنان وجود داشت. چرا اینطور است؟
دو انگیزه اصلی وجود دارد که توضیح می دهد که چرا امروزه هر نفر دوم عجله دارد تا یک تم تاریک را به برنامه خود اضافه کند. اول از همه: کامپیوترها همه جا هستند. به هر طرف که نگاه می کنیم نوعی صفحه نمایش وجود دارد. ما از صبح تا پاسی از شب از دستگاه های تلفن همراه خود استفاده می کنیم. وجود حالت تاریک فشار چشم را زمانی که قبل از رفتن به رختخواب برای "آخرین بار" در فید اجتماعی خود در رختخواب هستید کاهش می دهد. شبکه های. (اگر شما هم مثل من هستید، "آخرین بار" ممکن است به معنای یک طومار 3 ساعته باشد . حالت تاریک؟ بله لطفا! )
دلیل دیگر فناوری های جدید تولید نمایشگر است. مدل های پرچمدار شرکت های بزرگ - اپل، گوگل، سامسونگ، هواوی - همگی به صفحه نمایش های OLED مجهز هستند که بر خلاف نمایشگرهای LCD، نیازی به نور پس زمینه ندارند. و این خبر واقعا خوبی برای باتری شماست. تصور کنید در حال مشاهده تصویری از یک مربع سیاه در گوشی خود هستید. با یک LCD، نور پس زمینه کل صفحه را روشن می کند، حتی اگر بیشتر آن سیاه باشد. اما هنگام مشاهده همان تصویر روی صفحه نمایش OLED، پیکسل هایی که مربع سیاه را تشکیل می دهند به سادگی خاموش می شوند. یعنی اصلا انرژی مصرف نمی کنند.
این نوع نمایشگرها حالت های تاریک را بسیار جالب تر می کنند. با استفاده از رابط تاریک، می توانید عمر باتری دستگاه خود را به میزان قابل توجهی افزایش دهید. . البته حالت‌های تاریک با تغییرات رابط کاربری همراه هستند، بنابراین بیایید دانش خود را بررسی کنیم!
حالت های تاریک 101
اول از همه: "تاریک" همان "سیاه" نیست. سعی نکنید پس زمینه سفید را با پس زمینه سیاه جایگزین کنید، زیرا استفاده از سایه ها را غیرممکن می کند. طرحی مانند این فوق‌العاده مسطح (از لحاظ بد) خواهد بود.
مهم است که اصول اولیه سایه/نور را در نظر داشته باشید. اشیایی که ارتفاع بیشتری دارند باید در سایه روشن‌تر باشند و نور و سایه‌زنی واقعی را شبیه‌سازی کنند. این امر تشخیص بین اجزای مختلف و سلسله مراتب آنها را آسان تر می کند.
دو مربع خاکستری یکسان با یک سایه، یکی روی پس‌زمینه 100% مشکی، دیگری روی #121212. همانطور که جسم بالا می رود، سایه روشن تری از خاکستری می شود.
در یک تم تیره، تا زمانی که کنتراست خوب باشد، همچنان می توانید با رنگ پایه معمولی خود کار کنید. با یک مثال توضیح می دهیم.
در این رابط، عمل اصلی دکمه آبی بزرگ در نوار پایین است. از نظر کنتراست هنگام جابجایی بین حالت روشن یا تاریک مشکلی وجود ندارد، دکمه همچنان چشم نواز است، نماد واضح است و در کل همه چیز خوب است.
وقتی از یک رنگ به روش های مختلف استفاده می شود، مثلاً در متن، مشکلاتی به وجود می آید. سعی کنید از یک سایه (بسیار) کمتر اشباع رنگ اصلی استفاده کنید یا به دنبال راه‌های دیگری برای ترکیب رنگ‌های برند در رابط باشید.
سمت چپ: قرمز روی مشکی بد به نظر می رسد. درست: اشباع را کاهش دهید و همه چیز خوب به نظر می رسد. - تقریبا ترجمه
همین امر در مورد هر رنگ قوی دیگری که ممکن است استفاده کرده باشید، مانند رنگ های هشدار یا خطا، صدق می کند. گوگل از یک لایه سفید 40 درصدی در بالای رنگ خطای پیش‌فرض استفاده می‌کند هنگام تغییر به حالت تاریک این یک نقطه شروع بسیار خوب است زیرا سطوح کنتراست را برای مطابقت با استانداردهای AA بهبود می بخشد. البته، همیشه می‌توانید تنظیمات را به دلخواه تغییر دهید، اما حتماً سطوح کنتراست را بررسی کنید. به هر حال، یک ابزار مفید برای این منظور افزونه Sketch است - ، که دقیقاً نشان می دهد که بین 2 لایه چقدر کنتراست وجود دارد.
در مورد متن چطور؟
همه چیز در اینجا ساده است: هیچ چیز نباید 100٪ سیاه و 100٪ سفید باشد و بالعکس. سفید امواج نور را با تمام طول موج ها منعکس می کند، سیاه جذب می کند. اگر متن ۱۰۰٪ سفید را روی یک پس‌زمینه ۱۰۰٪ سیاه قرار دهید، حروف نور را منعکس می‌کنند، لکه‌دار می‌شوند و کمتر خوانا می‌شوند، که بر خوانایی تأثیر منفی می‌گذارد.
همین امر در مورد پس‌زمینه 100% سفید نیز صدق می‌کند، که نور زیادی را منعکس می‌کند تا به طور کامل روی کلمات تمرکز کند. سعی کنید رنگ سفید را کمی ملایم کنید، از خاکستری روشن برای پس زمینه و متن روی پس زمینه سیاه استفاده کنید. این باعث کاهش فشار چشم می شود و از آن جلوگیری می کند
حالت تاریک اینجاست و از بین نمی رود
مدت زمانی که ما جلوی نمایشگرها می گذرانیم دائما در حال افزایش است و هر روز جدید، از لحظه بیدار شدن تا زمانی که به خواب می رویم، صفحه های جدیدی در زندگی ما ظاهر می شوند. این یک پدیده نسبتاً جدید است؛ چشمان ما هنوز به این افزایش زمان صفحه نمایش در اواخر عصر عادت نکرده است. اینجاست که حالت تاریک وارد عمل می شود. با ارائه این ویژگی در macOS و Material Design (و به احتمال زیاد در iOS)، ما معتقدیم که دیر یا زود در همه برنامه ها، اعم از موبایل و دسکتاپ، به حالت پیش فرض تبدیل خواهد شد. و بهتر است برای این آماده باشید!
تنها دلیل عدم اجرای حالت تاریک زمانی است که شما کاملاً 100% مطمئن هستید که برنامه شما منحصراً در نور روز روشن استفاده می شود. با این حال، این اغلب اتفاق نمی افتد.
شایان ذکر است مواردی که در اجرای حالت تاریک، فراتر از اصول اولیه خلاصه شده، توجه ویژه ای را می طلبد.
از نظر دسترسی، حالت تاریک راحت ترین حالت نیست، زیرا کنتراست به طور کلی کمتر است، که به نوبه خود خوانایی را به هیچ وجه بهبود نمی بخشد.
اما تصور کنید که در حال آماده شدن برای رختخواب هستید، واقعاً می خواهید بخوابید، اما درست قبل از اینکه بخوابید، به یاد می آورید که باید یک پیام بسیار مهم برای کسی بفرستید که حتی یک شب هم نمی تواند صبر کند. گوشی خود را می گیرید، آن را روشن می کنید و AAAAAAH... پس زمینه روشن iMessage شما را تا 3 ساعت دیگر بیدار نگه می دارد. در حالی که متن روشن در پس زمینه تاریک قابل دسترس ترین نیست، داشتن یک حالت تاریک در همین ثانیه باعث می شود راحتی را یک میلیون افزایش دهید. همه چیز به موقعیتی که کاربر در آن لحظه در آن قرار دارد بستگی دارد.
به همین دلیل است که ما فکر می کنیم حالت تاریک خودکار چنین ایده باحالی عصر روشن می شود و صبح خاموش می شود. کاربر حتی نیازی به فکر کردن به آن ندارد، که بسیار راحت است. توییتر با تنظیمات حالت تاریک خود کار بسیار خوبی انجام داده است. علاوه بر این، آنها فقط یک حالت تاریک و یک حالت حتی تاریک تر برای همه این صفحه نمایش های OLED دارند که باعث صرفه جویی در باتری و هر چیزی که مربوط به آن است. در اینجا مهم است که توجه داشته باشید: به کاربر این فرصت را بدهید که هر زمان که بخواهد به صورت دستی جابجا شود: هیچ چیز بدتر از تغییر خودکار رابط بدون امکان بازگشت به عقب نیست.
توییتر یک حالت تاریک خودکار دارد که عصرها روشن می شود و صبح خاموش می شود.
همچنین، هنگام توسعه یک موضوع، ارزش این را دارد که در نظر داشته باشید که برخی چیزها را نمی‌توان تاریک کرد.
از یک ویرایشگر متن مانند صفحات استفاده کنید. می توانید رابط را تیره کنید، اما خود برگه همیشه سفید خواهد بود و یک ورق کاغذ واقعی را شبیه سازی می کند.
صفحات با حالت تاریک فعال است
همین امر در مورد انواع ویرایشگرهای ایجاد محتوا، مانند Sketch یا Illustrator نیز صدق می کند. اگرچه رابط کاربری را می توان تیره کرد، اما تابلوی هنری که با آن کار می کنید همیشه به طور پیش فرض سفید خواهد بود.
در حالت تاریک طرح کنید و همچنان یک تابلوی هنری سفید روشن داشته باشید.
بنابراین صرف نظر از برنامه، ما معتقدیم حالت‌های تاریک به سیستم عاملی که استفاده می‌کنید بومی خواهند بود، به این معنی که بهتر است برای آینده آماده شوید. تاریک خواهد شد
اگر می‌خواهید درباره توسعه رابط‌های کاربری تاریک اطلاعات بیشتری کسب کنید، حتماً دستورالعمل‌ها را بررسی کنید ، این منبع اصلی اطلاعات ما برای این مقاله بود.
منبع: www.habr.com