وایرفریم وبسایت
وایرفریم وبسایت (انگلیسی: wireframe) که با نام‌های شمای صفحه و نقشهٔ اولیهٔ صفحه نیز شناخته می‌شود یک راهنمای بصری است که چارچوب اسکلتی یک وبگاه را نمایش می‌دهد. اصطلاح وایرفریم از حوزه‌های دیگری گرفته شده که در آن‌ها از چارچوب اسکلتی برای نمایش شکل و حجم سه‌بعدی استفاده می‌شود. وایرفریم‌ها به‌منظور چیدمان عناصر برای دستیابی بهینه به یک هدف مشخص طراحی می‌شوند و این هدف معمولاً برآمده از یک هدف تجاری و یک ایدهٔ خلاقانه است.
وایرفریم چیدمان صفحه یا آرایش محتوای وبگاه شامل عناصر رابط و سامانه‌های ناوبری و نحوهٔ کارکرد آن‌ها با یکدیگر را به تصویر می‌کشد. وایرفریم معمولاً فاقد سبک حروف‌نگاری، رنگ و گرافیک است؛ زیرا تمرکز اصلی بر عملکرد، رفتار و اولویت‌بندی محتواست. به بیان دیگر وایرفریم بر آنچه یک صفحه انجام می‌دهد تمرکز دارد نه بر ظاهر آن.
وایرفریم‌ها می‌توانند طرح‌هایی با مداد روی کاغذ یا تختهٔ سفید باشند یا به‌کمک طیف گسترده‌ای از نرم‌افزارهای رایگان یا تجاری تولید شوند. معمولاً تحلیلگران کسب‌وکار، طراحان تجربهٔ کاربری، توسعه‌دهندگان، طراحان بصری و متخصصان طراحی تعاملی، معماری اطلاعات و پژوهش کاربری وایرفریم‌ها را ایجاد می‌کنند. وایرفریم همچنین برای نمونه‌سازی اولیهٔ وبگاه‌های همراه، برنامه‌های رایانه‌ای و سایر محصولات مبتنی بر صفحه‌نمایش که شامل تعامل انسان و رایانه هستند به‌کار می‌رود.
کاربردها
وایرفریم‌ها در رشته‌های مختلف کاربرد دارند. توسعه‌دهندگان از وایرفریم‌ها برای درک ملموس‌تر عملکرد وبگاه استفاده می‌کنند، در حالی که طراحان آن‌ها را برای پیشبرد فرایند رابط کاربری به‌کار می‌برند.[۱] طراحان تجربهٔ کاربری و معماران اطلاعات از وایرفریم‌ها برای نمایش مسیرهای ناوبری میان صفحات بهره می‌گیرند و تحلیلگران کسب‌وکار از آن‌ها برای پشتیبانی بصری از قواعد تجاری و الزامات تعاملی صفحه استفاده می‌کنند. ذی‌نفعان تجاری نیز وایرفریم‌ها را بررسی می‌کنند تا اطمینان حاصل کنند که الزامات و اهداف از طریق طراحی برآورده شده‌اند.[۱]
کار با وایرفریم‌ها می‌تواند فرایندی مشارکتی باشد؛ زیرا پلی میان معماری اطلاعات و طراحی بصری ایجاد می‌کند. به‌دلیل همپوشانی نقش‌های حرفه‌ای ممکن است تعارض‌هایی پدید آید که وایرفریم‌سازی را به بخشی بحث‌برانگیز از فرایند طراحی تبدیل کند.[۲]
مزایا
مزیت اصلی وایرفریم‌ها آن است که امکان تکرار چابک (Agile) بر روی هر رابطی را فراهم می‌کنند. این امر از طریق فرایندی به نام آزمون کاربردپذیری انجام می‌شود که در آن کاربران فرصت تعامل با رابط را می‌یابند و دربارهٔ فرایند ذهنی خود بلندبلند فکر می‌کنند یا به پرسش‌های ساختاریافته پاسخ می‌دهند.[۳] پس از هر آزمایش، پژوهشگر تجربهٔ کاربری تعامل‌های رایج را شناسایی و داده‌ها را تحلیل می‌کند و طراحی را بر اساس آن بازنگری می‌کند.
به‌دلیل ماهیت کم‌وفاداری (Low-fidelity) وایرفریم‌ها اعمال تغییرات بسیار آسان و کم‌هزینه است. هدف وایرفریم ثبت ساختار بنیادین و الگوی تعاملی سطح بالا در یک رابط است که به طراح اجازه می‌دهد به‌سرعت کار کند.[۳]
محورهای تمرکز
وایرفریم‌ها بر موارد زیر تمرکز دارند:[۱]
- گسترهٔ عملکردهای موجود
- اولویت‌های نسبی اطلاعات و عملکردها
- قواعد نمایش انواع خاص اطلاعات
- تأثیر سناریوهای مختلف بر نمایش
جایگاه در فرایند طراحی
وایرفریم پل ارتباطی میان ساختار مفهومی زیربنایی یعنی معماری اطلاعات و سطح بصری یعنی طراحی بصری وبگاه است.[۴] وایرفریم‌ها به تعیین عملکرد و روابط میان الگوهای مختلف صفحات وبگاه کمک می‌کنند. ایجاد وایرفریم فرایندی تکراری است و روشی مؤثر برای نمونه‌سازی سریع صفحات و سنجش عملی بودن یک مفهوم طراحی محسوب می‌شود. وایرفریم‌سازی معمولاً میان «کارهای ساختاری سطح بالا مانند نمودارهای جریان یا نقشهٔ وبگاه و طراحی صفحات» آغاز می‌شود.[۱] در فرایند ساخت وبگاه، وایرفریم‌سازی مرحله‌ای است که اندیشه شکل ملموس به خود می‌گیرد.[۲]
به گفتهٔ یاکوب نیلسن، وایرفریم‌سازی نوعی نمونه‌سازی افقی (Horizontal Prototyping) است؛ یعنی توسعهٔ بخش گرافیکی رابط انسان و ماشین.[۵]
سطوح وفاداری
وایرفریم‌ها ممکن است سطوح مختلفی از جزئیات داشته باشند و بر اساس میزان شباهت به محصول نهایی به دو دسته تقسیم می‌شوند.
کم‌وفاداری
وایرفریم‌های کم‌وفاداری (Low-fidelity) شبیه طرح‌های اولیه یا ماکت‌های سریع هستند و به‌سرعت قابل تولیدند. این وایرفریم‌ها با استفاده از مستطیل‌ها و برچسب‌ها برای نمایش محتوا انتزاعی‌ترند و به تیم پروژه کمک می‌کنند تا ایده‌ها را مؤثرتر مبادله کنند.[۲] محتوای ساختگی و متن پرکنندهٔ لاتین (لورم ایپسوم) یا محتوای نمادین برای نمایش داده‌ها هنگامی که محتوای واقعی در دسترس نیست به‌کار می‌رود.[۱] برای مثال به‌جای تصاویر واقعی از یک مستطیل جایگزین استفاده می‌شود.
وایرفریم‌های کم‌وفاداری در مراحل اولیهٔ پروژه برای تسهیل ارتباط تیمی به‌کار می‌روند.[۶] ارزش این وایرفریم‌ها در توانایی‌شان برای متمرکز کردن بحث ذی‌نفعان بر ساختار و عملکرد به‌جای زیبایی‌شناسی بصری است که از بحث‌های زودهنگام طراحی جلوگیری می‌کند.[۷] این وایرفریم‌ها معمولاً با ابزارهای ساده مانند قلم و کاغذ، تختهٔ سفید یا برنامه‌های دیجیتال پایه ساخته می‌شوند.
پروفاداری
وایرفریم‌های پروفاداری (High-fidelity) اغلب برای مستندسازی به‌کار می‌روند؛ زیرا سطح جزئیاتی دارند که بیشتر به طراحی واقعی صفحهٔ وب نزدیک است و در نتیجه زمان بیشتری برای ایجادشان لازم است.[۲] برای پروژه‌های پیچیده‌تر ایجاد وایرفریم با نرم‌افزار رایانه‌ای رایج است و برخی ابزارها امکان افزودن تعامل از جمله پویانمایی فلش و فناوری‌های وب سمت کاربر مانند اچ‌تی‌ام‌ال، سی‌اس‌اس و جاوااسکریپت را فراهم می‌کنند.[۱]
وایرفریم‌های پروفاداری شامل محتوای واقعی‌تر، انتخاب‌های مشخص حروف‌نگاری و اطلاعاتی دربارهٔ ابعاد تصاویر هستند. برخلاف وایرفریم‌های کم‌وفاداری ممکن است تصاویر واقعی را نیز شامل شوند. انتخاب رنگ معمولاً لحاظ نمی‌شود اما مقادیر مختلف رنگی می‌توانند به صورت طیف خاکستری نمایش داده شوند.[۶][۸]
برای طرح‌های ساده یا کم‌وفاداری نمونه‌سازی کاغذی تکنیکی رایج است. از آنجا که این طرح‌ها صرفاً بازنمایش هستند یادداشت‌های حاشیه‌ای برای توضیح رفتار مفید خواهند بود.[۱]
عناصر تشکیل‌دهنده
طرح اسکلتی یک وبگاه را می‌توان به سه مؤلفه تجزیه کرد: طراحی اطلاعات، طراحی ناوبری و طراحی رابط. صفحه‌آرایی جایی است که این مؤلفه‌ها گرد هم می‌آیند و وایرفریم رابطهٔ میان آن‌ها را به تصویر می‌کشد.[۴]
طراحی اطلاعات
طراحی اطلاعات عبارت است از ارائه یعنی جای‌گذاری و اولویت‌بندی اطلاعات به‌گونه‌ای که درک آن تسهیل شود. این حوزه بخشی از طراحی تجربه کاربری است و هدفش نمایش مؤثر اطلاعات برای ارتباط روشن است. در وبگاه‌ها عناصر اطلاعاتی باید به‌شکلی چیده شوند که اهداف و وظایف کاربر را بازتاب دهد.[۴]
طراحی ناوبری
سامانهٔ ناوبری مجموعه‌ای از عناصر صفحه را فراهم می‌کند که به کاربر امکان حرکت از صفحه‌ای به صفحهٔ دیگر را می‌دهد. طراحی ناوبری باید رابطهٔ میان پیوندهای موجود را به‌گونه‌ای منتقل کند که کاربران گزینه‌های ناوبری خود را درک کنند. وبگاه‌ها اغلب شامل چندین سامانهٔ ناوبری از جمله ناوبری سراسری، محلی، مکمل، زمینه‌ای و تشریفاتی هستند.[۴]
طراحی رابط
طراحی رابط کاربری شامل انتخاب و چیدمان عناصر رابط برای توانمندسازی کاربران در تعامل با عملکردهای سامانه است.[۴] هدف تسهیل هرچه بیشتر کاربردپذیری و بهره‌وری است. عناصر رایج در طراحی رابط شامل دکمه‌های عملیاتی، فیلدهای متنی، کادرهای انتخاب، دکمه‌های رادیویی و فهرست‌های کشویی هستند.
انواع وایرفریم از نظر تعامل
بر اساس منابع آلمانی‌زبان دو نوع وایرفریم وجود دارد:[۹]
- وایرفریم ایستا: نمایش شماتیک یک الگوی صفحهٔ واحد که عناصر اصلی صفحه را نشان می‌دهد. یک چیدمان مفهومی باید قابل تشخیص باشد اما طراحی نهایی ضروری نیست.
- وایرفریم پویا: شامل چند صفحه است که به‌صورت نمونهٔ اولیهٔ تعاملی به یکدیگر پیوند خورده‌اند و ناوبری از صفحه‌ای به صفحهٔ دیگر را ممکن می‌سازند. وایرفریم‌های پویا اغلب با درخت ناوبری یا نمودار جریان تکمیل می‌شوند.
نرم‌افزارهای مرتبط
اگرچه نمونه‌سازی کاغذی هنوز تکنیکی رایج است، استفاده از نرم‌افزارهای اختصاصی رو به افزایش است. برخی از ابزارهای پرکاربرد عبارت‌اند از:[۱۰]
- Axure
- Balsamiq
- Figma
- Adobe XD
- Microsoft Visio
- OmniGraffle
- Inkscape (نرم‌افزار آزاد)
- Draw.io
- Lucidchart
جستارهای وابسته
منابع
- 1 2 3 4 5 6 7 Brown، Dan M. (۲۰۱۱). Communicating Design: Developing Web Site Documentation for Design and Planning. New Riders Press. شابک ۹۷۸-۰۳۲۱۷۱۲۴۶۲.
{{cite book}}: نگهداری یادکرد:تاریخ به‌طور خودکار ترجمه‌شده (رده) - 1 2 3 4 Wodtke، Christina؛ Govella، Austin (۲۰۰۹). Information Architecture: Blueprints for the Web. New Riders Press. شابک ۹۷۸-۰۳۲۱۶۰۰۸۰۶.
{{cite book}}: نگهداری یادکرد:تاریخ به‌طور خودکار ترجمه‌شده (رده) - 1 2 «Contextual Design» (PDF). دریافت‌شده در ۲۰۲۳-۱۱-۰۱.
{{cite web}}: نگهداری یادکرد:تاریخ به‌طور خودکار ترجمه‌شده (رده) - 1 2 3 4 5 Garrett، Jesse James (۲۰۱۰). The Elements of User Experience: User-Centered Design for the Web and Beyond. New Riders Press. شابک ۹۷۸-۰۳۲۱۶۸۳۶۸۷.
{{cite book}}: نگهداری یادکرد:تاریخ به‌طور خودکار ترجمه‌شده (رده) - ↑ Nielsen، Jakob (۱۹۹۳). Usability Engineering. شابک ۰-۱۲-۵۱۸۴۰۶-۹.
{{cite book}}: نگهداری یادکرد:تاریخ به‌طور خودکار ترجمه‌شده (رده) - 1 2 «Low-fidelity vs. High-fidelity Wireframes». Steadfast Creative. ۲۰۱۶-۰۹-۱۳. بایگانی‌شده از اصلی در ۵ فوریه ۲۰۱۷. دریافت‌شده در ۲۰۱۸-۰۲-۰۶.
{{cite web}}: نگهداری یادکرد:تاریخ به‌طور خودکار ترجمه‌شده (رده) - ↑ «Low Fidelity vs High Fidelity Wireframes». The Moqups Blog. ۲۰۲۱-۰۶-۰۸. دریافت‌شده در ۲۰۲۵-۰۲-۲۶.
{{cite web}}: نگهداری یادکرد:تاریخ به‌طور خودکار ترجمه‌شده (رده) - ↑ «Wireframes: Low-Fidelity vs. High-Fidelity». Dupont Creative. ۲۰۱۶-۱۱-۲۷. دریافت‌شده در ۲۰۱۹-۰۷-۰۸.
{{cite web}}: نگهداری یادکرد:تاریخ به‌طور خودکار ترجمه‌شده (رده) - ↑ مقالهٔ آلمانی ویکی‌پدیا دربارهٔ Wireframe
- ↑ مقالهٔ فرانسوی ویکی‌پدیا دربارهٔ Wireframe (design)
پیوند به بیرون
- طراحی وب