الگوهای رابط کاربری

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

این یعنی ممکن است برخی از عناصر رابط کاربری بسته به زمینه‌ای که در آن مشاهده می‌شوند، ظاهری کاملاً متفاوت داشته باشند. ممکن است لازم باشد CSSهای بسیار متفاوتی را روی یک کد HTML یکسان اعمال کنید تا از اندازه‌های مختلف صفحه نمایش نهایت استفاده را ببرید. این می‌تواند یک چالش طراحی کاملاً جدی باشد!

در اینجا به برخی از چالش‌های رایجی که ممکن است با آنها مواجه شوید، اشاره می‌کنیم.

ناوبری

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

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

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

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

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

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

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

مطمئن شوید که دکمه‌ای که نمایش ناوبری را تغییر می‌دهد، برچسب‌گذاری شده باشد. برای فهمیدن به یک آیکون تکیه نکنید.

یک آیکون بدون برچسب، ناوبری «گوشت مرموز» است - کاربران تا زمانی که آن را گاز نگیرند، نمی‌دانند چه چیزی در آن وجود دارد. یک برچسب متنی ارائه دهید تا کاربران بدانند دکمه چه چیزی را نشان می‌دهد.

چرخ و فلک‌ها

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

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

برای صفحات نمایش باریک، آیتم‌ها را با استفاده از flexbox در یک ردیف نمایش دهید. ردیف آیتم‌ها از لبه صفحه نمایش فراتر خواهد رفت. برای امکان کشیدن افقی overflow-x: auto استفاده کنید.

@media (max-width: 50em) {
  .cards {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scroll-behavior: smooth;
  }
  .cards .card {
    flex-shrink: 0;
    flex-basis: 15em;
    scroll-snap-align: start;
  }
}

ویژگی‌های scroll-snap تضمین می‌کنند که آیتم‌ها به شکلی روان کشیده شوند. به لطف scroll-snap-type: inline mandatory ، آیتم‌ها در جای خود چفت می‌شوند.

وقتی صفحه نمایش به اندازه کافی بزرگ شد - در این مورد، عرض آن از 50em بیشتر شد - به حالت شبکه‌ای بروید و موارد را در ردیف‌ها و ستون‌ها نمایش دهید، بدون اینکه چیزی پنهان شود.

@media (min-width: 50em) {
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  }
}

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

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

باز هم، ویژگی‌های scroll-snap تضمین می‌کنند که تعامل روان باشد. همچنین، توجه داشته باشید که تصاویر موجود در carousel دارای loading="lazy" هستند. در این حالت، تصاویر در پایین صفحه نیستند، بلکه فراتر از لبه هستند، اما همان اصل اعمال می‌شود: اگر کاربر هرگز تا آن مورد حرکت نکند، تصویر دانلود نمی‌شود و در پهنای باند صرفه‌جویی می‌شود.

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

جداول داده

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

شما می‌توانید الگوی سرریز را روی جداول اعمال کنید. در این مثال، جدول در یک div با کلاس table-container قرار گرفته است.

.table-container {
  max-inline-size: 100%;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
}
.table-container th,
.table-container td {
  scroll-snap-align: start;
  padding: var(--metric-box-spacing);
}

دستورالعمل‌ها

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

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

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

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

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