search
حلقه سفید

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

اشتراک گذاری در :
انتشار : 1401/03/12
آینده طراحی وب سایت واکنشگرا

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

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

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

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

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

تشخیص موقعیت مکانی طراحی وب سایت

تشخیص موقعیت مکانی طراحی وب سایت AKA Geolocation) ) یکی از رایج ترین مکانیسم های تشخیص مبتنی بر مرورگر است که امروزه در طراحی وب سایت می بینیم. هنگامی که به خرید مبلمان و جستجو برای یافتن نزدیک ترین فروشگاه West Elm نیاز دارید، طراحی وب سایت West Elm می خواهد به شما کمک کند و می تواند از مکان دقیق شما برای یافتن نزدیک ترین فروشگاه استفاده کند:

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

فراتر از مکان یاب فروشگاه

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

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

هنگام توسعه برنامه های کاربردی تلفن همراه، جاوا و سوئیفت بومی رابط هایی را برای شناسایی مکان طراحی وب سایت نیز ارائه می دهند. می ‌توانید استفاده از آن را در انواع مختلف برنامه ‌ها مشاهده کنید: از برنامه ‌های تناسب اندام که مسافت را در طول زمان برای محاسبه سرعت ردیابی می‌ کنند مانند MapMyFitness) )، تا فیلترهای مبتنی بر مکان در برنامه ‌های اشتراک ‌گذاری اجتماعی مانند Snapchat) )، تا نقشه‌ هایی که به شما کمک می‌ کنند. برای پیمایش به یک مکان مانند Google Maps) ) .

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

با استفاده از برنامه موقعیت جغرافیایی HTML

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

اگر می ‌خواهیم موقعیت مکانی واقعی کاربر طراحی وب سایت را بدست آوریم، باید از جاوا اسکریپت استفاده کنیم، همانطور که Adeyinka Adegbenro در مقاله مدیوم خود «چگونه مکان بازدید کننده و طراحی وب سایت خود را با استفاده از جاوا اسکریپت شناسایی کنیم» نشان می ‌دهد:

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

اگر اجازه داده شد، می ‌توانیم از طول و عرض جغرافیایی محاسبه ‌شده استفاده کنیم و با کد کار کنیم تا مکان ملموس‌ تری ایجاد کنیم (مانند این، از مقاله : (Medium

می توانید یک نسخه ی نمایشی اصلی موقعیت جغرافیایی HTML را از Johan Sundström در codepen.io امتحان کنید.

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

زمان

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

من این رابط کاربری طراحی وب سایت ساعت را از Glev Kuzenstov دوست دارم، که ساعتی را به این معنا تصور می ‌کند که نه تنها زمان کلی روز را به کاربران طراحی وب سایت ارائه می ‌کند، بلکه با زمان‌ بندی خاص آنها نیز کار می ‌کند و به آنها نمایش واضحی از زمان ارائه می‌دهد. روز آنها یک جلسه در دقیقه X دارند و رابط کاربری طراحی وب سایت بر این اساس از شب به روز تغییر می کند:

با استفاده از رشته محلی

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

متد toLocaleString رشته ‌ای را برمی ‌گرداند که نشان‌ دهنده شیء مربوط به نیازهای محلی کاربر طراحی وب سایت است. همانند بومی ‌سازی ارزها و قیمت، LocaleString اجازه می‌ دهد تا یک عدد یا مهر تاریخ را برای نشان دادن اعداد یا زمان در متدولوژی کاربر طراحی وب سایت تجزیه کند. این کد جاوا اسکریپت را از اسناد طراحی وب سایت MDN در نظر بگیرید:

سطوح نور

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

اپل iOS 11 را با قابلیتی به نام Night Mode عرضه کرد که اساساً همین کار را انجام می داد - حذف نور آبی برای جلوگیری از بی خوابی در کاربرانی که اواخر شب از دستگاه خود استفاده می کنند.

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

پس این کجا به کار می آید؟ بیشتر در خوانایی.

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

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

پرس و جوهای نور محیطی

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

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

اگر از Edge یا نسخه قبلی فایرفاکس استفاده می‌کنید، می‌ توانید یک نسخه آزمایشی از آن را بدون پرچم مشاهده کنید. در غیر این صورت، می توانید این ویژگی را در پشت پرچم در کروم فعال کنید. نسخه ی نمایشی رویدادهای نور محیطی توسط Tomomi Imura را در codepen.io ببینید.

تنظیمات ظاهر روشن و تاریک

با این حال، روش جدیدی وجود دارد که در MacOS جدید منتشر شد، که کنترل سطوح نور را به کاربر طراحی وب سایت می‌ دهد، در حالی که همچنان به توسعه ‌دهندگان طراحی وب سایت اجازه می ‌دهد تا سبک‌ ها را بر اساس این انتخاب ‌ها سفارشی کنند. مرورگر سافاری این را با درخواست ‌های رسانه CSS جفت می ‌کند تا به توسعه ‌دهندگان طراحی وب سایت کنترل بیشتری بر نحوه استایل کردن برنامه‌ های طراحی وب سایت خود در هنگام فعال بودن حالت تاریک بدهد. این استاندارد جدید در W3C Media Queries Level ثبت شده است.

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

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

جهت گیری دستگاه

Device orientation وسیله دیگری است ( جناس در نظر گرفته شده!) که می توانیم برای تقویت و بهبود تجربه کاربر طراحی وب سایت از آن استفاده کنیم. هنگام طراحی UI طراحی وب سایت ، ما می خواهیم مطمئن شویم که برنامه ما به تمام اندازه های صفحه نمایش پاسخگو است، که شامل جهت گیری های مختلف است. با قابلیت استایل دادن به چیزها بر اساس ارتفاع درگاه دید vh و عرض درگاه دیدvw در طراحی وب سایت ، می‌توانیم رابط کاربری طراحی وب سایت گسترده ‌تر و کوتاه ‌تر دستگاه‌ های چرخانده شده را در نظر بگیریم. ما همچنین می توانیم از CSS برای تشخیص جهت گیری استفاده کنیم:

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

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

برنامه دستور العمل موبایلی که برای تغییر دستور غذا تکان می دهید

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

دسترسی به جهت گیری دستگاه

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

همچنین می ‌توانید رویدادهایی را برای مشاهده تغییرات در جهت صفحه طراحی وب سایت اضافه کنید:

هنگام کار با جهت گیری به روشی دقیق تر، از زوایای چرخش آلفا، بتا و گاما دستگاه استفاده می کنیم. زاویه آلفا نشان دهنده چرخش حول محور z است. بتا محور x و گاما محور y است. به نظر می رسد این است:

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

تشخیص باتری

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

API وضعیت باتری

وضعیت باتری در حال حاضر در Chrome 38+، Chrome for Android و Firefox 31+ پشتیبانی می‌شود. این یک شنونده رویداد برای به روز رسانی وضعیت باتری بر اساس دستگاه میزبان فراهم می کند.

نتیجه

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