خطوة بخطوة - كيفية تصميم لوحة معلومات الفواتير

في هذه المقالة ، سوف نلقي نظرة على لوحة معلومات Invoices التي صممها Hrvoje Grubisic ونحن نمضي قدمًا في تصميم نموذج من نفس الشيء باستخدام إطار Bunifu UI Framework الجميل والرائع.

قبل أن نبدأ عملية التصميم لدينا ، دعونا نلقي نظرة على النتيجة النهائية ...

الائتمان: لوحة معلومات الفواتير من Hrvoje Grubisic - https://dribbble.com/shots/3101891-Invoices-Dashboard

نظرة سريعة (عناصر التحكم والمكونات)

دعونا نضع خريطة لجميع عناصر التحكم والمكونات التي نحتاج إليها لإعادة تصميم لوحة معلومات الفواتير.

جميع الضوابط والمكونات

نحن الآن على استعداد للبدء ...

عملية التصميم

قبل أن نبدأ ، يجب أن يكون لديك نسخة من مكتبة Bunifu UI Framework. يمكنك تنزيل النسخة التجريبية المجانية لمدة أسبوع. وبالمثل ، يرجى الحصول على نسخة من برنامج Icons8 من أجل "كل الأشياء - أيقونات" و Just Color Picker الأداة المساعدة لاختيار الألوان من أي منطقة من واجهات المستخدم. هذه هي الأدوات التي ستساعدك في تصميم لوحة المعلومات هذه.

لنبدأ بفتح الاستوديو المرئي وإنشاء تطبيق Windows Form مع اسم من اختيارك وانقر فوق "موافق".

  • أولاً ، نحتاج إلى إضافة مكون BunifuElipse إلى نموذجنا الذي تم إنشاؤه حديثًا لإزالة الحدود:
نموذج مع مكون BunifuElipse
  • الآن ، دعونا نضيف لوحتين ، اربط أحدهما إلى الأعلى والآخر إلى اليسار باستخدام خاصية Dock.
لوحة ذات لون خلفي أبيض (يسار) ، لوحة بأعلى rgb (111 ، 109 ، 216)
  • بعد ذلك ، أضف 9 BunifuCustomLabels وقم بتعيين خاصية forecolor على الأبيض والنصوص كما هو موضح أدناه:
BunifuCustomLabel (ق)
  • الآن ، يمكنك المضي قدمًا وإضافة BunifuTileButtons وتعيين الرموز كما هو موضح. تتم إضافة هذه على لوحة التنقل التي قمنا بتثبيتها إلى اليسار.
بالنسبة للأيقونات المستخدمة ، يمكنك الحصول عليها جميعًا مجانًا باستخدام Icons8!
BunifuTileButtons
  • أضف أي عنصر تحكم يمكن تغيير حجمه ، على سبيل المثال عنصر التحكم PictureBox والذي سيكون بمثابة مؤشر كلما انتقل المستخدم عبر الرموز ، واضبط لونه على rgb (122،117،195). استخدم خاصية الموقع لتعيين مواضع X و Y في عنصر التحكم في وقت واحد. تظهر النتائج أدناه.
  • أضف BunifuCustomLabel و Link Label و BunifuSeperator إلى النموذج وفي قسم الخصائص ، قم بتعيين النص على ما يظهر أدناه:
نموذج كامل
  • أضف الآن فريقين ، عيّن اللون الخلفي إلى اللون الأبيض وأضف BunifuCustomLabels إلى اللوحة الموجودة على اليسار. سيبدو القسم بالكامل كما يلي:
نموذج كامل
  • أضف هذا إلى اللوحة على اليمين. للرموز الخضراء والأزرق ، أضف BunifuCustomLabels وعلى خاصية النص ، أضف الرمز النقطي "." حرف Unicode.
  • أضف مكون Bunifu DataViz إلى اللوحة على اليمين واكتب الكود الموضح أدناه من أجل رسم المخطط (Bunifu Stacked AreaChart). يمكنك تشغيل لرؤية النتائج. لاحظت وجود ألوان افتراضية للرسم البياني.
  • الآن قم بتغيير مجموعة الألوان إلى الألوان التي نريدها باستخدام الكود أدناه.
  • سيبدو القسم كاملاً كما يلي:
DataViz مكون
  • الآن وقد انتهينا من القسم العلوي ، يمكننا الانتقال إلى القسم السفلي. سنستخدم هنا عنصر تحكم مستخدم مختلف يحتوي على BunifuCustomDataGrid. سنقوم بتحميل البيانات إلى DataGrid مع الصفوف والأعمدة.
  • انتقل إلى Project> إضافة User Contol. أضف 2 BunifuFlatButtons وعلى خاصية النص ، اضبط على ما يظهر أدناه. اسحب عنصر التحكم BunifuCustomDataGrid إلى عنصر تحكم المستخدم.
  • أخيرًا ، يتيح إضافة بيانات إلى BunifuCustomDataGrid لدينا. انقر بزر الماوس الأيمن فوق BunifuCustomDataGrid وحدد إضافة عمود. إضافة خمسة أعمدة وتأكد من تعيين ColumnType إلى DataGridViewTextBoxColumn باستثناء العمود الأول (الحالة) الذي نوعه هو DataGridViewButtonColumn.
  • عد الآن إلى الجزء "تصميم النموذج" واسحب المستخدم contol على القسم السفلي من النموذج. قم بتشغيل المشروع ومعرفة ما إذا كان لديك النتيجة الموضحة أدناه.
  • حسنًا ، الخطوة الأخيرة هي إضافة الصفوف إلى BunifuCustomDataGrid. انقر نقرًا مزدوجًا فوق عنصر تحكم المستخدم وفي usercontrol.cs (حدث تحميل) ، أضف الكود الموضح أدناه.
  • الآن احفظ التغييرات وقم بتشغيل المشروع ، وإذا كان ما لديك هو النتيجة الموضحة أدناه ، فتهانينا بذلك.

رابط الموارد

  • شفرة المصدر: https://github.com/bunifu-framework/invoice-dashboard

استنتاج

التصميم المرئي هو عملية تحويل أفكارك إلى إطارات وهمية. هذا هو بالضبط ما فعلناه هنا. في البداية بدا ذلك صعباً ولكن بمساعدة Bunifu UI Framework ، لم يكن من الصعب تحقيقه. نأمل أن يكون هذا مصدر إلهام لك للقيام بالمزيد من النماذج بالحجم الطبيعي باستخدام إطار واجهة المستخدم Bunifu.

الترميز سعيد وتصميم!