حرکت

وضعیت: در حال بازبینی

حرکت در هارمونیک مثل خود کار مشاوره است: از یک نقطهٔ درست شروع می‌شود، مسیر روشنی دارد و به نتیجه می‌رسد. هر حرکت کاری انجام می‌دهد؛ توجه را می‌برد، رابطه‌ای را نشان می‌دهد یا تغییری را توضیح می‌دهد. حرکتی که فقط تزیین است، حذف می‌شود.

اصول

هدفمند: هر حرکت به یک پرسش جواب می‌دهد: این عنصر از کجا آمد، به کجا رفت، چه تغییر کرد؟
پیوسته: هیچ چیز ناگهان ظاهر یا ناپدید نمی‌شود؛ هر شکل از شکل قبلی می‌آید. حرکت لوگو همین را نشان می‌دهد: نقطه خط می‌شود و خط، شکل.
آرام و دقیق: شتاب نرم، بدون جهش و لرزش. در رابط کاربری، حرکت کوتاه است و دیده نمی‌شود مگر وقتی لازم است.
یک لحظهٔ بیانی: در هر صفحه، اسلاید یا ویدیو فقط یک حرکت بزرگ؛ بقیه ساکت‌اند.
ضرباهنگ برند: حرکت‌های برند (لوگو، موج، صدا) روی ۱۰۵ ضرب در دقیقه ساخته می‌شوند؛ هر ضرب motion-duration-beat (۵۷۱ میلی‌ثانیه) است. ویدیوها و تدوین‌ها هم برش‌هایشان را روی همین ضرب می‌گذارند.

دو حالت حرکت

	کاربردی (productive)	بیانی (expressive)
کجا	رابط کاربری: دکمه، منو، مودال، زبانه، اعلان	برند: لوگو، موج، صفحهٔ معرفی، ویدیو، ارایه، رویداد
مدت	`fast-01` تا `slow-01` (۷۰ تا ۴۰۰ میلی‌ثانیه)	`slow-02` و ضرب (۷۰۰ میلی‌ثانیه به بالا)
منحنی	`standard`، `entrance`، `exit`	`expressive`، `smooth`
هدف	کار کاربر سریع‌تر و روشن‌تر شود	پیام برند دیده و به خاطر سپرده شود

مقدارهای حالت کاربردی از زبان طراحی IBM (Carbon) آمده‌اند که پایهٔ رنگ و نوشتار هارمونیک هم هست.

توکن‌ها

مدت

نقطه‌ها با دو برابر مدت هر توکن رفت و برگشت می‌کنند تا تفاوت‌ها دیده شود.

توکن	مقدار	کاربرد
`--hq-motion-duration-fast-01`	70ms	بازخورد فوری: تغییر رنگ دکمه، تیک چک‌باکس.
`--hq-motion-duration-fast-02`	110ms	حرکت‌های خیلی کوچک: نمایش راهنمای ابزار، تغییر حالت آیکن.
`--hq-motion-duration-moderate-01`	150ms	باز و بسته شدن منوی کوچک، نمایش اعلان.
`--hq-motion-duration-moderate-02`	240ms	پیش‌فرض رابط کاربری: باز شدن آکاردئون، جابه‌جایی زبانه، ورود کارت.
`--hq-motion-duration-slow-01`	400ms	حرکت‌های بزرگ: باز شدن مودال و پنل کناری.
`--hq-motion-duration-slow-02`	700ms	حرکت‌های بیانی: ورود بخش در صفحهٔ معرفی، جابه‌جایی Q در حرکت لوگو.
`--hq-motion-duration-beat`	571ms	یک ضرب در ۱۰۵ ضرب در دقیقه؛ واحد زمان حرکت لوگو، موج و صدای برند.

منحنی شتاب

