تصميم واجهات ويب 3 للتطبيقات اللامركزية والمحافظ ومنصات التبادل، حالة واحدة في كل مرة

ما الذي يغطيه تصميم واجهات ويب 3

اختبار سريع: اطلب من مستخدم جديد إرسال معاملة اختبارية باستخدام النموذج الأولي الخاص بك. لاحظ كل لحظة يتردد فيها.

تصميم واجهات ويب 3 يجعل المسار عبر التطبيق اللامركزي أو المحفظة أو منصة التبادل أو الصفحة المقصودة أسهل في الفهم والإكمال. فهو يجمع بين الأبحاث وتخطيط التفاعل والتصميم البصري، بحيث تشرح الواجهة ما يمكن للمستخدمين فعله وما سيحدث بعد ذلك.

هذه الخدمة مناسبة عندما تقوم بإعداد منتج جديد، أو إعادة هيكلة رحلة مربكة، أو مواءمة واجهة حالية قبل التطوير. وهي مفيدة بشكل خاص عندما يشمل الجمهور أشخاصًا جددًا في العملات المشفرة وقد لا يفهمون بالفعل اتصالات المحفظة أو تأكيدات المعاملات أو رسوم الغاز.

يمكن أن يغطي العمل:

• أبحاث المستخدمين ومراجعة تجارب المنافسين ذات الصلة.
• تدفقات المستخدم التي توضح كيف ينتقل الشخص من نقطة الدخول إلى إكمال المهمة.
• إطارات سلكية للاتفاق على الهيكل والأولوية قبل التحسين البصري.
• نظام تصميم بصري ومكتبة مكونات لشاشات متسقة.
• نموذج أولي تفاعلي واختبار قابلية الاستخدام وتسليم للمطورين في Figma.

إذا كان المشروع يحتاج أيضًا إلى هوية بصرية متسقة، فقم بإقران عمل الواجهة مع التصميم والمرئيات أو العلامة التجارية للعملات المشفرة. نقطة البداية الصحيحة هي مهمة المنتج الأكثر أهمية - وليس طلب إعادة رسم كل شاشة مرة واحدة.

كيف نرسم رحلة مستخدم ويب 3؟

تبدأ واجهة ويب 3 القوية بحساب واضح لهدف المستخدم، والقرارات التي يجب أن يتخذها، والمعلومات التي يحتاجها في كل خطوة. نرسم الرحلة قبل الالتزام بتخطيطات الشاشة، حتى يتمكن الفريق من حل المنطق المربك بينما لا تزال التغييرات سهلة.

نراجع منتجك، وشاشاتك الحالية، وجمهورك، وتجارب المنافسين، ثم نحدد المهام والأسئلة الأساسية. بالنسبة للمحفظة أو التطبيق اللامركزي، قد يعني هذا تتبع التسجيل، واتصال المحفظة، وإجراء معاملة، ومسار التأكيد أو الاسترداد. نوثق التسلسل كتدفق ونشير إلى نقاط القرار، والمعلومات المفقودة، والأماكن التي قد يحتاج فيها المستخدمون إلى الطمأنة.

قبل الانتقال إلى التصميم التفصيلي، قم بإعداد:

• مهام المستخدم الأساسية للمنتج والجمهور المستهدف.
• الشاشات الحالية أو ملاحظات المنتج أو الإصدار العامل، إن وجد.
• الإجراءات التي تتطلب محفظة متصلة أو تأكيد المستخدم.
• حالات المعاملات المعروفة وحالات الخطأ وإرشادات الدعم.
• أي قيود تقنية يعرفها فريق التطوير لديك بالفعل.

نستخدم هذه المواد للاتفاق على الرحلات التي ستكون ضمن الخطة وما يحتاج النموذج الأولي إلى إظهاره. بالنسبة لرسائل المنتج التي يجب أن تشرح هذه الخطوات بلغة بسيطة، يمكن تنسيق التصميم مع إنشاء محتوى ويب 3.

ما هي حالات المحفظة والمعاملات التي يجب أن تظهرها الواجهة؟

