پاسخگوی جدید: طراحی وب در دنیای کامپوننت محور

کنترل طرح‌بندی ماکرو و میکرو در عصر جدید طراحی وب واکنش‌گرا

Una Kravets

طراحی واکنش‌گرای امروزی

امروزه، وقتی از اصطلاح «طراحی واکنش‌گرا» استفاده می‌کنید، به احتمال زیاد به استفاده از مدیا کوئری‌ها برای تغییر طرح‌بندی هنگام تغییر اندازه طرح از اندازه موبایل به اندازه تبلت و از آن به اندازه دسکتاپ فکر می‌کنید.

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

کوئری‌های رسانه‌ای مبتنی بر Viewport ابزارهای قدرتمندی را در اختیار شما قرار می‌دهند، اما فاقد ظرافت زیادی هستند. آن‌ها توانایی پاسخگویی به نیازهای کاربر و توانایی تزریق استایل‌های واکنش‌گرا به خود کامپوننت‌ها را ندارند.

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

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

خبر خوب این است که اکوسیستم در حال تغییر است و این تغییر به سرعت در حال انجام است. CSS در حال تکامل است و دوران جدیدی از طراحی واکنش‌گرا (responsive design) در راه است.

ما تقریباً هر 10 سال یکبار شاهد این اتفاق هستیم. 10 سال پیش، حدود سال‌های 2010 تا 2012، شاهد تغییر بزرگی در طراحی موبایل و واکنش‌گرا و ظهور CSS3 بودیم.

منبع: موزه طراحی وب

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

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

پاسخگو به کاربر

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

این ویژگی‌های رسانه‌ای ترجیحی کاربر عبارتند از:

• prefers-reduced-motion
• prefers-contrast
• prefers-reduced-transparency
• prefers-color-scheme
• inverted-colors
• و موارد دیگر

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

prefers-reduced-motion

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

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

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

ترجیح کاهش حرکت نباید به معنای «بدون حرکت» باشد، زیرا حرکت برای انتقال اطلاعات آنلاین بسیار حیاتی است. در عوض، یک تجربه پایه محکم ارائه دهید که کاربران شما را بدون حرکت غیرضروری راهنمایی کند و به تدریج آن تجربه را برای کاربران خود بدون آن نیازها یا ترجیحات دسترسی بهبود بخشد.

prefers-color-scheme

یکی دیگر از ویژگی‌های ترجیحی رسانه، prefers-color-scheme است. این ویژگی به شما کمک می‌کند تا رابط کاربری خود را با تمی که کاربر ترجیح می‌دهد، سفارشی کنید. در سیستم عامل خود، چه در دسکتاپ و چه در موبایل، کاربران می‌توانند تم‌های روشن، تیره یا خودکار را تنظیم کنند که بسته به زمان روز تغییر می‌کنند.

اگر صفحه خود را با استفاده از ویژگی‌های سفارشی CSS تنظیم کنید، تعویض مقادیر رنگ ساده می‌شود. می‌توانید به سرعت مقادیر تم رنگ خود، مانند backgroundColor و textOnPrimary را به‌روزرسانی کنید تا به صورت پویا با تم جدید در کوئری رسانه تنظیم شوند.

برای اینکه آزمایش برخی از این کوئری‌های ترجیحی آسان‌تر شود، می‌توانید به جای باز کردن تنظیمات سیستم خود هر بار، از DevTools برای شبیه‌سازی استفاده کنید.

طراحی برای تم تیره

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

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

طراحی متریال راهنمایی‌های خوبی در مورد طراحی برای تم‌های تیره ارائه می‌دهد.

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

یک مطالعه اندروید در سال ۲۰۱۸ روی تم‌های تاریک، بسته به روشنایی صفحه نمایش و رابط کاربری کلی، صرفه‌جویی در مصرف برق تا ۶۰٪ را نشان داد. آمار ۶۰٪ از مقایسه صفحه پخش یوتیوب با یک ویدیوی متوقف شده با روشنایی ۱۰۰٪ صفحه نمایش با استفاده از تم تاریک برای رابط کاربری برنامه در مقابل یک تم روشن به دست آمد.