توکن	مقدار	کاربرد
`--hq-motion-easing-standard`	cubic-bezier(0.2, 0, 0.38, 0.9)	جابه‌جایی و تغییر اندازهٔ عنصری که روی صفحه می‌ماند.
`--hq-motion-easing-entrance`	cubic-bezier(0, 0, 0.38, 0.9)	ورود عنصر به صفحه؛ سریع شروع می‌شود و آرام می‌ایستد.
`--hq-motion-easing-exit`	cubic-bezier(0.2, 0, 1, 0.9)	خروج عنصر از صفحه؛ آرام شروع می‌شود و سریع می‌رود.
`--hq-motion-easing-expressive`	cubic-bezier(0.4, 0.14, 0.3, 1)	حرکت‌های بیانی و برند: جابه‌جایی Q، آشکار شدن نام، ورود بخش‌های بزرگ.
`--hq-motion-easing-smooth`	cubic-bezier(0.65, 0, 0.35, 1)	تبدیل شکل در حرکت لوگو و موج؛ آرام در دو سر.
`--hq-motion-easing-overshoot`	cubic-bezier(0.34, 1.45, 0.64, 1)	فقط برای ظاهر شدن نقطهٔ آغاز در حرکت لوگو؛ در رابط کاربری به کار نمی‌رود.

ورود (entrance) برای عنصری که می‌آید و خروج (exit) برای عنصری که می‌رود؛ خروج همیشه کوتاه‌تر از ورود است.
استاندارد (standard) برای عنصری که روی صفحه می‌ماند و فقط جا یا اندازه‌اش عوض می‌شود.
overshoot فقط مال نقطهٔ آغاز در حرکت لوگوست و در رابط کاربری به کار نمی‌رود.

مدت بر اساس اندازه

حرکت	مدت	منحنی
تغییر رنگ، حالت hover و focus	`fast-01`	`standard`
راهنمای ابزار، تیک، تغییر آیکن	`fast-02`	`standard`
منوی بازشو، اعلان	`moderate-01`	ورود `entrance`، خروج `exit`
آکاردئون، زبانه، ورود کارت	`moderate-02`	`standard` یا `entrance`
مودال، پنل کناری	`slow-01`	ورود `entrance`، خروج `exit` با `moderate-02`
ورود بخش‌های صفحهٔ معرفی	`slow-02`	`expressive`

هرچه عنصر بزرگ‌تر است یا راه بیشتری می‌رود، مدت بیشتر؛ هیچ حرکت رابط کاربری از ۴۰۰ میلی‌ثانیه بیشتر نیست.

جهت در چیدمان راست‌به‌چپ

پیش رفتن یعنی حرکت به سمت چپ: مرحلهٔ بعد، اسلاید بعد و صفحهٔ بعد از چپ وارد می‌شوند و قبلی به راست می‌رود.
پنل کناری از لبهٔ پایان (inline-end، سمت چپ) باز می‌شود؛ منوی اصلی از لبهٔ آغاز (سمت راست).
نوار پیشرفت از راست به چپ پر می‌شود.
زمان در نمودار و گانت از چپ به راست است، مثل قواعد نمودار.
لوگوی لاتین از چپ به راست خوانده می‌شود؛ در حرکت لوگو، Harmoni از پشت Q به سمت چپ بیرون می‌آید.
در CSS از ویژگی‌های منطقی استفاده کنید (inset-inline-start، translate با علامت وابسته به dir) تا جهت خودکار درست شود.

کاهش حرکت

کاربرانی که در سیستم‌عامل «کاهش حرکت» را روشن کرده‌اند (prefers-reduced-motion: reduce) هیچ حرکت جابه‌جایی، بزرگ‌شدن یا چرخشی نمی‌بینند:

همهٔ حرکت‌ها به یک محو شدن ساده با fast-02 تبدیل می‌شوند، یا بی‌حرکت انجام می‌شوند.
حرکت لوگو به یک ظاهر شدن ۲۰۰ میلی‌ثانیه‌ای از لوگوی کامل تبدیل می‌شود.
موج ساکن می‌ماند.
هیچ اطلاعاتی فقط با حرکت منتقل نمی‌شود؛ وضعیت همیشه در متن یا آیکن هم هست.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

حرکت لوگو: نقطه، خط، Q

