ایجاد رابط های سازگار با کاربر با پرس و جوهای رسانه ترجیحی

۱. قبل از شروع

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

تنظیمات برگزیده کاربر

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

در اینجا چند نمونه از تنظیمات کاربر که می‌تواند توسط CSS استفاده شود ، آورده شده است:

• اندازه نمای دستگاه
• جهت دستگاه (عمودی | افقی)
• اندازه فونت
• آنلاین / آفلاین
• کیفیت شبکه
• طرح رنگ (روشن | تیره)
• انیمیشن‌های رابط کاربری (روشن | کوچک‌شده)
• کیفیت ورودی (ماوس | لمس | قلم)
• جهت سند و حالت نوشتن (از چپ به راست، از بالا به پایین و موارد دیگر)
• حالت نمایش (تمام صفحه | مستقل | رابط کاربری مینیمال | مرورگر)

در اینجا چند نمونه از تنظیمات برگزیده کاربر که به زودی به CSS اضافه می‌شوند ، آورده شده است:

• حالت کم‌حجم / کم‌حجم
• محدوده رنگ
• کنتراست (کمتر | بیشتر | کاهش)
• رنگ‌ها (رنگ‌های کاربر را به زور وارد صفحه می‌کند)
• شفافیت (روشن | کاهش یافته)

پرس‌وجوهای رسانه‌ای

CSS و وب، سازگاری و واکنش‌گرایی را از طریق کوئری‌های رسانه‌ای امکان‌پذیر می‌کنند. این کوئری‌ها، یک شرط اعلانی هستند که در صورت درست بودن آن شرط، مجموعه‌ای از سبک‌ها را شامل می‌شوند. رایج‌ترین شرط، شرطی در مورد اندازه نمایشگر دستگاه است: اگر اندازه کمتر از ۸۰۰ پیکسل باشد، در اینجا چند سبک بهتر برای آن حالت آورده شده است.

کاربر-سازگار

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

پیش‌نیازها

• آشنایی با HTML و CSS
• آشنایی با ابزارهای توسعه‌دهندگان، مانند ابزارهای توسعه‌دهندگان گوگل کروم

آنچه خواهید ساخت

در این آزمایشگاه کد، شما یک فرم سازگار با کاربر خواهید ساخت که با موارد زیر سازگار می‌شود:

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

آنچه یاد خواهید گرفت

در این آزمایشگاه کد، شما با ویژگی‌های مدرن وب آشنا می‌شوید که به شما در ساخت فرم‌های سازگار با کاربر کمک می‌کنند. شما یاد می‌گیرید که چگونه:

• ساخت تم‌های روشن و تیره
• ساخت فرم‌های متحرک و قابل دسترس
• فرم‌های واکنش‌گرا با طرح‌بندی
• استفاده از واحدهای نسبی و ویژگی‌های منطقی

این آزمایشگاه کد بر رابط‌های تطبیق‌پذیر کاربر تمرکز دارد. مفاهیم و بلوک‌های کد نامربوط نادیده گرفته شده‌اند و برای کپی و پیست ساده در اختیار شما قرار گرفته‌اند.

آنچه نیاز دارید

• گوگل کروم ۸۹ و بالاتر، یا مرورگر دلخواه شما

۲. آماده شوید

کد را دریافت کنید

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

توصیه شده: از Codepen استفاده کنید

1. یک تب جدید مرورگر باز کنید.
2. به آدرس https://codepen.io/argyleink/pen/abBMeeq بروید.
3. اگر حساب کاربری ندارید، برای ذخیره کار، یکی ایجاد کنید.
4. روی چنگال کلیک کنید.

جایگزین: کار محلی

اگر می‌خواهید کد را دانلود کنید و به صورت محلی کار کنید، به Node.js نسخه ۱۲ یا بالاتر و یک ویرایشگر کد تنظیم شده و آماده برای استفاده نیاز دارید.

از گیت استفاده کنید

1. به آدرس https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces مراجعه کنید
2. مخزن را در یک پوشه کلون کنید.
3. توجه کنید که شاخه پیش‌فرض beginning است.

استفاده از فایل‌ها

سورس کد

1. فایل زیپ دانلود شده را در یک پوشه از حالت فشرده خارج کنید.

اجرای پروژه

از دایرکتوری پروژه ایجاد شده در هر یک از مراحل فوق استفاده کنید، سپس:

