ثابت عناصر الموقع
نما استخدام عناصر الموضع الثابت من الشهرة وأصبح عنصرًا مشتركًا على الويب.
تتضمن هذه التقنية إصلاح بعض العناصر في المستعرض بينما يتم تمرير باقي الصفحة. غالبًا ما نجري ذلك على العناصر الرأسية بما في ذلك التنقل الرئيسي للموقع. هذا أيضًا أسلوب شائع على مواقع صفحة واحدة حيث يجب أن يكون التنقل في الصفحة موجودًا دائمًا. كما نجد عناصر مختلفة من صفحات الويب مقفلة في مكانها باستخدام هذه التقنيات.
هناك العديد من الحالات التي يمكن أن نجد فيها إصلاح عنصر في الصفحة أمر جيد ، ولكن كل ذلك يعود إلى هدف واحد. في جميع هذه الحالات تقريبًا ، يحتفظ العنصر الثابت بجزء مهم من الصفحة أمام المستخدمين في جميع الأوقات.
تتنوع أهمية هذه العناصر ، ولكن إلى حد ما الهدف الأساسي هو الاحتفاظ ببعض أجزاء الصفحة بشكل دائم في منفذ العرض.
عندما تفكر في استخدام هذه التقنية ، أوصيك بشدة بالتفكير في سبب وكيفية القيام بذلك. ضع في اعتبارك أن أي جزء لا ينتقل من صفحتك سيؤدي إلى جذب الكثير من الانتباه تلقائيًا. لذا تأكد من أنك تضعه في العمل. دعونا الغوص في!
رؤوس ثابتة
تعتبر الرؤوس الثابتة أكثر عناصر الموضع الثابت شيوعًا ، لذا اضطررت إلى البدء في إضافة هذه المجموعة لتجنب الكثير من العينات. في أغلب الأحيان يتم تثبيت العنوان في مكانه لضمان أن تكون مواقع التنقل موجودة دائمًا. كما ذكرت من قبل ، وهذا صحيح بشكل خاص عند التعامل مع موقع ويب صفحة واحدة.
هناك العديد من الاختلافات الدقيقة في كيفية التعامل مع الرؤوس الثابتة ، لذا سنراجع بعض العينات لأفكار متنوعة حول هذا النهج.
النمش ووسيم
هذا هو ما أود أن أعتبره مثالا تقليديا لهذه التقنية. يتم تثبيت العنوان في المكان أثناء التمرير عبر الموقع. وهذا يشمل الشعار والعناصر الملاحية الرئيسية. بالإضافة إلى ذلك ، هو موقع ويب صفحة واحدة. يؤدي النقر فوق التنقل الرئيسي إلى تمريرك إلى الجزء المناسب من الصفحة.
في مثل هذه الحالة ، يجعل العنوان اللزج التصفح صفحة واحدة بشكل مستقيم للأمام. كما يتجنب أيضًا أحد الجوانب الأكثر إزعاجًا في العديد من مواقع الصفحات الفردية: عندما يكون التنقل في أعلى الصفحة فقط ، ولكن يتم التمرير إليه للأعمار. على هذا النحو ، لا تبدو الرأس الثابتة لطيفة فقط وتحافظ على واجهة وعلام العلامة التجارية الرئيسية للموقع ، ولكنها تضمن أيضًا سهولة استخدام الموقع.
Mapalong
يستخدم هذا المثال رأسًا ثابتًا ، ولكن مع لمسة صغيرة خاصة به. هذا الموقع هو أيضا تخطيط صفحة واحدة ، لكنه يفتقر إلى أي في الصفحة الملاحة. في هذه الحالة ، يحتوي العنوان الثابت على الشعار الرئيسي وزر تسجيل الدخول ، وهما عنصران مهمان جدًا. ولكن ، حتى أفضل من ذلك ، عند قيامك بالتمرير لأسفل الصفحة ، تنتقل العبارة الرئيسية التي تحث المستخدم على اتخاذ إجراء إلى رأس الصفحة أثناء طرحها خارج العرض. ونتيجة لذلك ، تكون نقطة التحويل الرئيسية للموقع مرئية دائمًا. ومع ذلك ، وحتى أفضل من ذلك ، فإن فعل الدعوة إلى التلاشي يتلاشى نظرًا لاهتمام المستخدم به ، مما يؤكد على نقطة التحويل في التصميم! في رأيي استخدام باهر للنهج.
مختبرات كيسكو
نهج آخر ذكي لرأس الموضع الثابت هو تقنية أدعوها الشريحة والعصا. على موقع Kisko Labs فقط جزء من العصي الرأس. أثناء التمرير لأسفل الصفحة ، يتم تمرير التنقلات الرئيسية أيضًا. هذا حتى تصل إلى الجزء العلوي من الشاشة ، ثم يتمسك هناك. وبالتالي ، فإن شرائح التنقل (أو التمرير) كالمعتاد ، ثم تلتصق بالجزء العلوي.
هناك تفاصيل إضافية رائعة بالفعل هنا وهي كيفية تمييز التنقل لجزء الصفحة التي تشاهدها حاليًا. بما أن هذا هو تصميم صفحة واحدة فمن المفيد أن يكون الجزء الحالي من الصفحة محددًا كما هو الحال مع حالة "الصفحة الحالية" العادية لأي التنقل.
ارفع السقف
الامتداد الشائع لهذا النمط هو دمج مستوى معين من الشفافية في الطبقة اللاصقة. في العديد من الأمثلة ستجد هنا يتم ذلك ببساطة عن طريق وجود حافة متفاوتة للعنصر اللزج. في بعض الأحيان يتم ذلك عن طريق وجود عنصر بارز من الشريط الثابت ، في أوقات أخرى مع حافة خشنة. على موقع Raise the Roof تم إنجازه مع حدود عضوية وعادية تقريبًا.
في هذه العينة نجد نتيجة بصرية مثيرة للاهتمام. من خلال استخدام العناصر المتداخلة ، ينشئ الموقع عمقًا مرئيًا أثناء تمرير المحتويات خلف الرأس. وهذا ما يؤكده القمر في الخلفية التي تم إصلاحها أيضًا. النتيجة النهائية هي ثلاث طبقات مرئية. يضيف هذا العمق مستوىً كبيرًا من الاهتمام البصري ويمكنه إنشاء تصميم بصري مذهل.
مرحبا بك في الماء
مرحبا بكم في موقع المياه هو خلق غير عادي إلى حد ما. القليل جدا عن هذا الموقع يلائم معايير تصميم الويب وتصميمه. من الأهمية بمكان لموضوع هذه المقالة هو العنوان الثابت. في هذا الموقع ، يعمل العنصر الثابت كأداة ملاحية على الموقع. ولكن من نواح كثيرة ، فإنه يشعر بمزيد من الشعور بشريط الأدوات.
عينات إضافية من الرؤوس الثابتة
في ما يلي بعض الأمثلة الإضافية للرؤوس الثابتة. سوف تجد مجموعة واسعة من الأساليب والاختلافات الدقيقة هنا.
تام تساى
مارلون ميسام
عين كبيرة إبداعية
مجموعة Balencic الإبداعية
ايفو Mynttinen
Krista Ganelon
Creattica
إيان جيمس كوكس
تقديم أفضل تطبيقات
ماثيو كارلتون
Shweplantis
TruQua
رودولف سيلستين
هولكومب القيثارات
Trussystem
تذييلات ثابتة
ربما يكون العكس الأكثر وضوحًا للرأس الثابت هو التذييل الثابت. في مثل هذه الحالات ، يتم تعليق تذييل الصفحة أسفل الشاشة. أثناء تمرير المستخدم ، يظل العنصر في مكانه.
مثل أي عنصر ثابت آخر ، لا يزال إنشاء نقطة محورية هو الهدف الأساسي. ومن المثير للاهتمام أنه مع تذييلات مثل هذه ، غالباً ما تكون حول وظيفة ثانوية لا تزال هدفاً أساسياً.
مجموعة الخالي من الرصاص
موقع مجموعة Unleaded هو مثال ساطع على ذلك. هنا يحتوي التذييل الثابت على عناصر ذات توجه عملي وتهدف إلى الهدف الأساسي للموقع. لاحظ أولاً أن جميع العناصر الموجودة في هذا الشريط هي أشياء يمكن للمستخدم القيام بها: الترويج لها على الشبكات الاجتماعية أو إجراء مكالمة هاتفية أو إرسالها بالبريد الإلكتروني. ثانيًا ، هي عناصر العمل الأساسية التي تريد الوكالة على الأرجح أن تتخذها. إما أنهم يريدون منك الترويج لها أو الاتصال بهم. هذه هي الأسباب الرئيسية لوجود موقع مثل هذا. لذلك من المنطقي أن نصلحهم في مكان تذييل الصفحة حيث سيحصلون على الكثير من الاهتمام.
انفاتو
يحتوي موقع Envato أيضًا على تذييل ثابت. هنا يحتوي الشريط على الشعار الأساسي للموقع ، والذي تم نقله بشكل مثير للاهتمام من أعلى اليسار النموذجي. بصراحة ، بالنسبة لعلامة تجارية مثل Envato ، هذه ليست مشكلة. أيضا ، ستجد سلسلة من القوائم المنسدلة التي تطلقك على مواقع الويب المختلفة. هذه الوظيفة البسيطة هي هدفهم الحقيقي. في الواقع ، قد تقول إن صفحة الملف الشخصي للأنشطة التجارية ليست في الواقع المكان الذي يريد أن ينتهي به الأشخاص. على هذا النحو ، فإن التركيز على إعادتك إلى مواقع محتواها أمر بارز ولا يمكن تجنبه.
Kiyuco
بالنسبة للعديد من المواقع مثل هذه ، تعتبر برامج التسويق عبر البريد الإلكتروني ذات أهمية حاسمة. وعلى هذا النحو ، فإن وجود تذييل ثابت في موضع معين يسلط الضوء بشكل بارز على نموذج الاشتراك يمكن أن يقطع شوطًا طويلاً في تطوير قوائم البريد هذه. هل يمكن أن يساعدك التسويق عبر البريد الإلكتروني في الترويج لموقعك على مدار فترة زمنية أطول ومتابعة العملاء بفعالية أكبر؟ إذا كان الأمر كذلك ، فربما يكون التذييل الثابت مثل هذا هو أداة رائعة.
الثابتة sidebars الموقع
لا يعد تأمين عناصر صفحة الويب مكانًا محددًا بالرؤوس والتذييلات ، على الرغم من أنها قد تكون الأكثر شيوعًا. يبدو أن الشريط الجانبي للموقع الثابت هو الثاني في الثانية.
غالبًا ما تحتوي القوائم الجانبية للمكان الثابت على معلومات مشابهة جدًا لما قد تجده في رأس الصفحة. وهذا يشمل أشياء مثل الشعارات والتنقل وأدوات وسائل الإعلام الاجتماعية. فيما يلي بعض العينات التي يجب مراعاتها إذا كنت ترغب في استخدام هذا الأسلوب.
خورخي ريجابرت
هذا الموقع الرائع هو مثال رائع على أسلوب العمل. هنا يحتوي الشريط الجانبي على مواقع العلامات التجارية الأولية وخيارات التنقل. يعتبر هذا النمط من النهج الجانبي رائعًا لأنه يحتفظ بالملاحة في العرض أثناء تمرير الصفحة ، ولكن أيضًا لأنها لا تتقاطع مع المحتوى أثناء انتقاله. على الرغم من أن هذا قد يكون تمييزًا دقيقًا ، إلا أنه يعمل على واجهة سلسة بشكل لا يصدق. تعرض مواقع مثل هذه أناقة تبدو بسيطة ، ولكن من الصعب جدًا وضعها معًا.
المزيد من المخاطر المزيد من الأبطال
أنا حقا أحب الطريقة التي يعمل بها هذا الموقع. العناصر الثابتة في الشريط الجانبي هي الوظائف الأساسية التي يريد منك مالكو الموقع اتخاذها. أكثر من أي شيء يريدك أن تسمع الموسيقى! على هذا النحو ، فإن ميزة "التشغيل" البارزة والمستمرة على الشاشة جاهزة ومنتظرة. لا أستطيع أن أتخيل عنصرًا أكثر أهمية في الموقع ، وأن نعرضه بشكل بارز يجعل الأمر منطقيًا. وعليك أن تحبها لأنه لم يتم تقديمها بطريقة بغيضة. لا تلعب حتى السيارات. مجد للمصمم الذي سيطر على هذا الإغراء.
Yowza
في بعض الأحيان يكون من المرغوب فيه إنشاء عنصر لزج واحد يعزز وظيفة معينة. لقد رأينا ذلك مع العديد من التعليقات وخدمات الدعم التي يمكنك توصيلها بموقعك. في هذه الحالة ، تم وضع زر Facebook like على جانب الموقع. يبقى في مكان أثناء التمرير الصفحة. هذا ، بالطبع ، يلفت انتباه المستخدم إلى العنصر ويشجعهم على استخدامه. أود أن أقول هذا يدل على قوة وأهمية الإحالات الاجتماعية في الأعمال التجارية على شبكة الإنترنت مثل هذا.
كملاحظة جانبية ، أنا أحب تطور الموقع على الحد العلوي 10px الذي أصبح شائعًا جدًا. هنا العنصر ببساطة بالتمرير. لا توجد رسوم متحركة دراماتيكية ، ولكن شيئًا ممتعًا يضيف لمسة من الاهتمام والحياة إلى الموقع.
جمجمة الدهون
يتبع هذا الموقع جميع الأنماط التي وجدناها في عيناتنا السابقة. لكنها تبرز بشكل كبير بسبب الرسوم المتحركة البسيطة. أثناء التمرير لأسفل الصفحة ، تتحرك الشخصية في الشريط الجانبي وتنشط. يعمل هذا العنصر بمفرده على رفع الموقع إلى فئة فريدة لا تنسى. كيف يمكن أن يكون هذا الشيء تافهة جدا مثل هذا التأثير. يأخذ هذا الموقع البسيط ويضخ به مليئًا بالذهول. هذا يدل على أن الوكالة التي تقف وراءها تحب تلميع أعمالها بأنواع اللمسات الأخيرة لأي عميل سوف يموت من أجله.
المزيد من عناصر الشريط الجانبي الثابتة
فيما يلي بعض الأمثلة الإضافية عن الأشرطة الجانبية الثابتة في العمل.
قصائد سخيفة
كولين ماكيني
مخبر
هذا هو مارسيلا
جانيت د
شعار فقط
النهج الذي لا نجد كل ذلك في كثير من الأحيان هو شعار موقف ثابت. في هذا المثال ، تم وضع الشعار في مكانه حتى أثناء تمرير الصفحة. هذا النهج غير المعتاد يحافظ على اسم الموقع في الأمام والوسط. تصاميم مثل هذا يمكن أن تكون مثيرة للاهتمام للنظر فيها. من الصعب حقا تخمين سبب قيامهم بذلك ، ولكن لا يمكن إلا أن نفترض أن العلامة التجارية الرئيسية ذات أهمية حاسمة. ربما لديهم الكثير من المنافسة المماثلة؟ ربما هم فقط يريدون التأكد من تذكر أسمائهم؟ بغض النظر عن ذلك ، فهي تقنية مثيرة للاهتمام تستحق أن تضعها في اعتبارك إذا كانت تنطبق على مشروعك.
"عد إلى الأعلى"
عندما يتعلق الأمر بصفحات طويلة حقًا ، فإن ميزة رائعة تضيفها هي رابط ينقلك إلى أعلى الصفحة. وباستخدام العناصر اللاصقة ، يمكنك إنشاء مثل هذا الرابط الذي يبقى في نفس المكان أثناء قيامك بتمرير الصفحة. هذا هو بالضبط ما فعلته العينات المقدمة هنا.
في معظم الأحيان يتم وضع مثل هذا العنصر خارج التخطيط. بهذه الطريقة لا تتداخل مع أي شيء آخر في التصميم أثناء اجتيازها للصفحة. ستلاحظ أيضًا كيف أن هذه العناصر تحتوي في كثير من الأحيان على سهم يشير إلى - ربما عنصرًا واضحًا لإدراجه ، ولكن من المهم جدًا أن تضع في اعتبارك أنه يُعلم المستخدمين بسرعة عن غرضه.
هذا النهج إلى حد ما يتناقض مع فكرة رأس لزجة. في هذه الحالة ، يكون التنقل في أغلب الأحيان في أعلى الصفحة فقط. لذا فالعودة مهمّة حيث تسمح للناس بالارتداد بسرعة حول محتويات المواقع. في حالة مواقع صفحة واحدة على الرغم من أن هذا يمكن أن يكون قليلا من خطوة اضافية مزعج.
Overlapps
يوضح هذا النموذج لمسة إضافية رائعة في أنه لا يُظهر العنصر "العودة إلى العنصر العلوي" ما لم تكن في الواقع في أعلى الصفحة. ربما تفاصيل واضحة لتشمل ، ولكن كما ستجد أنه ليس هو الحال دائما. يتمثل جزء من القوة في هذا النهج في أن الفعل نفسه الذي يظهر عليه يلفت الانتباه إليه لضمان إدراك المستخدم له.
اثنين من أكثر العينات
يعود كلا الأمرين التاليين إلى الأزرار العلوية ، على الرغم من أنهما مرئيان طوال الوقت. من المثير للاهتمام بالنسبة لي أن يتم وضع هذا العنصر بشكل متكرر في الزاوية السفلية اليمنى من الشاشة. إنه ليس الجزء الأبرز في التصميم ، لذلك ربما تكون الطبيعة الثانوية جيدة لمثل هذا العنصر الأقل أهمية. ستلاحظ بالطبع على الرغم من أن العنصر لا يزال يتم تمييزه عن طريق كسر الحدود وبالألوان السوداء. أعتقد أن معنويات القصة هي النظر في أهميتها لاستخدام التصميم الخاص بك. إذا أحدثت الفرق ، فتأكد من أنه مرئي.
التفكير بحرف البدل
دوسانكا وداود
عناصر ثابتة متعددة
في هذا المثال الأخير ، سنلقي نظرة على موقع يحتوي على العديد من العناصر الثابتة في الصفحة. في العديد من الطرق ، يكسر هذا الموقع معظم معايير تصميم الويب وتخطيطه. باستثناء الشعار في الزاوية العلوية اليسرى ، لا يوجد شيء تقريبًا في مكانه المعتاد.
ونجد بعض العناصر التي نعرفها على أساس هذه المقالة ، على سبيل المثال ، مثل الشريط الجانبي الثابت. ومع ذلك ، ستلاحظ أن اثنين آخرين بعيدان عن النموذجية. على سبيل المثال ، التذييل الثابت الذي يحتوي على بعض الروابط الواسعة للموقع. لا تضمن أشياء مثل سياسات الخصوصية والأحكام والشروط مثل هذا الموقف البارز في الصفحة. ومع ذلك ، ستجدهم مضافين إلى الصفحة مع بعض الروابط الملاحية الأخرى المهمة.
أنا حقا أحب الطريقة التي وضعت بها روابط حساب المستخدم في الزاوية اليمنى العليا. هذا هو المكان الذي يتم وضعه بشكل متكرر ، على الرغم من أنه نادرا ما يتم إصلاحه بغض النظر عن التمرير كما هو الحال في هذه الحالة. يعجبني ذلك لأنه يضمن أنه يمكنك دائمًا الوصول بسرعة إلى ميزات العضو في الموقع ؛ شيء ربما يستفيد منه بعض التطبيقات ومواقع الويب الأخرى.
كل شيء في هذا الموقع أبعد ما يكون عن المعتاد ، ولكن شيء ما حوله يعمل بشكل جيد للغاية ويسهل حبّه. تخطيطها غير المعتاد لا يجعل من الصعب استخدام والنتيجة النهائية هي تجربة متميزة وممتعة.
مصادر
أخيرا ، مع هذه الجولة أود أن أشير إلى بعض سهل مسج المكونات الإضافية التي تتناول الحاجة إلى تحديد العناصر إلى موقع معين في الصفحة. وهي توفر ميزات مختلفة تلائم الاحتياجات المختلفة التي قد تكون لديك ، لذلك تأكد من استكشافها جميعًا للعثور على الملائمة المناسبة.
والشيء العظيم هو أنهم جميعهم jQuery الإضافات وأنها فائقة سهلة التنفيذ. إذا كنت ترغب في إنتاج هذا النمط ، فإن هذه الأشياء ستجعلها مهمة سهلة على الأقل.
الميركات
الميركات هي واحدة من أدواتي المفضلة لهذه الوظيفة تحديدًا. إنها القدرة على أن تكون مخفية تجعلها أداة رائعة لعرض المحتوى الترويجي أو الميزات الهامة مثل نماذج الاشتراك بالبريد الإلكتروني.
Stickyscroll
Stickyscroll هو مكون إضافي يسمح لك بإنشاء عناصر تمرر مع الصفحة حتى تصل إلى الأعلى ، ثم تلتصق في مكانها. يساعد هذا المكون الإضافي أيضًا في ضمان عدم تمرير العناصر إلى منطقة تذييل من خلال منحها حدًا سفليًا ؛ ميزة اضافية لطيفة بالتأكيد.
نقاط الطريق
نقاط الطريق يسمح لك بتشغيل أحداث jQuery عند تمرير المستخدم إلى نقاط محددة في الصفحة. هذا مفيد إذا كنت ترغب في تمييز أو تغيير التنقل لمطابقة موقع المستخدم في الصفحة. ولكن المتعة لا تنتهي عند وجود العديد من الأشياء التي يمكنك القيام بها لصفحة ما أو تصميمها أثناء قيام المستخدم بالتمرير والتفاعل معها.
استنتاج
العناصر الثابتة هي الآن عنصر مشترك يمكن للمصممين العمل به. لم تعد الأدوات اللازمة لإنجاز مثل هذه الميزات والدعم الكامل للمتصفح مشكلة.
على هذا النحو ، إنها تقنية رائعة للاحتفاظ بأحزمة أدواتك واستخلاصها عندما يكون الوقت مناسبًا. هذه الأساليب ليست ، بالطبع ، نوع الأشياء التي تستخدمها كل يوم ، ولكن يمكن أن تكون قوية بشكل لا يصدق عند استخدامها بفعالية.