برای درک بهتر از نیازمندی های مشتری در یک نرم افزار، قبل از رسیدن به مرحله کدنویسی و طراحی، مسیری وجود داره که با در نظر گرفتنش میتونیم هزینه نهایی کمتری در تولید نرم افزار داشته باشیم و محصولی دقیق مطابق با خواسته مشتری بهش تحویل بدیم ور در نهایت دوباره کاری هامونو کمتر کنیم .
در ادامه این مطلب با من همراه باشید که این مراحلو مرور کنیم
برای انجام استاندارد این کار، 4 مرحله داریم :
مرحله اول Sketch : اولین مرحله کشیدن اسکچ کلی نرم افزار یا اپلیکیشن هست. برای کشیدن اسکچ قانون خیلی خاصی وجود نداره و توی اسکچ ها خیلی به جزییات نمیپردازیم. فقط یه طرح از کلیت سیستم میکشیم و تعداد صفحاتی که داریم را با ترسیم کلیت و عملکردشون، مشخص میکنیم.
اسکچ رو میتونیم روی کاغذ با مداد بکشیم و یا از نرم افزارهایی مثل Adobe XD یا سایت Sketch.Com استفاده کنیم.
مرحله دوم Wire frame : اینجا توی وایرفریم بیشتر Layout دقیق صفحات مهم هستند که باید طراحی بشن. مثلا وقتی میگیم توی این صفحه قراره لیست اخبار نشون داده میشه، دقیقا باید بگیم که این بخش عکس خبره و اون پایینتر خلاصه خبر و ...
توی وایرفریم رنگ ، فونت، تایپوگرافی و ... مهم نیستند، فقط تمرکز روی قالب کلی صفحه س.
هدف کلی این مرحله طراحی دقیق و با جزییات المانهاییه که باید توی صفحه گنجونده بشن. دسته بندی محتواها و نه خود محتوای واقعی در این بخش انجام میشه.
خروجی وایرفریم باید برای افراد فنی و تکنیکال و غیرتکنیکال و مشتری قابل فهم باشه. مسیر چرایی و چگونگی کارکرد محصول و نرم افزار باید در این بخش مشخص بشه.
بیشتر افراد این مرحله رو فاز 1 طراحی نرم افزار میدونن
مرحله سوم Mock up : خیلی وقتها وایرفریم با موکاپ اشتباه گرفته میشه. برای فهم تفاوتشون فرض کنین وایرفریم استخوان ها و قالب بندی انسانه و موکاپ پوست و موی انسان ...
توی موکاپ عکسها، رنگها و تایپوگرافی مشخص میشه ولی Reactive نیستن و همه چی بصورت استاتیک و ویژال نمایش داده میشه . یعنی امکان کلیک و اسکرول نداریم
در این مرحله توی طرح ، متن ها و تصاویر فیک قرار داده میشن ولی هیچی قابل کلیک و ... نیست.
مرحله چهارم Prototype : این مرحله نتیجه سه مرحله قبل هست و اولین مرحله ای هست که توش رفتارهای Interactive معنی پیدا میکنه یعنی میتونیم کلیک و اسکرول و ... رو در طرح مشخص کنیم.
در واقع UX و تجربه کاربری توی این مرحله مشخص میشه . یکی از ابزارهای این مرحله سایت Marvel هست که بدون نیاز به کدنویسی میتونین UX های خوبی طراحی کنید
ترتیب صفحات و Navigation و User Interaction ها تو این مرحله مشخص میشن.
در واقع توی این بخش مشخص میشه که نرم افزار نهایی قراره چه شکلی باشه و چطوری کار کنه
امیدوارم که از مطالعه این مطلب و مشخص شدن تفاوت های این 4 تا اصلاح رایج، بهره برده باشید .
