چرا سکان آکادمی؟
انواع وایرفریم‌ها در طراحی UI

انواع وایرفریم‌ها در طراحی UI

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

وایرفریم با جزئیات کم (Low Fidelity یا Lo-Fi)

ساده‌ترین راه برای رسم وایرفریم‌های Lo-Fi، استفاده از قلم و کاغذ عزیز است. اشکال پایه (دایره، مربع، مثلث، مستطیل و ...) برای ارتباطِ سلسله مراتب محتوا در یک صفحه، کافی هستند. وایرفریم‌های Lo-Fi را با ابزارهایی مثل Invision Freehand نیز می‌توان رسم کرد که نوعی دیجیتالی از طراحی وایرفریم روی تخته سفید است. در تصویر زیر، می‌توانید وایرفریم‌های Lo-Fi را که برای صفحه‌ی ورود اپلیکیشن‌های Ethical Eater (چپ) و Activist App (راست) رسم کرده‌ایم، مشاهده کنید.

Low-Fidelity Wireframes

وایرفریم با جزئیات متوسط (Middle Fidelity یا Mid-Fi)

هنگامی که از ساختار کلی محتوای خود راضی بودید، وایرفریم بعدی شما وایرفریم Mid-Fi است. اینجا، جایی است که محتوای خود را اصلاح و تنظیم می‌کنید. در این مرحله، می‌توانید وایرفریم‌های خود را به ابزارهای دیجیتال انتخابی خود (مانند Sketch یا Balsamiq) منتقل کنید و سیستم‌های گرید(Grid Systems) را معرفی کنید که به شما کمک می‌کنند تا فاصله‌ی دقیق‌تری را بین هر عنصر، ایجاد کنید. همچنین می‌توانید اندازه‌ی هر کامپوننت (Component) را نیز تنظیم کنید. به وایرفریم‌های Mid-Fi ما برای دو صفحه‌ی اپلیکیشن زیر نگاهی بی‌اندازید. آیا متوجه می‌شوید که آنها ساختاری مرتب‌تر و دقیق‌تر از وایرفریم‌های Lo-Fi ما دارند؟

Mid-Fidelity Wireframes

وایرفریم با جزئیات زیاد (High Fidelity یا Hi-Fi)

وایرفریم‌های Hi-Fi، آخرین مرحله‌ی رسم وایرفریم‌ها هستند. در این مرحله، تمام عناصر رابط کاربری (UI Elements) شما باید در نظر گرفته شده و سلسله مراتب بصری (Visual Hierarchy) شما نهایی شوند. در تصویر زیر، می‌توانید وایرفریم‌های Hi-Fi ما را برای دو صفحه‌ی اپلیکیشن ببینید.

High-Fidelity Wireframes

رویه‌های برتر در طراحی وایرفریم موبایل

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

  • همه‌ی وایرفریم‌ها باید در مقیاس خاکستری (Grayscale)، یعنی فقط سیاه، سفید یا خاکستری باشند. برای نشان دادن رنگ‌های مختلف یا دکمه‌های فعال، می‌توانید با سایه‌زدن بازی کنید. مانند استفاده از سایه‌های خاکستری روشن‌تر، برای نشان دادن رنگ‌های روشن و سایه‌های تیره‌تر، برای نشان دادن رنگ‌های پررنگ‌تر. همچنین، می‌توانید از خطوط هاشور برای نشان دادن یک پس‌زمینه یا بخش سایه‌دار، و از دو خط متقاطع برای نشان دادن مکان قرارگیری یک لوگو یا تصویر استفاده کنید.
  • به یاد داشته باشید که کاربران شما باید بتوانند به راحتی روی هر عنصر کلیک کنند. هر عنصر(دکمه، مکان‌های نوشتن، و ...) باید به میزان کافی بزرگ باشد تا اندازه‌ی متوسط یک نوک انگشت را در خود جای دهد، درحالی که فضای کافی‌ای نیز برای جلوگیری از کلیک کردن تصادفی کاربر روی چیز دیگری در نظر گرفته شده باشد. به این موضوع، اهداف لمسی (Touch Targets) نیز گفته می‌شود. در قسمت‌های بعدی، درباره‌ی اهداف لمسی بیشتر صحبت خواهیم کرد.

اگر این دو نکته را حین رسم وایرفریم‌ها در نظر داشته باشید، برنده‌ی مسابقه‌ی وایرفریم‌ها خواهید شد:)