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

هر پروژه خلاقانه‌ای یک نقطه شروع دارد؛ نوشتن طرح کلی برای یک مقاله یا کشیدن طرحی اولیه برای یک تصویر دیجیتال، می‌توانند مصداقی از این نقطه شروع باشند. در همین راستا، طراحی وایرفریم (Wireframe)، نقطه‌ شروعی برای طراحی یک اپلیکیشن‌ است.

در واقع Wireframeها، ستون فقرات هر وب‌سایت و برنامه‌ای هستند که استفاده می‌کنید. وایرفریم یک طرح دوبعدی از محصول است که کلیات ساختاری آن را بدون توجه به جنبه‌های زیبایی و ریزعملکردها و … مشخص می‌کند. طراحان تجربه کاربری (UX) و تعامل کاربری، از وایرفریم‌ها برای به تصویر کشیدن ایده‌هایشان استفاده می‌کنند؛ چرا که وایرفریم‌ها می‌توانند به راحتی سفارشی شوند تا ایده‌ها را برای ساخت و توسعه آماده کنند.

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

وایرفریم (Wireframe) چیست؟

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

وایرفریم‌ها را بسته به جزئیات مورد نیاز، می‌توان با دست یا به صورت دیجیتالی ترسیم کرد و معمولا توسط طراحان UX استفاده می‌شود. این فرایند به همه ذی‌نفعان اجازه می‌دهد تا قبل از اینکه توسعه‌دهندگان طراحی سایت و طراحی رابط کاربری (UI) را شروع کنند، در مورد جای قرار گرفتن اطلاعات به توافق برسند.

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

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

طراحان با استفاده از بینش‌های ارزشمند به دست آمده از بازخورد کاربر، می‌توانند نسخه بعدی و دقیق‌تر طرح محصول، مانند پروتوتایپ (Prototype) یا ماکاپ (Mockup) را بسازند.

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

وایرفریم‌ها سه هدف کلیدی را دنبال می‌کنند: ایده‌های کلی را متمرکز بر کاربر نگه می‌دارند، ویژگی‌های وب‌سایت را مشخص و تعریف می‌کنند و ایجادشان سریع و ارزان است. در ادامه هر یک از این اهداف را با جزئیات بیشتری بررسی کنیم.

وایر فریم‌ها (Wireframe)، ایده کلی را متمرکز بر کاربر نگه می‌‌دارند

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

همچنین داشتن وایرفریم راه مناسبی برای طراحان است تا بتوانند نحوه تعامل کاربر با رابط را بسنجند. از طرف دیگر، طراحان می‌توانند با استفاده از متن‌های Lorem Ipsum که به‌عنوان یک مکان‌نما برای محتوای آینده عمل می‌کنند، سوالاتی مانند «انتظار دارید چه چیزی در اینجا نوشته شود؟» از کاربران بپرسند.

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

وایرفریم‌ها (Wireframe)، ویژگی‌های وب‌سایت را مشخص و تعریف می‌کنند

زمانی که در حال ارائه ایده‌های خود به کارفرماها (Client) هستید، آن‌ها ممکن است با واژگان فنی مورد استفاده شما مثل هیرو ایمیج (Hero Image) یا کال تو اکشن (Call to Action)، آشنا نباشند.

نشان دادن ویژگی‌های خاص محصول دیجیتال به صورت وایرفریم، نحوه عملکرد و هدف محصول را برای کارفرماهایتان واضح می‌کند.

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

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

همانطور که قابل حدس است، مرحله Wireframing زمانی است که ذی‌نفعان می‌توانند بی‌رحمانه رفتار کنند!

ایجاد وایرفریم‌ها، سریع و آسان است

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

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

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

سه نوع اصلی از وایرفریم‌ها وجود دارد: وایرفریم‌های با وفاداری پایین (Low-Fidelity)، وایرفریم‌های با وفاداری متوسط (Mid-Fidelity) و وایرفریم‌های با وفاداری بالا (High-Fidelity). مهم‌ترین عامل تمایز بین این وایرفریم‌ها، میزان جزئیات آن‌هاست. در ادامه در مورد هر کدوم به اختصار توضیح می‌دهیم.

وایرفریم‌های با وفاداری پایین (Low-Fidelity)

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

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

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

وایرفریم‌های با وفاداری متوسط (Mid-Fidelity)

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

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