1. برای نصب وابستگی‌های مورد نیاز برای اجرای سرور، npm install اجرا کنید.
2. برای شروع سرور روی پورت ۳۰۰۰، npm start اجرا کنید.
3. یک تب جدید مرورگر باز کنید.
4. به آدرس http://localhost:3000 بروید.

درباره HTML

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

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

۳. تعاملات تطبیقی

شاخه گیت : beginning

در پایان این بخش، فرم تنظیمات شما با موارد زیر سازگار خواهد شد:

• دسته بازی + کیبورد
• ماوس + لمس
• صفحه‌خوان یا فناوری کمکی مشابه

ویژگی‌ها برای HTML

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

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

گروه‌بندی ورودی‌ها

عنصر <fieldset> در HTML برای گروه‌بندی ورودی‌ها و کنترل‌های مشابه با هم است. در فرم شما دو گروه دارید، یکی برای صدا و یکی برای اعلان‌ها. این برای تجربه کاربری مهم است تا بتوان از کل بخش‌ها صرف‌نظر کرد.

مرتب‌سازی عناصر

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

تعامل با صفحه کلید

کاربران وب به حرکت در فرم‌ها با کلید تب عادت کرده‌اند، که خوشبختانه اگر عناصر HTML مورد انتظار را فراهم کنید، مرورگر این کار را انجام می‌دهد. استفاده از عناصری مانند <button> ، <input> ، <h2> و <label> به طور خودکار به مقصد صفحه‌کلید یا صفحه‌خوان تبدیل می‌شوند.

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

استایل.css

input {
  outline-offset: 5px;
}

چیزهایی که باید امتحان کنید

1. عناصر HTML استفاده شده در index.html را مرور کنید.
2. روی صفحه دمو در مرورگر خود کلیک کنید.
3. برای جابجایی فوکوس عنصر در طول فرم، کلید tab و کلیدهای shift+tab را فشار دهید.
4. برای تغییر مقادیر اسلایدرها و چک باکس‌ها از صفحه کلید استفاده کنید.
5. یک دسته بازی بلوتوثی وصل کنید و فوکوس عنصر را در طول فرم جابجا کنید.

تعامل ماوس

کاربران وب به تعامل با فرم‌ها با ماوس عادت کرده‌اند. سعی کنید از ماوس خود روی فرم استفاده کنید. اسلایدرها و چک‌باکس‌ها کار می‌کنند، اما می‌توانید بهتر عمل کنید. این چک‌باکس‌ها برای کلیک کردن با ماوس بسیار کوچک هستند.

می‌بینید که چطور دو ویژگی تجربه کاربری برای اتصال برچسب‌ها و ورودی‌هایشان به دست می‌آورید ؟

اولین ویژگی، داشتن گزینه‌هایی برای تعامل است و هدف قرار دادن برچسب برای ماوس بسیار آسان‌تر از یک مربع کوچک است.

ویژگی دوم این است که دقیقاً بدانیم یک برچسب برای کدام ورودی است. در حال حاضر بدون CSS، تشخیص اینکه کدام برچسب برای کدام چک‌باکس است بسیار دشوار است، مگر اینکه برخی ویژگی‌ها را ارائه دهید.

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

غیرمرتبط: هیچ ویژگی‌ای عناصر را به هم متصل نمی‌کند

<input type="checkbox">
<label>...</label>

مرتبط: ویژگی‌هایی که عناصر را به هم متصل می‌کنند

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

HTML ارائه شده از قبل تمام ورودی‌ها و برچسب‌ها را نسبت داده است. اگر این مفهوم برای شما جدید است، ارزش بررسی بیشتر را دارد.

چیزهایی که باید امتحان کنید

1. با ماوس خود روی یک برچسب حرکت کنید و به هایلایت‌های کادر انتخاب توجه کنید.
2. با استفاده از ابزارهای توسعه‌دهنده کروم، یک عنصر برچسب را بررسی کنید تا ناحیه قابل کلیکی که می‌تواند کادر انتخاب را انتخاب کند، تجسم کنید.

تعامل صفحه‌خوان

فناوری کمکی می‌تواند با این فرم تعامل داشته باشد و با چند ویژگی HTML، تجربه کاربری را روان‌تر کند.

برای کاربرانی که فرم فعلی را با استفاده از صفحه‌خوان در کروم پیمایش می‌کنند، یک توقف غیرضروری در عنصر <picture> وجود دارد (که مختص کروم نیست). کاربری که از صفحه‌خوان استفاده می‌کند، احتمالاً به دلیل ناتوانی بینایی از صفحه‌خوان استفاده می‌کند، بنابراین توقف روی تصویر مفید نیست. می‌توانید عناصر را با استفاده از یک ویژگی از صفحه‌خوان‌ها پنهان کنید.

فهرست.html

<picture aria-hidden="true">

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

عنصر اسلایدر input[type="range"] یک ویژگی ARIA ویژه دارد: aria-labelledby="media-volume" . این ویژگی دستورالعمل‌های ویژه‌ای را برای صفحه‌خوان فراهم می‌کند تا از آن برای بهبود تجربه کاربری استفاده کند.

چیزهایی که باید امتحان کنید

1. از فناوری صفحه‌خوان سیستم‌عامل خود برای جابجایی فوکوس روی فرم استفاده کنید.
2. یک نرم‌افزار صفحه‌خوان دانلود کنید و روی فرم امتحان کنید.

۴. طرح‌بندی‌های تطبیقی

شاخه گیت: layouts

در پایان این بخش، صفحه تنظیمات:

• ایجاد یک سیستم فاصله‌گذاری با ویژگی‌های سفارشی و واحدهای نسبی کاربر
• برای ترازبندی و فاصله‌گذاری انعطاف‌پذیر و واکنش‌گرا، CSS Grid بنویسید
• استفاده از ویژگی‌های منطقی برای طرح‌بندی‌های تطبیقی ​​بین‌المللی
• نوشتن کوئری‌های رسانه‌ای برای تطبیق بین طرح‌بندی‌های فشرده و بزرگ

فاصله گذاری

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

خواص سفارشی

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

• این موارد را در بالای style.css قرار دهید:

استایل.css

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

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

سبک‌های صفحه

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

• موارد زیر را به style.css اضافه کنید:

استایل.css

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

این اولین استفاده شما از ویژگی‌های سفارشی فاصله‌گذاری است! این آغاز سفر فضایی شما است.

تایپوگرافی

فونت این طرح‌بندی تطبیقی ​​است. کلمه کلیدی system-ui از هر فونتی که سیستم عامل کاربر به عنوان فونت رابط بهینه تعیین کرده باشد، استفاده خواهد کرد.

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

استایل‌های مربوط به h1، h2 و h3 جزئی و سبکی هستند. با این حال، عنصر small برای زمانی که متن جمع می‌شود به line-height اضافی نیاز دارد. در غیر این صورت بیش از حد شلوغ و به هم ریخته است.

ویژگی‌های منطقی

توجه داشته باشید که padding روی body از ویژگی‌های منطقی ( block-start ، block-end ) برای مشخص کردن ضلع استفاده می‌کند. ویژگی‌های منطقی به طور گسترده در بقیه کدلاگ استفاده خواهند شد. آنها نیز مانند یک واحد rem با کاربر سازگار می‌شوند . این طرح‌بندی را می‌توان به زبان دیگری ترجمه کرد و آن را با جهت‌های نوشتاری و سندی طبیعی که کاربر در زبان مادری خود به آنها عادت دارد، تنظیم کرد. ویژگی‌های منطقی تنها با یک تعریف از فضا، جهت یا ترازبندی، پشتیبانی از این را فعال می‌کنند.

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

ویژگی‌های منطقی به شما این امکان را می‌دهند که با نوشتن استایل‌های کمتر، به کاربران بیشتری دسترسی پیدا کنید.

طرح‌بندی‌های شبکه‌ای CSS

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

در اینجا تصویری از Chrome DevTools که هر طرح‌بندی شبکه CSS را به طور همزمان پوشش می‌دهد، مشاهده می‌کنید:

1. با اضافه کردن هر یک از استایل‌های زیر به style.css مراحل را دنبال کنید:

<اصلی>

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);
}

گرید به طور پیش‌فرض هر عنصر فرزند را در ردیف خودش قرار می‌دهد که آن را برای روی هم قرار دادن عناصر عالی می‌کند. همچنین مزیت اضافه استفاده از gap را نیز دارد. پیش از این، شما margin: 0 را برای همه عناصر با انتخابگر * تنظیم می‌کردید، که اکنون با استفاده از gap برای فاصله‌گذاری، مهم است. Gap نه تنها یک مکان واحد برای مدیریت فضا در یک کانتینر است، بلکه جریان نسبی آن را نیز شامل می‌شود.

