تو این جلسه می‌خوایم همه چیزایی که تا حالا یاد گرفتیم رو کنار هم بچینیم
همه اون نکات و مفاهیمی که تا الان گفتیم
تا یه چیزی بسازیم که
بهش می‌گیم «سلسله‌مراتب بصری»
پس بیاید ببینیم این سلسله‌مراتب بصری دقیقاً چیه و چطور کار می‌کنه
در اصل سلسله‌مراتب بصری یعنی اینکه
ما مشخص کنیم کدوم عناصر تو یه طراحی
واقعاً مهم‌تر هستن
خب دقیقاً همینه که می‌گیم «مراتب» نه؟
پس ما باید یه ترتیب بین عناصر ایجاد کنیم
تا توجه کاربر
به مهم‌ترین بخش‌ها جلب بشه
و این کار یکی از بهترین روش‌هاست
که یه صفحه واقعاً طراحی‌شده به نظر بیاد
خیلی وقت‌ها یه رابط کاربری خوشگل‌تر دیده میشه
فقط به این خاطر که سلسله‌مراتب بصری خوب فکر شده
و درست به کاربر منتقل شده
قبل اینکه بریم جلو یه مثال سریع ببینیم
حالا حتی بدون اینکه چیزی درباره سلسله‌مراتب بصری بلد باشیم
می‌تونیم حدس بزنیم
که عکس‌های بالای صفحه و کادر رزرو
بیشترین توجه رو جلب می‌کنن
می‌بینید؟ خب همینه که می‌خوایم بگیم
سلسله‌مراتب بصری یعنی ما به این عناصر مهم‌تر
اهمیت بیشتری بدیم
و دلیلش هم اینه که
سلسله‌مراتب بصری درست پیاده شده
با ترکیبی از جایگاه رنگ‌ها سایه‌ها حاشیه‌ها
و سایر جزئیات دیگه
و به همین خاطر هم گفتم
این جلسه جمع‌بندی همه چیزیه که تا حالا گفتیم
حالا یه کم جلو بریم
سلسله‌مراتب بصری یعنی ما مسیر حرکت کاربر رو
تو صفحه مشخص کنیم
به شکلی که شهودی و تقریباً خودکار کاربر رو هدایت کنه
فرض کنید کاربر وارد این صفحه میشه
توجهش اول میره سمت این بلوک بزرگ تصاویر
بعدش میره سراغ عنصر مهم بعدی
که قبلاً هم بهش اشاره کردیم
بعدش ممکنه بره سراغ این دکمه به خاطر رنگ روشنش
و بعدش توجهش میره
به بخش وسط صفحه
بالای این بخش بعد کمی پایین‌تر
متن‌ها رو می‌خونه
و در نهایت توجهش میره
به همون عنصر خیلی کوچیک پایین صفحه با متن کوچک
یعنی همه چیز به ترتیب و منطقی اتفاق میفته
و کاربر بدون اینکه خودش فکر کنه
همه المان‌های مهم رو می‌بینه
این همون چیزی هست که سلسله‌مراتب بصری بهش کمک می‌کنه
که چشم کاربر درست هدایت بشه
و صفحه منظم و طراحی‌شده به نظر بیاد
اینطوری کاربر راحت می‌فهمه کجا باید نگاه کنه
و آخر کار حتی المان‌های کوچیک هم دیده میشن بدون اینکه اذیت‌کننده باشه
همونطور که قبلاً یه کم اشاره کردم
کاری که انجام می‌دیم تا
یه سلسله‌مراتب بصری معنادار بسازیم
این هست که از ترکیبی از جایگاه اندازه رنگ‌ها فاصله‌ها
حاشیه‌ها و سایه‌ها استفاده کنیم
هدف این جلسه هم
در واقع نشون دادن همین موضوعه: چطور می‌تونید این کار رو درست انجام بدید
پس ایجاد یه سلسله‌مراتب بصری درست
بین عناصر و کامپوننت‌ها خیلی مهمه
حالا یه مثال دیگه هم بزنم
فرض کنید تو این مثال حاشیه‌ها
و سایه‌ها وجود نداشتن
اونوقت صفحه اینطوری به نظر می‌رسید
و ناگهان اون جریان طبیعی که قبل‌تر داشتیم
کمی از بین می‌رفت
و کاربر دیگه واقعاً نمی‌دونست
بعد از نگاه کردن به تصاویر کجا باید نگاه کنه
اما ما می‌خوایم کاربر بره سراغ همون کادر رزرو
و به همین خاطر این عنصر
قبل‌تر خیلی برجسته نشون داده شده بود
ولی به هر حال می‌تونیم یه قدم جلوتر هم بریم
و رنگ این کامپوننت رو هم حذف کنیم
حالا سلسله‌مراتب بصری کاملاً از بین رفته
و رابط کاربری ناگهان
دیگه به چشم طراحی‌شده نمیاد نه؟
فقط با دو یا سه تغییر ساده‌ای که اینجا دادیم
طراحی
کاملاً ظاهر و حس متفاوت پیدا می‌کنه
ولی طبیعتاً ما نمی‌خوایم این اتفاق
تو طراحی‌های خودمون بیفته
پس بیاید حالا یاد بگیریم چطور
خب از اصول اولیه شروع کنیم
اولین راهنمایی که براتون دارم
این هست که المان‌های مهم رو
به بالای صفحه نزدیک‌تر قرار بدید
چون اونجا بیشترین توجه رو جلب می‌کنن
معمولاً مردم صفحه رو از بالا به پایین می‌خونن
پس المان‌هایی که اول صفحه ظاهر میشن
یعنی نزدیک بالای صفحه طبیعتاً توجه بیشتری جلب می‌کنن
حالا البته
فاکتورهای دیگه‌ای هم هست که روی جلب توجه تأثیر می‌ذارن
پس فقط جایگاه نسبت به بالای صفحه مهم نیست
به طور کلی جریان توجه از بالا به پایین حرکت می‌کنه
در واقع مثل یه رودخونه
و این قانون برای کل صفحه صدق می‌کنه
ولی برای هر کامپوننت هم صدق می‌کنه
پس تو این مثال
اولین چیزی که کاربر ممکنه ببینه
اون لوگو هست بعدش ناوبری
و بعدش مستقیم میره سراغ تیتر اصلی اینجا
خب از اونجایی که این تیتر مهم‌ترینه
باید تا حد امکان نزدیک بالای صفحه باشه
بعدش هم طبیعتاً توجه کاربر به سمت پایین صفحه جریان پیدا می‌کنه
و اینجا می‌بینیم که
یه دکمه call-to-action واقعاً مهم داریم
پس اولین دکمه call-to-action شما
هم باید تا حد امکان بالای صفحه باشه
حالا نکته بعدی اینه که
تصاویر خیلی توجه رو جلب می‌کنن
پس باید با دقت و هدفمند ازشون استفاده کنید
تو این کامپوننت کوچک
توجه کاربر احتمالاً اول به تصویر می‌ره
و بعدش به این تیتر میاد
و بعد هم به دکمه
پس اگه واقعاً می‌خوایم کاربر متن رو بخونه
شاید باید به کل تصویر رو حذف کنیم
یا یه تصویر کوچیک‌تر بذاریم
چون تصاویر کوچیک‌تر توجه کمتری جلب می‌کنن
بعدی اینجا یه مثال از اینستاگرامه
که احتمالاً اولین عکس پروفایل
بیشترین توجه رو جلب می‌کنه
و بعد از اون
توجه مستقیم میره سراغ این تصاویر پایین‌تر
و شاید از اونجا توجه دوباره به بالا برگرده
به اطلاعات دیگه
مثل فالوورها توضیحات و غیره
یه راه دیگه برای برجسته کردن المان‌ها یا گروه‌های المان‌ها
استفاده هوشمندانه از فضای خالیه
همونطور که قبلاً یاد گرفتیم
فضای خالی جداسازی بین المان‌ها
یا گروه‌های المان ایجاد می‌کنه
و بنابراین استفاده درست ازش
برای تعریف درست سلسله‌مراتب بصری خیلی مهمه
مثلاً تو این دو طراحی
یه فضای خالی زیادی دور
مهم‌ترین بخش صفحه هست
به خصوص سمت چپ
یه فضای خالی خیلی زیاد
تقریباً دور فرم ثبت‌نام
ولی سمت راست
یه فضای خالی خیلی بزرگ بین دو ردیف
و همینطور دور این پنج بلوک ویژگی
البته منظورم این نیست که
همیشه همه چیز رو اینقدر فضای خالی بدید
نه اینطوری
فقط قوانین
که قبلاً درباره فضای خالی یاد گرفتیم رو رعایت کنید
و همه چی درست پیش میره
نکته اصلی اینه که
می‌تونیم از فضای خالی به شکل هدفمند استفاده کنیم
تا المان‌های مهم بیشتر جلب توجه کنن
خب حالا قراره تمرکز کنیم
فقط روی المان‌های متنی
پس یاد می‌گیریم چطور و کی می‌تونیم المان‌های متنی مختلف
پررنگ‌تر یا کم‌اهمیت‌تر کنیم
چون این واقعاً یکی از مهم‌ترین کارهاست
برای اعمال سلسله‌مراتب بصری تو سطح کوچیک‌تر
مثلاً داخل یه کامپوننت
برای المان‌های متنی می‌تونیم ترکیبی از اندازه فونت
ضخامت فونت رنگ و فضای خالی
برای دادن سطوح مختلف اهمیت به المان‌ها استفاده کنیم
و وقتی می‌گم رنگ هم رنگ متن هم رنگ پس‌زمینه منظورمه
مثل دکمه‌ها
حالا دوباره مثال اول رو بررسی کنیم
پس این یکی
تو شروع اصلاً هیچ سلسله‌مراتبی وجود نداره
همه متن‌ها اندازه ضخامت و رنگ یکسان دارن
فقط یه مقدار فضای خالی اضافه شده
حالا اولین قدم برای بهتر کردنش
می‌تونیم کمی اندازه فونت تیتر رو افزایش بدیم
که مهم‌ترین بخش محتوای اینجاست
بعدش می‌تونیم ضخامت فونت رو هم افزایش بدیم
مثلاً روی مکان تیتر دوباره
و همینطور امتیاز 50
خب این الان خیلی بهتر به نظر میاد
قطعا سلسله‌مراتب بصری خیلی بهتر از قبل شده
ولی هنوز می‌تونیم بهترش کنیم تا کامل بشه
پس در واقع آخرین قدم روشن‌تر کردن بعضی رنگ‌هاست
تا اهمیتشون کمی کمتر بشه
پس اینجا برچسب super host مکان
و همینطور تعداد امتیازها در واقع روشن‌تر شدن
تا کمتر برجسته به نظر برسن
نسبت به بقیه محتوا
حالا یه مثال دیگه هم بررسی کنیم
که این یکیه که تو شروع
همه متن‌ها 20 پیکسل هستن
و هیچ سلسله‌مراتبی وجود نداره
نه فضای خالی نه رنگ نه ضخامت فونت
و واقعاً هیچ چیز دیگه‌ای
پس برای بهتر کردنش
می‌تونیم اندازه فونت‌ها رو کمی تغییر بدیم
و مقداری فضای خالی اضافه کنیم
پس الان اندازه‌های فونت مختلفی داریم
بر اساس اهمیت هر کدوم از المان‌ها
خب الان خیلی بهتر به نظر میاد
ولی برای کامل کردنش
می‌تونیم کمی ضخامت و رنگ هم اضافه کنیم
کاری که اینجا کردیم این بود که برجسته کنیم
برخی از این المان‌ها رو با بولد کردن
بعدش کمی رنگ اضافه کردیم تا این لینک برجسته بشه
و در نهایت دوباره متن‌های کم‌اهمیت‌تر
کمی روشن‌تر شدن
و با این کار این متن کم‌اهمیت‌تر می‌شود
که این یک تکنیکه که ما همیشه استفاده می‌کنیم
تا یه سلسله‌مراتب بصری زیبا مثل این بسازیم
پس محتوا همونه
ولی طراحی سمت چپ و راست رو مقایسه کنید
در واقع همه چیز مربوط به استفاده از این تکنیک‌هاست
برای اینکه یک سلسله‌مراتب بصری درست کنیم
هیچ چیز بیشتر و هیچ چیز کمتر از این نیست
و یکدفعه طراحی واقعاً خوب به نظر می‌رسه
موافقید؟
و چون این خیلی مهمه
بیایید چند مثال دیگه هم بررسی کنیم
ولی این بار فقط جریان نگاه کاربر رو تحلیل می‌کنیم
پس اینجا احتمالاً دوباره تصویر
بیشترین توجه رو جلب می‌کنه
و بعدش چشم ما حرکت می‌کنه
به این تیتر اینجا
و بعدش به این دکمه رنگی پایین صفحه میره
این دکمه رنگ پس‌زمینه جذابی داره
و بنابراین خیلی بیشتر توجه جلب می‌کنه
تا متنی که بین تیتر و این دکمه قرار داره
بعدش ممکنه به قیمت نگاه کنیم
و بقیه بخش‌های محتوا که اینجا هستن
البته
این جریان نگاه برای افراد مختلف فرق داره
ولی من فقط چیزی که فکر می‌کنم
برای کاربر متوسط منطقی‌تره رو توضیح میدم
یه مثال دیگه از سلسله‌مراتب بصری خوب
همینجوریه که دوباره از بالای صفحه شروع می‌کنیم
ولی بعدش دکمه آبی روشن پایین صفحه
توجه ما رو جلب می‌کنه
از اونجا ممکنه بریم سراغ این متن بولد اینجا
پس دوباره ضخامت فونت اینجا استفاده شده
تا توجه جلب بشه درسته؟
و فقط در نهایت
می‌ریم سراغ این متن کم‌اهمیت‌تر
که کمی روشن‌تره و ضخامت فونتش هم کمتره
بعد یه مثال دیگه
که جریان نگاه از بالا به پایین کلاسیک‌تره
با این حال زیرتیتر کوچک و روشن که میگه Work-03
واقعا توجهی جلب نمی‌کنه
چون خیلی روشن نازک و کوچیکه
پس به همین دلیل ردش کردیم
چون فکر می‌کنم خیلی از کاربران واقعاً ردش می‌کنن
و مستقیم توجهشون رو به تیتر جلب می‌کنن
حالا اینجا یه رنگ پس‌زمینه خوب و ملایم داریم
که باعث میشه این بخش از محتوا کمی برجسته بشه
وگرنه شاید
توجه بلافاصله می‌رفت سراغ اون تصویر
ولی اینطوری ممکنه اول اینجا توقف کنیم
و بعدش ممکنه تصویر رو ببینیم
و بعد بقیه محتوا رو بررسی کنیم
در نهایت یه مثال دیگه داریم
خب اینجا با یه متن خیلی بزرگ شروع می‌کنیم
بعدش احتمالاً به این متن کوچیک‌تر می‌ریم
که کمی کوچکتره
و بعد اینجا یه رنگ روشن داریم
که فکر می‌کنم توجه زیادی جلب می‌کنه
پس فکر می‌کنم توجه بعدش به اون سمت میره
و بعدش به این متن کوچیک‌تر می‌ریم
و بعدش به این متن حتی کوچکتر که پایین صفحه هست
همین پایین صفحه قرار داره
پس در این مثال هم دوباره
می‌تونید واقعاً ببینید
چرا طراح‌ها تصمیماتشون رو اینطوری گرفتن
در مورد سایز ضخامت رنگ و حتی فاصله بین عناصر
پس همه این اجزا واقعاً خوب طراحی شدن
و بنابراین سلسله‌مراتب بصری هم عالیه
پس دوباره هیچ چیزی اینجا تصادفی نیست
تمام تصمیمات طراحی منطقی هستن
چون طراح می‌خواست یه
سلسله‌مراتب بصری بسازه تا کاربر رو راهنمایی کنه
ولی حالا ممکنه بپرسید که کدوم عناصر
در واقع باید برجسته بشن؟
خب ما باید روی محتواهایی مثل تیترها زیرتیترها
لینک‌ها دکمه‌ها نقاط داده و آیکون‌ها تأکید کنیم
و همونطور که در مثال‌های قبلی دیدیم
می‌تونیم متن‌های کم‌اهمیت‌تر رو هم کم‌رنگ کنیم
مثل برچسب‌ها یا اطلاعات ثانویه
پس دوباره همون مثالی که قبلاً کار کردیم
اینجا تیتر داریم که واقعاً برجسته شده
یه آیکون داریم که با رنگ برجسته شده
بعد یه نقطه داده خیلی مهم داریم
که همون امتیازه و به همین دلیل بولده
اینجا یه لینک داریم
و در نهایت یه متن کم‌اهمیت اینجا هست
یه سری اطلاعات اضافی
که عمداً کم‌رنگ کردیم تا برجسته به نظر نرسه
خب این‌ها در واقع انواع متنی هستن
که باید هنگام طراحی سلسله‌مراتب بصری بهشون فکر کنید
وقتی که داریم سلسله‌مراتب بصری می‌سازیم
و بیایید چند مثال دیگه هم ببینیم
پس دوباره آیکون زیرتیتر و لینک
و اینجا زیرتیتر تیتر و آیکون داریم
و همچنین زیرتیتر اینجا
و من الان این مثال‌ها رو خیلی سریع‌تر می‌رم جلو
چون همونطور که قبلاً گفتم
واقعاً می‌خوام این ویدیوها رو به صورت PDF دانلود کنید
تا بعدش خودتون مرور کنید
و کلی ایده بگیرید
برای زمانی که می‌خواید طراحی‌های خودتون رو بسازید
پس نباید فقط این ویدیو رو ببینید و کار رو تموم شده فرض کنید
خیلی مهمه که واقعاً تک‌تک این مثال‌ها رو بررسی کنیم
همه این مثال‌ها رو یه‌به‌یه نگاه کنیم
چون من این‌ها رو خیلی خیلی دقیق انتخاب کردم
با ده‌ها یا شاید صدها ساعت تحقیق و بررسی
خُب به هر حال بیایید چند مثال دیگه هم ببینیم
اینجا دوباره یه زیرتیتر داریم
و چند تا نقطه داده خیلی مهم
تو این مثال این‌ها قیمت‌ها هستن
و بنابراین بولد شدن
و از بقیه متن بزرگ‌ترن
و فکر می‌کنم حتی رنگ‌شون هم تیره‌تره
بعدش اینجا یه سری اطلاعات اضافی هم داریم
دوباره
که به مشتری‌ها بگه این مربوط به کارت‌های اروپاییه
و بنابراین این متن خیلی روشن‌تر و کوچیک‌تره
بعدش این آیکون‌ها به نظر میاد خیلی مهم باشن
و به همین خاطر یه رنگ جذاب گرفتن که توجه رو جلب کنه
و در نهایت یه دکمه خیلی ملایم داریم
یه دکمه با رنگ پس‌زمینه خیلی ملایم
چون اگه مثلاً سبز بود
مثل بقیه متن‌ها اینجا
اون دکمه کل توجه‌ها رو جلب می‌کرد
ولی تو این مورد به نظر میاد
طراح‌ها می‌خواستن تمرکز روی قیمت‌ها باشه
و نه روی دکمه
و به همین دلیل اون‌ها در واقع حذف کردن
رنگ پس‌زمینه سبز
و به جای اون یه خاکستری خیلی ملایم گذاشتن
حالا یه مثال دیگه داریم با چند آیکون
چند نقطه داده مهم
و بعد این برچسب اینجا خیلی خوب کم‌رنگ شده
با اینکه خیلی کوچیکه
ولی هنوز با حروف بزرگ نوشته شده
که به نظر من واقعاً خیلی عالیه
بعدش دوباره تو این مثال اینستاگرام یه نقطه داده داریم
و بعد این دکمه‌ها اینجا
در واقع خیلی کم‌جلب توجه شدن
و دلیلش اینه که اینستاگرام
نمی‌خواد هیچ توجهی رو از عکس‌ها دور کنه
از عکس‌ها خب
به همین دلیله که اپلیکیشن موبایل
تقریباً کاملاً سفیده
البته به جز همه عکس‌ها
خب این مقدار زیادی بود که باید یاد می‌گرفتیم
در مورد سلسله‌مراتب بصری برای عناصر متنی
ولی هنوز تموم نشده
چون حالا باید در مورد سلسله‌مراتب بصری
بین کامپوننت‌ها صحبت کنیم
که این هم خیلی مهمه
و وقتی می‌گیم کامپوننت‌ها در واقع
منظورم گروه‌هایی از عناصر یا بخش‌های بزرگ محتواست
پس بیایید حالا تمرکز کنیم
روی ایجاد سلسله‌مراتب بصری بین کامپوننت‌ها
راهی که این کار رو انجام می‌دیم ترکیبیه
از رنگ‌های پس‌زمینه سایه‌ها و حاشیه‌ها
پس یه مثال رو بررسی کنیم
تو این طراحی
این رنگ پس‌زمینه خیلی روشن
واقعاً باعث می‌شه این بخش کاملاً جدا بشه
از بقیه صفحه درسته؟
و همین موضوع برای این وب‌سایت هم صادقه
دوباره یه بخش بزرگ و برجسته
که تمام توجه رو دقیقاً به خودش جلب می‌کنه
و البته این کاملاً عمدیه
به همین دلیله که این رنگ رو انتخاب کردن
چون می‌خوان توجه کاربر دقیقاً به این قسمت بره
و مورد دوم در واقع فقط از رنگ پس‌زمینه استفاده نکرده
بلکه یه سایه زیبا هم داره
می‌بینید؟
این یکی هم از سایه استفاده کرده
و همچنین حاشیه هم داره
پس حاشیه و سایه هست اما رنگ پس‌زمینه نداره
در حالی که مورد بعدی
دوباره فقط از رنگ پس‌زمینه استفاده می‌کنه
تا این ردیف مهم جدول رو برجسته کنه
حالا یه تکنیک رایج دیگه
برای برجسته کردن یک کامپوننت A نسبت به B
این هست که به سادگی کامپوننت B رو کم‌اهمیت کنیم
فرض کنیم اینجا کامپوننت A و B داریم
و می‌خوایم کامپوننت A بیشتر دیده بشه
می‌تونیم البته یه حاشیه اضافه کنیم
یا سایه به یکی سمت چپ
یعنی به کامپوننت A
اما کاری که می‌تونیم انجام بدیم
این هست که کامپوننت B رو کم‌اهمیت کنیم
پس رنگ پس‌زمینه‌ش حذف می‌شه
و حالا کامپوننت A برجسته‌تر دیده می‌شه
فقط با حذف رنگ پس‌زمینه از کامپوننت B
راستی به فلشی که نوشته Free هم توجه کنید
کنار دکمه Start Now
این هم یه روش دیگه است
برای برجسته کردن همون دکمه Start Now درسته؟
این تکنیک خاص رو تو این درس توضیح ندادم
اما هنوز هم یه روش دیگه است
برای جلب توجه به اون دکمه مهم
همون دکمه مهم
خب اینجا چند مثال دیگه داریم
از کم‌اهمیت کردن یه کامپوننت
برای برجسته کردن کامپوننت واقعی
که می‌خوایم کاربر روی اون تمرکز کنه
و در نهایت درست مثل متن‌ها
شاید الان براتون سوال باشه که چه نوع کامپوننت‌هایی
واقعاً باید توجه کاربر رو بهشون جلب کنید
وقتی دارین طراحی‌های خودتون رو می‌سازید
خب من اینجا یه لیست بزرگ از کامپوننت‌ها دارم
که معمولاً می‌خوایم برجسته بشن
نسبت به بقیه محتوای صفحه
پس حالا بیایید یه مثال از هر کدومشون ببینیم
این یه مثال از یک Testimonial هست
یعنی کسی داره درباره محصول خودت صحبت می‌کنه
در اصل داره سعی می‌کنه اون رو تبلیغ کنه
بعدش بخش‌های Call-to-Action داریم
که خیلی وقت‌ها وب‌سایت‌ها تو انتهای صفحه می‌ذارن
تا کاربر برای محصولشون ثبت‌نام کنه
یا برای سرویسشون
بعدش بخش‌های Highlight هم داریم همون‌طور که من می‌گم
که در اصل بخش‌های بزرگی هستن
که وسط محتوای شما قرار دارن
و ما می‌خوایم یه جوری خودشون رو نشون بدن
پس ما می‌تونیم بهشون مثلا
یه رنگ پس‌زمینه متفاوت بدیم مثل کاری که این طراحی اینجا کرده
و اینجا دو مثال دیگه از بخش‌های Highlight داریم
و دوباره اون‌ها یه رنگ پس‌زمینه متفاوت استفاده کردن
تا واقعاً نسبت به بقیه صفحه برجسته باشن
بعدش کارت‌های Preview هم داریم
که قبلاً هم اشاره کرده بودم
یعنی در اصل یه نوع محصول رو پیش‌نمایش می‌کنن مثلاً
که شما قصد فروشش رو دارید
و پس این هم دوباره
خیلی وقت‌ها باید نسبت به بقیه محتوا برجسته باشه
با استفاده از سایه یا یه نوع حاشیه
بعدش فرم‌ها هم هستن که می‌تونن شبیه این باشن
یا جدول‌های قیمت‌گذاری
که خیلی وقت‌ها گزینه‌های مختلف قیمت دارن
و بعدش طراح معمولاً همون یکی که می‌خواد کاربر انتخاب کنه برجسته می‌کنه
که واقعاً می‌خواد کاربر انتخابش کنه
و این می‌تونه با رنگ پس‌زمینه انجام بشه
ولی گزینه‌های دیگه زیادی هم هست
که می‌تونید انتخاب کنید
که کمی بعدش بهتون نشون می‌دم
چون در واقع یه جلسه کامل داریم
که کاملاً درباره کامپوننت‌های مختلف هست
و در نهایت همون‌طور که کمی قبل‌تر دیدیم
ما همچنین می‌تونیم یه ردیف مهم رو برجسته یا تأکید کنیم
یا یه ستون مهم توی یه جدول
و البته این لیست از مثال‌ها کامل نیست
خیلی خیلی کامپوننت‌های دیگه هستن
که می‌تونن برجسته‌سازی بشن درست؟
ولی این جلسه تا الان هم طولانی شده
پس بیایید بعضی از این چیزها رو عملی کنیم
تو جلسه بعد
پس اونجا می‌بینمتون بعد از اینکه امیدوارم این جلسه رو
یه مقدار بیشتر مطالعه کردید