طراحی پروتوتایپ وب + پروژه کامل

در این جلسه آموزشی، بخش پروتوتایپ نسخه وب که به صورت High Fidelity هست، اجرا خواهد شد. در جلسه قبل نسخه Low Fidelity یا همان Wireframe اجرا شده بود. این جلسه چهار ویدئو دارد.

شاید برای بسیاری از افراد طراحی وایرفریم و اسکچ لذت بخش نباشد. زیرا این مدل طرح‌ها هیچ رنگ و رویی ندارند. اما در مرحله ساخت پروتوتایپ از دنیای سیاه و سفید به دنیای رنگی می‌رویم. پس از طراحی وایرفریم پروژه، نوبت به طراحی پروتوتایپ (prototype) می‌رسد. اجرای این بخش یعنی اینکه دیگر در مقیاس low fidelity design نیستیم و طراحی ما به مرحله high fidelity design رسیده است. در این مرحله، جزئیات پروژه مانند رنگ‌ها، تایپوگرافی و گریدسیستم دقیق، اینترکشن‌ها، فاصله‌گذاری، متن و محتوای دقیق، تصاویر و حتی ویدئو اضافه خواهد شد. افزون بر این، uikitهای پروژه نیز کامل می‌شوند.

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

طراحی پروتوتایپ در فیگما

طراحی در مقیاس high fidelity شامل چه مواردی می‌شود؟

در جلسه قبل که در خصوص طراحی وایرفریم صحبت کردیم، مشاهده شد که برای سهولت اجرای پروژه و جلوگیری از خطاهای تصمیم‌گیری و اتلاف زمان و هزینه، بهتر است ابتدا وایرفریم (low-fidelity) اجرا شود. اما وقتی وایرفریم اجرا شد، در مراحل بعدی سراغ high fidelity می‌رویم. اجرای طراحی پروتوتایپ، شامل افزودن رنگ‌ها، تصاویر، کامپوننت‌ها، استایل‌گایدها و تکمیل کردن پروژه است. اینکه بیان کنیم پروتوتایپ لزوما همان وایرفریم است که کامل شده و چیزی تغییر نکرده، لزوما صحیح نیست. مثلا ممکن است یک بخشی در وایرفریم اجرا بشود. کارفرما ابتدا موافق اجرای آن باشد اما بعدا به دلایل بیزنسی، آن بخش حذف بشود و در مرحله ساخت پروتوتایپ، پیاده‌سازی نشود.

ساخت پروتایپ در فیگما

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

با ساخت پروتوتایپ یک قدم در طراحی جلوتر برویم

برای طراحی پروتوتایپ باید از دنیای خاکستری وایرفریم فاصله بگیریم و به جزئیات بیشتری در طرح از جمله رنگ، تایپوگرافی، استایل گایدها، کامپوننت و تصاویر بپردازیم تا طراحی ما کامل‌تر شود. در این قسمت از دوره طراحی رابط کاربری آموزش prototype در فیگما را برای پروژه‌های UI و متعلقات مربوط به این دانش مهم را توضیح دادیم. خوشحال می‌شویم تجربیات خود را با ما به اشترک بگذارید. همچنین اگر سوالی در مورد این مبحث داشتید از بخش دیدگاه‌ها، از متخصصین آژانس نوآوری رسام بپرسید.
موفق باشید 😍

4.6/5 - (11 امتیاز)

