العودة إلى الصفحة السابقة جملة 3. كيفية عمل زر الرجوع على صفحة الويب

في هذا الفيديو التعليمي، سنلقي نظرة على 3 خيارات لكيفية إنشاء زر "الرجوع" للتنقل حول الموقع إلى الصفحات السابقة بترتيب عكسي. يعد زر BACK ضروريًا أيضًا عندما تؤدي الروابط من عدة صفحات من الموقع (A1، A2...An) إلى نفس الصفحة (B)، ومن هذه الصفحة (B) تحتاج إلى العودة إلى الصفحة السابقة (An) من الموقع الذي وصلت منه إلى الصفحة (ب).

شاهد الفيديو التعليمي الجديد:

في هذا الفيديو التعليمي سنقوم بإنشاء زر للرجوع إلى الصفحات السابقة للموقع برنامج أدوبيموسى. سيعود هذا الزر على نفس المسار الذي اتبعناه في الموقع.

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

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

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

الخيار الأول هو مجرد نص. سيكون الزر على شكل نص. قمت بنسخ هذا الكود:

وقمت بلصقه في القالب يبدو مثل هذا. لدينا فقط نص ويتم تمييزه باللون الأبيض. سأقوم بنشره هنا لكي نفهم كيفية عمل كل ذلك، نضغط على المفاتيح ctrl+alt+E لعرض الموقع بالكامل بجميع صفحاته في المتصفح. وهذا ما تبدو عليه الصفحة الرئيسية للموقع. يمكننا تصفح القائمة واختيار الصفحات. هنا لدينا القوائم المنسدلة. وعلى سبيل المثال، انتقلنا على الفور من الصفحة الرئيسية إلى الصفحة "الصفحة-3". وهنا لدينا زر الرجوع.

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

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

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

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

هنا يمكننا أيضًا إجراء عملية تعبئة، على سبيل المثال، سأقوم بذلك بنفس اللون البرتقالي. هنا يمكنك بالفعل تحرير النص. دعونا نضعها في المنتصف ونجعلها جريئة. ومن حيث المبدأ، هذا الخيار يشبه الزر بالفعل. لم يعد هناك مثل هذا التمييز الأبيض، ومن حيث المبدأ، هذا الخيار مناسب تماما بالفعل. أثناء التصفح (ctrl+alt+E)، نذهب إلى صفحة "page-3"، إلى صفحة "page-4" ونضغط مرة أخرى. يعمل هذا الزر تمامًا مثل الزر الأول، ولكنه يحتوي فقط على المزيد من الخيارات لتحرير التصميم.

والخيار الثالث لكيفية وضع الزر هو أن الزر سيكون عبارة عن صورة. قمت بنسخ هذا الكود:

أذهب إلى Muse وانقر على "إدراج". والخيار الثالث الذي لدينا هو صورة. لكي نحصل على نوع ما من الصور هنا، نحتاج إلى تنزيل بعض ملفات الصور من الإنترنت أو إنشائها بأنفسنا. نقوم بإضافة الصورة من خلال وظيفة "ملف" في البرنامج، نختار "إضافة ملفات للنقل". لقد قمت بالفعل بتنزيل صورتين من الإنترنت. يمكننا اختيار واحد. دعونا نختار هذا مع زر الرجوع. الآن إذا نظرنا إلى قسم "الموارد"، فقد أضفنا زر "back2.png" - "إرسال". لدينا هذا الملف للنقل.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "خلف" / > < / a >

هذا كل شيء، انقر فوق "موافق". لن نرى أي تغييرات في موسى نفسه. سنرى جميع التغييرات فقط عند عرض الموقع في المتصفح. لنضغط على ctrl+alt+E مرة أخرى لعرض الموقع في المتصفح ومحاولة تصفح صفحاتنا.

لنذهب إلى الصفحة مثلاً "صفحة 2-1"، والآن لننتقل إلى صفحة "صفحة-2"، والآن لننتقل إلى صفحة "صفحة 3"، ثم إلى صفحة "صفحة-4". والآن، إذا ضغطنا على زر الرجوع، فسنعود بالتسلسل بترتيب عكسي إلى الصفحة الرئيسيةموقع. انقر على "رجوع"، وانتقل إلى صفحة "صفحة-3"، إلى صفحة "صفحة-2". وهنا لم يعد لدينا زر. إذا وضعناه في قالب تم تطبيقه على الصفحة "صفحة 2"، فسيكون لدينا أيضًا زر "رجوع" هنا. نظرًا لعدم وجود واحدة لدينا، يتعين علينا الانتقال إلى الصفحة الرئيسية فقط من خلال النقر على زر "الصفحة الرئيسية" في القائمة. لننتقل مثلاً إلى صفحة "صفحة 2-2-2"، ثم إلى صفحة "صفحة 2-2-1"، ثم إلى صفحة "صفحة-3" و"صفحة-4". والآن بترتيب عكسي: صفحة "صفحة 3"، صفحة "صفحة 2-2-1"، صفحة "صفحة 2-2-2" وإلى الصفحة الرئيسية.

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

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

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

ما هي الخيارات التي لدينا:

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

لذا، استخدمت في أحد مواقعي الخيار الثالث:

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

رمز زر العمل الخاص بي:

عُد

تم تزيين النص قليلاً بسهم باستخدام مكونات من Bootstrap 3، وتم تصميم الزر نفسه عبر CSS.

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

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

من هذه المقالة سوف تتعلم:

• وما يتوقعه المستخدمون من زر "الرجوع"؛
• ما هي الأخطاء الخمسة الأكثر شيوعاً؟
• حل بسيط لهذه المشاكل.

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

توقعات المستخدم

باختصار: يتوقع المستخدمون زر "رجوع" ليُظهر لهم ما يعتبرونه الصفحة السابقة. كلمة "إدراك" مهمة جدًا، لأن هناك فرقًا كبيرًا بين ما يبدو أنه الصفحة السابقة وما هو عليه من الناحية الفنية.

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

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

فيما يلي العناصر والتوصيات التفاعلية الأكثر شيوعًا لاستخدامها لتحقيق أقصى قدر من تجربة المستخدم وسهولة الاستخدام.

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

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

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

3. استمارة التسجيل/الدفع

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

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

قد لا تلبي تقنية AJAX توقعات المستخدم: كل صفحة AJAX موجودة تقنيًا تحت نفس عنوان URL، ولكن يبدو أنه يتم فتح صفحات جديدة.

في سياق التجارة الإلكترونية، لدى المستخدمين تصور واضح بأن الصفحة 3 والصفحة 4 منفصلتان ويمكن التنقل من الصفحة 4 إلى الصفحة 3 باستخدام زر الرجوع.

المستخدمون ليسوا مستعدين للتخلي عن زر الرجوع

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

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

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

حل

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

مساء الخير، لدي سؤال حول كيفية تحريك الزر للخلف ووضعه بجوار الزر التالي عند تقديم الطلب الآن يبدو الأمر هكذا بالنسبة لي https://yadi.sk/i/_ZNvGrvEhqSk3 إذا قمت بنقله أسفل، فإنه يتوقف عن العمل رمز هو المسؤول عن.

هناك حل

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

أدخل زرًا أينما تريد في القالب، على سبيل المثال، هذا

+1

عندما أضغط على زر الرجوع في المتصفح، يبدو أن جميع الأنماط تختفي حتى أقوم بتحديث الصفحة، ويجب أن يظهر المظهر الافتراضي كما في لقطة الشاشة أدناه) أخبرني ما هي المشكلة

مرحبًا، لقد قمت بإنشاء زر "رجوع" في سلة التسوق، وليس حتى زرًا، بل مجرد رابط به رمز الرجوعوالآن عند العودة إلى العربة...

هناك حل

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

يستخدم الموقع الذي أشرت إليه مكونًا إضافيًا لسلة التسوق، كخيار مع التعديلات، يمكنك استخدام إرسال إضافة البضائع ليس إلى?html=1، ولكن إلى?html=1&items=1; عربة.

مساء الخير، في كل خطوة أثناء الخروج، يتم الإشارة إلى زر "التالي" في موضوع "Suprime"، وجدت رمز الزر: