وایر فریم (Wire Frame) یکی از مراحل اولیه طراحی برای اپلیکیشن های اندروید میباشد. نام وایر فریم شاید برای کسانی که تازه به این صنعت وارد شده اند، نا آشنا باشد. اما یادگیری و آشنایی با آن میتواند به پیشرفت و سرعت کار شما کمک فراوانی بکند. با برنامه چی برای آشنایی با وایر فریم و کارهایی که برای طراحی آن باید انجام بدهید، همراه باشید.
این مقاله دارای قسمت های زیر است:
وایر فریم چیست؟
به چه دردی میخورد؟
چگونه وایر فریم را طراحی کنیم؟
*نرم افزار های وایر فریم
*وبسایت ها
شما تجربه ای در استفاده ار وایر فریم دارید؟
وایر فریم چیست؟
وایر فریم یعنی تهیه ی یک طرح اولیه ی ساده از آن چیزی که میخواهید در اپلیکیشن پیاده سازی شود. این تعریف با لغت انگلیسی wire frame هماهنگی دارد. اگر آن را کلمه به کلمه معنی کنیم، “سیم کشی قاب” معنی میدهد که بی ارتباط با تعریفی که ارائه کردیم نمیباشد. در این تکنیک ابتدا باید قاب محصولی که میخواهیم را در نظر بگیریم و با خطوط صاف و شکل های هندسی ساده، نحوه ی قرار گیری اجزا را در آن مشخص کنیم. به همین دلیل میتوان نام “سیم کشی” را برای آن مناسب در نظر گرفت. به هر حال ما در این مقاله از نام وایر فریم برای آن استفاده میکنیم تا با اصطلاحات درست و بین المللی این رشته آشنا شوید.
بیشتر مردم و طراحان، وایر فریم را فقط مربوط به سراحی وبسایت میدانند. اما این تفکر اشتباه است. در اصل، این مدل از طراحی در بسیاری از حوزه های کاری وجود دارد. حتی کودکان هم گاهی از این تکنیک استفاده میکنند. اگر میخواهید یک نمونه از وایر فریم که بچه های میکشند را ببینید، کافیست از آنها بخواهید یک ماشین نقاشی کنند. (البته نتیجه ی نهایی معمولا فقط به پیکان شبیه میشه! :دی).
یکی از حوزه هایی که وایر فریم در آن نقش اساسی دارد، طراحی اپلیکیشن های موبایل است. همانطور که اشاره شد، وایر فریم قبل از شروع ساخت اپلیکیشن انجام میشود. در این مرحله، معمولا سازنده ی اپلیکیشن، یک طرح اولیه و کلی از چیزی که میخواهد بسازد را تهیه میکند. (روش های مختلف تولید wire frame را جلوتر توضیح میدهم). این طرح اولیه به کارفرما کمک میکند که بتواند منظور طراح را بهتر متوجه شود. اگر هم تغییراتی در نظر داشته باشد، به جای توضیح های شفاهی و طولانی و نامفهوم، میتواند به راحتی آنرا روی طرح وایر فریم مشخص کند.
توصیه ای که برای کارفرماهای محترم دارم، این است که به تجربه و طراحی کسی که برای شما اپلیکیشن میسازد، اعتماد داشته باشید. گاهی کارفرما با ویرایش های غیرحرفه ای، که از نظر خودش درست هستند، و پافشاری برآنها باعث میشود که زیبایی و عملکرد خوب اپلیکیشن از بین برود. این اتفاق برای کارفرما یعنی ضرر کامل. همچنین سازنده هم دیگر نمیتواند برای تبلیغ سبک کار خود، آن اپلیکیشن را معرفی کند. طراح اپلیکیشن باید بتواند خود را با تغییرات تا جای ممکن همراه کند، اما گاهی محدودیت هایی وجود دارد که در آن مواقع باید به تجربه ی طراح اعتماد کنید.
به چه دردی میخورد؟
استفاده از وایر فریم مزایای زیادی دارد. مهمترین این مزایا صرفه جویی در زمان و بهبود تعامل با کارفرما یا سازنده اپلیکیشن است. نمیدانم تا به حال با کارفرما یا برنامه نویسی کار کرده اید یا نه. یکی از مشکل ترین مراحل این همکاری، توضیح دادن طرح به سازنده، یا فهمیدن توضیحات کارفرماست. مهم نیست که شما سازنده باشید یا کارفرما. همیشه این مشکل وجود دارد. اگر تا به حال از این تکنیک استفاده نکرده باشید، سعی کرده اید با حرف زدن طرحی که در ذهنتان وجود دارد را به طرف مقابل بفهمانید.
اما این تلاش همیشه به بن بست میرسد و نیاز است که بیشتر و بیشتر توضیح بدهید. اینجاست که وایر فریم به کمک شما می آید. بهتر است که از قدیمی ترین و موثر ترین روش نوشتن بشر استفاده کنید: نقاشی. با کشیدن یک طرح ساده از چیزی که در ذهنتان وجود دارد، میتوانید به راحتی هرچه تمام تر طرز فکر خود را بصورت کامل نشان بدهید. اگر هم لازم بود توضیحات کافی و مناسب را به طرح خود اضافه کنید. در اینصورت دیگر کج فهمی، سوءتفاهم، عصبانی شدن، فراموش کردن و بقیه ی مشکلات قدیمی شما را ترک میکنند.
یکی دیگر از مشکلاتی که طراح با آنها روبرو است، ویرایش اپلیکیشن میباشد. اگر طرح اولیه و توافقات بین دو طرف به صورت کامل و درست انجام نشده باشد، ویرایش های زیادی در انتظار شما خواهد بود. باور کنید هیچ چیز به اندازه ی ویرایش های مکرر نمیتواند شما را اذیت کند. این ویرایش ها زمان تحویل پروژه را هم بسیار طولانی میکنند. اما اگر قبل از شروع به ساخت، همه ی جزئیات مشخص شده باشند، دیگر این فرآیند های زمان بر و خسته کننده از سر راه برداشته خواهند شد.
چگونه وایر فریم را طراحی کنیم؟
برای درست کردن وایر فریم، تنها به یک کاغذ و مداد احتیاج دارید. همین الان میتوانید کار را شروع کنید. با استفاده از مداد روی کاغذ هر طرحی که در ذهنتان هست را بکشید. سعی کنید قسمت های مختلف را روی کاغ هی متفاوت رسم کنید. با این کار فضای بیشتری برای نوشتن توضیحات و پرداختن به جزییات خواهید داشت. سعی کنید همه ی جزییات را بصورت کامل روی کاغذ بکشید.
اگر هم با خط کش و ابزار مخصوص، خط های منظم و مرتبی بکشید، ظاهر و فکر خود را بصورت کامل پیاده سازی میکنید. حالا میتوانید ایده های جدید و قسمت هایی که نیاز به بهبود یا ویرایش دارند را مشخص کنید و از نو طراحی نمایید. وایر فریم یک طرح کلی یا پیشنمایش از اپلیکیشن را به شما نشان میدهد. با داشتن این طرح زمان بسیار زیادی را میتوانید ذخیره کنید و سرعت پیشرفت خود را بیشتر کنید.
وایر فریم به دو روش کلی تولید میشود: دیجیتالی و کاغذی. مدل کاغذی همانطور که توضیح دادم با استفاده از کاغذ تولید میشود. اما در مدل دیجیتالی این طراحی با استفاده از نرم افزار ها یا وبسایت ها و ابزار آنلاین انجام میشوند.
هر مدلی را که انتخاب میکنید باید چند نکته را در نظر داشته باشید:
- از رنگهای کمتر استفاده کنید. مخصوصا اگر مل کاغذی را انتخاب میکنید کلا از رنگ ها استفاده نکنید. در مدل دیجیتالی هم طوری از رنگ ها استفاده کنید که اگر پرینتر رنگی نداشتید و آنرا سیاه – سفید پرینت گرفتید، طرح کاملا روشن و مشخص باشد.
- از اشکال هندسی پیچیده استفاده نکنید. همه ی چیزی که در ذهنتان وجود دارد را با مستطیل، دایره و مثلث پیاده سازی کنید. از شکل های هندسی دیگر استفاده نکنید. سعی کنید تا جایی که امکان دارد این طرح ساده و دور از هرگونه پیچیدگی باشد.
- توضیحات کافی را اضافه بکنید. اگر در قسمتی از مدلی که طراحی کرده اید، ابهامی وجود دارد، باید آنرا کاملا برطرف کنید. طرح نهایی باید طوری باشد که هرکسی آنرا نگاه کند متوجه تمام قسمت ها بشود. پس همه ی توضیحات را به طرح خود اضافه کنید.
نرم افزار های وایر فریم
وایر فریم را میتوانید با نرم افزار های گرافیکی مثل paint یا photoshop (که آموزش آن در دوره ی رایگان سایت برنامه چی موجود است)؛ هم انجام دهید. علاوه بر این، میتوانید از نرم افزار های تخصصی مانند Wireframesketcher هم استفاده کنید. البته ابزار های طراحی وایر فریم را بصورت اختصاصی و جداگانه در مقاله ی دیگری قرار خواهیم داد.
وبسایت ها
ابزار های آنلاین هم میتوانند برای طراحی وایر فریم مورد استفاده قرار بگیرند. سایت هایی مانند: lumzy.com، wireframe.cc، gomockingbird.com و cacoo.com.
شما تجربه ای در استفاده از وایر فریم دارید؟
آیا شما هم تا امروز بدون استفاده از وایر فریم پروژه ای را انجام داده اید؟ بعد از ویرایش های مکرر چه احساسی داشتید؟ مطمئنا یکی از سخت ترین کار ها باز کردن دوباره ی پروژه و انجام کارهای تکراری است. به نظر شما با استفاده از وایر فریم چه تغییری در این فرآیند رخ میدهد؟ با ثبت نظر خود این آموزش را تکمیل تر کنید.
منابع بیشتر برای مطالعه
میتوانید از منابع زیر برای مطالعه بیشتر در این زمینه استفاده کنید:
