وایرفریم (Wireframe) چیست؟ معرفی انواع وایرفریم برای طراحی پروژه

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

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

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

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

وایرفریمینگ چه زمانی ایجاد می ‌شود؟

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

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

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

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

• آن‌ها مفهوم را متمرکز بر کاربر نگه می‌دارند
• ویژگی‌های وبسایت را روشن و تعریف می‌کنند
• فرایند ساخت وایرفریم‌ها سریع و ارزان است

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

وایرفریم مفهوم را روی کاربر متمرکز می کند

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

وایرفریم ویژگی های وب سایت را به روشنی تعریف می کند

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

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

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

وایرفریم ها سریع و ارزان ساخته می شوند

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

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

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

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

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

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

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

وایرفریم با کیفیت متوسط

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

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

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

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

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

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

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

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

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

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

تفاوت وایرفریم‌ های وب سایت و وایرفریم ‌های موبایل چیست؟

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

اندازه

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

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

طرز کار

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

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

اثر متقابل

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

برای ایجاد وایرفریم از چه ابزارهایی استفاده می شود؟

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

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

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

جمع بندی

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