19 پاسخ

  1. سلام استاد وقت بخیر. سوالی که داشتم اینه که ایا ضرورتی داره تو قسمت لایه ها، اسم فریم ها رو تغییر بدیم؟ من توی فیلمها یکم گیج میشم وقتایی که هی دارین اسم گذاری میکنید براشون.

    و سوال دیگه ای که داشتم چرا فونتهای فارسی رو برای من نمیاره؟ عددهاییم که مینویسم انگلیسیه… با وجودی که کارایی که تو جلسه تایپوگرافی هم گفتید انجام دادم

    1. درود بر شما. وقت بخیر

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

      برای اینکه فونت‌های نصب شده در سیستم عامل شما کار کند، باید installer آنرا نصب کنید. در صفحه figma.com/downloads بروید آنجا installer هست. (سمت راست صفحه)
      فونت وزیرمتن هم اعداد انگلیسی دارد و هم پارسی. برای اینکه اعداد پارسی باشند باید در tab جزئیات تایپوگرافی بروید و مقدار farsi digits رو تیک بزنید فعال بشود.

      موفق باشید.

  2. سلام مجدد استاد و سپاس برای راهنماییتون.
    مشکل قبلی رفع شد، الان چیزی که هست اینه که اکثر مواقع وقتی میخوام پلاگینی رو اجرا کنم یا مدت خیلی زیادی طول میکشه تا اجرا بشه یا همین جور میچرخه و گیر میکنه! و یا این پیغام رو میده: An error occured while searching for plugins. و با وی پی ان روشن یا خاموش هم وضعیت همینه.. من از نسخه ی وب فیگما هم استفاده میکنم. همین باعث میشه یا مدت زیادی سر یه جلسه معطل بشم یا اینکه تمرین نکرده برم قسمت بعد…نمیدونم مشکل چیه و باید چیکار کنم؟

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

      کلا بخش عمده‌ای از این مسائل به خاطر وضعیت اینترنت داخلی ایران هست. چون نهایتا مواردی که تحریم باشیم و range ip ایران رو بسته باشند با VPN درست می‌شود. اما گاهی حتی سایت‌هایی که تحریم نکرده‌اند نیز سخت باز می‌شوند. اگر خواستید سایت shecan.ir رو هم بررسی کنید. این راهکار هم گاهی مشکل را حل می‌کند.

      موفق باشید.

  3. سلام و عرض ادب.
    ممنون و متشکر بابت دوره کامل و بی نظیرتون استاد گرامی.

    لطفا بفرمایید پس از طراحی با فیگما از چه طریقی می‌توانم سایت را در اینترنت پابلیش کنم؟
    آیا با وردپرس امکان پذیر است یا روش دیگری دارد!
    سپاس بیکران

    1. درود بر شما. وقت بخیر
      سپاس از لطف شما.

      برای پیاده‌سازی طرح UI می‌توانیم از صفر برنامه نویسی کنیم و تمام آنچه که می‌خواهیم را پیاده سازی کنیم.
      البته وردپرس هم به عنوان یک سیستم مدیریت محتوای رایگان، در خیلی از پروژه ها راهگُشا هست. ما اخیراً یک دوره رایگان وردپرس در سایت آپلود کردیم که در صورت تمایل آن را هم ببینید.

      موفق باشید.

  4. سلام استاد
    من به انتهای طراحی یک صفحه رسیدم
    سعی کردم همه چی فاصله ها ضریب 8 باشه . اما الان قاطی کردم که فاصله ی ایتم تا AUTO LAYOUT که داخلشه باید ضریب 8 باشه یا اندازه ی خود AUTO LAYOUT ایجاد شده ام باید مبنای 8 باشه . یا حتی فاصله ی هر فریم تا صفحه یا فریم با فریم هم باید ضریب 8 باشه؟
    قاطی کردم این ضریب 8 بودن رو

    1. درود بر شما. وقت شما بخیر
      ببینید استفاده از نسبت 8 الزامی نیست. اما بله اون موارد که فرمودید بهتره ضریب 8 باشند. مثلا فاصله بخش‌ها از هم. مثلا هدر و بخش زیر آن. گاترهای گریدسیستم هم که 24 هستند. فوصل بین متون رو هم که ما از 8 و 16 و 24 و 32 استفاده کردیم. در واقع همه جا نسبت 8 بود. اما خب استفاده از آن الزامی نیست. چون بین طراحان این روش فاصله‌گذاری خیلی رایج هست من هم بیان کردم که مخاطب با آن آشنا بشود. من خودم به جز نسبت 8 ها از عدد 4 و 12 هم استفاده می‌کنم (فریمورک‌های معروف مانند بوت‌استرپ هم از این نسبت استفاده کرده‌اند).

      موفق باشید.

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

    1. درود بر شما. وقت بخیر
      ما در این دوره پاپ آپ طراحی نکردیم اصلا. در واقع این جلسه صرفا high-fidelity پروژه رو اجرا کردیم. اگر موضوع preview و یا present پروژه هست و هنگام این کار نمایش نصفه است و یا اسکرول ناقص هست، باید از تنظیمات تب پروتوتایپ، تنظیم کنیم که در موکاپ متناسب با پروژه، طرح را نمایش بدهد. اصلا می‌توان آنرا روی none گذاشت که مطمئن بشویم به درستی نمایش داده می‌شود.

    1. درود بر شما. وقت شما بخیر.
      چرا کار می کنیم. اتفاقا یکی از حالت‌های ساخت اینترکشن در فیگما همین اسکرول هست. اما توی این جلسه نیست. در جلسات 22 و 23 هستش. کلا در این دو جلسه، موضوعات ساخت اینترکشن در فیگما را خواهیم گفت.

      موفق باشید.

  6. سلام استاد عزیز
    میشه روی همون طرح wireframe مون ، طرح prototype رو بندازیم؟ و دوباره طراحی نکنیم؟ یعنی همون اول یک کپی بگیریم ازش و باهاش کار کنیم

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

      موفق باشید.

  7. استاد وقت بخیر
    یه سوال دیگه: من هر دو سمت grid م، حدود 80 پیکسل با اطراف فاصله داره اما در present preview میبینم که فقط یکطرفش رو فاصله داده و طرف دیگه چسبیده!! چرا؟

    1. در حالتهای recommended خودش اونشکلی نشون میده ولی در حالت مثلا fit width گذاشتم درست نشون داد.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

متخصصین آژانس نوآوری رسام
فرم درخواست پروژه و مشاوره
تماس با کارشناسان رسام: 09351436045