آموزش اصول طراحی فلوچارت پروژه‌های طراحی محصول در فیگ جم
- سپهر یونسی
- 6 دقیقه
- ۲ آذر ۱۴۰۴
- فیگما
وقتی می‌خوای یه محصول یا یه فیچر جدید طراحی کنی، اولین چیزی که لازم داری اینه که جریان کار رو دقیق و شفاف بکشی بیرون. اینجا همون جاییه که فلوچارت به دادت می‌رسه. فلوچارت کمک می‌کنه بفهمیم کاربر چطور تو محصول حرکت می‌کنه، سیستم چه واکنش‌هایی نشون می‌ده و کل مسیر از اول تا آخر چه شکلیه. این یعنی یه تصویر واضح از چیزی که داریم می‌سازیم؛ نه حدس‌زدن، نه توهم، نه سوءتفاهم بین تیم‌ها.
توی این مقاله، هم اصول درست کشیدن فلوچارت رو یاد می‌گیری و هم اینکه چطور توی FigJam یه فلوچارت مرتب، خفن و استاندارد بسازی.
بخش اول: اصول و قواعد پایه‌ای فلوچارت
چرا اصلاً فلوچارت مهمه؟ قبل از اینکه بریم سراغ شکل‌ها و استانداردها، بذار یکم راحت بگم چرا فلوچارت اینقد مهمه:
- وقتی می‌خوای یه فرآیند رو به بقیه توضیح بدی، یه تصویر از صدتا پاراگراف بهتره
- باعث می‌شه همه تیم (طراح، برنامه‌نویس، مدیر محصول) یه چیزی رو یکجور بفهمن
- سریع می‌فهمی کجاها مشکل یا پیچیدگی وجود داره
- پایهٔ خوبی برای وایرفریم و طراحی UXه
- باعث می‌شه محصولت الکی شلوغ و سردرگم نشه
فلوچارت درواقع یه نقشه راهه قبل از اینکه برویم سراغ ساختن.
نمادهای اصلی فلوچارت (همون شکل‌های معروف)
هر شکل توی فلوچارت یه معنای خاص داره. اینا استانداردن، هرجای دنیا هم همینا رو استفاده می‌کنن.
۱) بیضی – Start/End
این شکل یعنی شروع یا پایان.
مثال:
- شروع ثبت‌نام
- اتمام سفارش
بهترین کار اینه که همیشه فلوچارتت رو با یه بیضی ساده شروع کنی.
۲) مستطیل – Process (یا همون مرحله)
این برای مرحله‌های عملیاتی استفاده می‌شه.
هر مرحله‌ای که یه کاری انجام می‌شه، مستطیلیه.
مثال:
- وارد کردن ایمیل
- ارسال درخواست به سرور
- بررسی موجودی کالا
بهتره متن داخلش کوتاه و فعل‌محور باشه.
۳) لوزی – Decision (نقطه تصمیم‌گیری)
محل شرطه. اینجا مسیر می‌تونه دوشاخه بشه.
مثال:
- رمز درسته؟
- کاربر لاگینه یا نه؟
- موجودی کافی هست؟
نکته مهم:
حداقل دو خروجی داره (بله / خیر).
این دو خط باید برچسب داشته باشن؛ مثلاً «Yes» و «No» یا «بله» و «خیر».
۴) متوازی‌الاضلاع – Input/Output
برای ورودی‌ها یا خروجی‌های اطلاعاته.
مثال:
- دریافت اطلاعات کاربر
- نمایش نتیجه به کاربر
توی پروژه‌های دیجیتال شاید کم‌تر استفاده بشه، اما هنوز استانداردشه.
۵) سند (Document)
اگه یه خروجی مثل فاکتور، رسید، پیام یا سند جایی تولید بشه از این استفاده می‌کنیم.
مثلاً:
- صدور فاکتور
- تولید PDF دریافتی
۶) کانکتور – دایره کوچک (Connector)
برای وقتی فلوچارت خیلی بزرگ می‌شه و نمی‌خوای صفحه شلوغ بشه.
به جای کشیدن یه فلش ۳ متری، یه دایره می‌ذاری، شماره می‌زنی، ادامه‌اش جای دیگه است.
۷) فلش – مسیر حرکت
مهم‌ترین نقش فلش اینه:
نشان بده مسیر از کجا به کجا میره.
اینکه جهت‌ها مشخص باشه خیلی مهمه تا کسی گم نشه.
اصول مهمی که باید رعایت کنی
۱) جهت حرکت
فلوچارت یا از بالا به پایین کشیده می‌شه یا از چپ به راست.
لطفاً وسطش نظرتو عوض نکن! همه‌چیز باید یکدست باشه.
۲) مسیر تصمیم‌گیری باید شفاف باشه
نقاط تصمیم‌گیری مهم‌ترین بخشن.
تو لوزی‌ها باید:
- خروجی‌ها مشخص باشن
- برچسب داشته باشن
- منطق‌شون یک‌خطی و واضح باشه
اگه لوزی‌ها خوب طراحی نشن کل فلوچارت رو خراب می‌کنن.
۳) سادگی کلید موفقیته
اگه فلوچارت شلوغ بشه:
- خوانایی میاد پایین
- اشتباه فهمیده می‌شه
- تیم حرص می‌خوره
اگه خیلی بزرگ شد:
- بخش‌بندی کن
- مسیرهای جزئی رو جدا کن
- از Connectorها کمک بگیر
۴) سطح جزئیات رو قبل از شروع مشخص کن
۳ نوع فلو رایجه:
High-Level Flow
خیلی کلی. مثل نقشهٔ راه.
User Task Flow
مسیر انجام یک کار توسط کاربر.
مثلاً «اضافه کردن محصول به سبد خرید».
System Flow
پشت‌صحنهٔ سرور و سیستم.
برای هماهنگی با تیم فنی خیلی مهمه.
اگه نگی کدوم رو می‌خوای، نصف تیم High-Level می‌کشه، نصفش Back-end!
۵) همه‌چیز باید یکدست باشه
- فاصله‌ها
- اندازه شکل‌ها
- رنگ‌بندی
- ضخامت خط‌ها
فلوچارت نامنظم احساس بی‌نظمی کامل می‌ده و باعث می‌شه مخاطب نتونه منطقی نگاه کنه.
۶) متن‌ها باید کوتاه باشن
متن طولانی توی فلوچارت مساویِ کابوس.
نمونهٔ درست:
✔ «ورود ایمیل»
نمونهٔ غلط:
✘ «در این مرحله کاربر باید ایمیل خودش را وارد کند که شامل…»
انواع فلوهایی که معمولاً تو طراحی محصول استفاده می‌کنیم
۱) User Flow
نمایش مسیر کاربر داخل محصول
مثال: «از لحظه ورود تا تکمیل پرداخت»
۲) Task Flow
روی یک کار مشخص تمرکز می‌کنه
مثال: «بازیابی رمز عبور»
۳) System Flow
برای تیم فنی که بدونه سیستم چه کارهایی انجام می‌ده
مثال: «فرآیند اعتبارسنجی OTP»
۴) Process Flow
نوع سازمانی یا بین تیمی؛ پیچیده‌تره
مثلاً فرآیند پشتیبانی کاربر
بخش دوم: چطور تو FigJam یه فلوچارت تمیز و حرفه‌ای بسازیم
FigJam عملاً بهترین ابزار برای این کاره چون:
- سریع
- ساده
- همکاری‌محور
- پر از ابزار آماده
بریم مرحله به مرحله:
مرحله ۱: ساختن فایل یا انتخاب Template
وقتی وارد Figma شدی:
- New FigJam File
- از Templateهای آماده مثل:
- Flowchart
- User Flow
- Product Planning
استفاده کن.
این کار سرعتت رو خیلی زیاد می‌کنه.
مرحله ۲: شکل‌های استاندارد رو بیار
از بخش Shapes شکل‌های بالا (مستطیل، لوزی، بیضی و…) رو بیار.
همین اول کار شکل‌ها رو تو سایز و رنگ یکدست بچین.
مرحله ۳: متن‌گذاری (بدون حاشیه‌نویسی!)
روی شکل دابل‌کلیک کن و متن رو بنویس.
سعی کن متن‌ها:
- کوتاه
- فعل‌محور
- از یک خط بیشتر نباشن
اگه توضیح اضافه داری از Sticky Note استفاده کن، نه داخل خود شکل.
مرحله ۴: اتصال شکل‌ها با Smart Connector
Connector ابزاریه که:
- خودکار به شکل‌ها می‌چسبه
- با حرکت شکل‌ها خودش تنظیم می‌شه
- مسیر رو شفاف می‌کنه
فلش‌ها رو سعی کن مستقیم یا با زاویه ۹۰ درجه بکشی تا فلو مرتب بمونه.
مرحله ۵: رنگ‌بندی حرفه‌ای
یه نکته خیلی مهم:
بیشتر از سه رنگ استفاده نکن.
معمول‌ترین روش:
- آبی = اکشن‌های کاربر
- نارنجی = سیستم
- زرد = تصمیم‌گیری
این رنگ‌بندی باعث می‌شه با یه نگاه بفهمی چه بخشی مربوط به کیه.
مرحله ۶: گروه‌بندی و ساخت Structure
اگه فلوچارتت طولانیه:
- بخش‌ها رو گروه‌بندی کن
- با Frame جدا کن
- برای هر بخش یه عنوان بگذار
مثلاً: - ورود
- احراز هویت
- سبد خرید
- پرداخت
این‌جوری مسیر ذهنی خواننده هم همراه می‌شه.
مرحله ۷: خروجی نهایی و تمیزکاری
در آخر:
- فاصله‌ها رو چک کن
- متن‌ها رو یک اندازه کن
- رنگ‌ها رو هماهنگ کن
- مسیرهای اضافی رو حذف کن
- مطمئن شو هیچ تصمیمی بدون نتیجه نمونده
اگه همه‌چی سرجاش باشه، نتیجه یه فلوچارت خیلی باکیفیته.
نکات حرفه‌ای که معمولا کسی نمی‌گه
۱) هر مسیر باید آخر داشته باشه
فلوچارت نباید خط‌هایی داشته باشه که توی هوا رها می‌شن.
۲) خط‌ها رو دور هم نپیچون
اگه خط‌ها زیاد میان روی هم، صفحه رو تقسیم کن یا از Connector استفاده کن.
۳) رنگ فقط برای زیبایی نیست
رنگ باید معنی داشته باشه.
اگه صرفاً برای قشنگی استفاده کنی، همه‌چی بی‌معنی می‌شه.
۴) قبل از کشیدن فلوچارت، حتماً سناریو رو بنویس
یه متن خیلی ساده:
- کاربر چی می‌خواد؟
- از کجا شروع می‌کنه؟
- چه گام‌هایی رو طی می‌کنه؟
- کجاها تصمیم گرفته می‌شه؟
- نتیجه نهایی چیه؟
این طرح اولیه جلوی کلی سردرگمی رو می‌گیره.
جمع‌بندی
فلوچارت یکی از اون چیزاییه که شاید ساده به‌نظر بیاد، اما اگه درست انجامش بدی:
- مسیر طراحی محصولت دقیق‌تر می‌شه
- همکاری تیمی راحت‌تر می‌شه
- فهمیدن مشکلات خیلی ساده‌تر می‌شه
- و در نهایت کیفیت محصول چند برابر بالا میره
از طرفی FigJam هم یکی از بهترین ابزارهاست برای اینکه بدون دردسر یه فلوچارت شفاف و تر و تمیز بکشی.
دیدگاهتان را بنویسید