مهران  |  Mehran Hadian
مهران | Mehran Hadian
خواندن ۴ دقیقه·۵ ماه پیش

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

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


۱. وایرفریمینگ (Wireframing) چه زمانی انجام می شود؟ و آیا نمونه اولیه (Prototype) متفاوت است؟

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

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

۲. هدف از Wireframing در UX چیست؟

وایرفریم‌ها سه هدف کلیدی را دنبال می‌کنند:

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

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

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

با استفاده از متن مکان‌نما (Lorem ipsum)، طراحان می‌توانند از کاربران بپرسند "انتظار دارید اینجا چه نوشته شود؟" این بینش‌ها به طراحان کمک می‌کند محصولاتی آسان و بصری ایجاد کنند.

روشن شدن و مشاهده ویژگی‌ها، ناوبری و نحوه کار همه موارد با تجسم آن‌ها

  • وایرفریم‌ها ویژگی‌ها و ناوبری را روشن می‌کنند. وقتی ایده‌ها به مشتریان منتقل می‌شود، اصطلاحاتی مانند "تصویر قهرمان - hero image" یا "دعوت به اقدام - call to action" ممکن است برای آن‌ها قابل درک نباشد. وایرفریم‌ها به وضوح نحوه عملکرد و هدف ویژگی‌ها را نشان می‌دهند.

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

ایجاد سریع و ارزان آن‌ها

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

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

۳. انواع مختلف وایرفریم (Wireframe) چیست؟

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

وایرفریم با کیفیت پایین (Low-fidelity):

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



وایرفریم با کیفیت متوسط (Mid-fidelity):

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

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



وایرفریم با کیفیت بالا (High-fidelity):

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


۴. چه چیزی در وایرفریم گنجانده شده است؟

عناصر معمول در وایرفریم‌ها شامل موارد زیر هستند:

  • لوگوها
  • فیلدهای جستجو
  • سرصفحه‌ها
  • دکمه‌های اشتراک‌گذاری
  • متن مکان‌نما (Lorem Ipsum)

وایرفریم‌های با وفاداری بالا ممکن است شامل موارد زیر باشند:

  • سیستم‌های ناوبری
  • اطلاعات تماس
  • پاورقی‌ها

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

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

به یاد داشته باشید که وایرفریم‌ها ویژگی‌های تعاملی مانند کشویی‌ها، حالت‌های شناور یا آکاردئونی را نشان نمی‌دهند.

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

اندازه:

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

رفتار:

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

تعامل:

  • وبسایت: محتوای آنلاین ارائه می‌شود.
  • اپلیکیشن موبایل: ممکن است محتوا را دانلود کرده و به صورت آفلاین استفاده کند. "حالت‌های آفلاین" باید در وایرفریم منعکس شوند.
وایرفریم‌های موبایل و دسکتاپ نیاز به ملاحظات خاصی دارند که باید در طراحی در نظر گرفته شود.


طراحی محصولوایرفریمرابط کاربریطراحی رابط کاربریطراحی تجربه کاربری
User Interface Designer
شاید از این پست‌ها خوشتان بیاید