ساخت یک راهنمای تعاملی اپلیکیشن
تیمهای پشتیبانی اغلب با اپلیکیشنهایی که هرگز نصب نکردهاند، مشکل دارند.
یک فایل PDF حاوی اسکرینشاتها راهکار استاندارد است. اما اکثر مردم PDF نمیخوانند. من میخواستم چیز بهتری بسازم. راهنمایی میخواستم که حس یک اپلیکیشن واقعی را منتقل کند. صفحه اصلی را میبینید، روی یک دکمه کلیک میکنید و صفحه بعدی ظاهر میشود.
من یک راهنمای تعاملی با استفاده از اسکرینشاتهای واقعی و hotspotهای قابل کلیک ساختم.
نحوه عملکرد
من از Firebase Storage برای تصاویر و از vanilla JavaScript برای منطق برنامه استفاده کردم. بدون هیچ کتابخانه خارجی.
- هر صفحه یک تصویر کامل است.
- من مستطیلهای نامرئیای به نام hotspot روی تصویر قرار میدهم.
- این hotspotها به جای پیکسل از درصد استفاده میکنند. این کار باعث میشود هنگام تغییر اندازه پنجره، تراز آنها حفظ شود.
- یک ماشین حالت (state machine) ساده، ناوبری را مدیریت میکند. هر صفحه دارای یک ID، یک تصویر و لیستی از hotspotها است.
ویرایشگر
اندازهگیری دستی مختصات زمانبر است. من یک ویرایشگر HTML مستقل ساختم تا به این فرآیند سرعت ببخشم.
- یک اسکرینشات آپلود کنید.
- با ماوس خود یک hotspot رسم کنید.
- hotspot را به یک صفحه هدف متصل کنید.
- کد را مستقیماً خروجی بگیرید.
انتخابهای طراحی
همه صفحات ناوبری کامل ندارند. برای جلوگیری از سردرگمی، یک درخشش آبی ضرباندار به نواحی قابل کلیک اضافه کردم. این کار دقیقاً به کاربران نشان میدهد که کجا میتوانند ضربه بزنند.
درسهای فنی کلیدی
- Firebase Storage: آدرسهای URL را به صورت دستی نسازید. از متد
getDownloadURLدر SDK استفاده کنید. این متد شامل توکن احراز هویتی است که برای دور زدن قوانین امنیتی لازم است. - CSS Flexbox: اگر از
flex: 1در یک چیدمان ستونی (column layout) استفاده میکنید، والد باید ارتفاع مشخصی داشته باشد. برای جلوگیری از سرریز شدن (overflow)، مقدارmin-height: 0را برای فرزند تنظیم کنید. - عملکرد (Performance): فراخوانی Firebase در هر کلیک باعث ایجاد تأخیر میشود. من یک حافظه پنهان در حافظه (in-memory cache) پیادهسازی کردم و تمام تصاویر را هنگام باز شدن مودال (modal) پیشبارگذاری کردم. این کار باعث میشود ناوبری آنی انجام شود.
- مقیاسبندی (Scaling): از ویژگی
transform: scale()در CSS استفاده کنید. این کار تضمین میکند که تصویر و hotspotها بدون توجه به اندازه صفحه، کاملاً با هم تراز باقی بمانند.
نتیجه
- ۲۰ صفحه که مانند یک گوشی واقعی ناوبری میشوند.
- ۵۲ hotspot با نشانههای بصری.
- بارگذاری آنی از طریق پیشبارگذاری و کشینگ.
- طراحی واکنشگرا (Responsive) که با هر اندازه مودال سازگار است.