شما همیشه باید در صورت امکان، تجربه تم تاریک را برای کاربران خود فراهم کنید.

پاسخگو به کانتینر

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

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

نسخه آزمایشی را در Codepen (پشت یک پرچم در Canary) ببینید .

این مثال دو کامپوننت یکسان با دو اندازه کانتینر متفاوت را نشان می‌دهد که هر دو در یک طرح‌بندی ایجاد شده با استفاده از CSS Grid فضا اشغال می‌کنند. هر کامپوننت با تخصیص فضای منحصر به فرد خود متناسب است و بر اساس آن خود را سبک‌بندی می‌کند.

این میزان از انعطاف‌پذیری چیزی است که تنها با کوئری‌های رسانه‌ای امکان‌پذیر نیست.

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

این به at-rule @container نیاز دارد. این به روشی مشابه با یک پرس و جوی رسانه‌ای با @media عمل می‌کند، اما در عوض، @container به جای viewport و user agent، از ظرف والد برای اطلاعات پرس و جو می‌کند.

.card {
  container-type: inline-size;
}

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

ابتدا، عنصر والد را در برگیرنده (containment) قرار دهید. و سپس، یک کوئری @container بنویسید تا هر یک از عناصر درون ظرف را بر اساس اندازه آن، با استفاده از min-width یا max-width ، استایل‌دهی کند.

کد بالا از max-width استفاده می‌کند و لینک‌ها را روی display:none تنظیم می‌کند، و همچنین اندازه فونت time را وقتی عرض کانتینر کمتر از 850px باشد، کاهش می‌دهد.

کارت‌های استعلام کانتینر

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

نسخه آزمایشی را در Codepen (پشت یک پرچم در Canary) ببینید .

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

.product {
  container-type: inline-size;
}

@container (min-width: 350px) {
  .card-container {
    padding: 0.5rem 0 0;
    display: flex;
  }

  .card-container button {
    /* ... */
  }
}

وقتی حداقل 350px فضا در شبکه وجود داشته باشد، طرح‌بندی کارت با تنظیم روی display: flex به صورت افقی درمی‌آید، که دارای مقدار پیش‌فرض flex-direction برابر با "row" است.

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

ترکیب کوئری‌های کانتینر با کوئری‌های مدیا

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

نسخه آزمایشی را در Codepen (پشت یک پرچم در Canary) ببینید .

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

سپس، از یک کوئری رسانه‌ای برای تغییر کل طرح‌بندی برای اندازه‌های صفحه نمایش کوچکتر استفاده کنید. این مثال نشان می‌دهد که ترکیب کوئری‌های رسانه‌ای (تنظیم استایل‌های سراسری یا ماکرو) با کوئری‌های کانتینر (تنظیم فرزندان کانتینر و استایل‌های میکروی آنها) چقدر قدرتمند است.

بنابراین اکنون می‌توانیم طرح‌بندی‌های ماکرو و میکرو را در یک کامپوننت رابط کاربری در نظر بگیریم تا بتوانیم تصمیمات طراحی ظریف و واقعاً خوبی را اتخاذ کنیم.

استفاده از کوئری‌های کانتینری امروزه

این دموها اکنون برای اجرا در پشت یک پرچم در Chrome Canary در دسترس هستند. به about://flags در Canary بروید و پرچم #enable-container-queries فعال کنید. این کار پشتیبانی از مقادیر @container ، inline-size و block-size را برای ویژگی contain و پیاده‌سازی LayoutNG Grid فعال می‌کند.

این پرچم همچنین ویژگی‌های مربوط به Chrome DevTools را فعال می‌کند. یاد بگیرید که چگونه کوئری‌های کانتینر را در DevTools بررسی و اشکال‌زدایی کنید .

