سایه ها و گرادیان ها: در استعاره های بصری خود ثابت قدم باشید

Drop-shadows و gradients دو مورد از رایج ترین عناصر طراحی در وب هستند.

آنها را با سبک های مختلف همراه خواهید یافت. آنها جلوه های مفیدی برای طراحان وب هستند زیرا جذاب، مفید و آسان برای ایجاد با هر برنامه گرافیکی هستند. اما آنها یک جنبه تاریک دارند: مکرر مورد سوء استفاده قرار می‌گیرند.

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

در این مقاله، ما به چه سایه‌ها و گرادیان‌ها انجام می‌دهند می‌پردازیم، در مورد نحوه استفاده مؤثر از آنها صحبت خواهیم کرد. > و ما به چند نمونه از اشتباهات و نحوه رفع آنها نگاه خواهیم کرد.

 

Drop-Shadows و Gradients چه کاری انجام می دهند؟

وظیفه یک طراح وب ایجاد الگوهای رنگی برای صفحات دو بعدی درخشان است. (چند استثنا در این مورد وجود دارد: وب سایت ها را می توان مثلاً روی صفحه Kindle مشاهده کرد که نمی درخشد؛ و وب سایت ها را می توان روی کاغذ چاپ کرد.) این صفحه ها منعکس کننده دنیای واقعی نیستند. آنها حتی خیلی شبیه دنیای واقعی نیستند. به همین دلیل، ما هیچ الزام واقعی نداریم که الگوهای وب‌سایت‌هایمان را با اشیاء در دنیای سه‌بعدی‌ای که در آن زندگی می‌کنیم ارتباط داشته باشند.

سیستم‌های عاملی مانند یونیکس و داس دارای رابطی هستند که چیزی جز متن رنگی روی صفحه نیست. سایرین، مانند ویندوز و Mac OS X، مملو از توهمات اشیاء واقعی هستند. به عنوان مثال، OS X دارای یک داک است که شبیه یک میز با سطحی براق است که در دوردست عقب می‌نشیند، یک نوار منو که لبه‌های اریب آن باعث می‌شود کمی برآمده شده باشد، و نوارهای اسکرول که به نظر می‌رسد پاستیل‌های شفاف دارند. /p>

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

توهم فضا، تصورات را به دنیایی که ما در آن راحت زندگی می کنیم، متصل می کند.

مهم‌ترین دلیلی که چرا ما اشیاء خیالی را به دنیای واقعی مرتبط می‌کنیم این است که ما در تعامل با اشیاء در دنیای سه‌بعدی خود متخصص هستیم. ما تجربه ای در برخورد با اشیاء سه بعدی داریم و دانش رمز بصری را جمع آوری کرده ایم که به ما در مورد روابط اشیاء با یکدیگر در فضا می گوید.

تا حدی به این دلیل است که شاهکار تفسیر نور بسیار چشمگیر است که ما از توهم یا ایجاد ظاهر اشیاء لذت می بریم. ما اغلب بیشتر درگیر نقاشی های دراماتیکی شبیه به زندگی از اشیاء معمولی مانند خانه ها و سیب ها هستیم تا خود اشیا. ما انسان‌ها هزاران سال است که نقاشی‌هایی خلق کرده‌ایم که برای ارائه ایده‌ها اشیا طراحی شده‌اند. قرص‌ها و میزهای توهم‌آمیز روی صفحه چیزی جز جدیدترین تجلی این سنت دیرینه نیستند.

اما چیزی بیشتر از لذت در آن وجود دارد. شکل و موقعیت به ما اطلاعات در مورد چگونگی ارتباط اشیاء با یکدیگر می دهد. برای مثال، شکل لوزی عمودی بلند نوار پیمایش در پنجره سافاری، این توهم را ایجاد می‌کند که نسبت به عناصر اطراف آن «بالاتر» یا نزدیک‌تر به من می‌نشیند. این به آن اهمیت بیشتری در طراحی می دهد، که مناسب است زیرا نوار اسکرول یک عنصر رابط ضروری برای پیمایش صفحه است.

