ایده یک محصول دیجیتال ممکن است در ابتدا فقط چند یادداشت، طرح روی کاغذ یا تصویری کلی از یک اپلیکیشن باشد. اما پیش از آنکه برای کدنویسی و توسعه محصول هزینه کنید، می‌توانید مسیر کاربر را در یک نمونه اولیه بسازید و آن را به دیگران نشان دهید. پروتوتایپ‌سازی در فیگما کمک می‌کند صفحه‌ها را به هم وصل کنید، رفتار دکمه‌ها را نمایش دهید و تجربه کار با محصول را پیش از ساخت نسخه نهایی بررسی کنید.
در این راهنما از اپل گیفت، قدم به قدم با آموزش پروتوتایپ در فیگما آشنا می‌شوید؛ از آماده کردن فریم‌ها تا ساخت نمونه قابل کلیک و گرفتن بازخورد. اگر قصد دارید کارتان را در فیگما جدی‌تر دنبال کنید، می‌توانید مقاله معرفی و خرید اکانت فیگما را هم بخوانید.
پروتوتایپ در فیگما چیست و چه کاربردی دارد؟
پروتوتایپ یا نمونه اولیه، نمایشی تعاملی از یک محصول است که بخش‌هایی از رفتار آن را شبیه سازی می‌کند. در فیگما، می‌توانید طرح چند صفحه را به هم متصل کنید تا کاربر با کلیک روی یک دکمه به صفحه بعد برود، منویی باز شود یا پنجره‌ای روی صفحه نمایش داده شود.
پروتوتایپ با محصول نهایی تفاوت دارد: معمولاً اطلاعات واقعی را پردازش نمی‌کند، به پایگاه داده وصل نیست و منطق کامل برنامه را اجرا نمی‌کند. هدف آن، نمایش و بررسی مسیرها و تعامل‌های اصلی است؛ نه جایگزین شدن با نسخه توسعه یافته محصول.
ساخت نمونه اولیه می‌تواند به شما کمک کند:
جریان حرکت کاربر میان صفحه‌ها را بررسی کنید
ابهام‌های طراحی را پیش از توسعه پیدا کنید
ایده را به هم تیمی، مشتری یا سرمایه‌گذار نشان دهید
درباره کاربردپذیری محصول بازخورد بگیرید
گزینه‌های مختلف طراحی را با هم مقایسه کنید
پیش از شروع چه چیزهایی آماده کنید؟
پیش از آنکه سراغ اتصال صفحه‌ها بروید، هدف نمونه اولیه را مشخص کنید. قرار است چه چیزی را آزمایش کنید؟ ثبت نام کاربر، خرید محصول، جست و جو یا انجام یک کار مشخص؟ اگر هدف روشن نباشد، ممکن است زمان زیادی صرف جزئیاتی شود که برای این مرحله ضروری نیستند.
برای شروع، این موارد را آماده کنید:
یک سناریوی مشخص: برای نمونه «کاربر محصولی را پیدا می‌کند و آن را به سبد خرید می‌افزاید.»
فهرست صفحه‌های لازم: فقط صفحه‌هایی را طراحی کنید که برای اجرای سناریو نیاز دارید.
مسیر اصلی کاربر: مشخص کنید کاربر از کجا شروع می‌کند و به چه نتیجه‌ای می‌رسد.
محتوای تقریبی: متن‌ها، عنوان‌ها و تصاویر نمونه را تا جای ممکن واقعی انتخاب کنید.
برای پروژه‌های بزرگتر، هماهنگی میان رنگ‌ها، تایپوگرافی، کامپوننت‌ها و الگوهای تکرارشونده اهمیت زیادی دارد. آشنایی با Design System در Figma چیست؟ کمک می‌کند پیش از توسعه نمونه اولیه، اجزای طراحی را منظم‌تر نگه دارید.
آموزش پروتوتایپ در فیگما؛ مراحل ساخت نمونه اولیه
۱. فایل جدید بسازید و فریم‌ها را مشخص کنید
در فیگما یک فایل جدید ایجاد کنید و برای صفحه‌های محصول، فریم‌های جداگانه بسازید. اندازه فریم را متناسب با جایی انتخاب کنید که نمونه قرار است در آن نمایش داده شود؛ مثلاً موبایل یا دسکتاپ.
اگر در حال طراحی اپلیکیشن موبایل هستید، از ابتدا اندازه صفحه‌ها را یکسان نگه دارید. فریم‌های نامنظم یا با ابعاد متفاوت می‌توانند هنگام ارائه، نمایش نمونه را گیج کننده کنند. برای نمونه اولیه لازم نیست همه جزئیات نسخه نهایی را کامل کنید؛ ابتدا صفحه‌های موردنیاز برای سناریوی اصلی را بسازید.
۲. صفحه‌های اصلی را طراحی کنید
فرض کنید می‌خواهید مسیر خرید یک محصول را نشان دهید. ممکن است به صفحه‌های زیر نیاز داشته باشید:
صفحه فهرست محصولات
صفحه جزئیات محصول
سبد خرید
مرحله تأیید سفارش یا نمایش نتیجه
در این مرحله، سلسله مراتب عناصر را روشن کنید: کاربر اول باید چه چیزی را ببیند؟ دکمه اصلی کجاست؟ آیا متن‌ها به‌راحتی خوانده می‌شوند؟ طراحی نمونه اولیه باید آن قدر واضح باشد که کاربر بتواند بدون توضیح طولانی مسیر را دنبال کند.
۳. وارد بخش Prototype شوید
یک فریم یا عنصر داخل آن را انتخاب کنید و از پنل سمت راست به بخش Prototype بروید. با کلیک روی نقطه اتصال کنار عنصر، می‌توانید آن را به فریم مقصد وصل کنید. برای مثال، دکمه «مشاهده محصول» را به فریم جزئیات محصول متصل کنید.
در تنظیمات تعامل، معمولاً می‌توانید نوع رویداد، نحوه حرکت به مقصد و شیوه انتقال را تعیین کنید. گزینه‌ها و نام تنظیمات ممکن است با به روزرسانی‌های فیگما تغییر کنند، بنابراین اگر در رابط کاربری با تفاوتی رو به رو شدید، راهنمای رسمی فیگما را بررسی کنید.
۴. رفتار دکمه‌ها و عناصر تعاملی را تعریف کنید
هر اتصال باید برای کاربر معنا داشته باشد. دکمه «افزودن به سبد» بهتر است او را به فریمی ببرد که نتیجه این کار را نشان می‌دهد؛ مثلاً سبد خرید یا پیام تأیید. اگر یک عنصر فقط تزئینی است، آن را به مقصد نامرتبط وصل نکنید.
برای دکمه‌هایی مثل «بازگشت» نیز مقصد مشخص کنید. کاربر باید بتواند مسیر را ادامه دهد یا به صفحه قبلی برگردد. در یک نمونه اولیه ساده، همین تعامل‌های پایه برای بررسی جریان اصلی کافی‌اند.
۵. از Overlay و تغییر حالت استفاده کنید
همه تعامل‌ها نیاز ندارند کاربر را به یک صفحه جدید ببرند. برای نمایش منوی بازشونده، پنجره تأیید یا پیام کوتاه می‌توانید از Overlay استفاده کنید. این روش به شما امکان می‌دهد محتوایی را روی فریم فعلی نمایش دهید، بدون اینکه صفحه‌ای کاملاً تازه طراحی کنید.
برای نمایش حالت‌های مختلف یک دکمه یا کامپوننت، مثل حالت فعال و غیرفعال، از قابلیت‌های تعاملی فیگما بهره بگیرید. این کار نمونه را واقعی‌تر می‌کند، اما بهتر است فقط زمانی به جزئیات بیشتر بپردازید که برای تست یا ارائه لازم باشد.
۶. نقطه شروع پروتوتایپ را انتخاب کنید
برای اینکه نمونه با صفحه مناسب باز شود، فریم آغازین را به عنوان نقطه شروع تعیین کنید. اگر بیش از یک مسیر دارید، برای هر مسیر اصلی نقطه شروع یا جریان جداگانه در نظر بگیرید. نامگذاری روشن فریم‌ها و جریان‌ها باعث می‌شود اعضای تیم راحت‌تر نمونه را بررسی کنند.
۷. نمونه را اجرا و آزمایش کنید
با گزینه Present پیش نمایش تعاملی را باز کنید و مسیر را مثل یک کاربر واقعی طی کنید. از خودتان بپرسید:
آیا دکمه‌ها کار مورد انتظار را انجام می‌دهند؟
آیا مسیر کاربر در جایی متوقف می‌شود؟
آیا کاربر می‌تواند اشتباه خود را اصلاح کند؟
آیا متن‌ها و وضعیت‌ها به اندازه کافی روشن هستند؟
آیا بازگشت به مرحله قبلی ممکن است؟
این بررسی را فقط به خودتان محدود نکنید. از چند نفر بخواهید بدون راهنمایی شما یک کار مشخص را انجام دهند. به جای پرسیدن «از طراحی خوشت آمد؟»، سؤال عملی بپرسید؛ مثلاً «چطور این محصول را به سبد خرید اضافه می‌کنی؟» مشاهده رفتار کاربر اغلب نکته‌هایی را آشکار می‌کند که در بازبینی شخصی دیده نمی‌شوند.
ساخت پروتوتایپ قابل کلیک در Figma؛ یک مثال کوتاه
برای ساخت پروتوتایپ قابل کلیک در Figma، یک نمونه سه صفحه‌ای در نظر بگیرید: فهرست محصول، جزئیات محصول و سبد خرید.
روی صفحه فهرست، کارت محصول را به صفحه جزئیات متصل کنید.
در صفحه جزئیات، دکمه «افزودن به سبد» را به صفحه سبد خرید وصل کنید.
در صفحه سبد، دکمه «ادامه خرید» را به صفحه فهرست برگردانید.
پیش نمایش را اجرا کنید و کل مسیر را از ابتدا تا انتها آزمایش کنید.
این پروتوتایپ، خرید واقعی انجام نمی‌دهد؛ اما به شما نشان می‌دهد آیا مسیر موردنظر قابل فهم است و صفحه‌ها ترتیب مناسبی دارند یا نه. همین سطح از نمونه اولیه برای گرفتن بازخورد اولیه می‌تواند کافی باشد.
خطاهای رایج در طراحی نمونه اولیه محصول در فیگما
در طراحی نمونه اولیه محصول در فیگما، گاهی طراح بیش از اندازه روی انیمیشن‌ها و جزئیات بصری تمرکز می‌کند، درحالیکه هنوز مسیر اصلی کاربر روشن نیست. ابتدا مطمئن شوید تعامل‌های ضروری درست کار می‌کنند؛ بعد سراغ پرداخت‌های بیشتر بروید.
از این اشتباه‌ها نیز دوری کنید:
وصل کردن دکمه‌ها به صفحه‌هایی که نتیجه مورد انتظار را نشان نمی‌دهند
ساخت صفحه‌های زیاد بدون سناریوی مشخص
استفاده از متن‌های نامفهوم یا محتوای کاملاً غیرواقعی
فراموش کردن مسیر بازگشت یا حالت خطا
ارائه نمونه بدون آزمایش قبلی
اشتراکگذاری فایلی که نامگذاری و ساختار آن برای هم تیمی‌ها روشن نیست
برای پروتوتایپ سازی به چه نسخه‌ای از فیگما نیاز دارید؟
امکانات، محدودیت‌ها و شرایط دسترسی فیگما ممکن است در طول زمان تغییر کند. پیش از انتخاب پلن، نیاز واقعی خود را بررسی کنید: آیا به همکاری تیمی نیاز دارید؟ چند فایل یا پروژه قرار است بسازید؟ چه قابلیت‌هایی برای کار روزمره شما ضروری‌اند؟ جزئیات به روز پلن‌ها را در وبسایت رسمی فیگما ببینید و براساس نیازتان تصمیم بگیرید.
اگر می‌خواهید فیگما را برای کار حرفه‌ای، طراحی تیمی یا پروژه‌های مشتری استفاده کنید، داشتن دسترسی مناسب می‌تواند بخشی از روند کاری شما باشد. برای آشنایی با روش تهیه حساب، امکانات و نکاتی که پیش از خرید باید بررسی کنید، به صفحه معرفی و خرید اکانت فیگما سر بزنید. انتخاب پلن مناسب را بر اساس نیاز و بودجه انجام دهید؛ لازم نیست پیش از شناخت گردش کارتان سراغ امکاناتی بروید که استفاده نمی‌کنید.
پروتوتایپ چه تفاوتی با فایل نهایی طراحی دارد؟
پروتوتایپ بیشتر برای نمایش و آزمایش رفتار محصول ساخته می‌شود. فایل طراحی نهایی معمولاً جزئیات دقیق‌تری از رنگ، فاصله‌ها، تایپوگرافی، کامپوننت‌ها و وضعیت‌های مختلف اجزا دارد و ممکن است برای تحویل به تیم توسعه آماده شده باشد. البته در عمل، یک فایل فیگما می‌تواند هم شامل طرح‌ها باشد و هم جریان‌های پروتوتایپ؛ تفاوت در هدف و میزان جزئیات آنهاست.
اگر قرار است محصول شما در چند صفحه یا توسط یک تیم طراحی شود، آشنایی با مفاهیم سیستم طراحی و کامپوننت‌ها، نگهداری و به روزرسانی فایل را آسان‌تر می‌کند. همچنین برای آشنایی بیشتر با نقش فیگما در فرایند طراحی، مقاله چگونه Figma در حال تغییر آینده طراحی UI/UX است؟ را بخوانید.
کلام آخر ...
آموزش طراحی محصول با فیگما فقط به ساخت صفحه‌های زیبا محدود نمی‌شود. با پروتوتایپ می‌توانید ایده را به یک تجربه قابل کلیک تبدیل کنید، مسیر کاربر را بررسی کنید و پیش از ورود به مرحله توسعه، ایرادهای مهم را پیدا کنید. برای شروع، یک سناریوی روشن انتخاب کنید، فقط صفحه‌های ضروری را بسازید، تعامل‌ها را به هم وصل کنید و نمونه را با کاربران واقعی آزمایش کنید.
اگر برای اجرای پروژه‌های خود به دسترسی فیگما نیاز دارید، ابتدا امکانات و شرایط پلن‌ها را بررسی کنید و سپس متناسب با نیازتان تصمیم بگیرید. یک نمونه اولیه خوب از تعامل‌های ضروری شروع می‌شود؛ نه از پیچیده کردن بی‌دلیل طرح!
دیدگاه‌ها (۰)
دیدگاه خود را بنویسید. نشانی ایمیل شما منتشر نخواهد شد.