سبک‌های محدود شده

برای ساخت کوئری‌های کانتینر، از استایل‌های scoped به همراه @scope استفاده کنید تا دسترسی به انتخابگرهایتان را محدود کنید.

این مجسمه در ابتدا توسط میریام سوزان طراحی شده است.

سبک‌های Scoped به شما این امکان را می‌دهند که سبک‌بندی مختص به کامپوننت را برای جلوگیری از تداخل نامگذاری‌ها اعمال کنید، کاری که بسیاری از فریم‌ورک‌ها و افزونه‌ها مانند ماژول‌های CSS از قبل به ما امکان انجام آن را در فریم‌ورک‌ها می‌دهند. سبک‌های Scoped به شما این امکان را می‌دهند که سبک‌های کپسوله‌شده را به صورت بومی برای کامپوننت‌هایی با CSS خوانا و بدون نیاز به تنظیم نشانه‌گذاری بنویسید.

/* @scope (<root>#) [to (<boundary>#)]? { … } */

@scope (.tabs) to (.panel) {
  :scope { /* targeting the scope root */ }
  .light-theme :scope .tab { /* contextual styles */ }
}

تعیین محدوده به شما امکان می‌دهد انتخابگرهایی به شکل دونات ایجاد کنید که در آن‌ها می‌توانید حد بالا و پایین را مشخص کنید. انتخابگرهای موجود در قانون @scope بین این حدها تطبیق داده می‌شوند.

یک مثال از این می‌تواند یک پنل تب باشد، که در آن می‌خواهید تب‌ها استایل‌های scoped را دریافت کنند اما پنل درون آن تب‌ها تحت تأثیر آن استایل‌های scoped قرار نگیرد.

پاسخگو به فاکتور فرم

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

نمودار از Microsoft Edge Explainers .

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

یک کوئری رسانه‌ای آزمایشی برای پوشش صفحه می‌تواند در اینجا به ما کمک کند. در حال حاضر به این صورت عمل می‌کند: @media (spanning: <type of fold>) . این نسخه آزمایشی یک طرح شبکه‌ای با دو ستون ایجاد می‌کند: یکی دارای عرض --sidebar-width است که به طور پیش‌فرض 5rem است و دیگری 1fr . وقتی طرح‌بندی در یک صفحه نمایش دوگانه که یک تاخوردگی عمودی دارد مشاهده می‌شود، مقدار --sidebar-width با مقدار محیطی تاخوردگی سمت چپ به‌روزرسانی می‌شود.

:root {
  --sidebar-width: 5rem;
}

@media (spanning: single-fold-vertical) {
  --sidebar-width: env(fold-left);
}

main {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
}

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

شما می‌توانید صفحات نمایش تاشو را در شبیه‌ساز Chrome DevTools آزمایش کنید تا به اشکال‌زدایی و نمونه‌سازی اولیه صفحه نمایش که مستقیماً در مرورگر گسترده می‌شود، کمک کنید.

نتیجه‌گیری

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

این واکنشگرای جدید است.

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

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

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

web.dev/learnCSS

و فعلاً، اگر می‌خواهید سطح بازی CSS خود را ارتقا دهید و شاید بخواهید برخی از اصول اولیه را دوباره مرور کنید، تیم من در حال راه‌اندازی یک دوره و مرجع CSS کاملاً رایگان و جدید در web.dev است. می‌توانید از طریق web.dev/learnCSS به آن دسترسی داشته باشید.

امیدوارم از این مرور کلی در مورد دوره بعدی طراحی واکنش‌گرا و برخی از ویژگی‌های اولیه‌ای که با آن همراه خواهند بود، لذت برده باشید و همچنین امیدوارم که شما هم به اندازه من از معنای این موضوع برای آینده طراحی وب هیجان‌زده باشید.

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