استعاره های بصری استطاعت درک شده را ایجاد می کنند.

با ظاهر شدن به‌عنوان یک شی، نوار پیمایش «استطاعت را ایجاد می‌کند. ” به این معنا که خود را از طریق استعاره به ویژگی‌های اشیاء واقعی مرتبط می‌کند که خود را به استفاده‌های خاصی می‌رسانند. برای مثال، یک دکمه اریب در یک صفحه وب، نشان می‌دهد که از عهده فشار دادن بر می‌آید. ما می‌توانیم هر چیزی را در یک صفحه قابل کلیک کنیم، اما مرتبط کردن یک عنصر قابل کلیک با تصویر چیزی قابل فشار، عملکرد آن را به روشی واضح، واضح و حتی دلپذیر نشان می‌دهد.

سایه‌ها و شیب‌ها ابزارهای اساسی برای ایجاد توهم فضا هستند.

Drop-shadows و gradients دو ابزاری هستند که به ایجاد توهم سه بعدی کمک می کنند و روابط فضایی اشیاء را در صفحه نشان می دهند. وقتی این اطلاعات سه بعدی به خوبی انجام شود، طراحی را زیباتر و قابل درک تر می کند.

در دنیای واقعی، سایه‌ها زمانی ایجاد می‌شوند که یک شی مانع برخورد منبع نور به سطحی شود که پشت آن قرار دارد. این یکی از دلایلی است که مردم می‌گویند سایه‌ها باعث می‌شوند طرح‌های دوبعدی «پاپ» شوند: زیرا باعث می‌شوند اشیا از عناصر دیگر بیرون زده یا در بالای آن شناور باشند.

گرادیان ها زمانی ظاهر می شوند که یک قسمت از یک جسم به منبع نور نزدیکتر از قسمت دیگر باشد. در نتیجه، قسمت نزدیکتر روشن تر و قسمت دورتر تیره تر به نظر می رسد. (البته هنگامی که چندین منبع نور با هم تعامل داشته باشند یا زمانی که منابع نور رنگ های متفاوتی دارند، گرادیان ها پیچیده تر می شوند.)

بنابراین، با تقلید از تأثیرات نور در دنیای واقعی، سایه‌ها و گرادیان‌ها اطلاعاتی را درباره اشیاء استعاری، منابع نوری خیالی و روابط آنها با یکدیگر ارتباط برقرار می‌کنند.

 

نحوه استفاده موثر از Drop-Shadows و Gradient

در اینجا یک امکان وجود دارد: به هیچ وجه از سایه‌های رها یا گرادیان استفاده نکنید.

منظورم این است، جدی است. این مطمئن ترین راه برای جلوگیری از اشتباهات در سایه و گرادیان است و این گزینه همیشه باید در نظر گرفته شود.

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

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

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

قبل از اینکه در یک سایه یا گرادیان قرار بگیرید، از خود بپرسید: «آیا یک استعاره سه بعدی برای این طراحی ضروری است؟» آیا از آن برای اضافه کردن اطلاعات مفید درباره نحوه اشیا استفاده می‌کنم. مرتبط هستند یا جزء مؤثر یک رویکرد زیباشناختی سالم هستند، یا من از آن به عنوان بهانه استفاده می کنم؟»

 

ظریف تر، بهتر

برای سایه‌ها، تقریباً هرگز از تنظیمات پیش‌فرض فتوشاپ استفاده نکنید. سایه کشویی پیش‌فرض فتوشاپ بسیار تاریک است و به گوشه پایین سمت راست یک شی فرستاده می‌شود (منبع نور جهانی پیش‌فرض 120 درجه است، در سمت چپ بالا).

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

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

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