يجب أن تجعل واجهة ويب 3 حالات المحفظة والمعاملات مرئية، ولا تترك المستخدمين يتساءلون عما إذا كان الإجراء قد نجح. إن تصميم هذه الحالات جنبًا إلى جنب مع الشاشات الرئيسية يمنح فريق المنتج تجربة أكثر اكتمالاً لمراجعتها وبنائها.

لكل إجراء ذي صلة، نأخذ في الاعتبار ما يراه المستخدم قبل وأثناء وبعد الإجراء. يشمل ذلك اتصال المحفظة، ومعاملة معلقة، وتأكيدًا، وحالة نجاح واضحة، ورسالة خطأ مفيدة. عندما يؤثر الغاز أو قرار آخر على الإجراء، يجب أن تشرح الواجهة الخيار بلغة مناسبة للجمهور المستهدف. يجب أن يقدم التسجيل للمستخدمين غير الملمين بالعملات المشفرة الخطوات غير المألوفة عندما تصبح ذات صلة، بدلاً من افتراض المعرفة المسبقة.

تسأل المراجعة العملية للتدفق:

• هل يمكن للمستخدمين معرفة متى يحتاجون إلى توصيل محفظة؟
• هل من الواضح أي إجراء يؤكدونه؟
• هل تشرح الشاشة ما هو معلق وماذا تفعل بعد ذلك؟
• هل يمكن لأي شخص التعافي من خطأ دون فقدان مكانه؟
• هل التسميات والرسائل متسقة عبر الشاشات المتصلة؟

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

ما يتسلمه فريقك في Figma

قاعدة عامة: أظهر 5 حالات لكل معاملة: جاهز، انتظار، نجاح، فشل، وإلغاء.

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

تغذي الأبحاث ومراجعة المنافسين تدفقات المستخدم؛ وتغذي التدفقات الإطارات السلكية؛ وينتقل الهيكل المعتمد إلى نظام التصميم البصري ومكتبة المكونات. ثم نقوم بتوصيل الشاشات ذات الصلة في نموذج أولي تفاعلي ونستخدم اختبار قابلية الاستخدام لتحديد الأماكن التي تحتاج إلى توضيح. يمنح التسليم النهائي في Figma المطورين مرجعًا منظمًا للشاشات والحالات المصممة.

يمكن أن تتضمن الحزمة:

• ملاحظات الأبحاث ونتائج مراجعة المنافسين ذات الصلة بالمنتج.
• تدفقات المستخدم وإطارات سلكية للرحلات المختارة.
• تصميمات واجهة بصرية ومكتبة مكونات قابلة لإعادة الاستخدام.
• مسارات نموذج أولي تفاعلي للمراجعة واختبار قابلية الاستخدام.
• تسليم للمطورين في Figma، مع شاشات وحالات منظمة للمراجعة.

يمنح هذا المنتج والتصميم والتطوير أداة مشتركة للنقاش قبل التنفيذ. إذا كان مشروعك يحتاج إلى خطة اتصال أوسع حول إصدار الواجهة، فقم بتوصيل العمل مع وسائل التواصل الاجتماعي والمحتوى. نحدد ما تتسلمه في البداية بحيث يتطابق عمق النموذج الأولي وتغطية الشاشة مع القرار التالي للفريق.

كيف ينتقل التصميم من الموجز إلى التسليم

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

بعد الانطلاق، نؤكد الجمهور والمهام الأساسية والمواد المصدرية وصناع القرار الذين سيراجعون العمل. نرسم التدفقات والإطارات السلكية قبل تحسين الواجهة، مما يسمح لفريقك بالاستجابة للهيكل قبل الانتهاء من التفاصيل البصرية. بمجرد الموافقة على الاتجاه البصري ونهج المكونات، نقوم بتوصيل الشاشات المختارة في نموذج أولي واختبار المهام ذات الصلة. يتم إعداد التسليم النهائي في Figma لفريق التطوير.

يتم الاتفاق على الجدول الزمني بعد فهم الخطة. يتشكل حسب عدد الرحلات وتعقيدها، وتوفر قرارات المنتج والمواد المصدرية، ومدى سرعة مراجعة صناع القرار لنقاط التصميم. يمكنك المساعدة في إبقاء العمل مستمرًا من خلال تسمية صانع قرار واحد، ومشاركة وثائق المنتج الحالية مبكرًا، وجمع التعليقات في رد واحد في كل مراجعة.

