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

فیزیک و حرکت

حرکت در پیوند بی‌درنگ راه می‌افتد، نرم می‌نشیند و نشان می‌دهد هر چیز از کجا آمده و به کجا می‌رود.

حس حرکت

حرکت پیوند زنده و امروزی است و در همان حال آرامش و ثبات می‌دهد. شیطنت و بازیگوشی ندارد، تند نیست و کند و کش‌دار هم نیست.

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

این تصویر باز شدن مدال حمایت را در پنج قدم با فاصله زمانی برابر نشان می‌دهد. قدم‌ها اول بلندند و کم‌کم کوتاه می‌شوند و هیچ‌کدام از اندازه مدال بیرون نمی‌زند.این تصویر باز شدن باتم‌شیت حمایت را در پنج قدم با فاصله زمانی برابر نشان می‌دهد. قدم‌ها اول بلندند و کم‌کم کوتاه می‌شوند و هیچ‌کدام از اندازه باتم‌شیت بیرون نمی‌زند.

منحنی و مدت‌ها

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

مدت‌های حرکت
مدتباز شدنبستنکاربرد
فیدfade۱۵۰بستن ۱۲۰تغییر رنگ و اوپاسیتی، مثل هاور، فوکوس و خطا
کوچکsmall۲۱۰بستن ۱۶۸کنترل‌ها و سرفیس‌های کوچک، مثل برگشت دکمه بعد از فشردن و آمدن نقطه نشان
متوسطmedium۳۰۰بستن ۲۴۰منو، پنل، گام‌های یک مدال، پیام خطای کادر متن و پر شدن سنجه
بزرگlarge۴۰۰بستن ۳۲۰مدال و باتم‌شیتی که بی‌دکمه باز می‌شوند، لایت‌باکس و کادر جست‌وجو
لحظهmoment۵۰۰بستن ۴۰۰دکمه یا کارتی که پنجره‌ای از دلش باز می‌شود، و لحظه‌های کمیاب مثل تشکر بعد از کمک

بستن هر حرکت یک‌پنجم کوتاه‌تر از باز شدنش است. تغییر رنگ و اوپاسیتی همیشه فید است.

سه نوع حرکت

هر چیزی که در پیوند حرکت می‌کند یکی از سه نوع «تبدیل» (Container transform)، «کاغذ» و «درجا» است. نوع هر حرکت را این تعیین می‌کند که چه چیزی باز می‌شود و از کجا.

حرکت هر کامپوننت

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

موبایل و دسکتاپ یک تصمیم دارند و فقط شکل مقصد فرق می‌کند: دکمه‌ای که در دسکتاپ مدال باز می‌کند، در موبایل باتم‌شیت باز می‌کند.

تبدیل‌ها

نمونه‌های تبدیل

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

با تو سفره‌ای رنگ می‌گیرد

با کمک شما بسته غذایی خانواده‌ها کامل‌تر می‌شود و سفره‌شان رنگ می‌گیرد.
پیشرفت کمپین۶۸٪ از هدف

با تو سفره‌ای رنگ می‌گیرد

با کمک شما بسته غذایی خانواده‌ها کامل‌تر می‌شود و سفره‌شان رنگ می‌گیرد.
پیشرفت کمپین۶۸٪ از هدف
دکمه «حمایت می‌کنم» با رنگ کهربایی خودش تا دکمه پرداخت مدال می‌رود و همان می‌شود و مدال از وسط آن باز می‌شود. برچسبش عنوان مدال می‌شود و قلب به هدر می‌رود. موقع بستن، دکمه پرداخت دوباره «حمایت می‌کنم» می‌شود. در موبایل باتم‌شیت هم همین‌طور از دل دکمه باز می‌شود. صفحه مدال

کاهش حرکت

اگر «کاهش حرکت» در دستگاهتان روشن باشد، در پیوند هیچ چیز جابه‌جا یا بزرگ نمی‌شود. مدال و باتم‌شیت همان‌جا که باید باشند در ۱۵۰ میلی‌ثانیه پیدا می‌شوند و چیزی که زده‌اید سر جایش می‌ماند. کنترل‌های کوچک بی‌درنگ به حالت تازه‌شان می‌روند و فقط رنگشان فید می‌شود. فوکوس و پیام‌های خطا هیچ‌وقت منتظر حرکت نمی‌مانند.

قواعد حرکت

دسته قاعده‌ها

