تفاوت Wireframe، Prototype و Mockup
قابسازی(Wireframe) ، نمونه اولیه(prototype) و ماکت(Mockup) مواردی هستند که باعث سردرگمی تعداد زیادی از طراحان می شوند. باوجود تجربه فراوان طراحان بسیار دیده شده که در مورد این اصطلاحات سوال می پرسند، بنابراین بسیار ضروری است که یک تعریف و ذهنیت شفاف از چیستی این اصطلاح ها داشته باشیم تا منجر به حل بسیاری از مسائل و حفظ شدن انرژی و زمان شود.
Wireframe چیست؟
یک ساختار کلی از یک وب سایت یا یک نرم افزار است که محتوا و عناصر را شامل می شود. دقیقا مانند طرح(blueprint) یک آسمان خراش است که برای تبدیل شدن به یک سازه نیاز به انجام شدن مقدار زیادی کار توسط تعداد زیادی نیروی انسانی دارد. به همین ترتیب Wireframe نیز نمای ساده ای از پروژه ماست که توسط طراحان UI، UX و IxD باید پیاده سازی شود. به صورت کلی Wireframe یک ساختار طراحی شده ساده و کم جزئیات است که ۳ محتوای مهم و اصلی را دارد:
- شامل اطلاعات اصلی است.
- شکل کلی ساختار و طرح را مشخص می کند.
- نمای بصری و توضیح رابط کاربری است.
جزئیات بصری Wireframe
از نظر بصری wireframe شامل یکسری از محدودیت های بصری می شود که برای ترسیم و کامل کردن آن فقط نیاز به یک سری خط و مربع های ساده و رنگ خاکستری(از کم رنگ تا پررنگ) است.
Wireframe شامل محدودیت های بصری بسیار زیادی است که طراحان به سادگی می توانند با موارد گفته شده آن را پیاده سازی کنند.
ساختار ساده Wireframe
در ساختار wireframe باید جایگاه مربوط به عکس، ویدئو، متن و … را مشخص کنیم. در ادامه جایگاه هر یک از این ها را با علامت های مشخص نشان می دهیم به عنوان مثال برای تعیین جای متن از نوشته های ثابتی به صورت تکراری استفاده می کنیم.
مزیت های wireframe
ساختار wireframe سریع و ارزان است.
به صورت کلی برای قابسازی پروژه باید از ابزارهای مرتبط مثل کاغذ و قلم و یا سیستم Balsamiq استفاده کنیم. البته توصیه می شود برای شروع کار قابسازی حتما از ابزارهای و امکاناتی که باری این کار وجود دارد، استفاده کنید.
در نظرسنجی های انجام شده برای مقایسه بین wireframe ساده و با جزئیات کم و یک wireframe کامل با جزئیات بیشتر، به این نتیجه رسیده اند که دستیابی به wireframe ساده، راحت تر و مهم تر است؛ اما چرا؟ زیرا عمده افراد به عملکرد نرم افزار، داده ها، ساختار، UX، رابط کاربری که ارتباط مستقیم با کارایی دارند توجه می کنند تا دقت به ویژگی های زیبایی شناختی این عناصر. در همین حال می توان به راحتی باتوجه به در خواست های صاحبان کار و یا کاربران تغییرات مورد نیاز را ایجاد کرد، فارغ از اینکه نیاز به کدنویسی و یا انجام کارهای گرافیکی باشد.
ابزارهای طراحی wireframe
کاغذ و قلم
ساده ترین و در دسترس ترین ابزار قابسازی کاغذ و قلم است. بصورت کاملا آزاد و بر روی کاغذ با استفاده از یک قلم و خطوط و مربع های ساده پایه ای ترین حالت wireframe را پیاده سازی می کنیم. به واسطه آن، طراحان ایده های خود را به صورت بصری پیاده کرده و یا با بیان متن مفصل و یا سخن گفتن با مشتریان و مدیران آن ها تشریح می کنند. اما در پروژه های رسمی و شرکت های بزرگ به این شکل استفاده نمی شود.
Balsamiq
گاهی طراحان ترجیح می دهند تا قابسازی را با دقت و ریزکاری بیشتری انجام دهند. Balsamiq امکانات و عناصر مناسبی را برای قابسازی در ۲ حالت مختلف در اختیار طراحان قرار می دهد. حالت دست نوشته در محیط سیاه و سفید طراحان را از چالش های انتخاب رنگ و جلوه های بصری فارغ می کند و تمامی تمرکزشان را متوجه کارایی و ساختار کلی پروژه می کند.
نمونه اولیه (Prototype) چیست؟
نیازمندی های ساخت نمونه اولیه از قابسازی بیشتر است. مهم ترین تفاوت نمونه اولیه این است که از جزئیات بیشتری بهره می برد و بسیار به بهبود نمونه نهایی رابط کاربری کمک می کند. در عین حال با شبیه سازی رابط کاربری امکان تست تجربه کاربری را ممکن می سازد.
مزیت های نمونه اولیه
“یک نمونه سازی تیمی در فضای دوستانه برای برقراری ارتباط قوی تر بین طراحان و توسعه دهندگان مفید است.”
چرا مدل سازی مهم است؟ زیرا عمدتا برای تست محصول استفاده می شود. نمونه سازی اولیه در مقاطع مختلف باعث صرفه جویی در زمان و هزینه توسعه کار خواهد شد. به گونه ای که با استفاده از رابط کاربری تعاملی غیر منطقی، تلاش معماران Back-End را هدر ندهد. بنابراین مدل سازی یک فرآیند عالی برای تست محصول توسط طراحان و توسعه دهندگان است.
فراهم کردن نمونه اولیه برای بازخورد گرفتن از مصرف کنندگان نیز می تواند بسیار مفید بوده و یک بینش کلی در مورد تمام جزئیات محصول در اختیار بگذارد و همچنین برای تمام اعضای تیم توسعه محصول الهام بخش باشد. خیلی از ابزارهای مدل سازی اولیه می توانند یک نمونه موثر و دقیق ایجاد کنند بدون نیاز به حتی یک خط کد نویسی.
هدف اصلی از مدل سازی بسیار مشخص است: شبیه سازی تعامل میان کاربر و محصول به واقع بینانه ترین شکل ممکن. زمانی که یک دکمه فشرده می شود، عمل متناظر با آن باید انجام شود و صفحه متناظر با آن نیز باید ظاهر شود. بهترین تلاش این است که تجربه کامل کار با محصول را شبیه سازی کنیم. زمانی که شما با این سوال مواجه می شوید که ” اگر من این دکمه را فشار دهم چه اتفاقی رخ می دهد؟” شما فقط نیاز دارید تا دکمه را فشار دهید تا ببینید که در نمونه محصول چه اتفاقی رخ می دهد. در واقع این چشمگیرترین و مستقیم ترین راه است.
ویژگی های بصری نمونه اولیه
بی شک نمونه اولیه باید از زیبایی های ظاهریی که یک محصول باید دارا باشد بهره مند باشد و تلاش شود تا نسخه نهایی بهتری توسعه داده شود. اساسا نمونه اولیه یک پوسته است بدون داشتن حتی یک خطی کدنویسی در بخش front و یا back و یا حتی نیاز به درگیری برای توسعه این بخش ها.
تست های نمونه اولیه
تست نمونه اولیه یک گام کلیدی در فرآیند طراحی نمونه اولیه و یک نقطه عطف بسیار مهم در روند کلی کار است. اما اینکه چگونه باید آزمایش کارایی را هدایت کنیم موضوعی است که اکنون قصد داریم در مورد آن صحبت کنیم. یک آزمایش ساده چیزی حدود یک ساعت زمان هزینه می برد و فقط کافی است تا ۵ یا ۶ موقعیت کلیدی را امتحان کنیم. در زیر تعدادی از سوالات پرکاربرد در این زمینه را برای شما آورده ایم:
- کاربر چگونه کار را آغاز می کند؟ (جستجو ویا مرور کردن؟)
- کاربر ابتدا چه کاری انجام می دهد؟ کاری بعدیش چیست؟
- چگونه تصمیم نهایی را می گیرد؟
- آیا آن ها قصد و نیت طرح را درک می کنند؟ یا پیچیدگی در کار است؟
تست یک فرآیند مستمر برای طراحی نمونه اولیه است و ضروری است تا با به صورت مداوم تکرار و با توجه به نتیجه بهبود داده شود.
ابزارهای ساخت نمونه اولیه
MockPlus
MockPlus وب سایتی است شامل ابزارهای طراحی مدل اولیه که امکان ساخت و نمایش سریع نمونه اولیه را فراهم می آورد. این امکان را فراهم می کند تا نمونه های اولیه ای برای موبایل ها (اندروید و iOS) رایانه ها (Windows و Mac) و صفحات وب طراحی شود.
UXPin
UXPin برای شما بیش از ۹۰۰ عنصر مختلف طراحی را از قبل آماده کرده است تا قابسازی و پیاده سازی نمونه اولیه را به سادگی هرچه بیشتر انجام دهید. این خدمت با استفاده از قابلیت واکنش گرایی به کاربران این امکان را می دهد تا نمونه اولیه و قابسازیشان را به صورت واکنش گرا طراحی کنند که بر روی دستگاه های مختلف با کیفیت های تصویر متفاوت قابل امتحان و اجرا باشد.
ماکت چیست؟
ماکت (Mockup) یک سند بصری است که برای ارائه طرح بصری کلی محصول مورد استفاده قرار می گیرد. به بیانی ساده تر ماکت یک نمونه غنی و کامل تر به لحاظ طرح، رنگ، تصویر و دیگر عناصر بصری نسبت به مرحله قابسازی(Wireframe) است. با توجه به غنای طرح ها، رنگ ها و تصاویر می توان ماکت را طرح نهایی محصول دانست.
مانند مرحله قابسازی، ماکت نیز یک نسخه ثابت و غیرقابل استفاده برای کاربران است. در ماکت تمرکز بر روی اضافه کردن و کامل کردن جزئیات کار از طریق اضافه کردن و کامل کردن عناصر بصری محصول است. ماکت اغلب در بحث طراحی بصری برای بازخورد سریع و بهبود در طراحی بصری محصول استفاده می شود.
پس از درک ماهیت طراحی و شناخت تفاوت بین قاب، مدل و نمونه اولیه، شما در مقابل دنیای طراحی UX ایستاده اید. اگر بتوانید مجموعه کارهای لازم برای طراحی محصول را به یک فرآیند مشخص و منسجم تبدیل کنید، نتیجه کار شما شگفت انگیز خواهد بود.
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.