أرسل نظرة عامة على منتجك، والشاشات الحالية أو الإصدار، والمستخدمين المستهدفين، والرحلة التي تحتاج إلى تحسينها أكثر. سنراجع تلك المواد، ونوضح الخطة معك، ونحدد أعمال التصميم اللازمة للوصول إلى نموذج أولي جاهز للمطور.

قائمة التحقق المكونة من 6 نقاط لواجهة ويب 3 الخاصة بك

تحقق من هذه النقاط الست قبل أن يبدأ المطورون. إنها تغطي اللحظات التي يفقد فيها مستخدمو ويب 3 الثقة، مثل الانتظار والفشل والتوقيع، وتجعل التصميم أسهل في البناء والاختبار. إذا كان من الصعب وضع علامة على بند، فهذه أخبار مفيدة: إنها تظهر ما يجب تسويته قبل إنفاق أي أموال أو وقت.

1. صمم جميع حالات المعاملات الخمس.
2. أظهر الرسوم والشبكة قبل أن يوقع المستخدم.
3. اكتب رسائل الخطأ بكلمات بسيطة.
4. اختبر التدفق مع مستخدم جديد واحد.
5. تحقق من التخطيط على هاتف صغير.
6. سلم ملف Figma بمكونات مسماة.

المصطلحات في سطر واحد

حالة المعاملة تعني مرحلة الدفع أو الإجراء، مثل الانتظار أو الفشل.

الإطار السلكي: رسم تخطيطي بسيط لشاشة يظهر التخطيط قبل التصميم البصري.

ما يمكن لعملية التصميم تحديده

يمكن للتصميم أن يوضح كيف يتواصل المنتج مع إجراءات المحفظة وحالات المعاملات، لكنه لا يستطيع تحديد كيفية تصرف المحفظة الخارجية أو السلسلة أو العقد في كل موقف. قد تعيد تلك الأنظمة حالات أو رسائل يجب على فريق المنتج التعامل معها، لذلك نجعل الحالات المصممة واضحة ونوائمها مع المعلومات التقنية التي يمكن لفريقك تقديمها. يساعد النموذج الأولي واختبار قابلية الاستخدام في تقييم ما إذا كان الناس يفهمون الرحلة المقصودة؛ لكنهما لا يضمنان التبني أو المعاملات الناجحة. للتسليم، نسجل الحالات المتوقعة التي يؤكدها فريقك، مثل عدم توفر الاتصال، رفض المستخدم، تأكيد معلق، وخطأ معاد، حتى يتمكن المطورون من تمييز الاستجابات المصممة عن الظروف التي تتطلب قرارات منتج أو تقنية.

أرسل 3 أشياء: متطلبات منتجك، وشاشاتك الحالية، و3 منافسين تتابعهم. بهذه، نخطط للأبحاث والتدفقات ونؤكد التكلفة كتابيًا قبل بدء التصميم.

كيف نعمل

1. شارك سياق المنتجأرسل نظرة عامة على المنتج، ووصف الجمهور، والشاشات الحالية أو الإصدار، ومهمة المستخدم الرئيسية التي تريد تحسينها.
2. اتفق على الرحلات والخطةنراجع المواد معك، ونحدد التدفق ذي الأولوية، ونحدد الشاشات والحالات وعمق النموذج الأولي للتعاقد.
3. راجع التدفقات والإطارات السلكيةنرسم الرحلة ونضع هيكلها حتى يتمكن فريقك من حل أسئلة المنتج قبل التحسين البصري.
4. صمم واختبر الواجهةننشئ النظام البصري والمكونات، ونربط الشاشات المتفق عليها في نموذج أولي، ونستخدم اختبار قابلية الاستخدام للعثور على نقاط تحتاج إلى توضيح.
5. تسلم تسليم Figmaننظم التصميمات المعتمدة والحالات ذات الصلة في Figma بحيث يكون لدى فريق التطوير لديك مرجع تنفيذ واضح.