وایرفریم (wireframe) چیست و چگونه طراحی می شود؟

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

wireframe چیست؟

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

هدف از طراحی wireframe چیست؟

وایرفریم‌ ها را به سه دلیل مهم که در ادامه به آنها اشاره می‌ کنیم طراحی می‌ کنند:

1 . تمرکز wireframe بر روی کاربر

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

2. تعریف ویژگی‌ های محصول

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

3. ساخت آسان و ارزان wireframe

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

در طراحی وایرفریم این نکات را رعایت کنید

• در ابتدا به خواسته‌ های مشتری دقت کنید و نیازهای او را بشناسید.
• سعی کنید با ساده سازی طرح، استفاده از کاغذ و قلم را جایگزین ابزارآلات دیجیتالی کنید.
• پس از آنکه وایرفریم را طراحی کردید، به جهت نیاز به تغییرات احتمالی آن را به مشتری نشان دهید.
• وایرفریم را ساده، واضح و قابل درک ترسیم کنید.
• از رنگ‌ ها خیلی کم (حداکثر ۳ یا ۴ رنگ) استفاده نمایید.
• پس ازآنکه تغییرات لازم را بر روی طرح کاغذ و قلم اعمال کردید، آن را با ابزارهای دیجیتال به صفحات دیجیتال یا تصاویر jpg تبدیل نماید.

نحوه‌ طراحی وایرفریم چگونه است؟

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

1. طراحی وایرفریم با کاغذ و قلم
2. رسم و طراحی Wireframe با استفاده از نرم افزارهای طراحی

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

1. ابتدا در جلسه‌‌ ای که با تیم طراحی UX برگزار می‌ شود، اهداف طراحی وایرفریم مشخص می‌ گردد.
2. سپس، مشتری نیازهای کاربران سایت خود از جمله اینکه سایت دارای چند صفحه و در هر صفحه چه عناصر و المان‌ هایی به کار برده شود را بیان کرده و در باره ساختار سایت پیشنهادات خود را ارائه می‌ دهد.
3. تیم طراحی تمام داده‌ های مربوطه را جمع آوری می‌ کند و طبق داده‌ های حاصل شده، طراحی وایرفریم را آغاز می‌ نماید.
4. سپس تیم طراحی، وایرفریم را به مشتری تحویل می‌ دهد. اگر چه در طراحی وایرفریم، ساختار و ویژگی‌ های صفحات تعیین می‌ شوند، اما ممکن است بعد از هر طرحی که ارائه می‌ دهید، لازم باشد چندین مرتبه آن را ویرایش کنید.
5. در این مرحله به تست کاربر نزدیک می‌ شویم. بنابراین ممکن است در این مرحله، مشتری با دیدن دموی محصول تمایل به پیاده سازی ایده‌ های جدید داشته باشد.
6. شناسایی و رفع ایرادات محصول، پیش از صرف زمان و هزینه زیاد، از دیگر مزیت‌های ساخت وایرفریم می‌باشد.
7. در مرحله آخر طراحی وایرفریم، تیم طراحی UX به اصلاح و اعمال ایده‌های مشتری می‌ پردازد و پس از کسب رضایت مشتری، به کمک تیم طراحی UI، آن را به یک ماکت تبدیل می‌ کنند. دقت کنید که المان‌ های به کار رفته در طراحی وایرفریم‌ ها به صورت سمبل و نماد هستند و تنها معرف المان‌ های واقعی طرح نهایی خواهند بود.

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

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

1. low-fidelity
2. mid-fidelity
3. high-fidelity

1. وایرفریم‌ های با کیفیت پایین (Low-Fidelity)

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

2. وایرفریم‌ های با کیفیت متوسط (Mid Fidelity)

کاربردی‌ ترین نوع وایرفریم‌ها، mid-fidelity می‌ باشند. جزئیات در این نوع وایرفریم، بیشتر از مدل low-fidelity است. این موضوع به اندازه‌‌ای واضح است که جزئیات یک عنصر، به وضوح با سایر عناصر کاملا متفاوت است. این نوع وایرفریم دارای طرح کلی سیاه و سفید است اما گاهی از سایه‌ های خاکستری به جهت برجسته شدن عناصر در آن بهره می‌ برند. این وایرفریم، هنوز هم در قسمت مراحل ابتدایی طراحی سایت و طراحی اپلیکیشن می باشد. اما، طراحان می‌ توانند برای طراحی آن، از ابزارهای زیر استفاده کنند:

• figma
• ps
• Balsamiq
• Sketch

3. وایرفریم‌ های با کیفیت بالا (High Fidelity)

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

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

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

• Adobe XD: نرم افزار Adobe XD یکی از بهترین نرم افزارهای طراحی وایرفریم می‌ باشد، این نرم افزار امکانات وسیعی را در خود جای داده و می‌تواند به عنوان یک نرم افزار‌ قدرتمند طراحی Wireframe کاربرد داشته باشد.
• Figma: از دیگر نرم افزارهایی است که درمیان طراحان وایرفریم، بسیار پرطرفدار است. فیگما نیز مانند Adobe XD مجهز به ابزارهایی است که می‌ تواند به هنگام طراحی وایرفریم‌ ها نیاز مشتریان را برطرف نماید.
• Balsamiq: نرم افزار Balsamiq یک نرم افزار کاملا تخصصی جهت طراحی وایرفریم است. شما می‌ توانید با امکانات تخصصی که این نرم افزار ارائه می‌ دهد طراح‌ هایی را که با کاغذ و قلم پیاده سازی کرده‌‌اید، منتقل کنید و به صورت خودکار به وایرفریم دیجیتالی تبدیل نمایید.

کاربرد وایرفریم در طراحی ux چیست؟

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

بیشتر بخوانید: چرا باید از ریز تعاملات در طراحی اپلیکیشن استفاده کرد؟

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

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

1. اندازه

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

2. رفتار

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

3. تعامل

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

بیشتر بخوانید: ترندها و ایده های طراحی سایت جذاب در 2022

جمع بندی

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