هرکسی که در فرآیند طراحی وب سایت یا اپلیکیشن فعالیت داشته است، از ارزش ایجاد یک ماکت یا موکاپ یا پیش نمایش بصری آگاه است.با این حال، گردش کار طراحی وب برای هر کسی که یک طراح آموزش دیده یا مدیر محصول نیست، می تواند دلهره آور باشد. گاهی مشکلاتی به این سردرگمی ها دامن می زند مثلا چندین مرحله در فرآیند طراحی اغلب با یکدیگر اشتباه گرفته می شوند یا به اشتباه برچسب گذاری می شوند.در نهایت، این راهنما به شما کمک میکند تا بفهمید دقیقا موکاپ چیست، کجا با فرآیند طراحی مطابقت دارد، چگونه از آن استفاده میشود و چه کسی نیاز به درک بیشتر از اصول اولیه ساخت موکاپ دارد؟
برای مشاهده آپدیت هایپر او اس در راه گوشی ردمی نوت ۱۱ پرو کلیک کنید.
موکاپ چیست؟
موکاپ طراحی ثابت از یک صفحه وب یا برنامه است که بسیاری از عناصر طراحی نهایی را در دل خود جای داده است اما کاربردی، فیزیکی یا واقعی نیست. یک موکاپ به اندازه یک صفحه زنده حیات ندارد و معمولاً شامل برخی از داده های نگهدارنده مکان است.
به عنوان «طراحی استاتیک» یک موکاپ عملکرد یک وب سایت زنده را ندارد. برای مثال اگرچه یک موکاپ شامل یک دکمه CTA رنگی میشود، اما بر خلاف یک وبسایت واقعی (یا نمونه اولیه یک وبسایت) با کلیک روی آن، فرمی را باز نمیکند. موکاپ ممکن است یک تصویر روی کاور را در بالای صفحه نشان دهد، اما یک چرخش فعال مانند وب سایت نخواهد داشت.
در واقع موکاپ اولین مرحله توسعه وب سایت نیست و تنها در راه تبدیل شدن به یک محصول نهایی است. بنابراین راه های زیادی برای رسیدن به نقطه پایان در پیش رو دارد. موکاپ ها ممکن است شامل تصاویر باشد و احساس بسیار خوبی از ظاهر صفحه ارائه دهد البته نمی گوید آن تصویر چگونه عمل می کند.
هدف موکاپ چیست؟
در نهایت، یک موکاپ به عنوان یک پیش نویس بصری از یک صفحه وب یا برنامه عمل می کند. این قابلیت برای زنده کردن ایده های طراحی ایجاد شده است و به طراح اجازه می دهد تا نحوه کار عناصر بصری مختلف را با هم آزمایش کند.
Mockups به ذینفعان در صفحه این امکان را میدهد که در حین ارائه پیشنهادهایی برای تغییرات در طرحبندی، رنگ، تصاویر، سبکها و موارد دیگر، قبل از هر اقدام فیزیکی یا صرف هزینه ای بصورت مجازی، ارائه دهند و ببینند که آن صفحه چگونه خواهد بود. اگر تعجب می کنید که یک صفحه با استفاده از رنگ ثانویه چگونه به نظر می رسد، می توانید با ساختن نسخه موکاپ آزمایش کنید و ببینید چگونه ظاهر می شود. به طور مشابه، اگر میخواهید تغییری مانند اضافه کردن هدر در وسط یک تصویر ایجاد کنید، موکاپ به تیم شما اجازه می دهد که قبل از به فعل رساندن، ببینند که این تغییر بالقوه چگونه به نظر میرسد.
یک صفحه باید برای یک هدف خاص ایجاد شود. موکاپ ها به تیم طراحی این فرصت را میدهند که ببینند چگونه میتوان به این هدف از طریق طرحبندی ایجاد شده توسط یک طراح رابط کاربری دست یافت و چگونه میتوان آن طرح را با استفاده از استانداردهای برند و خلاقیت بصری زنده کرد.
موکاپ ها از کجا وارد فرآیند طراحی وب می شوند؟
از نظر مراحل، موکاپ ها تقریباً در نقطه میانی فرآیند طراحی وب قرار می گیرند. از نظر زمانی، موکاپ ها هنوز در مراحل اولیه طراحی هستند .
یک فرآیند طراحی به این صورت است:
ایده پردازی
وایرفریمینگ
مدل آزمایشگاهی، موکاپ
نمونه سازی
واقعی سازی
مرحله Wireframing در نهایت در مورد ایجاد یک طرح بندی ناهموار برای صفحه، گرفتن یک ایده یا یک هدف و استفاده از تئوری طراحی برای ایجاد صفحه ای است که آن هدف را محقق می کند. موکاپ برای گرفتن آن چیدمان و قوی تر و واقعی تر کردن آن استفاده می شود.
پس از اینکه تیم طراحی یا صاحبین کسب و کارها در مورد جنبه های بصری موکاپ به توافق رسیدند، به مرحله نمونه سازی می رود که در آن باید توسعه واقعی اجرا شود تا یک موکاپ به نسخه تقریباً کاربردی از صفحه تبدیل گردد. البته همه اینها قبل از اینکه یک صفحه فعال شود و با کاربران یا بازدیدکنندگان واقعی آزمایش شود اتفاق می افتد.
تفاوت بین وایرفریم و موکاپ چیست؟
یک موکاپ در فرآیند طراحی بعد از وایرفریم می آید و بر اساس طراحی وایرفریم استوار است. بدیهی است که موکاپها نسبت به وایرفریم قویتر و به محصول نهایی نزدیکتر هستند. تفاوت های مهمی وجود دارد که می تواند به شما کمک کند فریم ها و موکاپ ها را مستقیم نگه دارید:
وایرفریم ها سیاه و سفید هستند. موکاپ ها رنگی هستند
Wireframes برای عملکرد استفاده می شود. موکاپ ها برای نمایش!
Wireframes به سادگی عناصر یک صفحه را نشان می دهد. موکاپ ها ماده ای را ارائه می دهند به عنوان یک قیاس.
وایر فریم نمایانگر نقشه یک خانه است. در فضای دو بعدی و سیاه و سفید، چیدمان خانه و نحوه تعامل اتاق ها با یکدیگر را نشان می دهد. حال اگر وایر فریم یک طرح اولیه باشد، می توان گفت موکاپ یک رندر دو بعدی از یک خانه ثابت است و رنگ سایدینگ و سبک تریم را نشان می دهد. ارائه یک مقطع از اتاق نشیمن با کاغذ دیواری و گرانیت برای شومینه!
این تصاویر را می توان به سرعت تغییر داد تا کاغذ دیواری را متفاوت تر یا کف چوبی را تیره تر نشان دهد. به همین ترتیب، یک موکاپ میتواند به ذینفعان نگاههای بصری متفاوتی را به یک صفحه بدون تغییر ساختار آن نمایش دهد. ما یک تفکیک عمیق تر از وایرفریم ها در مقابل مدل ها و تفاوت های کلیدی آنها ارائه داده ایم.
تفاوت بین نمونه اولیه و موکاپ چیست؟
موکاپ ها قبل از نمونههای اولیه قرار میگیرند، که شبیهسازیهایی هستند از اینکه یک صفحه زنده چگونه خواهد بود. در حالی که موکاپ یک تصویر ثابت است، نمونه اولیه، بیشتر قابلیت های یک وب سایت زنده را ارائه می دهد و به ذینفعان چیزی بسیار نزدیک به تجربه کاربر واقعی را نشان می دهد.
برای بازگشت به مقایسه معماری، اگر یک موکاپ تصویری است که روی صفحه کامپیوتر یا ایزل تنظیم شده است، نمونه اولیه برنامه واقعیت مجازی سه بعدی است که به شما امکان می دهد در خانه قدم بزنید. تصویر به شما امکان می دهد نحوه کار رنگ ها با هم، یا چیدمان یک اتاق مجردی را مشاهده کنید. برنامه کامپیوتری به شما اجازه میدهد راه رفتن از یک اتاق به اتاق دیگر را شبیهسازی کنید تا پلان طبقه باز را تجربه نمایید یا ببینید که راهرو چقدر تنگ است.
به همین ترتیب، یک نمونه اولیه به ذینفعان اجازه می دهد تا خود را در جایگاه یک کاربر واقعی قرار دهند و قبل از انتشار یک صفحه، تا حد امکان تجربه واقعی را به آنها ارائه دهد.
روش ایجاد موکاپ چیست؟
درک اینکه موکاپ چیست و چه کاربردی دارد موضوع مهمی است. برای شروع، باید از نوعی نرم افزار برای ایجاد مدل استفاده کنید. ابزارهای Wireframing خاصی وجود دارد و برخی از این ابزارها قابلیت ایجاد موکاپ را نیز دارند. به طور کلی، استفاده از دو ابزار جداگانه استاندارد است.
گزینه دیگر استفاده از ابزار طراحی گرافیکی عمومی برای ایجاد موکاپ است. Adobe Illustrator معمولاً ابزاری است که می توانید برای ایجاد موکاپ ها استفاده کنید. این محصول طراحی وکتور استاندارد صنعتی برای طراحان است و برای ایجاد بیش از سهم منصفانه از موکاپ ها استفاده شده است. ابزاری که در صنعت قالب ها، آموزش ها و موارد دیگر برای طراحان بی تجربه رواج دارد.
در نهایت، ابزارهایی وجود دارند که به طور خاص برای ایجاد موکاپ طراحی شده اند. برخی از محصولات به طور خاص در مرحله مدل سازی به بازار عرضه می شوند، اما این دسته نرم افزار مبهم است. محصولات اغلب برای مدلها، وایرفریمها یا موکاپ و نمونههای اولیه به بازار عرضه میشوند. انتخاب یک محصول خوب و استاندارد میتواند دشوار باشد، اما استفاده از سایت بررسی نرمافزار یا دریافت توصیههایی از طراحان همکار میتواند به شما برای حرکت در این فضای نرمافزار کمک کند.
نتیجه
مرحله موکاپ در توسعه وب سایت مرحله ای است که گاهی اوقات در نظر گرفته نمی شود و به راحتی پشت سر گذاشته می شود. در مقایسه با وایرفریم و نمونه سازی می تواند غیر ضروری به نظر برسد. با این حال، برای هر تیم توسعهدهنده می تواند ارزش بالایی داشته باشد.
با تولید مدلها و تکرار روی طرحهای ایجاد شده، یک تیم به خود اجازه میدهد در مورد انتخابهای طراحی که برای یک صفحه خاص انجام میدهد نقش داشته باشد. تا زیبایی شناسی یک صفحه مشخص توسط ذینفعان در نقش های متعدد، تجزیه و تحلیل شود، بازخوردهای لازم ارائه گردد و صفحه را به بهترین شکل ممکن بسازد.
