نمودارها ابزارهای فوق العاده ای برای توضیح سیستم های پیچیده هستند. آنها به عنوان یک نقشه بصری عمل می کنند و به بینندگان اجازه می دهند تا نحوه تعامل و اتصال اجزای مختلف را در یک نگاه درک کنند.
با این حال، نمودارهای استاتیک گاهی اوقات توانایی انتقال کامل فرآیندهای پیچیده را ندارند. تصور کنید که یک نمودار سیستمی پیچیده را ارائه می‌کنید – می‌توانید روایت کنید، تمرکز را روی عناصر خاص قرار دهید و مخاطبان خود را از طریق نمایش بصری راهنمایی کنید. با این حال، یکی از اهداف اولیه نمودارها، ارائه توضیحی واضح بدون نیاز به روایت مداوم است.
نمودارهای متحرک، به ویژه جریان بین اجزای مختلف، شکاف بین تصاویر ثابت و روایت دقیق را پر می کند. انیمیشن ها به عنوان یک راهنمای بصری عمل می کنند، توجه بینندگان را هدایت می کنند و ترتیب عملیات درون سیستم را برجسته می کنند.
تصور کنید که سیستم لوله کشی یک ساختمان را به صورت ایستا بر روی کاغذ می بینید (که هنوز یک روش شگفت انگیز برای دادن اطلاعات در مورد لوله کشی در یک ساختمان است).
اما تصور کنید که نقاشی متحرک می شود و جهت جریان آب یا سیستم فاضلاب را نشان می دهد. افزایش سیگنال اطلاعات با استفاده از انیمیشن ها، تاثیر نمودار سیستم را تقویت می کند.
من اخیراً از Drawing.io استفاده کردم که راه آسانی برای انجام این کار دارد.
اغلب اوقات اتصالات بین اجزای نمودارها قطعاتی هستند که ما می خواهیم متحرک سازی کنیم.
من این را در بسیاری از ابزارهای دیگر که در گذشته استفاده می کردم، جستجو کردم. هر دو ابزار نمودارسازی مناسب مانند نمودارهای شفاف، پری دریایی، excalidraw و miro. figma/figjam و برنامه های ارائه عمومی مانند Keynote و PowerPoint. هیچ کدام گزینه های انیمیشن آسانی ندارند.
روشی که من شروع به ساخت انیمیشن های آسان کردم این است که از نقاشی های موجود خود استفاده کنم، آنها را به صورت jpeg/png ثابت یا SVG در draw.io وارد کنم، سپس یک خط اتصال روی خطوط موجود بکشم، به آن رنگ سفید بدهم و آن را ضخیم کنید، سپس بررسی کنید. این گزینه “انیمیشن” برای متحرک کردن خطوط تیره سفید است که روی خطوط رابط موجود من متحرک می شوند و آنها را متحرک می کند.
فراتر از انیمیشن، من draw.io را دوست دارم زیرا یک ابزار طراحی خارق العاده است. این منبع باز و رایگان برای استفاده و مشارکت در آن است. کراس پلت فرم کار می کند. دارای عناصر طراحی زیادی است و می توانید نمادهای png و svg خود را به کتابخانه خود وارد کنید.
می توانید draw.io را روی دسکتاپ خود نصب کنید (در مک، با استفاده از homebrew، به سادگی brew install –cask drawio)، از نسخه آنلاین به صورت رایگان استفاده کنید، یا برای همکاری با تیم خود در برنامه های ابری ثبت نام کنید.
این پست در ابتدا در وبلاگ من منتشر شد: https://mfyz.com/animating-systems-diagrams-with-draw-io/
