طراحی خود را با دستگاه تاشو سازگار کنید

معرفی

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

در طول سال ها، فناوری به پیشرفت خود ادامه داده است و رویکرد طراحی Desktop First به سرعت با رویکرد Mobile First جایگزین شده است.

در سپتامبر 2020 سامسونگ اولین دستگاه تاشو را عرضه کرد: گلکسی فولد. این انتشار یک نوع کاملاً جدید از صفحه نمایش یک بار دیگر رویکرد طراحی را که تا آن زمان داشتیم بر هم زد. رویکرد Mobile First دیگر کافی نیست، توسعه دهندگان و طراحان باید نوع جدیدی از صفحه نمایش را در نظر بگیرند.

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

بنابراین چگونه برنامه خود را به این نوع صفحه نمایش پاسخگو کنیم؟ چگونه می توان طرح بندی های مختلف صفحه نمایش تاشو را در نظر گرفت؟

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

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

وضعیت دستگاه تاشو

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

چند مثال برای درک بهتر:

• زاویه 0 مربوط به یک دستگاه بسته است
• زاویه 140 مربوط به یک لپ تاپ یا دستگاه کتابی شکل است
• زاویه 185 مربوط به یک دستگاه کاملاً باز است

بنابراین، جاوا اسکریپت و APIهای css باید تمام این تغییرات و همچنین سناریوهای آینده را نیز در نظر بگیرند.
نباید از این نکته غافل شد که فردا یک دستگاه می تواند در محور افقی و در عین حال در محور عمودی تا شود.

بخش های Viewport

به طور پیش فرض، اگر امکان داشتن دستگاهی با دو یا چند صفحه نمایش را در نظر نگیریم، ممکن است طراحی اپلیکیشن ما “شکسته” شود.
اما شکستگی یعنی چه؟ خوب، می تواند مانند سایتی که در حال خواندن این مقاله در آن هستید، خراب شود.

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

برای حل این مشکل و گفتن به مرورگر برای قرار دادن عناصر، یک پرسش رسانه جدید در دسترس است: viewport-segments
این درخواست رسانه به دو صورت رد می شود:

• افقی-نمای-بخش ها
• عمودی-نمای-بخش

چرا دو نوع؟ خوب، صرفاً به این دلیل که دستگاه شما می تواند به دو روش مختلف جهت دهی شود:

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

@media(horizontal-viewports-segments /**number of screen**/){}

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

@media(vertical-viewports-segments /**number of screen**/){}

یک مثال در تصویر گویاتر خواهد بود.

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

@media(horizontal-viewport-segments 2) {}

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

@media(vertical-viewport-segments 2) {}

در خود پرس و جو رسانه ای بخش های دید به طراحی اپلیکیشن کمکی نمی کند. این رسانه برای شناسایی تعداد صفحاتی که برنامه در آنها نمایش داده می شود استفاده می شود.

برای اینکه بتوانیم عناصر طراحی مختلف برنامه خود را در اطراف “فولد” به درستی قرار دهیم، شش متغیر محیطی جدید ایجاد شده است.

متغیر محیط ها

متغیرهای محیطی در CSS به شما این امکان را می‌دهند که نفوذهای ناخوشایند دستگاه را در سبک‌های خود فاکتور بگیرید.

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

در مورد دستگاه های تاشو، 6 متغیر محیطی جدید ظاهر می شود:

• viewport-segment-width
• viewport-segment-height
• viewport-segment-top
• viewport-segment-right
• viewport-segment-bottom
• viewport-segment-left

این کلمات کلیدی باید در تابع env() استفاده شوند. متغیرهای محیط css مانند ویژگی های سفارشی رفتار می کنند، به این معنی که در صورتی که متغیر محیطی وجود نداشته باشد، می توان یک مقدار اضافی به تابع env به عنوان مقدار برگشتی ارسال کرد.

متغیرهای محیطی عمدتاً بر اساس viewport هستند. بنابراین لازم است یک متا تگ در صفحه اصلی HTML اضافه کنید.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

برای استفاده از متغیر محیطی دستگاه تاشو، نحو به شرح زیر است:

env(viewport-segment-width x y, /** fallback value **/)

x شاخص صفحه در محور افقی و y شاخص صفحه در محور عمودی است.

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

width: env(viewport-segment-width 1 0)

نمودار همیشه بیشتر از یک سخنرانی طولانی نشان می دهد

با این متغیرهای محیطی، بسیاری از امکانات طراحی در دسترس ما است.

برای مثال می‌توانیم یک تصویر ثابت و روی صفحه‌ای دیگر یک متن طولانی قابل پیمایش قرار دهیم.

بیا کدش رو بزاریم 🙂

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
  </head>

  <body>
    <main>
      <aside>
        <img alt="foldable device image" src="./foldable_screen.jpeg" />
      </aside>
      <article>
        Long scrollable text ...
      </article>
  </body>
</html>

html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  height: 100%;
  width: 100%;
}

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  aside img  {
    position: absolute;
    height: 100%;
    width: env(viewport-segment-width 0 0);
    top: env(viewport-segment-top 0 0);
  }
  main article {
    position: absolute;
    box-sizing: border-box;
    padding-left: 1rem;
    height: 100%;
    overflow: auto;
    left: env(viewport-segment-left 1 0);
  }
}

دو خط

• عرض: env(viewport-segment-width 0 0)
• top: env(viewport-segment-top 0 0)
  به شما امکان می دهد موقعیت تصویر و اندازه آن را مشخص کنید. در مورد ما، من می خواهم تصویر را در کل صفحه اول قرار دهم.

خط چپ: env(viewport-segment-left 1 0) اجازه دهید متن در کل صفحه دوم قرار گیرد. برای زیبایی شناسی بصری، padding-left ویژگی اجازه می دهد تا متن را از تاشو جابجا کنید.

نتیجه به شرح زیر است:

واکنش به تغییر اندازه یا رویدادهای تغییر وضعیت بدن

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

برای این جاواسیپت به ما این امکان را می دهد که به راحتی تعداد صفحه نمایش دستگاه را بازیابی کنیم

window.addEventListener(() => {
 console.log(window.visualViewport.segments);
/**
If no segments this seems that the foldable device is closed.
If one or more segements window.visualViewport.segments is an array
**/
})

می خواهید با این API های شگفت انگیز بازی کنید

ابتدا در فلگ های کروم فعال کنید

• جاوا اسکریپت تجربی
• ویژگی های پلتفرم وب آزمایشی
• Device Posture API

در کنسول chrome devtools به قسمت تنظیمات بروید سپس به پنل آزمایشات بروید و گزینه را فعال کنید شبیه سازی: پشتیبانی از حالت صفحه نمایش دوگانه

شما آماده حرکت هستید، اکنون می توانید هنگام تقلید از یک دستگاه تلفن همراه، دستگاه suface duo یا galexy fold را انتخاب کنید 😉

نتیجه

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

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

منبع