اتاق با نور مناسب راحت‌ترین محیط برای کاربران است، زیرا شبیه به محیطی است که ما از رایانه‌های خود استفاده می‌کنیم: دفتر یا مطالعه. مگر اینکه ما عمداً بخواهیم از آن منطقه راحت اجتناب کنیم، باید تنظیمات drop-shadow در فتوشاپ را از پیش‌فرض‌شان پایین بیاوریم. Opacity را به 30 یا 40٪ یا حتی کمتر کاهش دهید.

همچنین، همه چیز را ساده نگه دارید تا مردم بدون فکر کردن به استعاره آن را بفهمند. منبع نور در 120 درجه چندان منطقی نیست. به عنوان مثال، Mac OS X منبع نور خود را در 90 درجه یا مستقیماً بالاتر قرار می دهد، که منطقی تر به نظر می رسد. من دوست دارم آن را حتی ساده تر کنم و منبع نور را مستقیماً عمود بر صفحه نمایش قرار دهم. برای انجام این کار، کافی است تنظیم فاصله را در drop-shadow خود به صفر برسانید (این نشان دهنده فاصله از جسمی است که سایه را به شی زیر آن می اندازد). در این مرحله، نور سراسری اهمیتی ندارد: به این صورت است که یک منبع نور پراکنده بزرگ از پشت کاربر می‌آید تا طرح را روشن کند.

این جلوه در طراحی‌های “trompe-l’œil” بسیار رایج است، که رایج‌ترین آنها تصویر پس‌زمینه یا قاب سطح میز را نشان می‌دهد، گویی که از مستقیم به آن نگاه می‌کنید. در بالا. کارگردانان فیلم مانند آلفرد هیچکاک، مارتین اسکورسیزی و وس اندرسون از همین جلوه برای عکس‌های چشم‌نمای خدا استفاده می‌کند. چنین طراحی‌های وب نوعی قابلیت درک بدون دردسر دارند و حفظ ثبات در یک طرح برای طراح آسان‌تر می‌شود.

اگر تنظیم فاصله را به 0 و کدورت را به حدود 30 درصد کاهش داده باشید، در نقطه شروع خوبی برای یک drop-shadow هستید. با اندازه بازی کنید تا میزان فاصله سطح جسم از پس زمینه ای که روی آن قرار دارد را تغییر دهید. برای مثال، تنظیم اندازه روی 1 پیکسل، جلوه زیبایی به شما می دهد که تقریباً نامرئی است اما کاملاً دلپذیر است. طراح دان سدرهولم جلوه‌های کوچک و ساده‌ای مانند این را بخشی جدایی‌ناپذیر از سبک خود قرار داده است (همانطور که در مقاله مهم A List Apart او در مورد “گوشه های قله کوه“).

اگر افکت نامرئی باشد، مطمئناً می‌توانید کدورت را افزایش دهید، اما شروع ظریف و سپس شماره‌گیری آن بسیار بهتر از عکس آن است. اثر نباید کوچکترین کمی آشکارتر از آنچه لازم است باشد.

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

در عوض، گرادیان پیش‌فرض سیاه به سفید را انتخاب کنید. سپس هم سیاه و هم سفید را انتخاب کنید و آنها را هردو رنگ پایه عنصر خود کنید. اکنون که پایه دارید، سمت تاریک یا روشن را انتخاب کنید و آن را طوری تنظیم کنید که فقط کمی تیره تر یا روشن تر باشد. باز هم، ظرافت تر، بهتر. (برخی از بهترین گرادیان هایی که من با آنها برخورد کردم، مجبور شدم با ابزار قطره چکان در فتوشاپ تأیید کنم تا مطمئن شوم که اصلاً وجود دارند!)

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

و به یاد داشته باشید، سمت روشن‌تر باید به سمت منبع نور شما باشد.

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

 

نمونه هایی از اشتباهات و نحوه رفع آنها

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

سایه های یکنواخت برای اشیاء همپوشانی

