تصویر، آیکون و حرکت

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

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

تصویر صفحهٔ محصول

بکنید
کمپین تخفیف فصلی7 روز گذشته
پست
12,480
منشن
3,902
مثبت
62٪
تصویر صفحه با دادهٔ نمایشی خنثی، در تم صفحه‌ای که در آن می‌نشیند، با قاب 1 پیکسلی.
نکنید
کمپین تخفیف فصلی7 روز گذشته
پست
12,480
منشن
3,902
مثبت
62٪
قاب دستگاه، سایهٔ سنگین و چرخش؛ یا تصویری از دادهٔ واقعی مشتری، حتی محوشده.
  • فقط دادهٔ نمایشی خنثی: موضوع‌های برند و بازاریابی مثل «کمپین تخفیف فصلی» و «بازخورد بسته‌بندی»، و نام‌های ساختگی. دادهٔ مشتری هرگز در تصویر نمی‌آید، حتی محوشده یا بریده.
  • تم تصویر با جایش یکی است: برای چاپ، PDF و صفحهٔ روشن تم روشن؛ برای صفحهٔ تیره تم تیره. دو تم در یک ترکیب کنار هم نمی‌آیند.
  • بدون آرایش: بدون قاب دستگاه، سایهٔ سنگین یا چرخش. اگر تصویر تکه‌ای از صفحه است، یک قاب 1 پیکسلی با رنگ خط دورش بکشید.

آواتار

بکنید
نسع
آواتار نمونه: حرف اول نام روی سطح خنثی.
بکنید
آواتار نمونهٔ بدون چهره، وقتی نام در دست نیست.
نکنید
رنگ‌کردن عکس چهره با سبز برند برای «هماهنگی». عکس آدم واقعی هم در مستندات نمی‌آید.

در مستندات، ارائه و بازاریابی فقط آواتار نمونه به کار می‌رود: حرف اول نام روی سطح خنثی، یا شکل بدون چهره. به‌جای آواتار، عکس آدم واقعی نمی‌آید (عکس تیم، جدا از آواتار، قاعدهٔ بخش بعد را دارد). در خود محصول، آواتار حساب شبکهٔ اجتماعی همان است که صاحب حساب گذاشته، بدون فیلتر و اصلاح رنگ.

عکس

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

تصویرسازی

تصویرسازی پرتو همان است که سیستم طراحی برای حالت‌های خالی و خطا دارد: خطی، ساده، در رنگ‌های خنثی. همین‌ها سبک مرجع‌اند؛ تصویرسازی تازه باید در کنارشان غریبه نباشد.

جستجوی بی‌نتیجهNoResultsIllustration
هنوز داده‌ای نیستNoDataIllustration
اولین استفادهFirstRunIllustration
خطاErrorIllustration
بدون دسترسیForbiddenIllustration

هیچ شخصیت کارتونی، صحنهٔ روایی یا ایموجی به‌جای تصویرسازی به کار نمی‌رود.

آیکون

16 پیکسل در متن و دکمه هم‌اندازه با متن کنارش 24 پیکسل فقط در نمای برجسته
  • همهٔ آیکون‌ها از کتابخانهٔ Lucide هستند، با ضخامت خط 2. کتابخانه‌ها را با هم مخلوط نکنید.
  • اندازهٔ پیش‌فرض 16 پیکسل است و آیکون هم‌اندازهٔ متن کنارش می‌ماند. در دکمه و کنترل، اندازه را پلهٔ کنترل تعیین می‌کند، نه طراح.
  • 24 پیکسل فقط در نمای برجسته، مثل آیکون حالت خالی یا کارت معرفی.
  • آیکون‌های جهت‌دار (پیکان، شورون) در راست‌به‌چپ قرینه می‌شوند؛ آیکون‌های شیء (تقویم، چشم) نه.
  • ایموجی هرگز جای آیکون را نمی‌گیرد.

جزئیات فنی و فهرست آیکون‌ها در آیکون‌ها در مستندات آمده است.

حرکت

حرکت در پرتو آرام و کوتاه است، هم‌خوان با شخصیت برند:

  • حرکت چیزی را توضیح می‌دهد (از کجا آمد، کجا رفت)، نه اینکه تزئین کند.
  • کوتاه است؛ کاربر منتظر پایان حرکت نمی‌ماند.
  • اگر کاربر در سیستم‌عامل «کاهش حرکت» را روشن کرده باشد، حرکت‌های غیرضروری حذف می‌شوند.
  • هیچ چیزی بیش از سه بار در ثانیه چشمک نمی‌زند.

زمان‌ها و منحنی‌ها در حرکت در مستندات آمده است.

زمینه و گرادیان

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

آخرین به‌روزرسانی