طراحی وایر فریم چیست؟
طراحی وایر فریم
«وایرفریم» (wireframe)، که به عنوان طرح اولیه و «بلوپرینت» (blueprint) نیز شناخته می‌شود، یک راهنمای تصویری است که اسکلت و چارچوب کلی یک وب سایت را نمایش می‌دهد. وایرفریم‌ها با هدف یافتن بهترین چینش برای عناصر و المان‌های موجود در طرح نهایی برای طراحی سایت ایجاد می‌شوند و باید خلاقانه و با بالاترین امکان رسیدن به اهداف تجاری نهایی، طراحی شده باشند؛ بنابراین بخش بسیار مهمی از فرایند طراحی محصول را طراحی وایر فریم تشکیل می‌دهد.
شما چه یک طراح رابط کاربری باشید، چه یک گرافیست و چه مدیر محصول و تحلیلگر کسب و کار، وایرفریم‌ها یک ابزار قدرتمند در دستان‌تان هستند. در طول فرایند طراحی ایده‌های زیادی به ذهن شما خواهد رسید و بهترین راه برای مرتب کردن و بکارگیری بهینه این ایده‌ها استفاده از وایرفریم‌هاست.
یک وایرفریم، معمولا بسیار ساده بوده رنگ و گرافیک خاصی ندارد، زیرا تمرکز اصلی وایرفریم‌ها روی عملکرد و رفتار المان‌های طرح است و در واقع آنچه که قرار است انجام شود، اهمیت دارد نه ظاهر طرح تولید شده. اگر چه وایرفریم‌ها را می‌توان خیلی ساده و ابتدایی با قلم و کاغذ تهیه کرد یا حتی روی تخته سفید کشید، تعداد زیادی برنامه‌های کاربردی آزاد و نیز تجاری هم برای تهیه وایرفریم‌ها وجود دارد
هدف از طراحی وایر فریم:
- هماهنگی و مطابقت ایده با محصول خروجی
- اعمال شدن نقطه نظرات مشتری در پروژه / نه تیم توسعه دهنده
- هماهنگی و سرعت بخشیدن به تکمیل پروژه (به دلیل اینکه وایرفریم جلوی جلسات و تماس های تکراری در مراحل طراحی را خواهد گرفت)
چرا به وایرفریم نیاز داریم؟
وایرفریم راهی ساده، سریع و ارزان برای ترسیم نقشه ساختار یک صفحه وب‌سایت یا اپلیکیشن است. از طرف دیگر ترسیم وایرفریم موقعیت‌های مختلفی را نه‌تنها برای طراحان، بلکه برای تمامی اعضای تیم توسعه پروژه و حتی مشتری فراهم می‌کند.
وایرفریم بیانگر خلاصه‌ای از ایده‌های طراحان یک محصول است و در این زمینه اولین نمای بصری را از محصول در اختیار شما قرار می‌دهد.
به کمک وایرفریم، توسعه دهندگان و مشتری دید کاملی از طراحی پروژه به‌دست می‌آورند و متوجه می‌شوند که در نهایت با چه محصولی طرف خواهند بود. در این مرحله از آنجایی که هنوز عملاً چیزی توسعه داده نشده است، تغییرات احتمالی که مد نظر مشتری است، بسیار راحت‌تر اعمال می‌شود.
توسعه‌دهندگان به کمک وایرفریم دید کاملی از محل قرارگیری اجزا یک صفحه پیدا می‌کنند. نرم‌افزارهایی نیز برای ترسیم وایرفریم وجود دارند که به کمک آن‌ها می‌توانید ابعاد و فضای لازم برای قسمت‌های مختلف را با چند کلیک ماوس تغییر دهید.
در کنار تمامی این موارد، وایرفریم نقش یک ابزار الهام دهنده را برای طراحان ایفا می‌کند. وایرفریم کاملاً انعطاف‌پذیر است و به اعضای تیم پروژه اجازه اعمال ایده‌های خلاقانه بیشتری را می‌دهد تا از این طریق محصول نهایی عملکرد بهتری داشته باشد.
مزایای استفاده از وایر فریم
- رضایت بیشتر مشتری
- بالا بردن سرعت انجام پروژه
- جای گیری بهتر بخش های سایت
- داشتن یک پیش نمایش از محصول نهایی
- عدم سردگمی برای تیم پیاده سازی و طراحی
- روشن شدن خروجیه محصول نهایی و روش عملکرد آن
نکاتی که در طراحی وایر فریم باید رعایت کرد:
- تحقیق در مورد پروژه و بعد آغاز به طراحی وایر فریم
- بهتر است با مداد شروع به طراحی کنید به جای ابزار های پیچیده
- تا حد ممکن طرح اولیه را ساده پیاده کنید
- پس از پایان طرح اولیه ، ببینید چه تغییراتی به استفاده ی بهتر کاربران کمک می کند
- تا حد ممکن طرح را به گونه ای بکشید که برای همه قابل درک باشد تا تیم مجری نیز راحت آنرا بخواند
- تمام بخش ها را تا انتها طراحی کنید و به پیاده سازی بخشی از پروژه اکتفا نکنید
- در انتها که طرح مدادی یا کشیده شده به پایات رسید آنرا با ابزار های دیجیتال به صورت صفحات دیجیتال و یا حداقل تصاویر jpg درآورید
- از رنگ ها خیلی کم استفاده کنید
- طرح نهایی پیچیده نباشد ، شلوغ نباشد ، حداکثر دارای 3 یا 4 رنگ باشد و هر کس با دیدن آن متوجه شود با اضافه شدن تصاویر واقعی به چه صورت در خواهد آمد
انواع وایرفریم
همان‌گونه که اشاره کردیم در بیشتر مواقع، وایرفریم صفحه‌ای کاغذی است که طرح اصلی و ساختار قسمت‌های مختلف صفحه‌های وب‌سایت یا اپلیکیشن، با خط‌ها و شکل‌های هندسی به صورت بصری ترسیم شده است. البته به لطف فناوری‌های جدید ابزارهای مختلفی وجود دارد که در کمترین زمان ممکن، فرآیند طراحی وایرفریم را می‌توان به کمک آن‌ها در سطح‌های مختلف انجام داد.
به‌طور کلی ۳ نوع مختلف وایرفریم وجود دارد:
۱- وایرفریم با کمترین جزئيات (Low-Fidelity wireframes)
در این حالت با وایرفریم‌های سیاه و سفیدی طرف هستیم که تمرکز روی عملکرد یک صفحه دارند.
اجزای رابط کاربری در این حالت با اشکال هندسی ترسیم می‌شوند و خبری از جزئیات در این سطح از وایرفریم نیست. چنین وایرفریمی ممکن است حالتی خلاصه داشته باشد اما ساختار اولیه رابط کاربری را به راحتی نمایش می‌دهد.
۲- وایرفریم با جزئیات متوسط (Medium-fidelity wireframes)
در این سطح از وایرفریم نیز با طرحی دو رنگ طرف هستید که شباهت‌های زیادی به وایرفریم نوع اول دارد. چنین وایرفریمی را می‌توان با دست طراحی کرد یا از ابزارهای دیجیتال برای کشیدن آن کمک گرفت تا از این طریق قسمت‌های رابط کاربری با جزئیات بهتری ترسیم شده و حالتی باورپذیرتر داشته باشند.
نوشته‌های صفحه وب‌سایت مانند عنوان، به خوبی در این وایرفریم قابل تشخیص است تا از این طریق طراح بتواند سلسله مراتب تایپوگرافی را ایجاد کند. استفاده از تصاویر و همچنین یادداشت برای توضیح بیشتر قسمت‌های مختلف در این وایرفریم مرسوم است.
۳- وایرفریم با جزئیات زیاد (High-fidelity wireframes)
این وایرفریم‌ها تنها توسط ابزارهای دیجیتال تولید می‌شوند.
تفاوت اصلی میان وایرفریم با جزئیات زیاد با سایر وایرفریم‌ها، استفاده از رنگ برای توصیف بهتر اجزای صفحه است. این امر باعث می‌شود این نوع وایرفریم شباهت بصری بیشتری به نسخه‌نهایی وب سایت یا اپلیکیشن داشته باشد. ابعاد و نوع فونت‌ها نیز در این وایرفریم مشخص شده و سایر قسمت‌های بصری صفحه با جزئیات کامل ترسیم می‌شود.
طراحان نیز در این وایرفریم، توجه بیشتری به ابعاد و تراز بودن اجزا رابط کاربری نسبت به یکدیگر دارند. به عبارت فنی می‌توان گفت: وایرفریم با جزئیات بالا در واقع نسخه‌ای استاتیک از صفحه‌وب‌سایت یا اپلیکیشن است. به همین دلیل گاهی اوقات به وایرفریم با جزئیات بالا، وایرفریم رابط کاربری نیز گفته می‌شود.
دیدگاهتان را بنویسید