نصائح أساسية لتحويل موقع سطح المكتب إلى الجوال
نظرًا لأن أجهزة الجوّال قد تجاوزت الآن مستوى سطح المكتب بالشعبية ، فمن الضروري أن يصمّم المصمّمون الجوّال في ذهنهم. يُعتبر الجوال الأول شائعًا كطريقة تقنية لأنه من الأسهل توسيع نطاق أجهزة الجوّال ، بدلاً من تصغير حجم سطح المكتب.
ومع ذلك ، في بعض الأحيان يتم أخذ الخيار من بين يديك. يجد المصممون أنفسهم أنهم يوائمون تصميمات سطح المكتب الحالية مع الجوال. ولأن بعض العناصر لا تترجم بشكل جيد ، فالمصممين الأساسيين يفهمون التعديلات المحددة التي يجب إجراؤها عند تصميم الشاشة الصغيرة. إليك الطريقة…
احتضان بساطتها
لقد كانت Minimalism شائعة في تصميم الويب منذ سنوات ، وذلك ببساطة لأنها تساعد في كثير من الأحيان على سهولة الاستخدام وتبدو لطيفة أيضًا. عندما يتعلق الأمر بالهواتف المحمولة ، فإن الحد الأدنى هو خيار جمالي أقل ، لأنه يعتمد فقط على سهولة الاستخدام.
وفقا لمجموعة نيلسن نورمان ، ميزات القطع هي ضرورة في تصميم الجوال. ما الذي يعنيه هذا بالنسبة للمصممين أثناء محاولتهم إنشاء موقع للجوّال من جهاز سطح مكتب تم إنشاؤه بالفعل؟
وهذا يعني التخلص من الأشياء غير الأساسية لتجربة مستخدم الجوّال. على سبيل المثال ، إذا كنت تنقل متجرًا للتجارة الإلكترونية من سطح المكتب إلى الجوال ، فاحرص على الاحتفاظ بنفس كمية المنتجات المعروضة على موقع الجوّال ؛ إنه أمر منطقي فقط ، لأن المتسوقين يريدون أن يكونوا قادرين على العثور على كل شيء يمكن أن يقدمه متجر على الإنترنت ، تماماً كما يريد المتجر الإلكتروني عرض كل شيء عليه لبيعه لزوار الموقع. ومع ذلك ، قد يكون هناك تناقص كبير في قائمة الإعلانات الكبيرة لأحدث الصفقات.
إخفاء التنقل
واحدة من أكثر الميزات شيوعًا على شاشات الجوال هي قائمة الهامبرغر ، التي تكاد تظهر أيقونة صغيرة مع ثلاثة أجزاء خطية أفقيًا فوق بعضها البعض. هذه حالة أخرى مثالية حيث يتغير حجم الشاشة الأصغر لمصممي القوات المتنقلة حول العناصر التي من المتوقع أن تبدو بطريقة معينة على أجهزة سطح المكتب.
على الرغم من وجود الرأي المنقسم حول وجود قائمة همبرغر ، إلا أنه منتشر في كل مكان على شاشات الجوال ببساطة لأن هذا هو الحل الأفضل الذي وجده المصممون لتقليص قائمة التنقل من أجهزة سطح المكتب إلى الأجهزة المحمولة.
تحقق من موقع الشيف الشهير بوبي فلاي لموقعه سلسلة مطاعم تسمى بوبي برجر بالاس. كما هو متوقع ، يتم وضع قائمة التنقل أفقيًا في أعلى الصفحة الرئيسية ، ولكن عند الانتقال إلى إصدار الجوال الخاص بالموقع ، تختفي القائمة الأفقية. في مكانها هي قائمة الهامبرغر أنيقة ومرتبة ، في نفس المكان من الشاشة حيث ستكون القائمة الأفقية الأطول على إصدار سطح المكتب.
كما يستخدم Walmart قائمة الهمبرغر في انتقال تصميم سطح المكتب إلى الجوال.
يعرض Walmart على موقعه على سطح المكتب قائمة التنقل "كل الأقسام" التي تفتح طبقة ثانية من خيارات التنقل في نفس الصفحة. على الرغم من ذلك ، لا يمكن استخدام هذه الميزة في موقع الجوّال نظرًا لحجم الشاشة الصغير ، لذا فقد تم تصميم بديل: الطبقة الثانية من خيارات التنقل موجودة في قائمة الهامبرغر ، وتتيح هذه الخيارات خيارات تنقل أكثر وأكثر مع كل اختيار تقريبًا مثل التقليب لصفحات كتاب من اليسار إلى اليمين.
التبديل إلى عمود واحد
تمشيا مع حقيقة أن أبسط هو فقط أفضل عندما يتعلق الأمر بتصميم المحمول ، فسوف تفعل جيدا لعملائك إذا كنت تتذكر أن تخطيط عمود واحد هو أنظف وأسهل للمستخدمين على العمل على شاشة أصغر. تتمثل الفائدة الكبيرة للتخطيط ذي العمود الواحد في التخلص من التمرير الأفقي ، كما لو كان لديك نصًا كبيرًا في الصفحة وأردت من القراء تمرير الشاشة من اليسار إلى اليمين أو القراءة.
عند تقديم تخطيط عمود واحد ، يمكنك تبسيط تجربة المستخدم ، وتشجيع المستخدمين على التمرير لأسفل للقراءة أو النقر فوق ارتباط يرغبون في رؤيته على صفحة جديدة. ويؤدي هذا إلى إجبارهم على التمرير السريع من اليسار إلى اليمين ، وهو أمر يصعب القيام به أكثر من مجرد التمرير لأسفل ، خاصة عندما تضع في اعتبارك وضع الإبهام لدى المستخدم بالنسبة إلى كيفية حمل الجهاز المحمول.
يتميز موقع ويب سطح المكتب لصحيفة نيويورك تايمز بعدة أعمدة. هذا سهل الاستخدام على سطح المكتب ، عندما يمكن لمستخدمي العميل ببساطة تحريك المؤشر من اليسار إلى اليمين دون أي مشاكل على لوحة التتبع أو الماوس.
بالطبع ، يدرك موقع جوال نيويورك تايمز كيف يجب تغيير الأمور على شاشات أصغر ، لذلك يقدم تصميم عمود واحد نظيف وفعال يعزز تجربة المستخدم ، حيث يمكن للقراء التمرير لأسفل بسهولة للحصول على المزيد من المحتوى مع إبهامهم .
اعتبارات المحمول
نظرًا لتأثير الجوّال على المستخدمين اليوم ، يجب على المصممين دائمًا تصميم الجوّال. إنه ليس جيدًا بما فيه الكفاية لتصميم موقع محمول جنبًا إلى جنب مع موقع سطح المكتب والاتصال بهذا التصميم للجوال ، رغم ذلك!
يعني تصميم الجوّال في الواقع مراعاة التحسينات المحددة التي يجب عليك إجراؤها لموقع العميل عندما تصمم للشاشة الصغيرة. يتضمن ذلك كل ما تحدثنا عنه أعلاه ، بدءًا من التصاميم البسيطة إلى إخفاء شريط التنقل للانتقال إلى تخطيط عمود واحد.
من خلال اعتماد أفضل الممارسات في المهارات الخاصة بك ، ستنشئ مواقع مناسبة تمامًا للجوال.