پس حالا بیایید سلسله مراتب بصری را تحلیل کرده و بهبود ببخشیم
در پروژه کوچک طراحی خود با استفاده از فضای سفید
و همچنین برخی تکنیک‌های دیگر که همین الان یاد گرفتیم.
در واقع این فقط یک پروژه خیلی کوچک است
و بنابراین ما نمی‌توانیم تمام
مواردی که همین الان یاد گرفتیم را انجام دهیم
در دو درس قبلی.
اما ما هنوز هم می‌توانیم سلسله مراتب بصری خود را
اینجا کمی تحلیل کنیم.
و سپس، همان‌طور که گفتم، سعی کنیم آن را بهبود بدهیم.
پس در حال حاضر، البته،
یک سلسله مراتب وجود دارد.
برای مثال، اگر به این کامپوننت نگاه کنید،
این هدر اینجا، فوراً توجه ما به این تصویر بزرگ و روشن جلب می‌شود
و سپس احتمالاً به این عنوان بزرگ و بعد به این دکمه می‌رود
که پس‌زمینه زیبایی دارد
که واقعاً باعث می‌شود این دکمه برجسته شود
و توجه زیادی را جلب کند.
پس بخش زیادی از کار
روی سلسله مراتب بصری در واقع
قبلاً با اعمال بسیاری از قوانین دیگر انجام شده است.
و اگر به پایین بیاییم، همان‌طور است.
برای مثال، در این کامپوننت،
ما قبلاً این کل کامپوننت را با
افزودن رنگ پس‌زمینه برجسته کرده‌ایم.
پس با داشتن این رنگ،
یک کنتراست زیبا ایجاد می‌کند
در مقایسه با بقیه عناصر،
دو بخش اطراف آن.
و این باعث جلب توجه زیادی
یک بار دیگر به این بخش مهم‌تر می‌شود.
پس دوباره، بدون اینکه حتی متوجه باشیم،
ما واقعاً قبلاً کار زیادی روی سلسله مراتب بصری انجام داده‌ایم.
با این حال، هنوز کارهای زیادی باقی مانده است
و بیشتر به شکل فضای سفید.
پس قوانینی که یاد گرفتیم
در مورد فضای سفید دو درس پیش
در بسیاری از موارد، هنوز واقعاً اعمال نشده‌اند.
برای مثال، بین بخش‌ها
هیچ فضای سفید زیادی وجود ندارد.
پس اینجا هدر این بخش را داریم
اما فاصله بین این هدر
و محتوای این بخش و بخش قبلی
که اینجا تمام می‌شود، تقریباً یکسان است.
پس فاصله بین اینجا
و اینجا تقریباً یکسان است.
و بنابراین این فاصله‌بندی نسبتاً مبهم است.
پس واقعاً نمی‌دانیم این هدر به کدام بخش تعلق دارد.
و همین‌طور اینجا، درست است؟
این نوع در وسط
این دو بخش محتوا قرار گرفته است.
و بنابراین این اصلاً خوب نیست.
پس به یاد داشته باشید که یکی از راهنمایی‌های بسیار ساده
در فضای سفید این است که باید فضای زیادی
و حتی مقدار زیادی فضای سفید بین بخش‌ها اضافه کنیم.
خوب، پس بیایید به CSS خود برویم.
و بنابراین اینجا جایی است که ما قبلاً قوانین خاصی
در مورد این فضای سفید داریم.
و این دقیقاً همین‌جاست.
پس بعد از هدر و بعد از بخش
یک margin-bottom به اندازه ۴۸ وجود دارد.
پس بیایید سریع اینجا آن را بررسی کنیم تا
همه بدانیم درباره چه چیزی صحبت می‌کنیم.
پس ما یک هدر داریم، درست است؟
پس کمی فضا آنجا وجود دارد، و سپس بخش را داریم.
و بنابراین همه این‌ها اکنون فاصله‌های مختلفی
به پایین دارند، درست است؟
اما حالا بیایید واقعاً این را به‌طور چشمگیری افزایش دهیم.
و همان‌طور که در یک درس درباره فضای سفید یاد گرفتیم،
ایده خوبی است که از یک سیستم ثابت استفاده کنیم
تا مجبور نباشیم دائماً انتخاب کنیم
مقادیر فاصله به صورت تصادفی، درست است؟
پس در حال حاضر ما ۴۸ پیکسل داریم.
پس همه اینجا سیستم فاصله‌بندی است
که قبلاً به آن اشاره کردم.
و بنابراین بیایید آن را به ۸۰ یا حتی ۹۶ افزایش دهیم.
پس من می‌خواهم با این دو مقدار آزمایش کنم.
پس بیایید بگوییم ۸۱.
حالا باید دستی این بار را ری‌لود کنم، و بله
این قبلاً بهتر به نظر می‌رسد.
پس اینجا واقعاً قابل مشاهده است
که اکنون فضای بسیار بیشتری وجود دارد.
و اکنون این هدر واقعاً بیشتر به این بخش تعلق دارد
اما فکر می‌کنم می‌توانیم آن را حتی بیشتر
به ۹۶ پیکسل ببریم.
و این حتی بهتر به نظر می‌رسد.
پس همچنین اکنون یک فضای خوب وجود دارد
بین این بخش و فوتر و همین‌طور اینجا.
و همین‌طور اینجا.
پس این قطعاً خیلی بهتر به نظر می‌رسد.
با این حال، اگر حالا به بالا اسکرول کنیم
فضای زیادی زیر این تصویر وجود دارد
اما بالای تصویر نه.
پس در واقع باید کمی فضا بالای این هدر هم اضافه کنیم.
پس در واقع در بالای این هدر،
بیایید ببینیم اینجا کجاست.
پس margin-top برابر ۴۸ است.
و بیایید آن را به مقدار بعدی، که فکر کنم ۶۴ بود، تغییر دهیم.
پس ۶۴ یا شاید ۸۰ و بله، ۶۴.
پس این بهتر به نظر می‌رسد.
بیایید ۸۰ را امتحان کنیم، اما فکر می‌کنم این مقدار زیادی باشد.
بله، پس به نظر می‌رسد همین‌طور هم خوب باشد
زیرا صفحه ما در واقع نسبتاً بلند است،
اما معمولاً مرورگر
احتمالاً کمی کوچک‌تر خواهد بود.
و سپس این ممکن است چندان خوب به نظر نرسد
زیرا به صورت عمودی مرکزنشده خواهد بود.
پس آن را به ۶۴ برمی‌گردانیم.
و فکر می‌کنم این خوب به نظر می‌رسد.
پس این همان فاصله بین بخش‌ها است
که یادتان باشد، جایی است که می‌خواهیم مقدار زیادی
فضای سفید اضافه کنیم.
و حالا بیایید نگاهی بیندازیم
به فضای سفید بین عناصر مختلف.
پس اینجا ما قبلاً کمی فضای سفید داریم
برای ایجاد یک سلسله‌مراتب، زیرا این دکمه
به نوعی متعلق به این بلوک متن است، می‌توان گفت.
و بنابراین فاصله اینجا کمتر از اینجا است.
با این حال، فکر می‌کنم می‌توانیم کمی فضای بیشتری اینجا
زیر این هدر اضافه کنیم تا بیشتر برجسته شود.
پس در واقع اگر فضای سفید بیشتری اطراف آن باشد،
این از بقیه محتوا بیشتر برجسته خواهد شد.
پس اکنون این مقدار ۲۴ است و مقدار بعدی ۳۲ خواهد بود.
پس احتمالاً این خوب است.
و دوباره، البته وقتی خودتان کدنویسی می‌کنید
شاید سیستم را جایی دیگر روی صفحه داشته باشید
و دیگر لازم نباشد بالا و پایین اسکرول کنید
تا این مقادیر را مدام ببینید.
پس اکنون این حتی بهتر است.
و پس بیایید به بخش بعدی برویم.
و اینجا دوباره کمی فاصله مبهم داریم.
پس فاصله بین آیکون و هدر
یا این متن، همانند فاصله
بین این هدر و این متن است.
و بنابراین این چندان منطقی نیست،
زیرا این متن
این هدر، بیشتر به این متن تعلق دارد
تا این عنصر.
پس این همان قانون مجاورت است، یادتان هست؟
و بنابراین کاری که من انجام می‌دهم این است که فضای بیشتری اینجا
به این آیکون‌ها اضافه کنم.
پس اینجا است؛ در حال حاضر ۱۶ است.
و همین مقدار برای عنوان ویژگی‌ها نیز اعمال می‌شود.
و به همین دلیل است که به نوعی اینجا در وسط قرار گرفته است.
پس بیایید آن را به مقدار بعدی افزایش دهیم
که ۲۴ است، همانطور که از حفظ می‌دانم.
و بنابراین این در واقع خیلی زیباتر است، تنها با
اضافه کردن ۸ پیکسل فضا.
و ادامه می‌دهیم، اینجا بخش بعدی ما است
و اینجا نیز می‌توانیم سلسله‌مراتب بصری بیشتری
بین این سه عنصر متنی اضافه کنیم.
در واقع اینجا همین حالا هم کمی سلسله‌مراتب وجود دارد
به این صورت که مهم‌ترین بخش بزرگ‌تر و پررنگ‌تر است.
و سپس نام این دو خانم، مری و سارا،
این متن همین حالا هم کوچک‌تر است
نسبت به خودِ نظر یا توصیه‌نامه، درست است؟
با این حال، می‌توانیم سعی کنیم آن را کمی تیره‌تر کنیم.
و در واقع یادتان باشد تکنیکی که
خیلی قبل‌تر وقتی درباره رنگ‌ها صحبت می‌کردیم گفتم
که می‌توانیم رنگ متن را
داخل یک بلوک رنگ روشن، مثل همین مورد اینجا،
به‌گونه‌ای تنظیم کنیم که با رنگ پس‌زمینه هماهنگ شود.
یعنی منظورم این است که به این متن سفید
یک رنگ سبز بسیار بسیار روشن بدهیم.
و در این صورت، کنتراست بین این سبز روشن پس‌زمینه
و رنگ سفید به آن شدت نخواهد بود
و ظاهر طبیعی‌تری پیدا می‌کند.
پس امیدوارم هنوز یادتان باشد
آن ترفندی که قبلاً گفتم.
اما البته همیشه می‌توانید برگردید و دوباره نگاه کنید.
حالا، برای اینکه واقعاً آن رنگ سبز خیلی روشن را بگیریم
باید برگردیم
به سایت Open Colors، جایی که آن رنگ را ابتدا گرفتیم.
خب، Open Color، نمی‌دانم
آیا کافی خواهد بود یا نه، اما هست.
به هر حال، اگر اینطوری پیدایش نکردید،
همیشه می‌توانید به صفحه منابع من بروید.
اما در هر صورت، بیایید اولی را امتحان کنیم.
یعنی رنگ teal-0
که همان‌طور که می‌بینید، واقعاً خیلی روشن است.
پس تفاوت بسیار ظریف خواهد بود،
اما همین اثرات ظریف کوچک می‌توانند تفاوت زیادی ایجاد کنند
اگر بخواهید یک طراحی بسیار شسته‌رفته داشته باشید.
پس این احتمالاً برای متن نظر/توصیه‌نامه خواهد بود.
بیایید ببینیم، بله، همین است.
پس بیایید رنگی را که همین الان
کپی کردم به آن بدهیم و دقیق به متن نگاه کنیم.
و در حالی که تقریباً همانند قبل به نظر می‌رسد،
اما اگر با این یکی مقایسه کنید
می‌توانید یک تفاوت ظریف را ببینید.
و این حتی مهم‌تر خواهد شد
زیرا حالا ما یک رنگ سبز دیگر انتخاب می‌کنیم
برای این یکی، و کمی تیره‌تر.
و بنابراین این باعث ایجاد کنتراست می‌شود
بین این دو عنصر
و یک سلسله‌مراتب بصری زیبا درست همین‌جا ایجاد می‌کند.
پس باید اینجا را انتخاب کنیم.
نویسنده توصیه‌نامه؛ ما هنوز آن را نداریم.
می‌توانیم در واقع دوبار کلیک کنیم و از همین‌جا کپی‌اش کنیم.
و بعد بیایید رنگ بعدی را انتخاب کنیم.
خب، این یکی را انتخاب کنیم و حالا ببینیم چه اتفاقی می‌افتد.
و بله، اینجا در واقع می‌توانید ببینید
که این حالا واقعاً سبز شده است.
دیگر مثل قبل فقط سفید نیست.
و بنابراین این حالا همان‌طور که قبلاً گفتم
یک کنتراست خوب بین این متن و آن یکی ایجاد می‌کند.
و بنابراین سلسله‌مراتب بصری اکنون حتی بهتر تثبیت شده است.
و حالا در نهایت برویم سراغ
بخش کارت‌هایمان با صندلی‌های پرفروش.
اینجا هم چیزهایی هست که می‌توانیم درست کنیم
چون یک بار دیگر فاصله‌های مبهمی داریم.
اینجا داخل این کارت‌ها، اساساً سه بخش داریم.
یک عنوان داریم،
بعد این چهار مورد لیست‌شده را داریم،
یعنی چهار بخش اطلاعات.
و سپس پایین‌تر بقیه کارت را داریم،
که شامل قیمت و این دکمه است.
در حال حاضر فضای بین این‌ها
تقریباً همه‌اش یکسان است.
اگر نگاه کنید،
فاصله بین این دو بخش اطلاعات
و این بخش پایانی دقیقاً یکی است.
و حتی اینجا هم خیلی شبیه به هم دیده می‌شود.
و این از نظر سلسله‌مراتب بصری
خیلی منطقی نیست.
پس ما می‌خواهیم این بلوک؛
یعنی این لیست، کمی جدا‌تر باشد
از آن دو بخش محتوای دیگر.
یعنی این یکی و آن یکی.
پس احتمالاً باید فاصله اینجا را
کمی کاهش بدهیم.
خیلی خب.
و در واقع قبل از این کار
باید کمی پدینگ بیشتری هم اضافه کنیم،
چون فضای داخل این کارت
واقعاً خیلی کم است.
پس می‌توانیم آن را به سطح بعدی، یعنی ۳۲ پیکسل، افزایش دهیم.
و حالا با همین تغییر ساده در پدینگ
خیلی بهتر به نظر می‌رسد.
و حالا بیایید فاصله بین موارد لیست
را همان‌طور که گفتم کاهش بدهیم.
پس الان ۲۴ پیکسل است،
بیایید آن را به ۱۶ کاهش دهیم، درست است؟
و بنابراین قبل‌تر کمی جدا از هم به نظر می‌رسیدند،
اما حالا، حداقل به نظر من،
کمی مرتبط‌تر با یکدیگر دیده می‌شوند.
و حالا در نهایت بیایید کمی فضای بیشتر هم اضافه کنیم
بین این لیست و بخش پایینی.
پس بیایید ببینیم واقعاً دنبال چه چیزی هستیم.
پس این بخش جزئیات صندلی و قیمت صندلی است.
پس بیایید برویم به بخش جزئیات صندلی و اینجا تغییر زیادی بدهیم.
اینجا می‌توانیم حتی آن را به ۴۸ پیکسل افزایش دهیم.
خب، دوباره خیلی بهتر به نظر می‌رسد.
اما نه‌تنها ظاهر بهتری دارد، بلکه عملکرد بهتری هم دارد.
طراحی به این شکل خیلی منطقی‌تر است،
چون سلسله‌مراتب بصری حالا بهتر تثبیت شده است
و بنابراین حالا برای کاربر راحت‌تر است که بفهمد
چه کاری می‌تواند اینجا در این کارت انجام دهد.
حالا یک مشکل در تراز دیدم که تازه متوجه شدم.
پس این بخش قیمت صندلی از Flexbox استفاده می‌کند،
اما ما این‌ها را به صورت عمودی تراز نکردیم، درست است؟
پس سریع این کار را در بخش قیمت صندلی انجام بدهیم.
پس align-items را تنظیم کنیم.
یادتان باشد، آن را روی center بگذارید.
عالی شد. حالا درست شد.
و فکر می‌کنم با این کار، در واقع کارمان تمام است.
پس اگر به محصول نهایی‌مان نگاه کنیم،
که در این نقطه در واقع تکمیل شده است،
می‌بینیم که همه قوانین طراحی را
در این پروژه اعمال کرده‌ایم.
و فکر می‌کنم تفاوت خیلی زیادی وجود دارد
بین چیزی که در ابتدا داشتیم و چیزی که الان داریم.
و تمام کاری که کردیم این بود که چند خط
CSS اضافه کردیم و چند قانون طراحی
را دنبال کردیم که در این بخش به شما نشان دادم.
و یک بار دیگر می‌خواهم تأکید کنم
که همه این تغییرات کوچک چقدر می‌توانند
در مجموع تفاوت بزرگی ایجاد کنند.
پس هرکدام از این تغییرات جزئی که انجام دادیم
شاید در لحظه به نظر کمی بی‌اهمیت یا اضافی می‌آمد،
اما وقتی همه را با هم جمع کنیم،
این جزئیات کوچک همه تفاوت را رقم می‌زنند.
و بنابراین در نهایت
به یک طراحی خوب می‌رسیم که منطقی است و استفاده از آن راحت است.
پس امیدوارم بتوانید این را به عنوان یکی از مهم‌ترین نکات
از این بخش در نظر بگیرید وقتی شروع به خلق طراحی‌های خودتان می‌کنید.
اما در هر صورت، این پروژه حالا به پایان رسیده است،
اما هنوز چیزهای بیشتری برای یاد گرفتن وجود دارد
در این بخش طراحی وب.
پس بیایید حالا به سراغ جلسه بعدی برویم،
که کاملاً درباره تجربه کاربری است.