<فرم>

form {
  max-width: 89vw;
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  align-items: flex-start;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
}

این پیچیده‌ترین طرح شبکه‌ای طراحی است، اما هیجان‌انگیزترین جنبه واکنش‌گرایی را نیز در بر می‌گیرد:

• max-width مقداری را برای الگوریتم طرح‌بندی ارائه می‌دهد تا هنگام تصمیم‌گیری در مورد میزان بزرگی آن، از آن استفاده کند.
• gap از ویژگی‌های سفارشی استفاده می‌کند و یک row-gap متفاوت از column-gap ارسال می‌کند.
• align-items روی flex-start تنظیم شده است تا ارتفاع آیتم‌ها کشیده نشود.
• grid-template-columns سینتکس پیچیده‌ای دارد، اما هدف آن مختصر است؛ عرض ستون‌ها را 35ch نگه دارید و هرگز کمتر از 10ch نباشد، و اگر جا بود، چیزها را در ستون‌ها قرار دهید، در غیر این صورت ردیف‌ها خوب هستند.

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

<بخش>

section {
  display: grid;
  gap: var(--space-md);
}

هر بخش باید شبکه‌ای از ردیف‌ها با فضای متوسط ​​بین عناصر فرزند باشد.

<هدر>

header {
  display: grid;
  gap: var(--space-xxs);
}

هر هدر باید شبکه‌ای از ردیف‌ها با فضای بسیار کم اضافی بین عناصر فرزند باشد.

<مجموعه فیلد>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

این طرح‌بندی مسئول ایجاد ظاهری کارت‌مانند و گروه‌بندی ورودی‌ها با هم است. overflow: hidden و gap: 1px وقتی در بخش بعدی رنگ اضافه می‌کنید، واضح می‌شوند.

.fieldset-item

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

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

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

.fieldset-item <تصویر>

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

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

ترازبندی <picture> و [checkbox]

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

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

3. به جای selector picture > svg .fieldset-item svg را به صورت زیر جایگزین کنید :

<svg> با استفاده از .fieldset-item

.fieldset-item svg {
  block-size: var(--space-md);
}

این، اندازه آیکون svg را به مقداری از سیستم اندازه تنظیم می‌کند.

.sm-stack

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

این کلاس کاربردی برای عناصر برچسب چک‌باکس است تا متن کمکی برای چک‌باکس را فاصله‌گذاری کند.

ورودی[type="checkbox"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

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

چیزهایی که باید امتحان کنید

1. ابزارهای توسعه‌دهنده کروم را باز کنید و در پنل عناصر ، نشان‌های شبکه‌ای را روی HTML پیدا کنید. برای فعال کردن ابزارهای اشکال‌زدایی، روی آنها کلیک کنید.
2. ابزارهای توسعه‌دهنده کروم را باز کنید و نشانگر ماوس را روی یک فضای خالی در پنل استایل‌ها نگه دارید.
3. ابزارهای توسعه‌دهنده کروم را باز کنید، به پنل استایل‌ها بروید و از استایل‌ها به طرح‌بندی‌ها (Layouts) بروید. با تغییر تنظیمات و فعال کردن طرح‌بندی‌ها، این قسمت را بررسی کنید.

پرس‌وجوهای رسانه‌ای

CSS زیر استایل‌ها را بر اساس اندازه و جهت‌گیری viewport تطبیق می‌دهد، با این هدف که فاصله یا چیدمان را با توجه به زمینه viewport بهینه تنظیم کند.

نکته: کدهای CSS هر بخش باید بعد از انتخاب‌گری که در style.css تغییر می‌دهد، اضافه شوند.

<اصلی>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

این دو کوئری مدیا، با افزایش فضای نمایشگر، به main padding بیشتری می‌دهند. این یعنی در ابتدا مقدار padding کمی دارد، اما با افزایش فضای نمایشگر، این padding بیشتر و بیشتر می‌شود.

<فرم>

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

فرم از قبل با auto-fit به اندازه viewport واکنش‌گرا بود، اما هنگام آزمایش روی دستگاه تلفن همراه، تبدیل دستگاه به حالت افقی (landscape) دو گروه فرم را در کنار هم قرار نمی‌دهد. با استفاده از یک کوئری رسانه orientation media query) و بررسی عرض viewport، با این زمینه افقی سازگار شوید . حال، اگر دستگاه افقی است و حداقل ۶۴۰ پیکسل عرض دارد، با تغییر ویژگی سفارشی --repeat به یک عدد به جای کلمه کلیدی auto-fit ، دو ستون را اجباری کنید.

