وایرفریم

وایرفریم چگونه طراحی می شود ؟

 وایرفریم (wireframe)، که به عنوان طرح اولیه و «بلوپرینت» (blueprint) نیز شناخته می‌شود، یک راهنمای تصویری است که اسکلت و چارچوب کلی یک وب سایت را نمایش می‌دهد.

اگر لغت انگلیسی  wire frame را کلمه به کلمه معنی کنیم، “سیم کشی قاب” معنی میدهد.

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

بیشتر افراد بر این باورند که پروتوتایپ ،وایرفریم و موکاپ سه موضوع یکسان هستند و اغلب تلاش می کنند این سه واژه را به جای یکدیگر به کار ببرند.

مشکلی که در این دیدگاه ساده شده وجود دارد این است که آنها هرگز  نمی توانند انتظار درستی از کار طراح تجربه کاربری داشته باشند و اغلب سردرگم می شوند.

اشتباه گرفتن وایرفریم با نمونه اولیه  همانند این است که فرض کنید یک طرح معماری و خانه دو موضوع یکسان هستند.

 

کاربرد وایرفریم ها

وایرفریم‌ها توسط افراد گوناگون و در رشته‌های مختلف مورد استفاده قرار می‌گیرند.

توسعه‌دهندگان : یافتن درک عمیق از عملکرد سایت

طراحان : برای فرآیند رابط کاربری (UI) استفاده می‌کنند.

طراحان تجربه کاربری (UX) : راه‌های ناوبری بین صفحات مختلف را نشان میدهند.

مدیران تولید و تحلیلگران کسب و کار: اطمینان از لحاظ شدن اهداف مدنظرشان در طراحی

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

مشخص شدن نیازهای مشتری

اجرای ایده های بهتر در زمان کمتر

صرفه جویی در زمان،هزینه و انرژی

افزایش سرعت پیشرفت پروژه

 تصویر روشن از اهداف و نیازهای مشتری

مشخص بودن طرح کلی و عدم سردرگمی

تعیین معماری محتوای وب سایت

ایجاد دید بصری از وب سایت پیش از شروع طراحی سایت

مشخص کردن عناصر اصلی قالب و المان ­های آن

نشان دادن عملکرد و اولویت اجزاء مختلف یک صفحه و ناوبری صفحه

تغییر و تنظیم راحت عناصر و بخش ­های مختلف

طراحی کاربرپسند توسعه­ ی محتوا

بهبود عناصر رابط کاربری و عناصر تعاملی و ارزیابی اثر بخشی کلی آن­ها

مشخص­ سازی ابزارهای مورد نیاز جهت برنامه نویسی و طراحی سایت

مشخص­س ازی تعداد توابع موجود به منظور اعمال در وب سایت

 

چگونه یک وایر فریم بسازیم؟

 1- ایجاد وایرفریم را با آوردن کلیات پروژه به صورت یک طرح کلی روی کاغذ آغاز کنید.

 2-بی خیال رنگ در وایر فریم شوید

 3-وایر فریم را ساده طراحی کنید

 4-استفاده از داده های نمونه مناسب در وایر فریم

 5-  یاداشت نوشتن یا حاشیه نویسی در مواقع لزوم

 6-  از سیستم شبکه ای و قابهای چهار گوش استفاده کنید

 7- طرح ها، مدل ها و سمبل هایی خلق کنید که قابلیت استفاده چند باره داشته باشند

 8-  ابزار مناسب را برای انجام کار انتخاب کنید

برای کشیدن یک وایر فریم نیاز به ابزار خاصی نیست و راه های زیادی برای این کار وجود دارد،استفاده از یک قلم و کاغذ معمولی!

استفاده از برنامه های گرافیکی ،نرم افزار paint،photoshop و…

چند نرم افزار مهم دیگر در این زمینه عبارتند از :

Sketch:

این نرم افزار قابلیت مورد استفاده قرار گرفتن با نرم افزارهای دیگر مانند InVision را دارد.

Affinity Designer:

یک نرم افزار سبک برای خلق تصاویر برداری است که تمام ابزار لازم را در اختیار طراح قرار میدهد.

Pencil project:

یک نرم افزار اپن سورس محسوب می شود، که دارای ابزار و قالبهای مشخص برای طراحی Android, IOS و غیره.

شما حتی می توانید از این نرم افزار برای ایجاد وایرفریم های وب سایت ها و یا نرم افزار های موبایلی استفاده کنید.

وب سایت هایی هم برای ساختن Wireframe وجود دارد که از معروف ترین آنها عبارتند از :

cacoo.com  / gomockingbird.com / wireframe.cc / lumzy.com

 9- انواع مختلف وایر فریم ها را بشناسید

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

وایرفریم با کمترین جزئيات (Low-Fidelity wireframes)

در این حالت با وایرفریم‌های سیاه و سفیدی طرف هستیم که تمرکز روی عملکرد یک صفحه‌ دارند

کاملا ابتدایی است و هیچ اثری از هیچ گونه جزئیات و یا حاشیه دیده نمی شود

با آن ایجاد یک وایرفریم بسیار هم راحت و سریع است و هدف اولیه آن شروع پروژه است.

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

وایرفریم با جزئیات متوسط (Medium-fidelity wireframes)

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

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

استفاده از تصاویر و همچنین یادداشت برای توضیح بیشتر قسمت‌های مختلف در این وایرفریم مرسوم است.

 وایرفریم با جزئیات زیاد (High-fidelity wireframes)

این وایرفریم‌ها تنها توسط ابزارهای دیجیتال تولید می‌شوند.

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

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

 10-  هر چقدر که می توانید سعی در گرفتن بازخورد داشته باشید.

یکی از مزایای بسیار مهم و غیر قابل انکار استفاده از وایرفریم ها سریع بودن آنهاست.

شما می توانید آن را با افرادی که از قبل روی این پروژه کار می کردند با اشتراک بگذارید.

بازخوردهای لازم را در هر چه زود تر بگیرید و خود را برای حل مشکلات احتمالی آماده کنید.

 

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

– تحقیق دربارهWireframe

اگر می‌خواهید wireframe های خوبی خلق کنید، باید تحقیق کنید کاربران به چه چیزی نیاز دارند و چه می‌خواهند.

– ساده سازی

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

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

– قابل ‌فهم بودن

در wireframe های خود حاشیه‌نویسی کنید تا درک و فهم آن بیشتر شود. با خواندن توضیحات مربوط به بعضی المان‌ها یا موارد تعاملی، راحت‌تر می‌توانیم نحوهٔ عملکرد آن را بفهمیم.

– از بعضی قسمت‌های اپلیکیشن خود چشم‌ پوشی نکنید
حتماً باید Wireframe همهٔ اجزای اپلیکیشن خود را بسازید. چون خطر از دست رفتن بعضی قسمت‌های حیاتی سایت از بین می‌رود؛ قسمت‌هایی که بر روی تجربهٔ کاربری اثرگذار است.

– با ابزارهای دیجیتال شروع نکنید

در اکثر موارد بهتر است با کاغذ و قلم شروع به کار کنید. ابتدا ایده‌های خود را ترسیم کنید سپس از ابزارهای دیجیتال استفاده کنید.

–  از رنگ‌ها استفاده نکنید

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

–  خیلی شلوغ نکنید

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

شاید نیاز باشد موارد زیادی طراحی کنید اما فقط یک یا دو Wireframe را برگزینید