چطور از سایه در طراحی رابط کاربر استفاده کنیم؟
سایهها در طراحی UI هر روز استفاده میشوند.
در طبیعت، شما باید سه متغیر را هنگام کار با سایهها در نظر داشته باشید.
- منبع نور که میتواند خورشید، ماه، لامپ یا حتی یک سطح بازتابنده باشد.
- جسمی است که نور را دریافت میکند.
- جسمی که بر روی آن سایه میافتد.
ما در مورد سطح سایه صحبت می کنیم.
هنگامی که منبع نور به شی و سطح سایه نزدیکتر میشود، تاری سایه شما افزایش مییابد. تاری همچنین زمانی اتفاق میافتد که خود جسم از سطح سایه دور شود.
از نظر رفتاری، ارتباط نزدیکی بین سایه و تاری وجود دارد. اگر از سطح سایه دورتر شوید، می بینید که اندازه سایه شما افزایش می یابد.
اگر میخواهید از سایهها در طراحی UI و UX استفاده کنید، پیروی از قوانینی که طبیعت به ما میدهد ضروری است. درست مانند سلسله مراتب و دستورالعملهای گشتالت در طراحی، ایجاد یک طراحی UI با سایههای واقعگرایانه ضروری است.
محو کردن سایه به ویژه زمانی مفید است که چندین شی را روی هم قرار دهید. بالاترین و شناورترین جسم نیز دارای سایهای با بیشترین مقدار تاری است. به این دلیل که اجسام بالاتر از سطح سایه دورتر هستند. فاصله بین جسم و سطح سایه تاری سایه شما را افزایش می دهد.
لطفاً توجه داشته باشید که فرض میکنیم هیچ زاویهای بین جسم، سطح سایه و منبع نور وجود ندارد. در غیر این صورت، تاثیر قابل توجهی بر شکل سایه، گسترش و تاری خواهد داشت.
فاصله (افست)
فاصله x و y سایه شما به جایی که منبع نور را در طراحی UI خود قرار میدهید بستگی دارد. بسته به ارتفاع منبع نور شما، فاصله میتواند کم و زیاد شود. به طور کلی، منبع نوری که بیشتر «در بالای» عناصر رابط کاربری شما قرار دارد، به معنای فاصلهای کمتر است.
رنگ در طبیعت
سایهها سیاه نیستند. سطوح سایه را تیره میکنند. این بدان معنی است که رنگ سایههای طراحی رابط کاربری شما نیز سیاه نیست. سایههای طراحی رابط کاربری شما از رنگهای عناصر دیگر مانند سطح سایه پیروی میکنند.
سایهها در حالت تاریک، یک روند طراحی بسیار محبوب در سال 2021 بود.
نکتهای که باید در نظر داشته باشید این است که تیرگی رنگهای سایه شما در زمان طراحی روی سطوح تیرهتر باید کمی بیشتر از زمانی باشد که سایهها را روی پس زمینه روشنتر طراحی می کنید. به این دلیل که پسزمینه طرح شما تاریکتر است.
بسته به میزان ارتفاع این عناصر از سطح، میتوانید عناصر سبکتری ایجاد کنید. نزدیکتر بودن به منبع نور به معنای رنگ روشنتر است.
برای مطالعه ادامه مقاله میتوانید به این لینک مراجعه کنید:
(زمان حدودی مطالعه: ۶ دقیقه)
گردآورنده: امیرحسین معظمی
#رابط_کاربر
#UI
@Dexign فلسفه دیزاین
______
Post #1169
2.53K