Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UX
Webdesign

السير على المستخدمين من خلال موقع الويب الخاص بك مع جولة Bootstrap

by
Length:LongLanguages:

Arabic (العربية/عربي) translation by Muhammad Hasrullah (you can also view the original English article)

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

tour-intro

أسئلة، أسئلة

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

إذا كان هذا لا معنى لك، على قراءة-نحن ذاهبون إلى كسر عليه حيث يمكنك إنشاء قيمة، إشراك إرشادات للمستخدمين.

لماذا تريد لإنشاء تعليمات؟

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

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

وهناك الكثير من حالات الاستخدام عندما كنت تريد استخدام جولة.

متى ينبغي تجنب استخدام جولة؟

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

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


البدء السريع

جولة bootstrap يتطلب، بالطبع، عناصر Bootstrap التغريد، فضلا عن ملف CSS وملف JavaScript، بالإضافة إلى مسج. من الوثائق، وهي هنا الأصول المطلوبة.

لاحظ أنك ستحتاج أيضا تضمين ملف css قاعدة Bootstrap لأجل عرض Bootstrap popover.

انطلاق الجولة

المقبل، للبدء بجولة، نفذ ما يلي ضمن ملف جافا سكريبت (التي سنقوم تغطية قريبا):

هذا المثال تم أخذ تقريبا مباشرة من الوثائق، وهي أسهل طريقة للبدء بجولة Bootstrap.


دعونا نذهب أعمق، يجب علينا؟

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

كاتب الموضوع

من أجل هذا العرض التوضيحي، ونحن ذاهبون لبدء مع قالب مجاناً من StartBootstrap.com. ستارتبوتستراب من "الحديد قمة استراتيجيات وسائل الإعلام" هو عبارة عن مجموعة من الحر وقسط المواضيع bootstrap.

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

.
├── css
│ ├── bootstrap-tour.min.css
│ ├── bootstrap.css
│ └── landing-page.css
├── font-awesome
...
├── fonts
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ └── glyphicons-halflings-regular.woff
├── img
│ ├── banner-bg.jpg
│ ├── doge.png
│ ├── intro-bg.jpg
│ ├── ipad.png
│ └── phones.png
├── index.html
└── js
├── bootstrap-tour.min.js
├── bootstrap.js
└── jquery-1.10.2.js

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

وتشمل الأصول

بعد ذلك، سوف تحتاج إلى تضمين Bootstrap جولة المغلق وجافا سكريبت في ملف index.html. على<head>المستند الخاص بك ينبغي أن تبدو مثل هذا:

وفي نهاية المستند ، سترى JavaScript قبل الإغلاق<\body>بطاقة. حالما تحصل على الإعداد العمل، حان الوقت للشروع في العمل! وبطبيعة الحال، سوف تحتاج إلى إضافة في جافا سكريبت المخصصة الخاصة بك، لذلك سنقوم بإضافة "script.js" بعد الملف Bootstrap الجولات السياحية.

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

إعداد بعض الخطوات

دعونا إعداد بضع خطوات بسيطة مع التعليمات البرمجية التالية داخل لدينا "script.js" ملف.

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

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

إجراء تغييرات توصيف

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

ويجب أن تبدو الصفحة لدينا شيئا من هذا القبيل عند تحميل:

tour-welcome

في الخطوة الثالثة يمكن أن نرى ميزة backdrop في العمل:

tour-main-section

عظيم! قمنا بجولة عمل في خطوط حوالي ثلاثين من جافا سكريبت.


استخدام المحتوى الديناميكي

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

لاحظ أن الوسائط content وtitle يمكن أن تكون سلسلة أو دالة، مما يسمح لهم بتقييم في الوقت الذي يظهر في بوبوفير. يحصل على رد الاتصال لأن الخطوة الأولى للمستخدم اسم (باستخدام Bootstrap التي بنيت في فئات للتصميم)، ومن ثم نعرض هذا الاسم في الخطوة الثانية والأخيرة (جديد). إذا لا قم بإدخال اسم المستخدم، أو يدخل مسافة بيضاء فقط، ونحن تعيين الاسم الافتراضي إلى "صديق".

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

tour-thanks

كن مبدعاً!

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

كتابة السرد

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

إعلام وفرحة

وقال هوراس مرة واحدة:

ويهدف الشاعر إلى إبلاغ أو فرحة، أو الجمع بين معا، في ما يقول، متعة وانطباقها على الحياة.

المصمم الشهير ميلتون غليزر توسيع هذا بقوله:

وغرض الفن هو إعلام والبهجة.

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

هذا المقتطف يمكن أن تظهر للمستخدم شيئا في نهاية الجولة كنوع من "شكرا" من الدليل السياحي (الذي أنت) لإكمال الرحلة.

استخدام المتوسط

إتش تي أم ال طيعة. فقط لا تفعل الأشياء خطوة بخطوة؛ يغوص في استخدام عمليات الاسترجاعات ويراقب السلوك المستخدم لإجراء تجارب مثل جولات أكثر تفاعلية. على سبيل المثال، يمكن استخدام هذه المكتبة للقيام بأسلوب سرد "اختيار الخاصة بك المغامرة" الذي ينتقل بين الخطوات، باستخدام الأسلوب goTo(). استخدام عمليات الاسترجاعات لتحريك السلوك الغنية، مثل الرسوم المتحركة أو حقن iFrame. كن مبدعاً وتذكر قوة المتوسطة.


الاستنتاج

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.