TGViewer
فلسفه دیزاین فلسفه دیزاین @dexign · 7.02K subscribers
Post #1169 2.53K
چطور از سایه در طراحی رابط کاربر استفاده کنیم؟

سایه‌ها در طراحی UI هر روز استفاده می‌شوند.
در طبیعت، شما باید سه متغیر را هنگام کار با سایه‌ها در نظر داشته باشید.
- منبع نور که می‌تواند خورشید، ماه، لامپ یا حتی یک سطح بازتابنده باشد.
- جسمی است که نور را دریافت می‌کند.
- جسمی که بر روی آن سایه می‌افتد.
ما در مورد سطح سایه صحبت می کنیم.

هنگامی که منبع نور به شی و سطح سایه نزدیکتر می‌شود، تاری سایه شما افزایش می‌یابد. تاری همچنین زمانی اتفاق می‌افتد که خود جسم از سطح سایه دور شود.
از نظر رفتاری، ارتباط نزدیکی بین سایه و تاری وجود دارد. اگر از سطح سایه دورتر شوید، می بینید که اندازه سایه شما افزایش می یابد.

اگر می‌خواهید از سایه‌ها در طراحی UI و UX استفاده کنید، پیروی از قوانینی که طبیعت به ما می‌دهد ضروری است. درست مانند سلسله مراتب و دستورالعمل‌های گشتالت در طراحی، ایجاد یک طراحی UI با سایه‌های واقع‌گرایانه ضروری است.

محو کردن سایه به ویژه زمانی مفید است که چندین شی را روی هم قرار دهید. بالاترین و شناورترین جسم نیز دارای سایه‌ای با بیشترین مقدار تاری است. به این دلیل که اجسام بالاتر از سطح سایه دورتر هستند. فاصله بین جسم و سطح سایه تاری سایه شما را افزایش می دهد.

لطفاً توجه داشته باشید که فرض می‌کنیم هیچ زاویه‌ای بین جسم، سطح سایه و منبع نور وجود ندارد. در غیر این صورت، تاثیر قابل توجهی بر شکل سایه، گسترش و تاری خواهد داشت.

فاصله (افست)
فاصله x و y سایه شما به جایی که منبع نور را در طراحی UI خود قرار می‌دهید بستگی دارد. بسته به ارتفاع منبع نور شما، فاصله می‌تواند کم و زیاد شود. به طور کلی، منبع نوری که بیشتر «در بالای» عناصر رابط کاربری شما قرار دارد، به معنای فاصله‌ای کمتر است.

رنگ در طبیعت
سایه‌ها سیاه نیستند. سطوح سایه را تیره می‌کنند. این بدان معنی است که رنگ سایه‌های طراحی رابط کاربری شما نیز سیاه نیست. سایه‌های طراحی رابط کاربری شما از رنگ‌های عناصر دیگر مانند سطح سایه پیروی می‌کنند.

سایه‌ها در حالت تاریک، یک روند طراحی بسیار محبوب در سال 2021 بود.
نکته‌ای که باید در نظر داشته باشید این است که تیرگی رنگ‌های سایه شما در زمان طراحی روی سطوح تیره‌تر باید کمی بیشتر از زمانی باشد که سایه‌ها را روی پس زمینه روشن‌تر طراحی می کنید. به این دلیل که پس‌زمینه طرح شما تاریکتر است.

بسته به میزان ارتفاع این عناصر از سطح، می‌توانید عناصر سبک‌تری ایجاد کنید. نزدیک‌تر بودن به منبع نور به معنای رنگ روشن‌تر است.

برای مطالعه ادامه مقاله می‌توانید به این لینک مراجعه کنید:

(زمان حدودی مطالعه: ۶ دقیقه)
گردآورنده: امیرحسین معظمی


#رابط_کاربر
#UI

@Dexign فلسفه دیزاین

______
The Designer's Toolbox How to use shadows in UI design - The Designer's Toolbox Shadows are used in UI design every day. But how can you use shadows effectively when designing? Read our guide on shadows in UI design.
  • 👍 7
  • ❤ 2
More from @dexign
  1. Jan 7, 2026چرا کارفرمایان طراحانی را می‌خواهند که مانند مدیر محصول فکر کنند، نه توسعه‌دهنده؟ در دنیای…
  2. Dec 31, 2025هیرو سکشن‌ها مرده‌اند. این راه‌حل‌ها جایگزین شده‌اند باید از هیروهای عریض فاصله گرفت وقتی…
  3. Dec 27, 2025درس‌های UX از زندگی روزمره بیشتر افراد UX را فقط مربوط به اپلیکیشن‌ها، وبسایت‌ها یا داشبور…
  4. Dec 24, 2025۳ قابلیت شگفت‌انگیز جدید ChatGPT که حتماً باید امتحان کنید در بحبوحه‌ی سروصدای انتشار GPT-…
  5. Dec 20, 2025سیستم طراحی تو حالا می‌تواند با هوش مصنوعی صحبت کند! از چسب انسانی بودن بین ابزارهای جداگا…
  6. Dec 17, 2025باهوش‌ترین آدم‌هایی که می‌شناسم، دنبال مهارتی‌اند که زمانی بی‌فایده تصور می‌شد! همان فناور…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →