معرفی Website WireFrame

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

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

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

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

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

طیف وسیعی از عملکردهای موجود
اولویت های نسبی اطلاعات و عملکردها
قوانین نمایش انواع خاصی از اطلاعات
تاثیر سناریوهای مختلف بر روی نمایشگر

Wireframe وب سایت ساختار مفهومی زیربنایی یا معماری اطلاعات را به سطح یا طراحی بصری وب سایت متصل می کند. Wireframes به ایجاد عملکرد و روابط بین قالب های صفحه نمایش مختلف یک وب سایت کمک می کند. در یک فرآیند تکراری، ایجاد وایرفریم روشی موثر برای ساختن نمونه‌های اولیه سریع صفحات است، در حالی که عملی بودن یک مفهوم طراحی را اندازه‌گیری می‌کند. Wireframing معمولاً بین "کارهای ساختاری سطح بالا - مانند فلوچارت ها یا نقشه های سایت - و طرح های صفحه" شروع می شود. در فرآیند ساخت یک وب سایت، وایرفریم جایی است که تفکر ملموس می شود.

وایرفریم‌ها همچنین برای نمونه‌سازی اولیه سایت‌های موبایل، برنامه‌های رایانه‌ای، یا سایر محصولات مبتنی بر صفحه نمایش که شامل تعامل انسان و رایانه است، استفاده می‌شوند.

موارد استفاده از وایرفریم

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

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

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

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

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

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

WireFrame ممکن است سطوح مختلفی از جزئیات داشته باشد و از نظر وفاداری و یا شباهت آنها به محصول نهایی به دو دسته تقسیم شوند:

کم وفاداری

شبیه یک طرح خشن یا یک ماکت سریع، فریم‌های سیمی با کیفیت پایین را می‌توان به سرعت تولید کرد. این وایرفریم‌ها به تیم پروژه کمک می‌کنند تا ایده‌ها را به اشتراک بگذارند و به طور مؤثرتری با هم همکاری کنند، زیرا انتزاعی‌تر هستند و از مستطیل‌ها و برچسب‌گذاری برای نمایش محتوا استفاده می‌کنند. محتوای ساختگی، متن پرکننده لاتین (lorem ipsum) و محتوای نمونه یا نمادین برای نمایش داده‌ها زمانی که محتوای واقعی در دسترس نیست استفاده می‌شود. به عنوان مثال، به جای استفاده از تصاویر واقعی، می توان از مستطیل نگهدارنده مکان استفاده کرد.

فریم‌های سیمی با وفاداری پایین را می‌توان برای تسهیل ارتباطات تیمی در پروژه استفاده کرد و در مراحل اولیه یک پروژه استفاده می‌شود.

با وفاداری بالا

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

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

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

عناصر WireFrame

طراحی اطلاعات

طراحی اطلاعات عبارت است از ارائه – قرار دادن و اولویت بندی اطلاعات به گونه ای که درک را تسهیل کند. طراحی اطلاعات حوزه ای از طراحی تجربه کاربر است که به منظور نمایش موثر اطلاعات برای ارتباط واضح است. برای وب سایت ها، عناصر اطلاعاتی باید به گونه ای تنظیم شوند که اهداف و وظایف کاربر را منعکس کنند.

طراحی ناوبری

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

طراحی رابط

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