تفاوت طراحی وایرفریم و موکاپ

وایرفریم و موکاپ

تفاوت طراحی وایرفریم و موکاپ

وایرفریم و موکاپ

وایرفریم و موکاپ

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

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

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

وایرفریم و موکاپ

چند ویژگی خاص وایرفریم در زیر آمده است:

بخش های اصلی محتوا را نشان می دهد.
کلیت و ساختار طرح را ترسیم می کند.
ساده ترین طرح از یک رابط کاربری(UI) را نشان می دهد.

وایرفریم و موکاپ

راه های مختلفی برا ایجاد یک وایرفریم وجود دارد:

یکی از این روش ها طراحی اولیه آن روی کاغذ است

راه دیگر، استفاده از ابزار های ایجاد وایرفریم مانند UXPin، Balsamiq و … است.

ابزارهای زیادی برای وایرفریمینگ وجود دارد که با یک جستجوی ساده می توانید ابزار مناسب خود را پیدا کنید.

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

وایرفریم و موکاپ

یک وایرفریم نمایش طرح و راهنمای تصویری از طرح است. این مورد باید به دقت نشان دهنده موارد زیر باشد:

• گروه اصلی محتوا

• ساختار اطلاعات( جایی که اطلاعات باید قرار داده شود)

• توصیف و تجسم اصلی کاربر( روابط کاربری)

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

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

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

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

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

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

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

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

وایرفریم و موکاپ

وایرفریم و موکاپ

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

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

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

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

وایرفریم هایی که در بافت کل طرح قرار می گیرند می توانند یک روش موثر در مراحل اولیه یک پروژه پیچیده باشند.

وایرفریم و موکاپ

وایرفریم و موکاپ

موکاپ (Mockup) چیست؟

وایرفریم و موکاپ

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

با این حال، ماکاپ ویژگی های عملکردی محصول را ندارد (درست مانند وایرفریم) مثلا کاربر نمی تواند روی دکمه ها کلیک کند و تنها ظاهر آن ها را خواهد دید. بر خلاف وایرفریم، ماکاپ یک نمایش با کیفیتhigh-fidelity)) یا با کیفیت متوسط و واقعی تر از طراحی است.

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

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

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

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

وایرفریم و موکاپ

موکاپی که به خوبی ایجاد شده است ویژگی های زیر را خواهد داشت:

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

• می تواند افراد را تشویق کند به طور واقعی قسمت بصری پروژه را بررسی کنند.

معمولا بیشتر افراد موکاپ را با وایر فریم اشتباه می گیرند.

وایرفریم و موکاپ

وایرفریم و موکاپ

چه مواقعی می توان از موکاپ استفاده کرد؟

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

وایرفریم و موکاپ

خلاصه وایرفریم و موکاپ:

از کجا باید کار خود را شروع کنیم؟قبل از اینکه بخواهید در فرایند طراحی خود یک راه ارتباطی انتخاب کنید، به موارد زیر نیاز خواهید داشت:

• مشخص کردن مشکلاتی که در حال حل کردن آن ها هستید.

• شناسایی گروه هدف

• درک و شناسایی کارهایی که رقبا در این حوزه انجام داده اند.

• تنظیم نیازمندی های کل

وایرفریم و موکاپ

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

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

Share this post

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *