راهنمای ترسیم وایرفریم اپلیکیشن (با مثال)

راهنمای ترسیم وایرفریم اپلیکیشن (با مثال)

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

وایرفریم چیست ؟

وایرفریم یک طرح اولیه مانند شکل زیر از صفحات اپلیکیشن یا وبسایت است. وایرفریم را با کمک مداد/خودکار روی کاغذ، با استفاده از نرم افزارهای خاصی در کامپیوتر یا با استفاده از وبسایت های مربوطه می توان ترسیم کرد. پیشنهاد من اینست که در ابتدا برای شروع کار ترسیم وایرفریم به سراغ نرم افزارها و ابزارهای دیجیتال نروید و به همان خودکان و کاغذ اکتفا کنید.

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

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

همانطور که در تصویر زیر مشاهده می‏کنیم، در وایرفریم علاوه بر ترسیم صفحات و قرار دادن دکمه‏ ها، تکست‏ باکس ‏ها و متن‏ ها، می‏ توانیم کارکرد دکمه‏ ها، ارتباط بین متغیرها و جابجایی بین صفحات را نیز با استفاده از خطوط و فلش‏ های قرمز رنگ نمایش دهیم (این کار در مرحله کدنویسی کارمان را آسان‏تر می‏کند).

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

 نکات مهم در ترسیم وایرفریم:

نکته۱: ترسیم سریع و ساده وایرفریم

نسخه های اولیه وایرفریم را خیلی سریع و ساده رسم کنید، تغییرات پیشنهادی کارفرما را اعمال کنید، ایده ‏های مختلف را بررسی کنید و بتدریج، وایرفریم را تکمیل و جزئیات بیشتری به آن اضافه کنید. پس نسبت به تغییر خطوطی که در همان ابتدا ترسیم کرده‏اید مقاومت نداشته باشید. همانطور که قبلا گفتیم، هدف اینست که در انتهای این فرآیند، نیازها و خواسته ‏های مشتری/کارفرما شفاف شود.

نکته۲: ترسیم کامل وایرفریم

در ترسیم وایرفریم اپلیکیشن ‏ها وسوسه می‏شویم که بخش‏ های از وایرفریم مثل صفحه پرداخت را که مشابه نمونه‏ های قبلی هستند را ترسیم نکنیم. در مقابل چنین وسوسه ‏هایی ایستادگی کنید و مدل خود را بصورت کامل ترسیم کنید. مطمئنا زمانی که صرف این ترسیم و چک کردن آن با مشتری می‏شود، کمتر از زمان و هزینه حاصل از اختلاف نظر و تغییرات احتمالی در آینده است.

نکته ۳: ترسیم ساده وایرفریم

سعی نکنید که وایرفریم از نظر بصری خوب به نظر برسد. در همین راستا، از رنگ های مختلف استفاده نکنید. مگر از یک رنگ دیگر (قرمز) برای هایلایت کردن بخش‏ های خاص یا ثبت برخی توضیحات در وایرفریم. رنگ سیاه و سفید، از حواس پرتی و انحراف بخاطر انتخاب رنگ و … پیشگیری می‏کند. فراموش نکنیم هدف ما از ترسیم وایرفریم، مشخص کردن اطلاعات، چارچوب و کارکرد اپلیکیشن است، نه طراحی و جلوه بصری آن. طراحی بصری و تعاملی اپلیکیشن را به مراحل بعدی واگذار می کنیم.