كيف فعلوا ذلك: شوبيفي - كل شيء عن التفاصيل

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

اليوم، سنلقي نظرة على بعض التفاصيل الدقيقة لإعادة التصميم، ونتحدث قليلا عن كيفية تحقيق إعادة التصميم. دعونا نغوص في ذلك!

كل شيء عن المجيب

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

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

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

الصفحة الرئيسية، الترويسة

الجوال

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

الكمبيوتر اللوحي

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

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

سطح المكتب

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

المناقشة

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

* ملاحظة: منذ أن بدأنا كتابة هذه المقالة، قام  شوبيفي بتحديث هذا الرقم  إلى 120،000.

نقاط المكافأة: استخدم  <صورة> العنصر والبيانات- صور URI

وتجدر الإشارة إلى أن شوبيفي يستخدم العديد من تقنيات المجيب -القياسية- على شبكة الإنترنت بشكل ودود، مثل استخدام  <صورة> عنصر. هنا ترميز لصورة كورين أنستوبولوس:

1

<picture class="merchant-header__photo js-window-loading">

2

  <!--[if IE 9]><video style="display: none;"><![endif]-->

3

  <source srcset="/assets2/homepage/homepage-person@desktop-4f0656677d8cda087a8df30e0d18c41a.png, /assets2/homepage/homepage-person@desktop-2x-452c196f174ecb74a2ec50f660e36af0.png 2x" media="(min-width: 990px)">

4

  <source srcset="/assets2/homepage/homepage-person@tablet-bb9c6db8102779be1709b489c8e46208.png, /assets2/homepage/homepage-person@tablet-2x-cd42bc0f6914581344be9bbc13f76e05.png 2x" media="(min-width: 750px)">

5

  <!--[if IE 9]></video><![endif]-->

6

  <img srcset="/assets2/homepage/homepage-person@mobile-0bd643463b033a47b989120d96348c0f.png, /assets2/homepage/homepage-person@mobile-2x-c4ea79e2203797bff7c24cf823c271f4.png 2x" alt="Shopify Merchant, Corrine Anestopoulos">

7

</picture>

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

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

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

التنقل

تعتمد ميزة التنقل الأساسية للجوال على شريط جانبي مخفي خارج الشاشة يظهر عند النقر على قائمة همبرغر أو لمسها.

يتم إنجاز التحرك باستخدام التحويل و الانتقالX ، بالاقتران مع قاعدةالنقل التالية:

1

transition: transform 0.6s cubic-bezier(0.66, 0, 0.41, 1);

يتم تعيين الدرج نفسه إلىالموضع: ثابت، مع وجود قاعدة تجاوز- yللتمرير.  عندما يتم فتح الدرج، يتلقى عنصر الجسم فئة js -درج-فتح، والتي تحدد الارتفاع إلى 100٪ وتجاوز إلى مخفي. يؤدي هذا إلى منع المستخدم من تمرير صفحة المحتوى أثناء فتح التنقل.

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

1

.nav__mobile__select { 

2

    width: 100%; 

3

    background: transparent url("data:image/svg+xml;base64,PCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3…wIDUuMTkyLDMuNzM1IDguODY1LDAuMDEgMTAuMjg5LDEuNDE0IAkiLz4KPC9nPgo8L3N2Zz4K") no-repeat right center; 

4

    border: none; 

5

    -webkit-appearance: none; 

6

    -moz-appearance: none; 

7

    -ms-appearance: none; 

8

    -o-appearance: none; 

9

    appearance: none; 

10

    color: #767676; 

11

    }

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

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

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

صفحة "البيع عبر الإنترنت"

تقدم صفحة "بيع عبر الإنترنت" بعض الاعتبارات المثيرة للاهتمام بشكل خاص لاعتبارات الاستجابة.

عبارة تحث المستخدم على اتخاذ إجراء

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

شريحة قسم المحتوى

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

على النقاط المقررة للكمبيوتر اللوحي وكمبيوتر سطح المكتب، على كل حال، تتغير الوحدة إلى زر التنقل الأفقي الأكثر تفصيلا.

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

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

دقة تمييز المعلومات: خيارات الصور

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

1

<picture>

2

  <!--[if IE 9]><video style="display: none;"><![endif]-->

3

  <source srcset="/assets2/support/gurus-white@desktop-76b9f1d671a43c72cb51ea40597e126c.jpg, /assets2/support/gurus-white@desktop-2x-70a9f83d819f8a4217d3afe2c7f01caf.jpg 2x" media="(min-width: 990px)">

4

5

  <!--[if IE 9]></video><![endif]-->

6

  <img srcset="/assets2/support/gurus-white@mobile-b020f30373b7452fd36452bc19616936.jpg, /assets2/support/gurus-white@mobile-2x-9aea44236e0c4c2440a32940caaae200.jpg 2x" alt="Shopify support gurus">

7

</picture>

احظ عنصر <فيديو> المحدد في IE9؛ وهذا يسمح IE9 لاستخدام <مصدر> يستخدم أيضا ملء صورة سكوت جيهل، وهو عنصر متعدد الألوان لعنصر الصورة الذي يدعم معظم المتصفحات الرئيسية. (اطلع على معلومات دعم المتصفح هنا.)

دوامة الشهادة

في النقطة المقررة للمحمول، تظهر الشهادات كعناصر مفردة  في دوامة.

في حجم الكمبيوتر اللوحي وأكبر، تظهر هذه الشرائح بالتوازي مع بعضها البعض.

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

صفحة التسعير

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

الجوال

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

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

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

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

الكمبيوتر اللوحي

عند النقطة المقررة للكمبيوتر اللوحي، يتحول كل من منتقي البيع وكتل التسعير إلى تخطيط أفقي.

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

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

سطح المكتب

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

"أمثلة" العرض المبسط

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

تجربة عرض الجوال

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

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

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

تذييل

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

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

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

الاستنتاجات

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

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