علی فرخی
علی فرخی
خواندن ۴ دقیقه·۲ سال پیش

وایرفریم چیست؟ (راهنمای نوب ها)

وایرفریم چیست - چرا از وایرفریم ها استفاده می‌کنیم و چطور یک وایرفریم بکشیم .
وایرفریم چیست - چرا از وایرفریم ها استفاده می‌کنیم و چطور یک وایرفریم بکشیم .


وایرفریم ها یک طرح ساده و اولیه است که به برنامه نویس ها ، طراحان و شما کمک می‌کند تا ساختار نرم افزار یا وب سایتی که درحال ساختن آن هستید یا می‌خواهید آن را بسازید طراحی کنید .
با وایرفریم ها می توانید به این ساختار راحت تر فکر کنید ، با آن ارتباط برقرار کنید و آن را بکشید .

تصویری از وایرفریم یک وبسایت / آنلاین شاپ لباس
تصویری از وایرفریم یک وبسایت / آنلاین شاپ لباس


در این مطلب به سه سوال پاسخ می‌دهیم و کار با وایرفریم ها را شروع می‌کنیم :

  • وایرفریم چیست ؟
  • چرا از وایرفریم استفاده می‌کنیم ؟
  • چرا وایرفریم ها این شکلی هستند؟
  • و شروع کار با وایرفریم

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

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

وایرفریم ها یک طرح ساده از یک رابط کاربری هستند .

به وایرفریم بالا نگاه کنید ! این طرح اصلا شبیه یک وبسایت نیست در این وایرفریم فقط ساختار را در قالب رنگ سیاه و سفید می بینید .

در تصویر پایین مقداری خط خطی می‌بینید و همانطور که می‌دانید این خط خطی ها در مرحله بعدی تبدیل به لوریم ایپسوم و سپس محتوای اصلی وبسایت می‌شوند .

تصویر وایرفریم یک وبسایت - ریسپانسیو در تبلت اندروید و موبایل آیفون
تصویر وایرفریم یک وبسایت - ریسپانسیو در تبلت اندروید و موبایل آیفون


چرا از وایرفریم ها استفاده می‌کنیم ؟

یک صفحه وب سایت یا اپلیکیشن می‌تواند به روش های مختلفی ساخته شود اما فقط تعداد کمی از آنها پیام شما را به درستی منتقل می کنند و منجر به یک محصول نهایی کاربرپذیر می‌شود .
با واژه کاربرپذیر از الان آشنا شوید .


چرا قبل از اینکه کدی نوشته شود و قبل از شروع طراحی بصری UI یک طراحی وایرفریم کشیده می‌شود ؟

  • وایرفریم ها به انتقال پیام به شما کمک می‌کنند .
  • با وایرفریم ها رابط کاربری UI را شناسایی می‌کنید .
  • منجر به ساخت وبسایت یا نرم افزارهای کاربردپذیر می‌شود.
  • وایرفریم ها در زمان و فرایند کار صرفه جویی می‌کنند .
چند وایرفریم متفاوت  - موزیک پلیر ، آیفون یو آی ، کیبورد و ...
چند وایرفریم متفاوت - موزیک پلیر ، آیفون یو آی ، کیبورد و ...

چرا وایر فریم ها این شکلی هستند ؟

اغلب وایر فرم ها به دلایل زیر ظاهری ساده و خشک دارند :

۱ - وایرفریم یک طرح نهایی نیست

هیچ وقت یک وایرفریم را با طرح نهایی اشتباه در نظر نگیرید . کاربرپذیری کم و رنگ های محدود شما را مجبور می‌کند تا بیشتر روی ساختار تمرکز کنید و زمان زیادی روی جزئیات نگذارید البته که بعد از نهایی شدن وایرفرم ها زمان زیادی برای طراحی UI در نظر می‌گیریم .

۲ - وایر فریم به خوبی نشان میدهد که " تمامی موارد قابل تغییر و بحث هست "
وایرفریم باعث می‌شود که طراح به راحتی در تمامی بخش ها بحث کند و موارد را بر اساس سلیقه کاربر تغییر بدهد .
وایرفریم ها سریع کشیده می‌شوند بنا بر این در ساخت یک وایرفریم نباید خجالتی باشید ! ساخت هر صفحه تقریبا چند دقیقه طول می‌کشد و طراح / نویسنده وایرفریم از اینکه از اول شروع کند و محصول را بازطراحی کند ترسی ندارد. در این زمینه کاربرپذیری و کاربردپذیری اهمیت بالایی دارد پس تکرار و انجام چندباره فرایند طراحی چیزی طبیعی و قابل انتظار است .

۳ - هنوز هیچ کدی نوشته نشده !
شاید اگر مشتری یا کارفرما به جای فایل وایرفریم یک اسکرین شات از آن را دریافت کند ممکن است تصور کند که تمامی کد ها نوشته شدند و طرح نهایی را میبیند اما نه اینطور نیست . وایر فریم یک طرح اولیه است که معمار ساختمان آن را کشیده و حالا مهندس عمران ( تیم Develop)‌ آن را اجرا می‌کند .

شروع کار با وایرفریم ها و صحبت آخر من

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


منبع:

این مطلب رو موسس کمپانی بالزامیک آقای Peldi Guilizzoni نوشته و من این مطلب رو ترجمه و ویرایش کردم. موارد کمی رو به اون اضافه و مواردی رو کم کردم .
خوشحال میشم نظرتون رو کامنت کنید و اگر موردی رو جا انداختم به این مطلب اضافه کنید .
ممنون از وقتی که گذاشتید و امیدوارم این مطلب برای شما مفیده بوده باشه :)



رابط کاربرییو ایکسوایرفریمآموزش ui uxآموزش طراحی رابط کاربری
Design thinking ? alifarrokhi@icloud.com
شاید از این پست‌ها خوشتان بیاید