۱۷ قاعده، هر کدام با نمونه درست و نادرست کنار هم؛ خط‌های کم‌رنگ مسیر هر حرکت را نشان می‌دهند.

  • هیچ چیز از مقصدش رد نمی‌شود

    مدال، منو و هر چیز دیگری مستقیم به جا و اندازه نهایی‌اش می‌رسد و همان‌جا می‌ایستد. چیزی که از مقصد رد شود و برگردد، بازیگوش به نظر می‌رسد و چشم را دو بار به یک جا می‌کشد.

    درست
    large
    نادرست
    رد می‌شود و برمی‌گردد

  • حرکت بی‌درنگ راه می‌افتد

    حرکت با فشردن شروع می‌شود و منتظر چیزی نمی‌ماند. حرکتی که آرام راه بیفتد کند به نظر می‌رسد، حتی اگر کوتاه باشد.

    درست
    medium
    نادرست
    شروع آرام

  • رنگ و اوپاسیتی فقط فید می‌شوند

    هاور، فوکوس، انتخاب و خطا رنگ را در ۱۵۰ میلی‌ثانیه عوض می‌کنند. رنگی که با بزرگ و کوچک شدن عوض شود، می‌تپد و چشم را بی‌دلیل به خودش می‌کشد.

    درست
    fade
    نادرست
    تپش

  • بستن کوتاه‌تر از باز شدن است

    کاربری که چیزی را می‌بندد، کارش با آن تمام شده است. برای همین بستن یک‌پنجم کوتاه‌تر از باز شدن است و راه را زودتر برای کار بعدی باز می‌کند.

    درست
    largelarge-close
    نادرست
    بستن کندتر از باز شدن

  • هر حرکت را می‌شود وسط راه برگرداند

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

    درست
    از همان‌جا برمی‌گردد
    نادرست
    اول تا ته می‌رود

  • هر چیز از جایی می‌آید که به آن ربط دارد

    منو از زیر دکمه‌اش باز می‌شود و باتم‌شیت از لبه پایین صفحه. چیزی که از جای بی‌ربطی پیدا شود، رابطه‌اش با کار کاربر گم می‌شود.

    درست
    زیر دکمه
    نادرست
    وسط صفحه

  • هر چیز از همان راهی که آمده برمی‌گردد

    باتم‌شیتی که از پایین آمده به پایین برمی‌گردد و منو به زیر دکمه‌اش. اگر راه رفت و برگشت یکی نباشد، معلوم نیست آن چیز کجا رفت.

    درست
    از پایینبه پایین
    نادرست
    از پایینبه کنار

  • جلو در جهت خواندن است

    در فارسی جلو یعنی چپ. صفحه یا گام بعدی از سمت چپ می‌آید و صفحه قبلی به سمت راست می‌رود.

    درست
    از چپ
    نادرست
    از راست

  • تبدیل به جای خودش برمی‌گردد

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

    درست
    به دکمه برمی‌گردد
    نادرست
    فید می‌شود

  • چیزی که در هر دو طرف هست دو تا نمی‌شود

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

    درست
    جابه‌جا می‌شود
    نادرست
    دو بار دیده می‌شود

  • هر بار فقط یک تبدیل اتفاق می‌افتد

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

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

  • کار پرتکرار حرکت کمتری دارد

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

    درست
    فقط رنگ ردیف عوض می‌شود
    نادرست
    ردیف مدال می‌شود

  • دکمه خودش دکمه پنجره می‌شود

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

    درست
    دکمه پنجره می‌شود
    نادرست
    رنگ روی پنجره پخش می‌شود

  • کارت و کادر جست‌وجو خودشان پنجره می‌شوند

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

    درست
    کادر خودش پنجره می‌شود
    نادرست
    پنجره از پشت کادر پیدا می‌شود

  • هر تکه یکی از تکه‌های پنجره می‌شود

    وقتی کارت صفحه جزئیاتش می‌شود، هر تکه‌اش هم یکی از تکه‌های پنجره می‌شود: نشان «تهران» دکمه «حمایت می‌کنم» می‌شود و «۱۲ روز مانده» متن کنار آن. در متن‌ها هم همین است: کلمه‌هایی که در هر دو متن هست به جای تازه‌شان می‌روند و کلمه‌های اضافه به کلمه‌های تازه تبدیل می‌شوند. فقط چیزی که دیگر همتایی برایش نمانده، مثل دکمه بستن، تازه پیدا می‌شود. اگر تکه‌ای محو شود و همان‌جا تکه دیگری پیدا شود، پیوند میان آن دو گم می‌شود.

    درست
    نشان‌ها دکمه و متن می‌شوند
    نادرست
    نشان‌ها محو می‌شوند

  • محتوای پنجره پشت سر هم می‌رسد

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

    درست
    یکی پس از دیگری
    نادرست
    همه با هم

  • متنی که عوض می‌شود کلمه‌به‌کلمه می‌غلتد

    وقتی «پرداخت شد» روی همان دکمه «اشتراک‌گذاری کمپین» می‌شود، متن قبلی رو به بالا می‌رود و کلمه‌های تازه یکی‌یکی از پایین می‌آیند. اگر یکی محو شود و دیگری همان‌جا پیدا شود، یک آن دو متن روی هم خوانده می‌شوند.

    درست
    می‌غلتد
    نادرست
    دو متن روی هم

توکن‌ها

هر تصمیم این صفحه در کد یک توکن نقش است و کامپوننت‌ها فقط با همین نام‌ها ساخته می‌شوند.

یک منحنی نرم و پنج مدت برای همه حرکت‌ها، و گذارهایی که کامپوننت‌ها از آن‌ها می‌سازند.