.fieldset-item

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

این کوئری رسانه‌ای، یک بسط فاصله‌ی دیگر است، زمانی که فضای بیشتری برای نمایش در دسترس باشد. قالب شبکه‌ای، ستون اول را با استفاده از یک ویژگی سفارشی بزرگتر ( var(--space-xxl) ) در قالب، بسط می‌دهد. فاصله‌گذاری نیز به ویژگی‌های سفارشی بزرگتر منتقل می‌شود.

چیزهایی که باید امتحان کنید

1. مرورگر خود را باز و بسته کنید و ببینید که فضا چگونه تنظیم می‌شود.
2. پیش‌نمایش در دستگاه تلفن همراه
3. پیش‌نمایش در دستگاه تلفن همراه در حالت افقی

۵. رنگ تطبیقی

شاخه گیت: colors

در پایان این بخش، فرم تنظیمات شما:

• با ترجیحات رنگ تیره و روشن سازگار شوید
• یک طرح رنگی برگرفته از یک هگز برند داشته باشید
• رنگ‌های قابل دسترس داشته باشید

اچ اس ال

در بخش بعدی، شما یک سیستم رنگ با HSL ایجاد خواهید کرد تا به شما در ایجاد یک تم روشن و تاریک کمک کند. این سیستم بر اساس این مفهوم اصلی در CSS ساخته شده است: calc() .

HSL مخفف رنگ (hue)، اشباع (saturation) و روشنایی (lightness) است. رنگ (hue) یک زاویه است، مانند یک نقطه روی ساعت، در حالی که اشباع (saturation) و روشنایی (lightness) درصد هستند. calc() قادر به انجام محاسبات ریاضی روی درصدها و زوایا است. شما می‌توانید محاسبات روشنایی و اشباع را روی این درصدها در CSS انجام دهید. محاسبات کانال‌های رنگی را با ویژگی‌های سفارشی ترکیب کنید، و به یک طرح رنگی مدرن و پویا دست خواهید یافت که در آن انواع رنگ از یک رنگ پایه محاسبه می‌شوند و به شما کمک می‌کنند از مدیریت تعداد زیادی رنگ در کد جلوگیری کنید.

خواص سفارشی

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

فرض کنید رنگ برند برنامه شما #0af است. اولین وظیفه شما تبدیل این مقدار رنگ هگز به یک مقدار رنگ HSL است: hsl(200 100% 50%) . این تبدیل کانال‌های رنگی برند شما را در HSL نشان می‌دهد که می‌توانید از calc() برای محاسبه رنگ‌های مختلف برند پشتیبانی‌کننده استفاده کنید.

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

هر یک از بلوک‌های کد زیر در این بخش باید به همان انتخابگر :root اضافه شوند.

کانال‌های برند

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

سه کانال HSL استخراج شده و در ویژگی‌های سفارشی خود قرار گرفته‌اند.

1. از هر سه ویژگی به همین شکل استفاده کنید و رنگ برند را از نو بسازید.

برند

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

از آنجایی که طرح رنگ شما به طور پیش‌فرض تیره است، بهتر است برای استفاده روی سطوح تیره، رنگ‌ها را از حالت اشباع خارج کنید (در غیر این صورت می‌توانند برای چشم آزاردهنده یا غیرقابل دسترس باشند). برای از بین بردن اشباع رنگ برند خود، از hue و lightness به همان صورت استفاده می‌کنید، اما با کمی تقسیم، اشباع را به نصف کاهش می‌دهید: calc(var(--saturation) / 2) . اکنون رنگ برند شما به درستی روی تم قرار دارد، اما برای استفاده اشباع آن کاهش می‌یابد.

متن

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

برای متن خواندنی در تم تیره ما، شما از رنگ برند به عنوان پایه استفاده می‌کنید، اما رنگ‌های تقریباً سفید را از آن می‌سازید. بسیاری از کاربران فکر می‌کنند متن سفید است، در حالی که در واقع آبی بسیار روشن است. ماندن در محدوده رنگ، راهی قوی برای ایجاد هماهنگی در طراحی است. --text1 85٪ سفید و --text2 65٪ سفید است و هر دو اشباع بسیار کمی دارند.

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