همپوشانی اجسام به معنی تفاوت در فاصله آنها از شماست (که تا حدی با ضخامت آنها مشخص می شود). با این حال، طراحان اغلب از سایه های یکسان برای اشیاء روی هم استفاده می کنند. بنابراین، اطلاعات منتقل‌شده توسط سایه‌ها با اطلاعات منتقل‌شده توسط همپوشانی در تضاد است و توهم ابعاد را تضعیف می‌کند.

دیدن درگیری هایی از این دست من را ناراحت می کند و هر چه بیشتر روی آنها تمرکز می کنم، سرم بیشتر درد می کند. کاربران باید از طراحی شما لذت ببرند، نه احساس درد!

می‌توانید درباره این مشکل در «ساخت Better Drop-Shadow، راهنمای Jacci Howard Bear در About.com.

لبه های ناگهانی

گوشه‌های سایه‌های واقعی لبه‌های سختی ندارند مگر اینکه نور منعکس‌شده مطلقی نداشته باشند – که وضعیت بسیار غیرعادی خواهد بود. در عوض، گوشه‌های آن‌ها معمولاً توسط پرتوهای نوری که در اطراف آن‌ها می‌خزند، گرد می‌شوند.

در اینجا یک سایه با لبه سخت غیرواقعی وجود دارد:

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

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

در اینجا، من سایه انداز را آنقدر سبک ساخته ام که چیزی بیشتر از این که نشان دهد دورتر نشسته است را انجام نمی دهد. از آنجایی که بسیار سبک است، خط انتقال تمیز زشت یا منحرف کننده نیست.

پشت آن شیء چه خبر است؟

گاهی اوقات، بدون هیچ دلیل واضحی، مانند کادر آبی رنگی که نشان‌واره W3C را در زیر می‌بینید، سایه‌ای از بین می‌رود.

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

اجازه ندهید گرادیان شما منابع نور متفاوتی را پیشنهاد کند.

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

می‌توانید استدلال کنید که من بیش از حد به این موضوع فکر می‌کنم، که شیب‌ها نباید با منابع نور مطابقت داشته باشند. این ممکن است، اما شیب‌های ظریفی مانند این، یک رابطه استعاری ذاتی با گرادیان‌هایی که در دنیای واقعی می‌بینیم دارند. بیایید جهت شیب های پایین صفحه را تغییر دهیم تا به منبع نوری از بالا اشاره کنند:

و ما هارمونی منبع نور را دریافت می کنیم.

 

در نهایت، شما آزادید هر کاری که می خواهید انجام دهید.

از آنجایی که اشیاء در یک صفحه وب فقط با استعاره به اشیاء واقعی مربوط می شوند، اثربخشی آنها اساساً ذهنی است. ارتباط بین تصویر یک دکمه و یک دکمه واقعی هیچ واقعیتی فراتر از ذهن کاربر ندارد.

ما طراحان ملزم نیستیم استعاره های خود را با واقعیت مطابقت دهیم، اما متفکر بودن و دقت در مورد سطوح مختلف ارتباط در یک طراحی به ما کمک می کند تا وب سایت های خود را هماهنگ تر کنیم.

و دقت و هماهنگی ما به کاربر کمک می‌کند تا تجربه کاربر از وب‌سایت راحت و حتی لذت‌بخش باشد.

نوشته شده به طور انحصاری برای WDD توسط Nate Eagle. او در کالج فلسفه خواند، تحصیلی که او را کاملاً برای طراحی و توسعه صفحات وب برای PBS KIDS آماده کرد. می‌توانید اطلاعات بیشتری از او و همکارانش در PBS در Design.PBS بخوانید.

آیا فکر می‌کنید این سطح از جزئیات هنگام طراحی سایه‌ها و گرادیان‌ها مهم است؟ آیا شما در مورد نحوه استفاده از سایه‌ها و گرادیان‌ها، نگرانی‌های حیوان خانگی خود را دارید؟