بعد از تقریبا ۱۵ سال برنامهنویسی، امسال تصمیم گرفتم برای بهروزرسانی خودم وقت بگذارم و مطالعه کنم. تقریبا هرچیزی که به دردم میخورد را خواندم. از تهیه مستندات تا ریاکت از فرانتاند تا بکاند، از اول تا آخر. امیدوارم طی ماههای آینده بتوانم این مطالعه را به صورت خلاصه منتشر کنم. اما اخیرا تصمیم گرفتهام هر کاری را درست انجام بدهم. برای برنامهنویسی یک سیستم، قبل از هر چیز لازم است ساختار آن را بدانیم. من در این زمینه کلی مطالعه کردم. برای من نوشتن ساختار، از نوشتن هر چیز و مفهومی شروع میشود. مثلا درباره سیستم حساب کاربری که میخواستم بازنویسی کنم، تقریبا تک تک مفاهیمی مثل کلید ورود، رمز، قفل، مجوزها، نقشها، شرایط ورود، شرایط بعد از ورود، شرایط خروج و کلی مفهوم دیگر را نوشتم و بعد تکتکشان را بسط دادم و ارتباطاتشان را با هم کشف کردم
در مرحله دوم، باید تکتک پرسشنامهها و کنترلرها و اکشنهای مورد نیاز را با تمام جزئیات فهرست کنم. خیلیها استفاده از swagger را برای تهیه مستندات توابع (و حتی ایجاد ابزارهای کارگزار و کارور) پیشنهاد میکنند. منتهی من استفاده ازین ابزار را دستکم در مرحلهی فعلی، زمانبر میدانم. این ابزار برای افرادی که فقط تحلیلگر هستند، کاربرد دارد و نه برای کسانی که برنامهنویس هم هستند. چرا که عملا دوباره کاری هست. ما فقط نیاز به فهرست توابع، ورودی و خروجیهایشان برای تحلیل پرسشنامهها داریم. مستندات و روش تهیه توابع را در زمان تهیه کد میتوان نوشت. البته به غیر از این دلیل دیگری هم برای کنار گذاشتن swagger داشتم، فرآیند تهیه مستندات خیلی کند و زمانبر است به نحوی که شاید دو برابر زمان لازم برای تهیه مستندات در کد لازم است تا مستندات swagger تهیه شود.
بهرحال با گذر از swagger تصمیم گرفتم مستقیما سراغ تهیه پروتوتایپ بروم. پروتوتایپ به مفهوم پیشنمایش صفحات، پرسشنامهها، فرمها، فهرستها و روابط بین هرکدام از این عناصر هست. پروتوتایپ در واقع به شما و هر کس دیگهای که لازم باشد، نشان خواهند داد که سیستم چطوری باید باشد و شما به عنوان توسعهگر، یک نمای کلی از سیستم را خواهید داشت. برای تهیه پروتوتایپ ابزارهای زیادی هست. من ابزارهای آنلاین خوبی را بررسی کردم. شامل https://moqups.com و http://mockflow.com. این دو ابزار تقریبا خوب هستند. منتهی یکی دو ایراد دارند. اول اینکه راست به چپ نیستند و مهمتر اینکه رایگان نیستند یا نسخهی رایگانشان، خیلی محدود هستند و بدتر اینکه امکان خرید دلاری برای ما فراهم نیست (حتی اگر قرار بود ماهی ۱۳ دلار، معادل حدودا ۱۵۰ هزار تومان پرداخت کنیم که بازهم رقم بالایی برای ما محسوب میشود)
ابزارهای آفلاینی هم هست. مثلا Sketch که البته برای Mac هست و من نتونستم بررسی کنم. همچنین Adobe XD
متاسفانه ابزارهای آفلاین ظاهرا خیلی ناقص هستند. قبلا هم تجربهی کار با Visio را داشتم. به نظرم ابزارها، چه آنلاین و چه آفلاین باید ویژگیهای زیر را داشته باشند:
- باید ابعاد صفحهی نامحدود داشته باشند. دستکم در یک وجه. اگرچه صفحههای واقعی، محدودن و مثلا نمیتوان هزاران پیکسل را در یک صفحهی آیفون نمایش داد، ولی اسکرول وجود دارد. اما اسکرول در زمان طراحی، سخت است. بنابراین به راحتی میتوان یک صفحهی نامحدود در نظر گرفت که با اسکرول ترکیب خواهد شد
- باید جعبهابزار آماده داشته باشد. یکی از اهداف پروتوتایپ، پیشنمایش زیبای پرسشنامهها و فهرستهاست. منتهی بعضی از ابزارها، آنچنان مینیمال یا خلاصهگرا شدهاند که حتی عناصری مانند دکمه و تیک را ندارند!!! مثلا Adobe XD تقریبا هیچ ابزار آمادهای ندارد. نه دکمه، نه تیک، نه رادیو، نه تقویم، نه سربرگ و نه هیچ چیز دیگر! البته راه حلی برای این موضوع در نظر گرفتهاند. فایلی حاوی عناصر بوتاسترپ، گوگل متریال و سیستم مک درست کردهاند که بایستی دانلود شده و سپس باز شود (امکان ورود ندارد) و سپس مثلا دکمهی مد نظر را از فایل بوتاسترپ در فایل خود، کپی کنید!
- ابزار خوب، میداند اغلب پروتوتایپها شامل پرسشنامه و فهرست هستند. بنابراین و برای کاهش زمان طراحی، باید چندین پرسشنامه و فهرست نمونه باشد
- ابزار خوب، به شما خواهد گفت برای چه دکمههایی کاربرد تعریف نشده است
- ابزار خوب به شما امکان افزودن راهنما و مستندات برای هر حرکتی را خواهد داد. مثلا نمایش اینکه دکمهی ایکس فقط زمانی قابل کلیک خواهد بود که دستکم تیک یکی از سطرها زده باشد را شاید نباید در پروتوتایپ پیاده کرد. اما یک راهنمای ساده میتواند برای سایر افراد تیم راهگشا باشد
- ابزار خوب امکان تکرار صفحه را دارد. مثلا صفحهای در پرتال ما وجود که الگوی پیامک و ایمیل ارسالی در زمان خاصی را میتوان تعریف کرد. این پرسشنامه، الگوی پیامهای ارسالی در زمان تغییر رمز، ایجاد کاربر، تایید پرداخت و خرید و خیلی کارهای دیگر را انجام میدهد. این پرسشنامه چند سربرگ دارد و خودش به تنهایی نیاز به پروتوتایپ جداگانه دارد! بنابراین قرار نیست به ازای هر الگوی تعریفی، (که در صفحهی جداگانهای قرار میگیرد) کلی صفحه به پروتوتایپ افزود. بایستی فقط گفت «این صفحه نسخهاز پرسشنامه تنظیم الگو هست که در اینجا برای ویرایش الگوی پیام تغییر رمز به کار میرود»
خلاصه اینکه تجربه من در استفاده از Adobe XD واقعا آزاردهنده بود. منتهی هنوز هیچ ابزار خوبی پیدا نکردهام. لطفا بگویید از چه ابزاری برای تهیه پروتوتایپ استفاده میکنید؟
متاسفانه در ایران شرکت ها حاضر نیستن برای این مورد هزینه و وقت صرف کنن و برنامه نویس خودش باید این کار رو انجام بده و من معمولم در ذهنم انجام میدم چون هیچ ابزار مفیدی پیدا نکردم
من برای تولید پروتوتایپ از Balsamiq Mockups استفاده میکنم. مشکل راست به چپ را دارد ولی ابزار برای طراحی فرم و صفحه زیاد دارد
سلام، من از Adobe XD استفاده می کنم و مطمئناً اگه یکم باهاش کار کنید میبینید که چقدر ساده و امکانات بیشتری داره.
قبلا از موکاپ استفاده میکردم اونم خوبه ولی رایگان نیست و ایراداتی داره.
فعلا فقط ایکس دی.
باسلام و خدا قوت به شما مدیریت محترم سایت و همکاران عزیزتان
از بابت اینکه مقالات آموزشی خیلی خوب و با کیفیت تولید می کنید از شما سپاسگزاریم.
برایتان موفقیت روز افزون از پروردگار یکتا آرزومندم!
سلام بر استاد بهزادیان عزیز و دوست داشتنی
به نظرم بهترین ابزار برای وایرفریم justinmind هستش
adobe xd برای پرتوتایپ هستش بیشتر و برای شخصی مثل من که کارش UI/UX هستش خوبه چون تمام عناصر رو خودمون خلق میکنیم
و یک نکته اینکه برای کار شما که تو حوزه برنامه نویسی هستین و خیلی گرافیکی نمیخواید ، وایرفریم یا اسکچ زدن واژه مناسبی هست که به جای پرتوتایپ استفاده شه