[ez-toc]

مقدمه: چرا طراحی رابط کاربری پلتفرم اهمیت دارد؟

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

 مراحل طراحی رابط کاربری پلتفرم (با متدولوژی Agile)

دیاگرام جریان کاربر و وایرفریم

 دیاگرام جریان کاربر (User Flow Diagram)

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

 وایرفریم (Wireframe)

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

سیستم طراحی (Design System)

سیستم طراحی مجموعه‌ای از ابزارها، راهنماها و اجزاست که هماهنگی رابط گرافیکی در کل پروژه را تضمین می‌کند.

اجزای سیستم طراحی:

 المان‌های رابط کاربری پلتفرم

در ادامه، مهم‌ترین عناصر رابط گرافیکی برای پلتفرم هوشمند گاز معرفی می‌شود:

 استانداردهای طراحی رابط کاربری

پلتفرم باید با بهترین استانداردهای جهانی و داخلی هماهنگ باشد:

• Material Design (Google)

• Apple HIG

• Microsoft UI Guidelines

• WCAG (برای دسترسی‌پذیری بهتر)

• استانداردهای داخلی شرکت ملی گاز

فرايند طراحي رابط كاربري پلتفرم

طراحی رابط كاربری پلتفرم و پياده سازي كاربري درگام‎هاي زير انجام مي‎شود. مراحل1 تا 3 در اين پروژه و در قالب اين سند ارائه مي‎گردد و مراحل 4 تا 7 در فاز اجرا و توسعه توسط پيمانكار مي‎بايست انجام شود.  شکل زیر فرایند اجرای طراحی رابط کاربری با متدولوژی Agile را برای پلتفرم نمايش مي‎دهد.

1. تحقیق در مورد پلتفرم: در این مرحله، تیم‌های توسعه و طراحی با هم همکاری می‌کنند تا نیازمندی‌های رابط کاربری به طور دقیق شناسایی شوند. تجزیه و تحلیل نیازمندی‌ها و تعیین ویژگی‌های کلیدی در این مرحله انجام می‌شود.
2. طراحی مفهومی: در این مرحله، تیم طراحی رابط کاربری مفاهیم و ایده‌های خود را براساس نیازمندی‌ها به صورت اولیه طراحی می‌کند. این طراحی‌ها به صورت طرح‎هاي اوليه يا همان sketch نمایش داده می‌شوند.
3. وایرفریم: منظور از وایرفریم، نوعی راهنمای بصری برای نمایش ساختار صفحه است. تهیه یک وایرفریم این امکان را می‌دهد تا ستون اصلی محصول ايجاد شود. در فاز پياده سازي، طراحان از وایرفریم به عنوان مبناي كار و كدنويسي استفاده می‌کنند.
4. پروتوتایپ: در این مرحله، تیم توسعه به منظور توسعه یک نمونه از رابط کاربری، طراحی‌های مفهومی را به کد تبدیل می‌کند. این نمونه‌ها می‌توانند قابل تعامل باشند و به صورت پروتوتایپ در طول فرآیند توسعه استفاده شوند.
5. بازخورد و ارزیابی: پس از ساخت نمونه‌ها، بايد به کاربران و سایر اعضای تیم عرضه و حتي كارفرما ارائه ‌شوند تا بازخورد دریافت کنند. این بازخورد‌ها به تیم طراحی کمک می‌کنند تا بهبودهای لازم و تغييرات سريع را در رابط کاربری اعمال کنند.
6. تکرار و بهبود: فرآیند فوق در چرخه‌های متعدد تکرار خواهد شد تا بهبودهای مستمری در طراحی رابط کاربری ایجاد شود. هر بار که فرآیند تکرار می‌شود، تیم‌ها می‌توانند از بازخوردها و تجربیات قبلی خود استفاده نموده و روش کار خود را بهبود بخشند.
7. پیاده‌سازی و اجرا: پس از آزمایش کاربر، نمونه اولیه تایید شده در نهایت می‌تواند به محصول واقعی برای تست UAT قبل از راه‌اندازی رسمی تبدیل شود.

وایرفریم و نمودار جریان کاربر

برای ارائه طراحی از نمودار جریان کاربر (User Flow) و وایرفریم (Wireframe) استفاده شده است. در طراحی رابط کاربری، دیاگرام‌های جریان کاربر (User Flow Diagrams) و وایرفریم‌ها (Wireframes) دو ابزار اساسی هستند که در ارتباط با طراحی رابط کاربری استفاده می‌شوند. این ابزارها به طراحان کمک می‌کنند تا ساختار و جریان تعامل کاربر با سیستم را بهتر درک کرده و طراحی نهایی رابط کاربری را بهبود بخشند. در ادامه به توضیحات کلی درباره دیاگرام‌های جریان کاربر و وایرفریم‌ها پرداخته شده است:

دیاگرام جریان کاربر (User Flow Diagram): دیاگرام جریان کاربر نمایش می‌دهد که کاربر در سیستم چگونه با مراحل مختلف تعامل می‌کند و چگونه از یک صفحه به صفحه دیگر حرکت می‌کند. این ابزار به طراحان کمک می‌کند تا نقاط ضعف در تجریه کاربر را شناسایی کنند و بهبودهای لازم را در طراحی اعمال کنند.

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

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

المان‌ها، آیکون‌ها و رنگ در طراحی پلتفرم

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

مواردی که در یک طراحی سیستم باید مدنظر قرار گیرند عبارتند از:

1. الگوها (Patterns): الگوها مجموعه‌ای از روش‌ها و راهکارهای مشترک هستند که برای حل مسائل طراحی مورد استفاده قرار می‌گیرند. به عنوان مثال، الگوهای منوی ناوبری، فرم‌ها، کارت‌ها و غیره.
2. راهنمای استایل (Style Guide): راهنمای استایل شامل توصیف استانداردهای طراحی است که شامل رنگ‌ها، فونت‌ها، آیکون‌ها، پوشه‌بندی، فاصله‌بندی و سایر عناصر ظاهری است. این راهنما به تیم‌های طراحی و توسعه کمک می‌کند تا در یکسان‌سازی ظاهری رابط کاربری کار کنند.
3. کامپوننت‌ها (Components): کامپوننت‌ها بخش‌های قابل استفاده‌ی قابل تعامل در رابط کاربری هستند که شامل الگوها، اجزا و ویژگی‌های مشابه هستند. این کامپوننت‌ها می‌توانند برای ساخت صفحات و بخش‌های مختلف در نرم‌افزار استفاده شوند و توسط تیم‌های توسعه به صورت قابل استفاده و قابل تکرار ارائه شوند.
4. دستورالعمل‌ها (Guidelines): دستورالعمل‌ها شرح و راهنمایی جامع در مورد استفاده و پیاده‌سازی الگوها، راهنمای استایل و کامپوننت‌ها هستند. این دستورالعمل‌ها شامل توضیحات در مورد استفاده صحیح، تنظیمات و نکات مربوط به طراحی‌ها است.
5. مستندات (Documentation): مستندات مربوط به طراحی سیستم شامل توضیحات جامع در مورد عناصر سیستم، نحوه استفاده، نکات پیاده‌سازی و مطالب مرتبط دیگر است. این مستندات به تیم‌های توسعه و طراحی کمک می‌کند تا با استفاده صحیح از سیستم، طراحی و توسعه را ادامه دهند.

المان‌های پلتفرم

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

• راهنمای طراحی رابط کاربری مایکروسافت (Microsoft’s User Interface Design Guidelines): این راهنما برای طراحی نرم‌افزارها و برنامه‌های مبتنی بر ویندوز توسط شرکت مایکروسافت ارائه شده است.
• دستورالعمل طراحی رابط کاربری مواد (Material Design Guidelines): این دستورالعمل توسط گوگل برای طراحی رابط کاربری اپلیکیشن‌ها و وب‌سایت‌ها توسعه داده شده است.
• راهنمای طراحی رابط کاربری اپل (Apple’s Human Interface Guidelines): این راهنما برای طراحی نرم‌افزارها و برنامه‌های مبتنی بر سیستم عامل iOS و macOS توسط شرکت اپل ارائه شده است.
• WCAG (Web Content Accessibility Guidelines): این استاندارد توسط سازمان بین‌المللی W3C برای تضمین دسترسی آسان و قابل استفاده برای تمام کاربران از طراحی وبسایت‌ها و رابط‎های کاربری‌ تعیین شده است.
• همچنین، باید به راهنماها و استانداردهای داخلی برای طراحی المان‌ها در طراحی رابط کاربری که شركت ملي گاز تعیین کرده است، توجه شود.

برخی از اصلی‌ترین المان‌های مورد استفاده در طراحی رابط کاربری پلتفرم عبارتند از:

دکمه‌ها (Buttons): المان‌هایی که برای فعال‌سازی عملیات مشخصی مانند ارسال فرم، ذخیره کردن تغییرات و غیره استفاده می‌شوند.

منوها (Menus): المان‌هایی که گزینه‌ها و انتخاب‌های کاربر را نمایش می‌دهند و به ویژه برای ناوبری در یک وب‌سایت یا برنامه کاربرد دارند. در پلتفرم با توجه به کاربر منو تغییر می‌کند. منوی هر کاربر در فصل‌های بعد به تفکیک کاربر همراه با وایرفریم‌ صفحات آن ارائه شده است.

فرم‌ها (Forms): المان‌هایی که اجازه ورود و ویرایش اطلاعات توسط کاربر را می‌دهند. این المان‌ها شامل فیلدهای متنی، چک‌باکس، دکمه‌های رادیویی، منوهای کشویی و غیره است.

نوار ناوبری (Navigation Bar): یک المان مهم در طراحی رابط کاربری است که برای راهنمایی کاربر در ناوبری و دسترسی به صفحات مختلف پلتفرم  استفاده می‌شود.

جداول (Tables): المان‌هایی که برای نمایش داده‌ها به صورت جدولی و سازماندهی شده به کار می‌روند.

پنجره‌ها (Windows): المان‌هایی که برای نمایش محتواهای مختلف به صورت قابل جابجایی و قابل بستن و باز شدن استفاده می‌شوند.

المان‌های تصویری (Visual Elements):  شامل عناصری مانند تصاویر، آیکون‌ها، نمودارها و ویدئوها است که برای انتقال اطلاعات بصری به کاربر استفاده می‌شوند.  در بخش ویژگی‌ آیکون به موارد مختلف آن اشاره می‌شود.

پیام‌ها و هشدارها: برای ارتباط با کاربران و اطلاع‌رسانی در مورد وضعیت و رویدادهای مهم استفاده می‌شود. برخی از پیام‎ها عبارتند از:

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

نمودارها (Charts): المان‌هایی که برای نمایش داده‌ها و ارائه اطلاعات به شکل گرافیکی و تصویری استفاده می‌شوند.

سوالات متداول

طراحی وایرفریم چه فایده‌ای دارد؟

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

آیا برای هر کاربر باید منوی متفاوت طراحی شود؟

بله، با توجه به نقش (اپراتور، ناظر، مدیر، پشتیبان فنی)، منوهای سفارشی طراحی می‌شوند.

استاندارد Material Design برای پلتفرم گاز مناسب است؟

بله، به‌ویژه برای طراحی مدرن، قابل توسعه و ریسپانسیو در پلتفرم‌های تحت وب و موبایل بسیار مناسب است.