دوباره خوش اومدید به درس ما
درباره سایه‌ها در طراحی وب
خب سایه‌ها می‌تونن نقش مهمی
توی کمک به کاربران داشته باشن تا بفهمن
ارتباط بین قسمت‌های مختلف طراحی‌های ما
چیه یا می‌تونیم ازشون برای اضافه کردن جزئیات بصری جالب استفاده کنیم
ولی در هر صورت
بیاید یاد بگیریم چطور از اونها به نفع خودمون استفاده کنیم
و بیایید این درس رو اول با چند مفهوم شروع کنیم
و به طور خاص بیایید با یک تاریخچه خیلی کوتاه شروع کنیم
از سایه‌ها توی طراحی رابط کاربری
چون یه سری رفت و برگشت‌هایی توی ترندها وجود داشته
طی چند سال اخیر
خب قدیم‌ها حدود سال 2010
همه رابط‌های کاربری روی موبایل و وب
یه چیزی شبیه به این بودن
ما بهش میگیم طراحی اسکیومورفیک
و پر بود از جزئیات واقع‌گرایانه
و جلوه‌های براق و یه عالمه سایه
بعد از یه مدت ویندوز 8 و iOS 7 اومدن
و ایده طراحی مسطح رو معرفی کردن
که توش همه این چیزها کاملاً حذف شدن
یعنی دیگه جزئیات واقع‌گرایانه یا جلوه‌های براق یا سایه‌ها نبود
همه چیز به سادگی به ضروری‌ترین چیزها کاهش پیدا کرد
که به همین خاطر به این طراحی مینیمال هم میگن
اما این تغییر کاملاً جدی به طراحی مسطح
شاید یه ذره زیادی افراطی بود
چون با خودش یه سری مشکلات قابلیت استفاده آورد
به همین خاطر توی چند سال اخیر
یه چیزی که من بهش میگم طراحی مسطح نسخه 20 ظهور کرده
حالا هنوز مینیماله
و جزئیات واقعی‌نما نداره
ولی یه مقداری سایه و عمق رو برمی‌گردونه
به رابط‌های کاربری
و راجع به عمق که حرف زدیم
اون در واقع ما رو به نکته بعدی می‌رسونه
که اینه که سایه اساساً ایجاد می‌کنه
یعنی عمق رو توی رابط‌های کاربری شبیه‌سازی می‌کنه
یا به عبارت دیگه سایه‌ها اساساً بهمون اجازه میدن
که یه بُعد سوم به طراحی‌هامون اضافه کنیم
و این همون دلیلیه که چرا اصلاً ما از سایه‌ها
توی طراحی رابط کاربری استفاده می‌کنیم
پس هرچی بیشتر سایه به یه المان خاص اضافه کنیم
اون المان دورتر از صفحه نمایش یا از رابط کاربری
به نظر میاد
و ما می‌تونیم این رو خیلی خوب توی این دیاگرام ببینیم
پس سایه سمت چپ خیلی ظریفه
چون تنظیم شده که فقط دو پیکسل دورتر
از رابط کاربری باشه
و به خاطر داشته باشید که سایه‌ها
توی دنیای واقعی با تابش نور به یک شیء ایجاد میشن
و در نتیجه یه سایه پشت اون ایجاد میشه درسته؟
پس توی رابط‌های کاربری سایه‌ها هم شبیه‌سازی می‌کنن
که یه سری منابع نور خیالی وجود داره
حالا اگه المان فقط دو پیکسل از صفحه نمایش دورتر باشه
پس منطقیه که نمی‌تونه
یه سایه بزرگ روی بقیه رابط کاربری بندازه درسته؟
و به همین خاطره که سایه اینجا خیلی ظریفه
فکر کنم کاملاً قابل درکه
چون دقیقاً همین چیزیه که ما
توی دنیای واقعی هم تجربه می‌کنیم
حالا از طرف دیگه
اگه المان از رابط کاربری خیلی دور باشه
مثلاً بگیم 24 پیکسل پس المان واضحاً می‌تونه
یه سایه بزرگ روی رابط کاربری بندازه
و به همین دلیله که ما اون رو اینجا می‌بینیم
در اون سمت دیگه طیف
ما می‌تونیم این رو توی این دیاگرام دیگه هم ببینیم
که توش همه این سایه‌های مختلف نمایش داده شدن
توی یه نوع فضای سه بُعدی
در آخر می‌خوام فقط اشاره کنم
که ما می‌تونیم از سایه‌ها هم روی جعبه‌ها و هم روی متن استفاده کنیم
حالا توی این درس
ما روی سایه‌ها روی جعبه‌ها تمرکز می‌کنیم
که همونیه که ما توی این دیاگرام‌ها اینجا می‌بینیم
بسیار خب پس بیایید حالا ببینیم چطور می‌تونیم از این ایده
سایه‌ها توی طراحی استفاده کنیم
و اول از همه شما در واقع واقعاً نیازی ندارید
که از سایه‌ها استفاده کنید اگه با شخصیت وبسایتتون نمی‌خونه
و دوباره ما بعداً بیشتر درباره این حرف می‌زنیم
ولی فعلاً چیزی که می‌خوام نشونتون بدم اینه که
مثلاً توی یه طراحی جدی مثل این یکی اینجا
ما خیلی کمتر از سایه استفاده می‌کنیم و خیلی وقت‌ها اصلاً سایه نداریم
که دقیقاً همون چیزیه که دارh اینجا اتفاق می‌افته
از طرف دیگه هرچی یه طراحی
بازیگوش‌تر یا سرگرم‌کننده‌تر بشه بیشتر هم از سایه‌ها
استفاده می‌کنه
پس این یه قانون خیلی خوب و سادست
که می‌تونید برای سایه‌ها توی طراحی‌های خودتون ازش استفاده کنید
حتی اگه نمی‌خواید یه شخصیت خاصی
برای وبسایت تعیین کنید
پس حتی اگه این کار رو نکنید
بازم یه ایده‌ای خواهید داشت
که طراحیتون باید چقدر جدی یا چقدر شیک باشه
و پس هرچی جدی‌تر و شیک‌تر باشه
کمتر از سایه استفاده خواهید کرد
حالا ما می‌ریم سراغ اینکه چه نوع سایه‌ای رو باید
برای موقعیت‌های مختلف استفاده کنیم
ولی قبل از اون بذارید دو تا قانون کلی بهتون بدم
درباره نحوه استفاده از سایه‌ها
و اولین قانون اینه که شما باید همیشه از سایه‌ها
به مقدار کم استفاده کنید
پس لطفاً نرید و سایه اضافه نکنید
به تک تک المان‌های صفحه
چون این فقط گیج‌کننده خواهد بود
و یه جورایی هدف اصلی
استفاده از سایه‌ها رو از بین می‌بره
پس توی این مثال سمت چپ
تک تک المان‌ها سایه دارن
و توی بعضی موارد ممکنه خیلی منطقی نباشه
مثل این نقطه‌چین‌ها یا فرم ایمیل
توی سمت بالا چپ یا روی اون عکس بزرگ
پس اگه شما سایه به تک تک المان‌ها اضافه کنید
اون مثل این میشه که اصلاً سایه به هیچ المانی اضافه نکرده باشید
چون اگه همه المان‌ها سایه داشته باشن
اون اساساً هیچ سلسله‌مراتب بصری
بین این المان‌های مختلف ایجاد نمی‌کنه
حالا از طرف دیگه توی مثال سمت راست
ما فقط توی بعضی از این عکس‌های کوچیک
توی سمت بالا راست سایه داریم
و در نتیجه اونها می‌تونن اون توهم عمق رو ایجاد کنن
پس اساساً این دو تا عکس طوری به نظر میان که شناورن روی
اون رابط کاربری دیگه و همچنین توی همون پایین
پس توی این جعبه‌های ویژگی اونا اونجا هم از سایه استفاده کردن
چون می‌خواستن این قسمت از طراحی
واقعاً از بقیه متمایز بشه
پس اینکه اینها یه جورایی روی بقیه طراحی شناور باشن
توی این مورد استفاده شده تا واقعاً این المان‌ها رو
برجسته‌تر از بقیه محتوا کنه
پس این اولین راهنمایی برای استفاده خوب از سایه‌هاست
و دومیش اینه که باید روی سایه‌ها ملایم باشید
و اونها رو خیلی تیره نکنید
چون مثل اینکه اینجا توی این مثال سمت راست می‌بینید
این باعث میشه طراحی یه جورایی واقعاً بد به نظر برسه
کلمه دیگه‌ای به ذهنم نمیاد واسش
واقعاً فقط بد و غیرطبیعی به نظر میاد
پس سایه‌های تیره مثل این خیلی غیرطبیعی به نظر میان
چون در واقع توی دنیای واقعی وجود ندارن
و پس وقتی بعد اونها رو توی یه طراحی مثل این می‌بینیم
ما اونها رو به سادگی بد درک می‌کنیم
و خب غیرطبیعی درسته؟
حالا استفاده از سایه‌ها به روش بد
که اساساً یعنی خیلی خیلی تیره‌شون کنید
و همه جای صفحه ازشون استفاده کنید
یکی از ساده‌ترین راه‌ها برای خراب کردن کامل
یه طراحی کامله
و به همین خاطره که رعایت این دو قانون
کاملاً حیاتیه
اگه سایه‌هاتون رو خیلی تیره کنید و همه جا ازشون استفاده کنید
در واقع بهتره که اصلاً از سایه استفاده نکنید
و پس وقتی ازشون استفاده می‌کنید مراقب باشید
و مطمئن بشید که این قوانین رو رعایت می‌کنید
و البته قوانین بعدی رو هم
و این قوانین بعدی درباره این هستن که کی از سایه‌ها استفاده کنیم
پس ما باید توی موقعیت‌های درست از سایه‌ها استفاده کنیم
و یکی از اونها استفاده از سایه‌های کوچیکه
برای المان‌های کوچیک‌تر که می‌خوایم به سادگی از صفحه
متمایز بشن یا به عبارت دیگه
المان‌هایی که می‌خوایم توجه رو به خودشون جلب کنن
حالا پس دقیقاً همون چیزیه که اینجا اتفاق می‌افته
مثلاً به این دکمه‌های فراخوان برای اقدام توجه کنید
یا حتی این فرم‌های کوچیک کامل
که ورودی آدرس ایمیل دارن
اینها المان‌های خیلی مهمی توی صفحات هستن
چون اینها کمک می‌کنن که در واقع کاربرها رو تبدیل کنیم
به مشتریان پولی مثلاً
و پس اینها همون نوع المان‌هایی هستن
که معمولاً می‌خوایم از بقیه
محتوای صفحاتمون متمایز بشن
پس به همین دلیله که ما از این رنگ‌های روشن
روشون استفاده می‌کنیم و همچنین به همین دلیله
که بعد یه مقدار سایه اضافه می‌کنیم
تا اونها رو حتی بیشتر متمایز کنیم
و البته همین می‌تونه برای المان‌های دیگه هم صدق کنه
مثل عکس‌ها که اینجا سمت چپ می‌بینید
و بالا سمت راست که سایه به سادگی این هدف رو داره
که اساساً این المان‌ها رو طوری کنه
که انگار یه ذره شناورن روی
رابط کاربری
و این باعث میشه توجه به این عکس‌ها جلب بشه
چون اونها یه جورایی مهمن
برای داستان‌گویی یا نمایش محصولی
که داره فروخته میشه
پس اینها مثال‌هایی از زمانی هستن که ما از سایه‌های کوچیک استفاده می‌کنیم
پس بعد بیایید درباره سایه‌های متوسط حرف بزنیم
که معمولاً برای قسمت‌های بزرگ‌تر استفاده می‌کنیم
که می‌خوایم حتی بیشتر از این المان‌های
کوچیک‌تری که تازه درموردشون حرف زدیم متمایز بشن
پس این تکنیک استفاده از سایه‌های متوسط
همیشه استفاده میشه تا بخش‌های کامل رو
کاملاً روی صفحه شناور کنه
پس اساساً اونها رو از بقیه
صفحه متمایز کنه
و این دو مثال این رو به یه روش خیلی قشنگ نشون میدن
حالا یه کاربرد معمول دیگه از سایه‌های متوسط
اینه که کارت‌ها رو از بقیه رابط کاربری متمایز کنیم
و دوباره با کارت منظورمون یه چیزیه
مثل چیزی که اینجا سمت چپ می‌بینیم
که توی این مورد یه کارت محصول هست
که شامل توضیحات
عالیه پس اینها راهنماهای مربوط به سایه‌ها بودن
که امیدوارم براتون مفید بوده باشه
اما ما در واقع هنوز نمی‌دونیم چطور از سایه‌ها
توی CSS استفاده کنیم درسته؟
پس بیایید در واقع این رو توی ویدیوی بعدی یاد بگیریم