چرا اپل انقدر خوب دیزاین میکنه؟ (راز انیمیشنها و صداهای کوپرتینو)
نکات کلیدی و خلاصه‌ی مدیریتی (TL;DR)
- اپل انیمیشنهای بر اساس ثانیه و تایمر رو ریخت دور و فیزیک واقعی فنر (Spring Physics) رو آورد وسط.
- ۳ تا قانون طلایی اپل: واکنش فوری، قابلیت کنسل شدن وسط راه، و جهت‌گیری دوباره بدون افت سرعت.
- صدا تو دیزاین اپل الکی نیست؛ جایگزین حس فیزیکی دکمه‌ها روی شیشه لمسیه.
- با ترکیب فنرهای Motion و ساند افکتهای وایب‌کیت، می‌تونیم دقیقاً همین حس رو تو پروژههای وب پیاده کنیم.
تا حالا دقت کردی چرا وقتی تو آیفون یه برنامه رو با سوایپ می‌بندی یا یه پوشه رو باز می‌کنی انقدر کیف میده؟ چرا اصلاً حس نمی‌کنی داری به یه صفحه شیشه‌ای تخت دست می‌زنی، بلکه انگار واقعاً یه شیء واقعی با وزن و کشسانی رو با انگشتت هل دادی؟ بیا با هم ببینیم پشت این جادوی دیزاین اپل چیا می‌گذره و چطور مستندات خود اپل این راز رو برامون برملا می‌کنن.
کنفرانس تاریخی ۲۰۱۸؛ وقتی اپل تایمرها رو ریخت دور!
تا قبل از آیفون X، تقریباً تمام انیمیشنهای وب و گوشی‌ها با تایمر کار می‌کردن؛ مثلاً می‌گفتن «این پنجره تو ۳۰۰ میلی‌ثانیه باز بشه». ولی تو دنیای واقعی هیچ شاخه‌ای بر اساس ثانیه‌شمار تکون نمی‌خوره! شاخه درخت بر اساس وزنش و کشسانی چوب نوسان میکنه و آروم می‌گیره.
تو سشن تاریخی WWDC 2018 Designing Fluid Interfaces، مهندسان رابط کاربری اپل رسماً اعلام کردن که تمام انیمیشنهای iOS بر اساس معادلات فیزیک نیوتن و کشسانی فنر کار می‌کنن: یعنی سه پارامتر جرم (Mass)، اصطکاک (Damping) و سختی فنر (Stiffness). جزئیات فنی این فرمول در مستندات UISpringTimingParameters اپل ثبت شده.
نتیجه این تغییر شگفت‌انگیز بود: تمام انیمیشنهای ما بر اساس فیزیک فنر کار می‌کنن و المان‌ها به جای اینکه در یک زمان ثابت متوقف بشن، انرژی دست کاربر رو جذب می‌کنن و با وقار روی صفحه آروم می‌گیرن.
تو دنیای واقعی، حرکت‌ها تایمر ندارن؛ نتیجه تعامل نیرو و اصطکاکن. اپل دقیقاً همین قانون فیزیک نیوتن رو آورد تو صفحه نمایشگر.
تصویر ۱: مقایسه فیزیک فنر اپل با انیمیشنهای سنتی؛ منحنی سبز جهش طبیعی و تثبیت ارگانیک فنر را نشان می‌دهد.
۳ تا قانون مقدس اپل برای انیمیشنهای روون
طبق دستورالعمل رسمی راهنمای دیزاین اپل (Apple HIG Motion)، هر انیمیشن و تعاملی باید این سه تا اصل حیاتی رو پاس کنه:
۱. واکنش آنی (Responsive): تا دست زدی یا موس رو بردی روش، باید همون میلی‌ثانیه اول عکس‌العمل نشون بده. حتی ۳۰ میلی‌ثانیه تاخیر باعث میشه کاربر حس کنه سیستم کنده.
۲. وسط راه بشه جلوش رو گرفت (Interruptible): اگه داشتی یه پنجره رو می‌بستی ولی یهو پشیمون شدی، نباید صبر کنه تا انیمیشن تموم بشه! باید همون‌جا تو هوا متوقف بشه و برگرده سر جاش.
۳. پرتاب شدن با سرعت واقعی (Redirectable): اگه یه کارت رو با شتاب به سمت بالا پرت کردی، انیمیشن باید دقیقاً شتاب دستت رو بگیره و با همون سرعت بره، نه اینکه سرعتش صفر بشه.
- ۱
واکنش آنی
صفر میلی‌ثانیه تاخیر بین لمس کاربر و حرکت المان.
- ۲
مهارپذیری در حرکت
امکان تغییر تصمیم در هر فریم از انیمیشن بدون لگ یا پرش.
- ۳
حفظ شتاب پرتاب
انتقال دقیق سرعت دست یا موس به فیزیک حرکت پنجره.
شنیدن لمس روی شیشه؛ چرا صداهای اپل انقدر خفنن؟
صفحه شیشه‌ای گوشی هیچ حسی از دکمه‌های واقعی نداره. برای همین، اپل موتور ویبره هپتیک رو با صداهای فوق‌العاده ریز و نرم ترکیب کرد.
صدای تق تق گردونه انتخاب ساعت، صدای بازگشت فنری وقتی به ته لیست می‌رسی (Rubber-banding)؛ اینا صدای بلندگو نیستن، حس دنده‌های یه ساعت مکانیکی رو بازسازی می‌کنن. نکته‌شون اینه که زیر ۴۰ میلی‌ثانیه‌ان و صداشون بم و مخملیه، برای همین حتی اگه روزی صد بار بشنویشون، اصلاً خسته‌ت نمیکنن.
چطور تو وب خودمون حس اپل رو بسازیم؟
خوشبختانه الان دیگه نیاز نیست سال‌ها سوئیفت بخونید تا این حس رو بسازین. ما تو وایب‌کیت مجموعه‌ای از دارایی‌ها رو آوردیم که دقیقاً همین حس کوپرتینو رو دارن:
• دکمه‌های مگنتی (Magnetic Buttons): وقتی نشانگر موس نزدیکشون میشه، مثل آهنربا جذبش میشن و با فیزیک فنر نوسان می‌کنن.
• میکرواینترکشن‌های فیزیکی وایب‌کیت: صدها انیمیشن تعاملی آماده با کتابخانه Motion که کافیه پرامپتش رو کپی کنید.
• ساند افکتهای ارگانیک بنچو: صداهای کلیک و تایید ملایم که وب شما رو از حالت صامت و بی‌روح درمیارن.
import { motion } from "motion/react";
// تنظیمات طلایی فیزیک فنر اپل در Motion
const appleSpring = {
type: "spring",
stiffness: 400, // واکنش سریع و چابک
damping: 30, // مهار کامل لرزش اضافه
mass: 0.8, // حس سبکی و ارگانیک
};
export function AppleCard() {
return (
<motion.div
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.97 }}
transition={appleSpring}
className="rounded-[24px] bg-white p-6 shadow-sm border border-slate-100 cursor-pointer"
>
<h3 className="text-lg font-bold">کارت با فیزیک اپل</h3>
<p className="text-sm text-slate-500 mt-1">تست روونی حرکت با تغییر ناگهانی موس</p>
</motion.div>
);
}