لوگو از یک نقطه شروع می‌شود؛ نقطه خط دور Q می‌شود، خط ضخیم می‌شود و Q را پر می‌کند، و بعد نام کامل از پشت Q آشکار می‌شود. همان شعار برند در حرکت: «ایستاده بر آغاز.» نمونهٔ زندهٔ بالای صفحه را می‌توانید روی زمینهٔ روشن، آهسته و با صدا ببینید.

ضرب	زمان	مرحله	منحنی
۰	۰	نقطهٔ فیروزه‌ای در مرکز قاب با یک جهش کوچک روشن می‌شود	`overshoot`
۱ تا ۳	۰٫۵۷ تا ۱٫۷۱ ثانیه	نقطه نرم به خط دور Q تبدیل می‌شود؛ حفرهٔ میانی از دل خط باز می‌شود	`smooth`
۳	۱٫۷۱ تا ۲٫۴ ثانیه	خط از همهٔ لبه‌ها به درون ضخیم می‌شود تا Q پر شود	`smooth`
۴ تا ۶	۲٫۲۹ تا ۳٫۴۳ ثانیه	Q کوچک می‌شود و به جایش می‌رود؛ Harmoni از پشت آن به چپ بیرون می‌لغزد	`expressive`

مدت: ۶ ضرب، ۳٫۴ ثانیه؛ در ویدیو یک ثانیه هم روی لوگوی کامل می‌ماند.
رنگ: همان نسخه‌های لوگو؛ روی سرمه‌ای نسخهٔ معکوس و روی سفید نسخهٔ اصلی. Q در هر دو فیروزه‌ای (Cyan 40).
حالت پایانی همیشه خود فایل لوگوست؛ حرکت هیچ‌وقت روی شکل نهایی اثر نمی‌گذارد.
اندازه: لوگو در پایان حدود ۴۴٪ عرض قاب ویدیو و ۶۰٪ عرض صفحهٔ آغاز اپ.

کجا به کار می‌رود

شروع و پایان ویدیوهای برند، معرفی و آموزشی
صفحهٔ آغاز اپ و محصولات
اسلاید اول و آخر ارایه‌های رسمی، به صورت ویدیو روی اسلاید
نمایشگرهای رویداد، بین بخش‌ها

کجا به کار نمی‌رود

هر بار باز شدن صفحه‌های سایت؛ لوگوی سربرگ سایت ساکن است.
کنار حرکت دیگری در همان قاب، از جمله موج.
کوچک‌تر از ۲۴۰ پیکسل عرض؛ در اندازهٔ کوچک فقط لوگوی ساکن.

انجام بدهحرکت را کامل و با همان مدت پخش کنید و بگذارید لوگوی کامل دست‌کم یک ثانیه دیده شود.

انجام ندهحرکت را تند یا کند نکنید، مرحله‌ای را حذف نکنید، رنگ نقطه یا Q را عوض نکنید و جلوهٔ دیگری (نور، سایه، لرزش) به آن اضافه نکنید.

صدای برند

همراه حرکت لوگو یک امضای صوتی کوتاه برای ارکستر کوچک است، روی همان ۱۰۵ ضرب در دقیقه و در گام ر ماژور. ضربه‌های اصلی صدا دقیقاً روی مرحله‌های حرکت می‌نشیند:

ضرب	حرکت	صدا
۰	نقطه	سلستا
۱ تا ۳	تبدیل به خط	زهی‌ها که آرام اوج می‌گیرند
۳	پر شدن Q	ضربهٔ تیمپانی و آکورد کامل
۴٫۵ تا ۶	آشکار شدن نام	آرپژیوی چنگ رو به بالا
۶	لوگوی کامل	یک نُت سلستا که آرام محو می‌شود

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

حرکت موج

رشته‌های موج برند یکی‌یکی از چپ به راست کشیده می‌شوند و بعد موج آرام و بی‌پایان نفس می‌کشد: هر رشته با کمی تاخیر نسبت به کناری‌اش بالا و پایین می‌رود و کل موج آهسته جلو و عقب می‌لغزد.

ورود: ۲٫۴ ثانیه؛ ۲۳ رشته با فاصلهٔ ۴۰ میلی‌ثانیه، منحنی smooth.
حلقه: ۱۲ ثانیه، بی‌درز؛ دامنهٔ حرکت کم است تا متن روی موج خوانا بماند.
رنگ: همان نسخه‌های برندبوک؛ Blue 80 روی سرمه‌ای و Cyan 20 روی سفید.
کاربرد: پس‌زمینهٔ ویدیو و تیتراژ، صفحهٔ آغاز، نمایشگر رویداد، جلد و دیوایدرهای متحرک اسلاید.
قاعده: موج همیشه پس‌زمینه است. موج و Q هرگز با هم در یک قاب حرکت نمی‌کنند؛ لوگو روی موج ساکن می‌ماند، یا حرکت لوگو روی زمینهٔ ساده پخش می‌شود.
موج حلقه‌ای وقتی از دید خارج می‌شود متوقف می‌شود و کاربر می‌تواند آن را نگه دارد.

حرکت در اسلاید و ویدیو

انتقال بین اسلایدها: فقط محو شدن (Dissolve یا Fade) با حدود ۰٫۴ ثانیه، یا جابه‌جایی جادویی (Magic Move، Morph) برای عنصری که در دو اسلاید هست.
ورود اجزا: محو شدن یا بالا آمدن کوتاه، به ترتیب خواندن؛ حداکثر یک ورود برای هر اسلاید.
ممنوع: پرواز، چرخش، جهش، بزرگ‌شدن از صفر، تایپ‌نویسی حرف‌به‌حرف و هر انتقال سه‌بعدی.
جلد و دیوایدر: ویدیوی موج حلقه‌ای به جای تصویر زمینه؛ ویدیوی حرکت لوگو روی اسلاید اول یا آخر.
تدوین ویدیو: برش‌ها روی ضرب ۱۰۵؛ متن روی تصویر با محو شدن و expressive.

فایل‌ها

فایل	توضیح
حرکت لوگو، زمینهٔ تیره (MP4)	۱۹۲۰×۱۰۸۰، ۶۰ فریم در ثانیه، ۴٫۴ ثانیه، با صدای برند
حرکت لوگو، زمینهٔ روشن (MP4)	۱۹۲۰×۱۰۸۰، ۶۰ فریم در ثانیه، ۴٫۴ ثانیه، با صدای برند
حلقهٔ موج، زمینهٔ تیره (MP4)	۱۹۲۰×۱۰۸۰، ۳۰ فریم در ثانیه، ۱۲ ثانیه، بی‌درز و بی‌صدا
حلقهٔ موج، زمینهٔ روشن (MP4)	۱۹۲۰×۱۰۸۰، ۳۰ فریم در ثانیه، ۱۲ ثانیه، بی‌درز و بی‌صدا
صدای برند (WAV)	۴۸ کیلوهرتز، استریو، ۶٫۵ ثانیه

این فایل‌ها از همان موتور حرکتی ساخته می‌شوند که نمونه‌های این صفحه را پخش می‌کند (npm run motion)، پس همیشه با این صفحه یکی‌اند.

.hq-panel {
  transition:
    transform var(--hq-motion-duration-slow-01) var(--hq-motion-easing-entrance),
    opacity var(--hq-motion-duration-moderate-02) var(--hq-motion-easing-standard);
}
.hq-panel[hidden] {
  transition-duration: var(--hq-motion-duration-moderate-02);
  transition-timing-function: var(--hq-motion-easing-exit);
}

const css = getComputedStyle(document.documentElement);
const token = (name) => css.getPropertyValue(`--hq-motion-${name}`).trim();
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;

card.animate(
  reduce ? [{ opacity: 0 }, { opacity: 1 }]
         : [{ opacity: 0, transform: 'translateY(16px)' }, { opacity: 1, transform: 'none' }],
  { duration: parseFloat(token('duration-moderate-02')), easing: token('easing-entrance'), fill: 'both' },
);