وایرفریم (Wireframe) چیست؟

5 دقیقه زمان مطالعه
1402/04/13
0 نظر

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

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

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

وایرفریم (Wireframe) چیست؟

An example of Wireframes

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

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

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

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

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

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

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

Purpose of creating wireframes

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

وایرفریم‌ها (Wireframe)، ایده کلی را متمرکز بر کاربر نگه می‌‌دارند

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

همچنین داشتن وایرفریم راه مناسبی برای طراحان است تا بتوانند نحوه تعامل کاربر با رابط را بسنجند. از طرف دیگر، طراحان می‌توانند با استفاده از متن‌های Lorem Ipsum که به‌عنوان یک مکان‌نما برای محتوای آینده عمل می‌کنند، سوالاتی مانند «انتظار دارید چه چیزی در اینجا نوشته شود؟» از کاربران بپرسند.

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

وایرفریم‌ها (Wireframe)، ویژگی‌های وب‌سایت را مشخص و تعریف می‌کنند

زمانی که در حال ارائه ایده‌های خود به کارفرماها (Client) هستید، آن‌ها ممکن است با واژگان فنی مورد استفاده شما مثل هیرو ایمیج (Hero Image) یا کال تو اکشن (Call to Action)، آشنا نباشند.

نشان دادن ویژگی‌های خاص محصول دیجیتال به صورت وایرفریم، نحوه عملکرد و هدف محصول را برای کارفرماهایتان واضح می‌کند.

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

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

همانطور که قابل حدس است، مرحله Wireframing زمانی است که ذی‌نفعان می‌توانند بی‌رحمانه رفتار کنند!

ایجاد وایرفریم‌ها (Wireframe)، سریع و آسان است

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

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

انواع وایرفریم‌ها

سه نوع اصلی از وایرفریم‌ها وجود دارد: وایرفریم‌های با وفاداری پایین (Low-Fidelity)، وایرفریم‌های با وفاداری متوسط (Mid-Fidelity) و وایرفریم‌های با وفاداری بالا (High-Fidelity). مهم‌ترین عامل تمایز بین این وایرفریم‌ها، میزان جزئیات آن‌هاست. در ادامه در مورد هر کدوم به اختصار توضیح می‌دهیم.

وایرفریم‌های با وفاداری پایین (Low-Fidelity)

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

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

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

Low-Fidelity Wireframes

وایرفریم‌های با وفاداری متوسط (Mid-Fidelity)

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

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

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

Mid-Fidelity Wireframes

وایرفریم‌های با وفاداری بالا (High-Fidelity)

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

High-Fidelity Wireframes

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

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

اندازه

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

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

رفتار

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

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

تعامل

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

ابزارهای مفید برای ساخت وایرفریم

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

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

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

مقایسه وایرفریم، ماکاپ و پروتوتایپ

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

سخن پایانی

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

امتیاز شما به این مقاله:
نویسنده:

مطالب مرتبط