جامعه گیک‌های کامپیوتر

تعاریف سه اصطلاح وایرفریم، ماکاپ و پروتوتایپ

مقالات/ طراحی رابط و تجربه کاربری دوشنبه, 04 اسفند 1399 مهسا پرتوی

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

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

 

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

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

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

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

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

 

 

 

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

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

تفاوت گرافیست و طراح رابط و تجربه کاربری

 

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

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

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

 

 

بر خلاف وایرفریم، شما نمی‌توانید برای ماکاپ طرح اولیه بکشید. شما احتمالا نیاز به استفاده از یک ابزار یا نرم افزار ایجاد ماکاپ دارید. از این ابزار‌ها نیز نمونه‌های زیادی وجود دارد. می‌توانید Marvel، InVision یا Moqups را امتحان کنید.

همچنین، اگر می‌خواهید برخی از ماکاپ های عالی موجود را ببینید، می‌توانید به dribbble مراجعه کنید.

 

پروتوتایپ (Prototype) چیست؟

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

تفاوت بین محصول نهایی و پروتوتایپ این است که در مورد پروتوتایپ رابط کاربری(UI) و بک اند (Backend) که وظیفه کنترل محتوا را بر عهده دارد اغلب به یکدیگر متصل نیستند. پروتوتایپ برای کاهش هزینه‌های توسعه محصول تا زمان تایید نهایی UI تهیه می‌شود. پس از آزمایش پروتوتایپ، تیم می‌تواند به سراغ برنامه‌نویسی برود.

یکی از مزایای پروتوتایپ این است که بسیار تعاملی است و کاربران را قادر می‌سازد تا رابط کاربری(UI) را تجربه کرده و هر چه درمورد آن دوست داشته یا دوست ندارند را پیدا کنند. Mockplus، Adobe XD ابزارهایی برای ایجاد پروتوتایپ هستند که می‌توانید آن‌ها را امتحان کنید.

فضای رنگ

 

 

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

معرفی فریمورک محبوب vue


ذخیره مقاله:

اشتراک گذاری:





مطالب پیشنهادی



              
                 انواع پردازنده
انواع پردازنده(CPU)

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


              
                 امنیت شبکه لایه بندی شده
امنیت شبکه لایه بندی شده (قسمت دوم)

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


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

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


نظری برای نمایش وجود ندارد. شما اولین نظر باشید.


ارسال دیدگاه

برای ثبت دیدگاه باید ابتدا وارد شوید