شرح الفرق بين تصميمات الجوال وتصميمات سطح المكتب

• شرح الفرق بين تصميمات الجوال وتصميمات سطح المكتب

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

في كثير من الأحيان تبدو هذه وكأنها شاشات نسخ غير ملهمة ، أقسمت أنني رأيتها في مكان ما على Behance.

بالتأكيد ، سيظل تصميم الهاتف المحمول رائجًا دائمًا في السنوات القادمة.

هناك موارد رائعة للنماذج والإلهام في كل مكان لتصميمات الأجهزة المحمولة.

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

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

لذا ، كمساعدة لأولئك الذين ربما لم يصمموا أبدًا لمنتجات سطح المكتب على الشعور بالراحة في أسرع وقت ممكن ،

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

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

(لذلك يمكنك بسهولة الإجابة على الأسئلة من عميلك التالي أو المحاور المستقبلي.)

ها هي القاعدة رقم واحد بالنسبة لك أدناه …

• التفكير في بعد واحد مقابل بعدين

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

هذه هي القاعدة الأكثر أهمية لإتقان تصميمات الأجهزة المحمولة مقابل تصميمات سطح المكتب.

من وجهة نظر وظيفية ، يجب أن تكون وظائف سطح المكتب ومنتجات الأجهزة المحمولة متشابهة إلى حد ما ،

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

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

ولكن عليك إعادة حزمة على تطبيق أمازون للجوال؟ (نعم سيكون غريبًا جدًا)

ستكون الاختلافات في تخطيط مستوى العرض وتدفق المستخدم على مستوى التحكم للواجهة. (سأحدد لك هذه أدناه)

المثال الأول باستخدام قاعدة 1 # الخاصة بنا: تخطيط المستوى المرئي

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

يمكن فهم واجهة سطح المكتب على أنها ربط واجهات متعددة لواجهة الهاتف المحمول معًا.

ألق نظرة على مثال الإطار السلكي لسطح المكتب أدناه:

تعرف على كيفية وضع الإطارات السلكية لسطح المكتب والجوّال جنبًا إلى جنب ، حيث يبدو كل إطار سلكي لسطح المكتب مشابهًا لشاشات هاتف فردية متعددة؟

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

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

لا يوجد سوى التخطيط الرأسي لأن مساحة الشاشة محدودة.

لذلك لا يهم ما تصممه ، سيكون التصميم العام بسيطًا نسبيًا وسيتم تقييد المعلومات في “بُعد واحد”

الآن ، دعنا نلقي نظرة على تخطيطات سطح المكتب.

فيما يلي مثال على Spotify على سطح المكتب ، وهو تطبيق جوال شائع.

كما ترى فإن تخطيط سطح المكتب بشكل عام “ثنائي الأبعاد”.

مع مساحة الشاشة الأكبر ، يمكن أن تحتوي أجهزة سطح المكتب على الكثير من المعلومات.

لا توجد أبعاد رأسية فحسب ، بل أبعاد أفقية أيضًا.

يتم نشر معظم المعلومات بناءً على الأبعاد الأفقية (على الرغم من أن هذا ليس مطلبًا صارمًا لمعظم المنتجات).

على سبيل المثال ، يمكن لـ “التنقل الجانبي” الكلاسيكي على سطح المكتب أن يدمج مستويات متعددة من واجهة الهاتف المحمول في واجهة واحدة

(انظر كيف يلتقط سطح المكتب Spotify العديد من شاشات الهاتف المحمول على واجهة واحدة؟).

• فماذا يعني هذا بالنسبة لك؟

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

يجب أن تكون قادرًا على الوصول إلى الأماكن بسرعة بنقرة واحدة.

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

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

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

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

طالما أنك تفهم تمامًا مفهوم التفكير في بُعد واحد مقابل بُعدين ، فإن جميع الاختلافات الأخرى بين سطح المكتب والجوّال يجب أن تأتي إليك بشكل طبيعي.

أتقن هذه القاعدة الأكثر أهمية مع المثالين الإضافيين أدناه.

الأمثلة الثانية  باستخدام قاعدة 1 # الخاصة بنا: الكشف عن المعلومات

مثال آخر هو فهم كيفية مشاركة سطح المكتب والجوال للمحتوى والمعلومات مع مستخدمه.

غالبًا ما يستخدم سطح المكتب إخفاء المعلومات بينما تختار منتجات الجوال “التمرير” الشائع الذي أسميه يكشف عن المعلومات.

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

حجم سطح المكتب أكبر ، والذي يتميز بطبقات ، وطي ، وإخفاء المعلومات بأبعاد مختلفة.

انظر إلى مثال شريط أدوات Photoshop أدناه عند محاولة تصدير ملف GIF.

يمكن عرض وظائف متعددة تمامًا على المناطق اليمنى واليسرى حتى الوسطى من الشاشة عند الحاجة.

هذا يجعل تحرير الصور أو الصور أمرًا سهلاً لأن لديك إمكانية وصول أفضل وتحكمًا أفضل في الوظائف التي تريدها.

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

لذلك دعونا نلقي نظرة على VSCO ، تطبيق رائع لتصفية الصور على الهاتف المحمول.

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

(انظر كيف لا يجب أن يكون التمرير لـ VSCO عموديًا ، كما أن التمرير الأفقي يعمل بشكل رائع أيضًا)

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

المثال الثالث باستخدام قاعدة 1 # الخاصة بنا: فهم قابلية الاستخدام

المثال الأخير هو توضيح أن هذه القاعدة تتجاوز مجرد المرئيات.

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

بالنسبة للوظائف ضمن تدفق مستخدم معين ، غالبًا ما تحتاج منتجات الأجهزة المحمولة إلى “الانتقال” إلى الواجهة لإكمال الإجراء ،

بينما تكملها منتجات سطح المكتب عادةً على نفس الواجهة.

فكر في أي تطبيق بريد إلكتروني. دعونا نستخدم Gmail كمثال.

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

ثنائي الأبعاد أليس كذلك؟ يتم وضع المعلومات في طبقات عند الحاجة ، وهذا تصميم جيد.

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

بالطبع لا ، يمكنك الكتابة إذا كان 10% فقط من شاشتك تحتوي على ما تريد ،

لذلك بطبيعة الحال “تقفز” الواجهة بأكملها إلى الإجراء الذي تحاول إكماله.

• لقد أتقنت القاعدة!

في هذه المرحلة ، أعتقد أنك حصلت على المعلومات اللازمة!

ومع ذلك ، تذكر فقط أن أفضل طريقة للتعلم في التصميم هي من التدريب العملي ،

حاول أن تتحدى نفسك لتصميم يتجاوز المساحة المريحة للهاتف المحمول.

في تقنية نقدم خدمات تصميم مواقع الويب التي تم اعدادها لتتوافق مع شاشات الجوال أيضاً.

قد يهمك أيضاً: كيفية استغلال التسويق بالمحتوى لزيادة المبيعات والزيارات لأعمالك