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

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

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

مزایای وایر فریم

Wireframes به سازمان های تولیدی کمک می کند تا هم به صورت بصری ارتباط برقرار کنند و هم برای برنامه ها و وب سایت یک پیش نمایش کلی از لحاظ طراحی داشته باشند.
در اینجا چند نمونه از کاری که وایرفریم می تواند برای یک سازمان انجام دهد آورده شده است:

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

چه کسی مسئول ایجاد وایرفریم است؟

در بسیاری از سازمان‌ها، طراحان محصول مانند طراحان UX و UI مسئول طراحی وایرفریم هستند. آنها این کار را در مراحل اولیه برنامه ریزی یک محصول با هماهنگی تیم مدیریت محصول انجام می دهند.

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

1. هدف وب سایت را مشخص کنید

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

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

2.بازدید کاربر را بسنجید

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

3. اندازه وایر فریم وب سایت خود را تعیین کنید.

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

اندازه وایرفریم برای صفحه نمایش موبایل:

1080 پیکسل عرض x 1920 پیکسل طول

اندازه وایرفریم برای صفحه نمایش تبلت:

تبلت 8 اینچی - 800 پیکسل عرض x 1280 پیکسل طول

تبلت 10 اینچی - 1200 پیکسل عرض x 19200 پیکسل طول

اندازه وایرفریم برای صفحه دسکتاپ:

768 پیکسل عرض x 1366 پیکسل طول

4. طراحی وایرفریم وب سایت خود را شروع کنید.

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

5. نقاط تبدیل را تعیین کنید.

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

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

6.مراحل اضافی را حذف کنید.

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

7. در مورد وایرفریم بازخورد دریافت کنید.

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

نمونه های Wireframe

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

1. طرح

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

2. طراحی قاب وایر فریم با دست

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

3. وایرفریم با کیفیت پایین

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

4. وایرفریم موبایل با کیفیت پایین

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

5. وایرفریم با کیفیت بالا

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

6. وایرفریم تعاملی با کیفیت پایین

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

7. موکاپ Wireframe

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

8. Mockup Wireframe تعاملی

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

اینها تنها چند نمونه هستند اما نشان می دهند که چگونه می توان به روش های مختلف به وایرفریم وب سایت رسید.

9. وب سایت رایگان Wireframe

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

10. وایر فریم موبایل

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

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

Mockup و Wireframe و Prototype

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

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

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

بهترین راه برای خلاصه کردن تفاوت بین مدل موکاپ در مقابل وایرفریم در مقابل نمونه اولیه، نشان دادن یک مثال است:

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

در اینجا یک مثال از یک وایرفریم در مقابل موکاپ آورده شده است:

در اینجا مثال دیگری وجود دارد که یک ماکت در مقابل نمونه اولیه را نشان می دهد:

چگونه یک وب سایت Wireframe فرآیند طراحی را بهبود می بخشد

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

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