وایر فریم چیست؟ معرفی ابزارهای رسم وایرفریم

وایرفریم‌ها، یکی از مفاهیم اصلی در طراحی وب هستند. مخصوصا اگر یک توسعه‌دهنده‌ی فرانت‌اند باشید، احتمالا این واژه را بارها در پروژه‌های مختلف شنیده‌اید. وایرفریم، چارچوبی ساده و با حداقل جزئیات از آرایش یک صفحه وب (Page Layout) است. رسم وایرفریم، معمولا به عهده‌ی طراح رابط یا تجربه‌ی کاربری (UI/UX Designer) است. اما در برخی پروژه‌های طراحی وب، برنامه‌نویس فرانت این کار را انجام می‌دهد. استفاده از وایرفریم، باعث می‌شود تا پیش از پیاده‌سازی ایده، نظر همه‌ی ذی‌نفعان پروژه را درباره‌ی طرح بررسی کرد. در ادامه،‌ با ویژگی‌ها، مزایا و ابزارهای رسم وایرفریم بیشتر آشنا می‌شویم.

وایرفریم چیست؟

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

چه زمانی از وایرفریم استفاده می‌کنیم؟

وایرفریم‌ها، در مراحل ابتدایی توسعه‌ی یک محصول یا ایده کاربرد دارند. با توجه به این که طراحی یک وایرفریم، زمان چندانی نیاز ندارد، و می‌توان در صورت نیاز، تغییرات را به راحتی و سریع در آن اعمال کرد، این ابزار، در مراحل اولیه، برای افزایش درک از محصول و همراستا کردن نظرات ذی‌نفعان کاربرد بسیاری دارد.

همانگونه که در ابتدای مطلب هم گفتیم، وایرفریم را معمولا طراحان رابط و تجربه‌ی کاربری استفاده می‌کنند. اما طراحان وب هم، می‌توانند از این ابزار استفاده کنند. گرچه آشنایی با رسم وایر فریم، جزو مهارت‌های ضروری برنامه‌نویس فرانت محسوب نمی‌شود، اما می‌تواند کمک زیادی به افزایش کیفیت برنامه‌نویسی کند. همچنین آشنایی با وایرفریم، به برنامه‌نویسان کمک می‌کند تا بتوانند راحت‌تر با دیگر اعضای پروژه مانند طراح UI/UX ارتباط داشته باشند.

هدف استفاده از وایرفریم چیست؟

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

• روی مفهوم تمرکز می‌کنند.
• کارکردها و ویژگی‌های وبسایت را تعریف می‌کنند.
• طراحی آن‌ها سریع و آسان است.

در ادامه، این سه ویژگی را به طور مختصر بررسی می‌کنیم.

تمرکز روی مفهوم

در وایرفریمینگ، توجه به حزئیات در پایین‌ترین سطح ممکن قرار دارد. برای همین، به راحتی می‌توان روی نحوه‌ی تعامل کاربر با وبسایت تمرکز کرد. با استفاده از این ابزار، اعضای مختلف تیم می‌توانند نظر خود را درباره‌ی هر یک از اجزای وبسایت بیان کنند. همین ویژگی سبب می‌شود تا تمرکز در این مرحله، بیشتر روی موارد مهمتری مانند طراحی تعامل (Interaction Design) شود.

تعریف کارکردها و ویژگی‌ها

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

سادگی و ارزانی

وایرفریم‌ها، اصول خیلی پیچیده‌ای ندارند. برای همین می‌توان با ساده‌ترین امکانات و کمترین هزینه آن‌ها را ترسیم کرد. خیلی از طراحان، تنها چیزی که برای رسم وایرفریم نیاز دارند، یک خودکار و یک برگه کاغذ است.

انواع وایرفریم

با توجه به میزان جزئیات ترسیم‌شده، وایرفریم‌ها را می‌توان به سه دسته‌ی زیر تقسیم کرد:

• Low-fidelity
• Mid-fidelity
• High-fidelity

در هر مرحله، جزئیات طرح، بیشتر ترسیم می‌شود. در ادامه، با ویژگی‌های هر کدام از این انواع، بیشتر آشنا می‌شویم.

Low-fidelity

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

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

Mid-fidelity

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

High-fidelity

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

ابزارهای طراحی وایرفریم

وایرفریم را می‌توان با یک کاغذ و قلم یا نرم‌افزارهای ساده‌ای مانند Paint در ویندوز هم طراحی کرد. اما برخی از نرم‌افزارها هم هستند که کار رسم وایرفریم را ساده‌تر می‌کنند. برخی از پراستفاده‌ترین این نرم‌افزارها را در ادامه، بررسی می‌کنیم.

Adobe XD

یکی از قدیمی‌ترین نرم‌افزارهای طراح رابط کاربری، ابزاری محبوب برای رسم وایرفریم‌ها در سطوح مختلف است. این نرم‌افزار با کیت‌های آماده‌ای که دارد، می‌تواند کار رسم وایرفریم را بسیار ساده و سریع کند. استفاده از Adobe XD رایگان است.

Balsamiq

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

Sketch

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

Figma

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