یادداشت / موشن و سرعت
موشن باید تجربه را توضیح دهد، نه اینکه آن را گروگان بگیرد.
سایت سینمایی می‌تواند مفید بماند؛ اگر محتوا قبل از انیمیشن وجود داشته باشد، موبایل رفتار حساب‌شده خودش را بگیرد و هر افکت دلیل روشنی برای مصرف منابع داشته باشد.
منتشرشده در ۳ شهریور ۱۴۰۵ · Real Company
۰۱اول محتوا
صفحه باید قبل از اجرای تایم‌لاین هم قابل فهم باشد.
تیتر، پاراگراف، لینک و ساختار صفحه باید به‌صورت HTML واقعی وجود داشته باشند. انیمیشن می‌تواند آن‌ها را ظاهر کند، به هم وصل کند و ترتیب بدهد؛ اما نباید تنها راه دسترسی کاربر یا موتور جست‌وجو به محتوا باشد.
این جدایی حالت خرابی تمیزی هم می‌سازد. اگر کتابخانه دیر لود شود، کاربر حرکت کمتر را انتخاب کرده باشد یا دستگاه ضعیف باشد، صفحه هنوز شرکت را توضیح می‌دهد و قدم بعدی را نشان می‌دهد.
- تیتر و بخش‌بندی معنایی
- لینک واقعی با href
- محتوای خوانا بدون انیمیشن
- متادیتای canonical در HTML اولیه
۰۲موبایل محدودیت دیگری دارد
رقص دسکتاپ را داخل یک مستطیل کوچک فشار ندهید.
گوشی ارتفاع صفحه، روش لمس، فشار حافظه، طول اسکرول و مقدار محتوای قابل مشاهده را عوض می‌کند. موشن باید مکث کوتاه‌تر، انتقال ساده‌تر، لایه هم‌زمان کمتر و در جای لازم جریان عادی صفحه داشته باشد.
ایده بصری می‌تواند ثابت بماند، اما زمان‌بندی و هندسه تغییر کند. وفاداری یعنی حفظ منظور؛ نه حفظ تمام مختصات دسکتاپ.
- سکانس کوتاه‌تر و اسکرول امن‌تر
- کنترل مناسب لمس
- چیدمان مقاوم در برابر نوار مرورگر
- آزمایش جداگانه راست‌به‌چپ و حالت افقی
۰۳منابع را حساب‌شده خرج کنید
هر افکت سنگین باید جای خودش را توجیه کند.
تصویر بزرگ، قاب دستگاه، بخش پین‌شده، blur، ویدئو و transformهای چندلایه همگی از منابع یک دستگاه استفاده می‌کنند. لحظه‌هایی را انتخاب کنید که داستان را جلو می‌برند و باقی بخش‌ها را سبک‌تر نگه دارید.
از تصویر واکنش‌گرا، اندازه مشخص، lazy loading پایین صفحه، حرکت مبتنی بر transform و پاک‌سازی درست بعد از پایان سکانس استفاده کنید. نسخه ساخته‌شده را اندازه بگیرید؛ نه فقط روان‌ترین لپ‌تاپ تیم را.
۰۴کنترل کاربر
حرکت کمتر و ورود مستقیم هم بخشی از طراحی‌اند.
ممکن است کاربر حرکت کمتر بخواهد، مستقیم وارد صفحه داخلی شود، با کیبورد حرکت کند یا از تاریخچه مرورگر به یک بخش برگردد. سایت نباید محتوا را پشت یک اجرای نمایشی زندانی کند.
موشن خوب می‌داند کجا کنار برود. محصول اصلی همان رابط است؛ انیمیشن فقط یکی از راه‌های توضیح آن است.
- رعایت prefers-reduced-motion
- ترتیب منطقی فوکوس
- پرهیز از گیر اسکرول
- چیدمان پایدار بعد از تغییر اندازه
- آزمایش لینک مستقیم و بارگذاری دوباره
FAQ
پرسش‌ها، با جواب روشن.
انیمیشن به سئو آسیب می‌زند؟
خود انیمیشن مشکل نیست. خطر زمانی شروع می‌شود که محتوا یا لینک مهم در HTML قابل خزش نباشد، رندر قابل اعتماد نباشد یا سرعت و استفاده‌پذیری افت کند.
انیمیشن موبایل باید دقیقاً مثل دسکتاپ باشد؟
هدف ارتباطی باید یکی بماند، اما زمان‌بندی، هندسه، پین‌کردن و پیچیدگی بصری معمولاً به نسخه مخصوص موبایل نیاز دارد.
اگر موشن خاموش باشد چه چیزی باید بماند؟
سلسله‌مراتب کامل محتوا، منو، لینک، دکمه‌های اصلی و چیدمان پایداری که هنوز صفحه را توضیح می‌دهد.
شروع پروژه
سایتی می‌خواهید که هم شخصیت داشته باشد و هم کنترل؟
می‌توانیم ایده بصری را بلندپروازانه نگه داریم و هم‌زمان از محتوا، موبایل و واقعیت کار محافظت کنیم.
معمولاً همان روز جواب می‌دهد.
