التغييرات على تصميم Apple.Com
Apple.com لقد خضعت بعض التعديلات على تصميمه في الأسبوع الماضي أو نحو ذلك ، وهي التغييرات التي لم تكن قد لاحظتها ، إذا لم تكن تحظى باهتمام كافٍ.
على الرغم من أن العديد من التقارير تشير إلى ذلك على أنه "إعادة تصميم" ، أعتقد أنه من الصعب تصنيفها على هذا النحو. هناك بالتأكيد بعض التغييرات الهامة ، ولكن التغييرات ليست بالضبط إصلاح شامل كما كان الحال بالنسبة لـ CNN.com في أواخر عام 2009.
ومع ذلك ، فإن التغييرات مهمة لمصممي الويب ، لذا سأعرضها بإيجاز هنا. إذا كان هناك أي شيء عن التغييرات التي أهملت ذكرها ، فلا تتردد في التعليق عليها.
شريط تنقل معاد تصميمه
التغيير الأكثر أهمية (وإن كان لا يزال حاذق إلى حد ما) هو شكل شريط التنقل. لدى شركة Apple واحدًا من أشرطة التنقل تلك ، التي تتميز بتصميمها وتصميمها ، وكل شخص يحبها ويحسدها. يبدو من المستحيل أنه يمكن تحسينها. حسنًا ، لقد تمكنوا بطريقة ما من إيجاد طرق لجعلها تبدو أفضل وأكثر بديهية.
هنا شريط التنقل القديم:
هنا الجديد:
التغييرات تشمل:
- إنه أكثر قتامة
- تم استبدال التدرج بمظهر لامع أكثر جرأة
- يتم تبسيط مظهر الشعار
- مربع البحث أصغر (أكثر من ذلك أدناه)
أعتقد أن الأمر يتطلب فريقًا كبيرًا من المصممين لإجراء ما يُعد تغييرًا جوهريًا في مظهر عنصر واجهة المستخدم المهم جدًا ، بينما لا يزال يعطي انطباعًا بأنه لم يتغير شيء. كل ما في الأمر هو إظهار أن التفاصيل المرئية لا تكون في كثير من الأحيان مهمة بقدر الشعور العام بالتصميم.
صندوق البحث المرن (WebKit فقط)
من الواضح أن فريق تصميم Apple قد قام بتضمين WebKit-biased ، حيث قام بتضمين بعض تحسينات WebKit فقط ، والتي يرتبط أحدها بمربع البحث.
في معظم المتصفحات ، يؤدي النقر على مربع البحث إلى زيادة سطوع الخلفية إلى الأبيض. في Chrome أو Safari ، يتم تنشيط مربع البحث باستخدام عمليات النقل من CSS3 ليصبح أوسع وأكثر قابلية للاستخدام. يعرض زر الاستيلاء على الشاشة مربع البحث في Chrome بعد أن أصبح متحركًا ليصبح أوسع:
لاستيعاب حجم مربع البحث ، يتم تغيير حجم عناصر التنقل الأخرى والشعار.
أنا أحب هذه الميزة ؛ يضيف شعورا من البداهة. ولكن ، في رأيي ، عيب صغير: لا يعود إلى حالته الأولية بعد إزالة التركيز. بالطبع ، إذا تم كتابة شيء ما في مربع البحث ، فإنك لن ترغب في تغيير الحجم مرة أخرى ، ولكن أعتقد أنه يجب أن يعود إلى حالته الطبيعية إذا كان يفقد التركيز ويظل فارغًا.
بالطبع ، لأنه من غير المحتمل للغاية أن يقوم أي شخص بالنقر في مربع البحث وعدم كتابة أي شيء ، أفترض أن هذا إغفال غير ذي أهمية.
دخول Animation Bar المتحرك (WebKit فقط)
ميزة WebKit فقط صغيرة أخرى هي الإدخال المتحرك لشريط التنقل. لا أتذكر رؤية هذا التأثير على مواقعهم من قبل ، لذلك أفترض أن هذه ميزة جديدة أخرى. لا يتم إدخال الرسوم المتحركة إلا على الصفحة الرئيسية ، ومرة واحدة فقط لكل جلسة متصفح. هذه ممارسة جيدة ودرس جيد للمطورين الذين يضيفون تأثيرات متحركة إلى واجهاتهم.
كما هو مرئي في الاستيلاء على الشاشة أعلاه ، يدخل شريط التنقل من خارج الشاشة ، على الأرجح باستخدام الرسوم المتحركة لـ CSS3 keyframe ، إلى جانب JavaScript للتحكم في وقت ظهور الرسوم المتحركة أو عدم حدوثها.
مستعرضات المنتجات المتحركة (WebKit فقط)
آخر إضافة حديثة هي استخدام الرسوم المتحركة على بعض صفحات المنتج. الرسوم المتحركة القائمة على CSS3 تستخدم على ماك و بود متصفحات المنتجات ، واحد منها موضح أدناه:
تحرك المنتجات عندما تصل لأول مرة على الصفحة ، وإذا قمت بالتبديل بين الفئات الفرعية ، فإن المنتجات المرئية تنطلق بسرعة وتقفز المنتجات الجديدة في مكانها. يتم ذلك عبر الكود المستند إلى CSS3 في إطار keyframe ، البعض من موضح أدناه:
في المتصفحات التي لا تتبع WebKit ، تحول الرسوم المتحركة لمتصفح المنتج إلى خبو بسيط يعتمد على جافا سكريبت. على الرغم من أن هذا النوع من الأشياء ليس مثاليًا في كل الظروف (نظرًا لأنه يرقى إلى "تشفير الشفرة") ، فإنه يعد خيارًا واقعيًا للمطورين والمصممين اليوم الذين يرغبون في ترميز أفضل المتصفحات الممكنة وتوفير وظائف محسنة أقل للباقي .
مربع البحث اقتراح تلقائي
[UPDATE] كما أشار عدد من الأشخاص في التعليقات ، فإن الاقتراح التلقائي ليس ميزة جديدة. استند تضميننا لهذا "كميزة جديدة" على مقالة أخرى ذكرت أن الاقتراح التلقائي كان جديدًا. ومع ذلك ، سوف نحتفظ بهذا القسم لأنه ميزة جيدة لديها القدرة على جعل موقع ويب أكثر قابلية للاستخدام ، ويقدم مثالاً جيدًا للمطورين والمصممين الآخرين ليتبعوه ، إذا كان مناسبًا لمشروعهم.
تظهر القائمة المنسدلة التلقائية التي تعتمد على Ajax أثناء كتابة طلب بحث:
كما هو موضح في التقاط الشاشة أعلاه ، لا تظهر نتائج البحث المنسدلة فقط التي تتطابق مع الأحرف المكتوبة ، ولكن النتائج مصحوبة بصور المنتج وأوصافه. أعتقد أن الصور أكثر قيمة في هذه البقعة من الأوصاف ، ولكن بشكل عام ، يمكن أن يؤدي ذلك إلى تبسيط بحث المنتج والتحويلات.
أي شيء آخر؟
يبدو أن هذا يغطي التغييرات الرئيسية في إعادة تصميم الأدوات الحديثة لـ Apple.com. هل هناك أي تغييرات هامة أخرى في التصميم أو الكود لم أذكرها هنا؟
تمت كتابة هذه المقالة حصريًا لـ Webdesigner Depot بواسطة Louis Lazaris ، كاتب مستقل ومطور على الويب. يدير لويس شبكة رائعة حيث ينشر مقالات ودروسًا حول تصميم الويب. تستطيع اتبع لويس على تويتر أو الاتصال به من خلال موقعه على الإنترنت.
ما رأيك في التغييرات على تصميم Apple.com؟ هل هناك أي تغييرات لم نذكرها هنا؟