سطح

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

متن بسیار روشن است زیرا سطوح در حالت تاریک تیره خواهند بود. در حالی که رنگ‌های متن از مقادیر روشنایی بالا (۸۵٪ و بالاتر) استفاده می‌کردند، سطوح از مقادیر پایین‌تر (۳۰٪ و کمتر) استفاده خواهند کرد. داشتن یک فاصله سالم بین محدوده روشنایی بین سطح و متن، به تضمین رنگ‌های قابل دسترس برای خواندن کاربران کمک می‌کند.

3. توجه کنید که رنگ‌ها از تیره‌ترین خاکستری با ۱۰٪ روشنایی و ۱۰٪ اشباع شروع می‌شوند، سپس با روشن‌تر شدن، اشباع رنگشان کاهش می‌یابد. هر سطح جدید ۵٪ روشن‌تر از قبلی است. اشباع رنگ در سطوح روشن‌تر کمی کاهش یافته است. سعی کنید اشباع رنگ همه سطوح خود را روی ۱۰٪ قرار دهید. آیا این را بیشتر دوست دارید یا کمتر؟

تم روشن

با مجموعه‌ای سالم از رنگ‌های متن و سطوح که تم تیره را مشخص می‌کنند، وقت آن رسیده است که با به‌روزرسانی ویژگی‌های سفارشی رنگ در داخل یک کوئری رسانه‌ای prefers-color-scheme با ترجیح تم روشن سازگار شویم.

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

برند

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

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

متن

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

مشابه حالتی که تم تیره رنگ متن آبی بسیار روشن داشت، در تم روشن رنگ متن آبی بسیار تیره است. دیدن مقادیر ۱۰٪ و ۳۰٪ به عنوان مقادیر روشنایی برای رنگ HSL باید به شما نشان دهد که این رنگ‌ها تیره هستند.

سطح

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

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

استفاده از سیستم رنگ

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

• برای بخش‌های کد زیر، انتخابگر منطبق را پیدا کنید و CSS رنگ را به بلوک کد موجود اضافه کنید.

<بدنه>

body {
  background: var(--surface1);
  color: var(--text1);
}

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

<مجموعه فیلد>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

این عنصر کارت‌مانند طراحی شماست. حاشیه ۱ پیکسلی و فاصله ۱ پیکسلی همرنگ هستند و سطح پشت هر .fieldset-item را نشان می‌دهند. این هماهنگی بصری زیبایی ایجاد می‌کند و نگهداری آن آسان است.

.fieldset-item

.fieldset-item {
  background: var(--surface3);
}

هر ورودی فرم روی سطح خودش قرار دارد. امیدوارم ببینید که چگونه این‌ها در کنار هم قرار می‌گیرند و چگونه انواع روشنایی‌ها با هم لایه لایه می‌شوند.

.fieldset-item > تصویر

.fieldset-item > picture {
  background: var(--surface4);
}

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

.fieldset-item svg

.fieldset-item svg {
  fill: var(--text2);
}

آیکون‌های موجود در فرم طوری تنظیم شده‌اند که از متن جایگزین --text2 استفاده کنند. طرح‌هایی که در آن‌ها آیکون‌های پر شده کمی روشن‌تر از متن هستند، از سنگین به نظر رسیدن آن‌ها جلوگیری می‌کنند.

‎.fieldset-item:focus-within svg‎‏

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

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

<کوچک>

small {
  color: var(--text2);
}

متن کوچکی است. در مقایسه با سرتیترها و پاراگراف‌ها (محتوای اصلی) باید کمی ملایم‌تر باشد.

کنترل‌های فرم تاریک

:root {
  color-scheme: dark light;
}

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

۶. انیمیشن تطبیقی

شاخه گیت: animations

در پایان این بخش، صفحه تنظیمات:

• با تنظیمات حرکتی کاربر سازگار شوید
• پاسخ به تعامل کاربر

کاهش حرکت در مقابل عدم حرکت

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

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

سبک‌های تعامل

<مجموعه فیلد>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

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

.fieldset-item

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

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

.fieldset-item > تصویر

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

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

۷. تبریک

شاخه گیت: complete

تبریک می‌گویم، شما با موفقیت یک رابط کاربری تطبیق‌پذیر ساختید!

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