نقدّم v5: واجهة ThriveDesk الجديدة
أعدنا بناء واجهة تطبيق ThriveDesk على نظام التصميم الخاص بنا. رتّب التنقل وصندوق الوارد بالطريقة التي تعمل بها، وبدّل بين صناديق الوارد من الشريط العلوي، واكتب في محرر ردود جديد، وفعّل الوضع الداكن.
واجهة التطبيق الجديدة جزء من تحديث هويتنا. هدفنا أن يكون ThriveDesk أفضل منصة لخدمة العملاء لفرق التجارة الإلكترونية وSaaS، لذلك أعدنا بناء الواجهة من الأساس. قبل أن نبدأ، تحدثنا مع العملاء عمّا كان يبطئ عملهم. والنتيجة تطبيق يمكنك تخصيصه من جوهره. وهو أيضًا أسرع وأسهل في التعلّم.
يعمل v5 الآن لجميع الحسابات في كل الخطط. لا تحتاج إلى إعداد أي شيء.
لماذا أعدنا بناءها
منذ إطلاقنا الأول، كانت للواجهة الخلفية قواعد صارمة لاختبارات الوحدات. أما الواجهة الأمامية فلم تكن لها هذه القواعد، ومع الوقت تراكم فيها كثير من الدين التقني.
تغيّرت الواجهة الأمامية مرات عديدة. استخدم الإصدار 1 إطار Bootstrap. ثم انتقلنا إلى Material Design واحتفظنا بجزء من Bootstrap. في v3، أضفنا Tailwind CSS فوق الاثنين. استبدل ذلك أجزاء كثيرة، لكن بقيت بعض المكونات الكبيرة. ثم استخدمنا Ant Design لبعض المكونات، وانتقل v4 بالكامل إلى PrimeNG. عمل PrimeNG جيدًا إلى أن أغلق مصدره وأضاف ترخيصًا تجاريًا.
كان أمامنا خياران: الاحتفاظ بنسخة من آخر إصدار مفتوح المصدر من PrimeNG، أو بناء نظام تصميم خاص بنا. فبنينا نظامنا. وقد جعلت البرمجة الوكيلية ذلك ممكنًا في وقت قصير.
كيف بنيناها
قبل أن نكتب أي سطر من الكود، جمعنا ملاحظات العملاء. كتابة الكود سهلة. أما الواجهة الجيدة فتحتاج إلى فهم واضح للمشكلات التي يواجهها عملاؤك.
أنشأنا نظام تصميم خاصًا بنا قائمًا على الرموز (tokens)، مستوحى من shadcn، ونقلنا المكونات إليه واحدًا تلو الآخر. بدأنا بالمكونات الأساسية، ثم المكونات الهجينة والمكونات ذات الاستخدام الواحد. خضع كل مكوّن وكل تغيير لاختبارات شاملة واختبارات وحدات. وبفضل البرمجة الوكيلية، استغرق الانتقال الكامل أسبوعين.
لم تعد أطر الواجهة القديمة موجودة. نحن نملك الآن كل كود الواجهة. وهذا هو فرق السرعة:
خصّص التنقل الرئيسي
صممنا v5 بحيث يمكنك تخصيص كل جزء منه. لا يعمل فريقا دعم بالطريقة نفسها، والشاشة المليئة بأدوات لا تفتحها أبدًا تبطئ عملك. في v5، تقرر أنت ما يظهر في التنقل الرئيسي وفي الشريط الجانبي لصندوق الوارد، وبأي ترتيب. وتختار أيضًا شكل قائمة التذاكر وعرض كل شريط جانبي. أبقِ الأدوات التي تستخدمها كل يوم أمامك، وأبعد الباقي عن طريقك.
انقر بالزر الأيمن على التنقل الرئيسي واختر Icon only أو Icon with name. الخيار الافتراضي هو Icon with name. لمزيد من الخيارات، اختر Customize.
فعّل كل قسم أو أوقفه، واسحب الأقسام إلى الترتيب الذي تريده. إذا كنت لا تفتح Workflow أو التقارير كل يوم، فأوقفهما. يمكنك تفعيلهما مرة أخرى في أي وقت.
خصّص الشريط الجانبي لصندوق الوارد
طلب كثير منكم التحكم في الشريط الجانبي لصندوق الوارد. أصبحت الآن تتحكم فيه بالكامل. إذا لم تكن بحاجة إلى مجلد أو قسم، فأوقفه. واسحب الباقي إلى الترتيب الذي تريده. تبقى العناصر التي تختارها في الشريط الجانبي، وتنتقل العناصر الأخرى إلى المزيد.
اختر طريقة عرض التذاكر
يمكنك أيضًا ضبط شكل قائمة التذاكر. جمّع التذاكر حسب الأولوية أو الحالة أو الوسم. اختر الترتيب، واختر الخصائص التي تظهر في كل تذكرة.
اضبط التنقل بين التذاكر
عندما تفتح تذكرة، يكون لقائمة التذاكر المجاورة لها ترتيب وإعدادات عرض خاصة بها. اختر صفوفًا مضغوطة أو موسّعة، وحدد الخصائص التي تريد رؤيتها، مثل الحالة أو الأولوية أو الوسوم أو آخر رد. للانتقال إلى التذكرة التالية، اخترها من القائمة. وللتركيز على محادثة واحدة، أخفِ القائمة.
يمكنك أيضًا سحب حافة كل شريط جانبي لضبط عرضه بما يناسب حجم شاشتك. على الحاسوب المحمول، اجعل الأشرطة الجانبية ضيقة لتحصل المحادثة على مساحة أكبر.
بدّل بين صناديق الوارد من الشريط العلوي
كل شيء في ThriveDesk ينتمي إلى صندوق وارد. كانت قائمة صناديق الوارد في الشريط الجانبي، وإذا كان لديك صناديق وارد كثيرة، كان من السهل أن تنسى أي صندوق تعمل فيه.
أصبحت أداة التبديل بين صناديق الوارد الآن في أعلى التطبيق. ترى دائمًا صندوق الوارد الذي تعمل فيه، ويمكنك التبديل بين الصناديق بسرعة أكبر. وتعرض الأداة أيضًا عدد التذاكر في كل صندوق وارد، فتعرف أي صندوق يحتاج إلى انتباهك.
أنجز تذاكرك بسرعة أكبر
يعرض زر تذاكري المجاور لأداة التبديل التذاكر المسندة إليك من كل صناديق الوارد. اختر تذكرة لفتحها. ولإبقاء القائمة قصيرة، تعرض 5 تذاكر كحد أقصى.
محرر ردود جديد
أعدنا بناء محرر الردود من الصفر. وهو يعمل الآن بالكتل، مثل Notion. اكتب / لفتح قائمة الكتل، ثم اختر نصًا أو عنوانًا أو قائمة نقطية أو مرقّمة أو اقتباسًا. لا تحتاج إلى ترك لوحة المفاتيح لتنسيق الرد، فتصبح كتابة الإجابات الطويلة ذات الخطوات أو الأقسام سريعة، وتسهل قراءتها على عميلك.
لتغيير ارتفاع المحرر، اسحب الشريط الموجود في أعلاه. المحرر الأطول يعرض جزءًا أكبر من ردك. اجعله قصيرًا لتبقى المحادثة أمامك أثناء الكتابة، أو طويلًا عندما تكتب إجابة طويلة.
عادت الإشعارات داخل التطبيق
إذا أشار إليك أحد زملائك أو أسند إليك تذكرة وفاتك البريد الإلكتروني، فسيخبرك التطبيق الآن أيضًا. اختر أيقونة الإشعارات في أعلى اليمين لرؤيتها. افتح علامة التبويب Mentioned لرؤية المحادثات التي يحتاجك فيها أحد فقط، أو اختر Mark all as read لمسح القائمة.
قوالب الأتمتة
أعدنا أيضًا تصميم طريقة إنشاء الأتمتة. عند إنشاء سير عمل جديد، ابدأ من الصفر أو من قالب. يعرض كل قالب معاينة لطريقة عمله. وإذا احتجت إلى قالب غير موجود، فأخبرنا.
إعدادات منظّمة
راجعنا كل شاشة إعدادات ووضعنا الإعدادات في بطاقات ومجموعات وعلامات تبويب. أصبح العثور عليها أسهل، وترتيبها أكثر منطقية من قبل. وأصبح ربط عنوان بريد إلكتروني بصندوق وارد أبسط الآن.
الوضع الداكن
يقولون إنك لست شركة ناشئة حقيقية حتى يكون لتطبيقك وضع داكن. أردناه نحن أيضًا، لكن أطر المكونات القديمة منعتنا. والآن بعد أن أصبحنا نملك كل كود الواجهة، يمكننا بناء ما نريد.
لتغيير المظهر، اختر أيقونة ملفك الشخصي في أعلى اليمين. ثم اختر System أو فاتح أو داكن.
صنعنا كل بكسل في هذه الواجهة من الصفر، لكننا حافظنا على طرق العمل التي تعرفها. يمكنك مواصلة العمل كما كنت تفعل من قبل. وهذه الواجهة هي أيضًا الأساس لخطوتنا التالية: منصة خدمة عملاء وكيلية بالكامل للتجارة الإلكترونية.
افتح ThriveDesk
