اگر تا به حال در زمینه طراحی UX کار کرده باشید، احتمالاً کلمه Wireframe را شنیده اید. Wireframe بخش مهمی از طراحی وب سایت و ساخت پروژه است که بسیار مهم است. اما سوال اینجاست که وایرفریم چیست و چرا اهمیت دارد؟ در این مقاله از وبلاگ Punisha هر آنچه را که باید در مورد وایرفریم بدانید را توضیح می دهیم. تا پایان این مقاله با ما همراه باشید تا وایرفریم چیست و انواع آن را به شما معرفی کنیم.
وایرفریم چیست؟
برخلاف نقشه های معماری، وایرفریم یک طرح کلی دو بعدی از یک صفحه وب یا برنامه است. Wierframe یک نمای کلی از ساختار صفحه، طرح‌بندی، طرح‌بندی اطلاعات، جریان کاربر، عملکرد و رفتارهای مورد نظر ارائه می‌دهد. بسته به سطح جزئیات مورد نیاز، وایرفریم ها را می توان با دست ترسیم کرد یا به صورت دیجیتالی ایجاد کرد.
Wireframing روشی است که اغلب توسط طراحان UX استفاده می شود. این فرآیند به ذینفعان اجازه می‌دهد تا قبل از اینکه توسعه‌دهندگان رابط را با کد بسازند، در مورد مکان قرار گرفتن اطلاعات توافق کنند.
وایرفریمینگ چه زمانی ایجاد می شود؟
فرآیند Wireframing در مرحله اکتشافی پروژه انجام می شود. در طول این مرحله، طراحان محدوده را آزمایش می کنند، روی ایده ها کار می کنند و نیازمندی ها را شناسایی می کنند. Wireframe معمولاً یک تکرار اساسی از یک صفحه وب است که به عنوان نقطه شروع برای طراحی وب سایت استفاده می شود.
با استفاده از ایده‌های جمع‌آوری‌شده از بازخورد کاربران، طراحان می‌توانند تکرار بعدی و دقیق‌تر از طراحی پروژه، مانند نمونه اولیه یا ماکت را ایجاد کنند.
هدف از وایرفریم چیست؟
وایرفریم ها سه هدف کلیدی دارند:
- آنها مفهوم کاربر محوری را حفظ می کنند
- آنها ویژگی های وب سایت را روشن و تعریف می کنند
- فرآیند ایجاد وایرفریم سریع و کم هزینه است
بیایید هر یک از این اهداف را با جزئیات بیشتری بررسی کنیم.
Wireframe مفهوم را بر روی کاربر متمرکز می کند
وایرفریم به عنوان وسیله ارتباطی استفاده می شود. این فرآیند بازخورد کاربر را تسهیل می کند، گفتگو با سهامداران را توسعه می دهد و ایده هایی را در بین طراحان ایجاد می کند. انجام تست کاربر در مراحل اولیه کادربندی به طراح این امکان را می دهد که بازخورد صادقانه دریافت کند و مسائل کلیدی را شناسایی کند. این به ایجاد و توسعه مفهوم پروژه کمک می کند. Wireframing روش خوبی برای طراحان برای اندازه گیری نحوه تعامل کاربر با رابط است.
Wireframe به وضوح ویژگی های وب سایت را تعریف می کند
وقتی ایده های خود را به مشتریان منتقل می کنید، ممکن است معنای کلمات فنی و تخصصی لازم را درک نکنند. Wireframing به وضوح هدف و نحوه کار را به مشتریان شما نشان می دهد.
همچنین به همه ذینفعان اجازه می دهد تا میزان فضای مورد نیاز برای تخصیص هر ویژگی را اندازه گیری کنند، اطلاعات سایت را با طراحی بصری آن مطابقت دهند و عملکرد صفحه را تعیین کنند.
دیدن ویژگی‌های wireframe به شما این امکان را می‌دهد تا نحوه کار همه آنها را با هم تجسم کنید و حتی ممکن است احساس کنید که یک عنصر کاملاً با بقیه صفحه مطابقت ندارد و تصمیم به حذف برخی از آنها بگیرید. وایرفریم زمانی است که طراحان می توانند بی رحم باشند!
فریم های سیمی سریع و ارزان ساخته می شوند
قاب های سیمی فوق العاده ارزان هستند و به راحتی ایجاد می شوند. در واقع، اگر قلم و کاغذ در دست دارید، می توانید به سرعت یک قاب سیمی بکشید بدون اینکه یک سکه خرج کنید. از سوی دیگر، ابزارهای فراوان موجود به شما کمک می کند تا در عرض چند دقیقه یک قاب دیجیتال بسازید. (در این مورد بعداً بیشتر صحبت خواهیم کرد!).
انواع وایرفریم چیست؟
سه نوع اصلی وایرفریم وجود دارد: وایرفریم با کیفیت پایین، وایرفریم با کیفیت متوسط و وایرفریم با کیفیت بالا! مهمترین عامل تمایز بین این وایرفریم ها سطح جزئیات آنهاست. بیایید نگاهی دقیق تر به این موارد بیندازیم:
قاب سیمی با کیفیت پایین
وایرفریم های با کیفیت پایین، نمایش های بصری اصلی یک صفحه وب هستند و معمولاً به عنوان نقطه شروع طراحی سایت عمل می کنند. به این ترتیب، آنها نسبتاً خنثی هستند و بدون هیچ حس مقیاس، شبکه یا دقت پیکسل ایجاد می شوند.
قاب‌های سیمی با کیفیت پایین جزئیات بالقوه حواس‌پرتی را حذف می‌کنند و فقط شامل تصاویر ساده، اشکال بلوک و محتوای ساختگی می‌شوند. مانند برچسب ها و عنوان ها.
فریم‌های سیمی با کیفیت پایین برای شروع مکالمات، تصمیم‌گیری در مورد طرح‌بندی‌های ناوبری و نقشه‌برداری جریان‌های کاربر مفید هستند. به طور خلاصه، اگر شما سهامداران یا مشتریانی در اتاق دارید و می خواهید چیزی را با قلم در اواسط جلسه طراحی کنید، فریم های سیمی با کیفیت پایین عالی هستند. آنها همچنین برای طراحانی که چندین مفهوم دارند و می خواهند سریع تصمیم بگیرند در کدام جهت کار کنند بسیار مفید هستند.
قاب سیمی با کیفیت متوسط
متداول ترین نوع وایرفریم در بین سه نوع وایرفریم، وایرفریم های با کیفیت متوسط است. این نوع وایرفریم نمایش دقیق تری از چیدمان است، و در حالی که هنوز از تصاویر بصری یا تایپوگرافی استفاده نمی کند، جزئیات بیشتری را در مورد اجزای خاص ارائه می دهد و عملکردها به وضوح از یکدیگر متمایز می شوند.
همچنین می توان از وزن متن های مختلف برای جداسازی سرفصل ها و متن اصلی استفاده کرد. طراحان می توانند از سایه های مختلف خاکستری برای انتقال برجسته بصری عناصر فردی استفاده کنند. وایرفریم‌های با کیفیت متوسط معمولاً با استفاده از ابزارهای دیجیتالی مانند Sketch یا Balsamiq ایجاد می‌شوند.
قاب سیمی با کیفیت بالا
در نهایت، وایرفریم‌های باکیفیت دارای طرح‌بندی‌های مخصوص پیکسل هستند. در جایی که یک قاب سیمی با کیفیت پایین ممکن است شامل پرکننده‌های متن و کادرهای خاکستری پر شده با X برای نمایش یک تصویر باشد، فریم‌های سیمی با کیفیت بالا ممکن است شامل تصاویر برجسته شده واقعی و محتوای متن مرتبط باشد.
این جزئیات افزوده، وایرفریم های با کیفیت بالا را برای کاوش و مستندسازی مفاهیم پیچیده مانند سیستم های منو یا نقشه های تعاملی ایده آل می کند. فریم های سیمی با کیفیت بالا باید برای مراحل بعدی چرخه طراحی رزرو شوند.
محتوای وایرفریم چیست؟
همانطور که قبلا ذکر شد، مقدار محتوایی که می تواند در یک وایرفریم گنجانده شود تا حد زیادی به پایین، متوسط یا بالا بودن کیفیت وایرفریم بستگی دارد. با این حال، عناصری که معمولا در وایرفریم ها یافت می شوند شامل لوگوها، جعبه های جستجو، سرصفحه ها و دکمه های اشتراک گذاری هستند!
وایرفریم های با کیفیت بالا همچنین می توانند شامل اطلاعات تماس و پاورقی باشند. تایپوگرافی و تصاویر نباید بخشی از یک فریم با کیفیت پایین یا متوسط باشد. اما طراحان اغلب با اندازه متن بازی می کنند تا سلسله مراتبی از اطلاعات یا هدر را نشان دهند.
Wireframes به طور سنتی در مقیاس خاکستری ایجاد می شود، بنابراین طراحان اغلب با سایه بازی می کنند. طراحان معمولا از سایه های روشن تر خاکستری برای نشان دادن رنگ های روشن و از سایه های تیره تر برای نمایش رنگ های پررنگ تر استفاده می کنند. در وایرفریم‌های با کیفیت بالا، طراحان می‌توانند از رنگ‌هایی مانند قرمز برای نشان دادن پیام هشدار یا خطا یا آبی تیره برای نشان دادن پیوند فعال استفاده کنند.
از آنجایی که وایرفریم‌ها دو بعدی هستند، توجه داشته باشید که با نمایش ویژگی‌های رابط تعاملی مانند لغزنده، شناور یا آکاردئون که عملکردهای پنهان را روی نمایشگر اجرا می‌کنند، به خوبی کار نمی‌کنند.
تفاوت بین وایرفریم وب سایت و وایرفریم موبایل چیست؟
وقتی به وایرفریم فکر می کنیم، اغلب به وایرفریم برای وب سایت های دسکتاپ فکر می کنیم. اما وایرفریم های موبایل نیز در وسط قرار دارند. بنابراین تفاوت اصلی بین سیم فریم سایت و وایرفریم موبایل چیست؟
اندازه
با توجه به تفاوت اندازه بین برنامه های موبایل و وب سایت های دسکتاپ، طرح بندی ها باید بسیار با دقت در نظر گرفته شوند. به عنوان مثال، به دلیل عرض صفحه یک وب سایت دسکتاپ، فریم وب سایت شما ممکن است طرحی داشته باشد که چندین ستون را در بر می گیرد.
در وایرفریم برای توسعه اپلیکیشن موبایل، تعداد ستون ها معمولا به یک یا حداکثر دو ستون محدود می شود. شما باید تصمیم بگیرید که آیا کاربران می‌خواهند پیمایش بی‌نهایت را ببینند یا می‌خواهید تعداد عناصر در هر صفحه را کاهش دهید تا محتوای دیگر در زیر نشان داده شود.
چگونگی کار
دومین تفاوت عمده نحوه عملکرد اپلیکیشن موبایل و وب سایت است. در یک وب سایت، کاربر از ماوس یا صفحه لمسی برای پیمایش صفحه استفاده می کند. کاربر همچنین می‌تواند روی برخی ویژگی‌ها کلیک کند تا اطلاعات بیشتری را نشان دهد، یا حتی روی فعل و انفعالات خاصی برای نمایش منوها حرکت کند.
با این حال، در یک برنامه تلفن همراه، کاربران برای باز کردن یک ویژگی باید روی صفحه ضربه بزنند. هنگام ایجاد وایرفریم برای برنامه‌های موبایل، باید با دقت بیشتری در مورد اینکه چگونه کاربران خود را تشویق می‌کنید تا برای رسیدن به یک هدف خاص، روی دکمه خاصی ضربه بزنند، فکر کنید.
واکنش
نحوه تعامل کاربران با برنامه های تلفن همراه با نحوه تعامل آنها در دسکتاپ بسیار متفاوت است. Wireframe می تواند محتوا و داده ها را از اینترنت به روشی مشابه وب سایت بارگیری کند، اما بسیاری از برنامه ها به کاربر اجازه می دهند محتوا را برای استفاده آفلاین بارگیری کند.
از چه ابزارهایی برای ایجاد وایرفریم استفاده می شود؟
در چشم انداز فناوری امروز، طراحان گزینه های بی شماری برای ابزارها و برنامه های Wireframing پیشرفته دارند. اجزای داخلی رابط کاربری، مانند عناصر فرم و حالت دکمه، به طراحان اجازه می دهد تا از طرح های از پیش ساخته شده استفاده کنند و در کسری از زمان وایرفریم ایجاد کنند. اگر به طراحی علاقه دارید به مقاله فتوشاپ چیست مراجعه کنید.
یکی از معروف‌ترین ابزارهای وایرفریم Sketch است که از شکل‌های طراحی استفاده می‌کند و به طراحان اجازه می‌دهد به راحتی وایرفریم‌های خود را بر روی بوم مبتنی بر پیکسل ایجاد کنند. Sketch همچنین دارای ویژگی Symbols است که به این معنی است که می توانید بعد از ایجاد عناصر طراحی UI دوباره از آنها استفاده کنید. برای اطلاعات بیشتر می توانید به مقاله نرم افزار Sketch چیست مراجعه کنید.
اما اگر به چیزی حرفه ای تر از یک قاب کاغذی نیاز دارید، ابزار محبوب Balsamiq را انتخاب کنید، ابزاری که به طراحان اجازه می دهد به جای کیفیت زیبایی شناختی، بر روی طرح بندی، طراحی تعامل بصری و نقشه برداری اطلاعات کلیدی تمرکز کنند.
نتیجه
در این مقاله هر آنچه را که باید در مورد ساخت و سفارش وایرفریم بدانید را توضیح داده ایم. همانطور که مشاهده کردید ما توضیح دادیم که وایرفریم چیست و انواع وایرفریم را معرفی کرده ایم. امیدواریم این مقاله تجربه طراحی وب سایت شما را بهبود بخشد. شما می توانید با اطمینان از اینکه در حال طراحی چیزی هستید که مشتریان و کاربران شما آن را دوست دارند، به جلو حرکت کنید. به یاد داشته باشید که وایرفریم ها در دراز مدت در زمان و هزینه صرفه جویی می کنند. پس آنها را دست کم نگیرید!