نقش Wireframe در طراحی وب و اپلیکیشن

16 ارديبهشت 1395
علی رضاجو

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

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

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

 

تمرکز Wireframe :

  • تمرکز بر روی نحوه ارائه عملیات و سرویس ها
  • بررسی سناریو ، رفتار و حرکت کاربر
  • اولویت دهی و ارتباط معنادار محتوا و عملیات
  • بررسی قوانین و شرایط دسترسی کاربر به محتوا و عملیات

 

چرا باید از Wireframe  استفاده کرد؟

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

 

چه کسانی طراحی Wireframe می کنند؟

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

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

 

در ادامه یک نمونه اجرایی  که در پروژه طراحی رابط کاربری و تجربه کاربری سایت ibartar.com با نرم افزار Balsamiq انجام داده ام را می توانید مشاهده کنید.

 

Wireframe صفحه آگهی به همراه بخش های مدیریتی 

مشاهده نسخه آنلاین >

نمونه طراحی wireframe

 

Wireframe صفحه جستجو در نقشه

مشاهده نسخه آنلاین >

نمونه طراحی wireframe

 

 

طراحی رابط کاربری صفحه جستجو در نقشه

مشاهده نسخه آنلاین >

 

 

معرفی ابزار Wireframe

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

 

1. Balsamiq Mockups

لایسنس تک کاربره: 89 دلار

پلتفرم: ویندوز / مکینتاش / لینوکس

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

مشاهده سایت >

طراحی wireframe

 

 

2. Axure

لایسنس تک کاربره  Pro/ ماهانه: 29 دلار

پلتفرم: ویندوز / مکینتاش

Axure یک نرم افزار تحت ویندوز و مک است که قابلیت تعامل سازی Wireframe های اجرا شده را نیز دارد و در این ویژگی نسبت به Balsamiq قابلیت بهتری محسوب می شود.

مشاهده سایت >

نرم افزار axure در طراحی wireframe 

 

 

3. Pidoco

لایسنس تک کاربره / ماهانه از: 12 دلار

پلتفرم: وب

Pidoco یک سرویس آنلاین طراحی Wireframe است و از لحاظ امکانات تا حد زیادی تحت تاثیر Axure است ، از مزایای این سرویس، امکان اشتراک گذاری آنلاین Wireframe  با کاربران و بررسی عملکرد آنها است.

مشاهده سایت >

pidoco wireframe 

 

 

4. Marvel Application

لایسنس:  رایگان

پلتفرم: اندروید / iOS

Marvel یک اپلیکیشن حرفه ای جهت طراحی Wireframe  اپلیکیشن است ، شما از طریق این اپلیکیشن می توانید Wireframe های تعاملی بسازید ، امکان تهیه نسخه Apple watch و همچنین نمایش در Apple TV نیز وجود دارد. امکان مدیریت پروژه ها و ساخت نامحدود Wireframe نیز از سایر ویژگی های این اپلیکیشن کاربردی است. در صورت پرداخت 15 ، 19 و 42 دلار می توانید از امکانات بیشتر این اپلیکیشن نیز بهره مند شوید.

مشاهده سایت >

marvel app wireframe

 

 

5. Visio

لایسنس ماهانه از: 13 دلار

پلتفرم: ویندوز

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

مشاهده سایت >
visio wireframe

 

6. iPlotz

لایسنس تک کاربره / ماهانه از: 15 دلار

پلتفرم: وب 

iPlotz یک سرویس آنلاین جهت ساخت Wireframe است که از Flash در محیط خود استفاده میکند شما از طریق این سرویس امکان تهیه نسخه HTML  و اشتراک گذاری صفحات را نیز دارید.

مشاهده سایت >

iplotz wireframe 

 

7. Penultimate

پلتفرم: ipad

Penultimate یک اپلیکیشن حرفه ای طراحی Wireframe در ipad  است ، از قابلیت های خوب این اپلیکیشن ارتباط قوی با اپلیکیشن Evernote است.

مشاهده سایت >

penultimate wireframe

 

8. Pencil Project

لایسنس: رایگان

پلتفرم: ویندوز / مکینتاش

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

مشاهده سایت >

 pencil project wireframe

 

9. Mockflow

لایسنس یک پروژه: رایگان

پلتفرم: وب

سرویس آنلاین Wireframe Pro محصولی از Mockflow  است که علاوه بر ابزار طراحی ، 25 گیگابایت فضای اختصاصی جهت ذخیره اطلاعات و مستندات و دسترسی 5 کاربر برای هر پروژه را به شما می دهد.

مشاهده سایت >

 mockflow wireframe

 

 

10. Framebox

لایسنس: رایگان

پلتفرم: وب

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

مشاهده سایت >

framebox wireframe

 

 

11. iPhone Mockup

لایسنس: رایگان

پلتفرم: وب

iPhone Mockup سرویس رایگان آنلاینی است که در 2 حالت گرافیکی ( illustration , Pencil ) امکان ایجاد Wireframe بر مبنای عناصر پر کاربرد در iOS را فراهم می کند. شما از طریق لینک منحصربفرد تولید شده می توانید طرح خود را با دیگران به اشتراک بگذارید.

مشاهده سایت >

 iphone mockup wireframe

 

 

12. FlairBuilder

لایسنس: 99 دلار

پلتفرم: ویندوز و مکینتاش

FlairBuilder نرم افزاری بر مبنای فریم ورک Adobe Air است که امکان تولید Wireframe ، تهیه نسخه HTML و اشتراک گذاری آن با کاربران را دارید. از ویژگی های این نرم افزار می توان به تولید Wireframe های ریسپانسیو ، استفاده از افکت ها و انیمیشن ها و تعاملی کردن Wireframe  اشاره کرد.

مشاهده سایت >
flair builder wireframe

 

13. Justinmind

لایسنس ماهانه از: 19 دلار

پلتفرم: وب

Justimnd سرویس طراحی Wireframe آنلاینی است که بیش از 500 المان گرافیکی رابط کاربری را به شما ارائه می کند. از ویژگی های این سرویس می توان به امکان تعاملی سازی طرح ها، تست طرح در دستگاه های مختلف، استفاده از افکت ها وانیمیشن های متداول ، اشتراک گذاری صفحات و تهیه بازخورد از کاربران اشاره نمود.

مشاهده سایت >

justmind wireframe

علی رضاجو

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

You have no rights to post comments