اگرچه وایرفریم‌های با وفاداری متوسط هنوز به مراحل اولیه محصول مرتبط هستند، اما معمولا با استفاده از ابزارهای وایرفریمینگ دیجیتالی مانند Sketch یا Balsamiq ایجاد می‌شوند.

وایرفریم‌های با وفاداری بالا (High-Fidelity)

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

مقایسه وایرفریم‌های وب‌سایت و وایرفریم‌های اپلیکیشن

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

اندازه

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

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

رفتار

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

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

تعامل

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

ابزارهای مفید برای ساخت وایرفریم

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

Sketch یک ابزار طراحی رابط کاربری با امکان ایجاد وایرفریم است که از ترکیبی از تابلوهای هنری (Art Board) و اشکال طراحی برداری (Vector) استفاده می‌کند طراحان بتوانند به راحتی وایرفریم‌ها را بر روی بوم (Canvas) مبتنی بر پیکسل ایجاد کنند. اسکچ همچنین دارای ویژگی Symbols است؛ به این معنی که شما می‌توانید پس از ایجاد عناصر UI دوباره از آن‌ها استفاده کنید.

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

نحوه طراحی و رسم وایرفریم‌ها

برای رسم وایرفریم‌های کاربردی، باید چند مرحله را پشت سر بگذارید. این مراحل شامل آشنایی با دانش اولیه طراحی، شناخت کاربران، آشنایی با کلیت وایرفریمینگ (Wireframing) و در نهایت طراحی می‌شود.

۱. کسب دانش اولیه طراحی محصول

اولین مرحله در این فرایند، آشنایی با دانش اولیه طراحی محصول است. شما باید المان‌ها و تعاریف کلی طراحی و اجزای یک محصول دیجیتال (مانند مدال‌ها و فرم‌ها در وب‌سایت و …) آشنا باشید. بدون آشنایی با این مفاهیم، احتمال اینکه بتوانید وایرفریمی کاربردی طراحی کنید بسیار کم است.

۲. تحقیقات کاربری

پس از اینکه با مفاهیم طراحی محصول آشنا شدید، نوبت به آشنایی با کاربران می‌رسد. در این مرحله می‌توانید با کمک UX ریسرچ یا تحقیقات کاربری، با کاربران و نیازمندی‌های آن‌ها آشنا شوید، جریان‌های کاربری (User flows) را رسم کنید و بر این اساس، طرح اولیه محصول و معماری اطلاعات را به دست آورید. البته اگر در یک تیم بزرگ مشغول به کار باشید، بخش عمده این فرایند بر عهده محقق کاربری (UX Researcher) خواهد بود.

۳. شناخت و انتخاب وایرفریم مناسب

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

۴. طراحی وایرفریم

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

مقایسه وایرفریم، ماکاپ و پروتوتایپ

به طور کلی سه نوع تصویر داریم که در طراحی محصول‌های دیجیتال استفاده می‌شوند: وایرفریم‌ها (Wireframe)، ماکاپ (Mockup) و پروتوتایپ (Prototype).
به طور کلی، همانطور که تا اینجا هم گفتیم، وایرفریم‌ها پایه‌ای‌‌تر بوده و تصاویر سیاه و سفیدی هستند که بر روی کاری که محصول یا ویژگی جدید انجام خواهد داد، تمرکز می‌کنند.
در همین حال موکاپ‌ها تصاویر واقعی و بسیار شبیه به طرح نهایی محصول هستند و نشان می‌دهند که یک محصول یا ویژگی چگونه دیده می‌شود.
همچنین پروتوتایپ‌ها، تصاویری با وفاداری بسیار بالاتر به محصول نهایی هستند که نحوه تعامل کاربر با محصول یا ویژگی جدید را هم نشان می‌دهند.

سخن پایانی

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

سوالات متداول

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

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

انواع وایرفریم کدامند؟

در حالت کلی سه نوع وایر فریم داریم: وایرفریم‌های با وفاداری پایین (Low-Fidelity)، وایرفریم‌های با وفاداری متوسط (Mid-Fidelity) و وایرفریم‌های با وفاداری بالا (High-Fidelity).

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

ابزارهای اسکچ (Sketch)، بالزامیک (Balsamiq) و فیگما (Figma) از بهترین ابزارهای ایجاد وایرفریم هستند.