تجنب الممارسات السيئة في تصميم iOS و Android

كم عدد الأشخاص العاديين الذين رأيتهم يستخدمون أجهزة iOS و Android في نفس الوقت ؟ تتراوح الأرقام الرسمية وفقًا لهذه الدراسة بين 10٪ و 20٪ ، لكن الرقم يشمل مستخدمي Mac أيضًا ، وليس فقط مستخدمي الهواتف المحمولة. من الناحية العملية ، يميل الأشخاص إلى استخدام هاتف أو جهاز لوحي واحد فقط خلال فترة زمنية معينة. إذا كانوا يستخدمون جهازين ، في كثير من الأحيان ، فسيشغل كلاهما نفس نظام التشغيل.

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

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

لماذا لا يزال هذا يمثل مشكلة؟

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

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

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

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

ركز على المستخدمين وليس المظهر

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

بدءًا من متوسط ​​الميزانية ، قرر الأشخاص إنفاقهم على التكنولوجيا شهريًا ( iPhone: 100.88 دولارًا ، Android: 50.83 دولارًا ) ، مرورًا بعدد الصور الشخصية التي يصنعونها يوميًا iPhone: 12 ، Android: 7 والوصول إلى الرسائل النصية التي يرسلونها كل يوم iPhone : 57 ، Android: 26 ، من السهل أن نلاحظ أن الاختلافات جوهرية ، لدرجة أنه يمكننا أن نستنتج أن هناك تباعدًا في السلوك ، والذي يقود الطريقة التي يستخدم بها الناس أجهزتهم.

إذن ، ما الذي يجب أن نركز عليه عند تصميم التطبيقات لكلا النظامين الأساسيين في نفس الوقت؟

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

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

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

كيفية التعامل مع مكونات التصميم المختلفة

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

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

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

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

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

   

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

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

3. العناصر العالمية (أشرطة الحالة والعناوين وما إلى ذلك): يجب أن تهدف المكونات التي تظهر في جميع صفحات تصميمك ، مثل شريط الحالة ورأس التنقل وما إلى ذلك ، بشكل صارم إلى تقديم شعور أصلي ، لذلك لا ينبغي لنا تغيير ارتفاع ونمط تلك القضبان. هناك اختلافات طفيفة في كيفية تصميم العناصر العالمية على كلا النظامين الأساسيين. على سبيل المثال ، يستخدم Android نصًا بمحاذاة إلى اليسار بينما يستخدم iOS عنوانًا في المنتصف. يعد شريط الحالة مكونًا أصليًا ، لذا لا داعي للقلق بشأنه ، ولكن ضع في اعتبارك الشقوق المختلفة ونسب أبعاد الشاشة عند التخطيط للقسم العلوي من تطبيقك.

   

   

4. التنقل: تقترح إرشادات التصميم المادي القديمة الجيدة من Google الانتقال إلى قائمة التنقل في تطبيقات Android ، مع التنقل السفلي ، ولكن لا يزال خيارًا قابلاً للتطبيق. يميل نظام التشغيل iOS إلى استخدام شريط علامات التبويب فقط ، مما قد يحد من خيارات التنقل عالية المستوى ، ولكنه يوفر رؤية واضحة لجميع هذه الخيارات مرة واحدة. في هذه الحالة ، يوفر كلا نظامي التشغيل مكونات متشابهة يمكن استخدامها اعتمادًا على مدى تعقيد تطبيقك ، ولكن يجب أن يوجهك الاختلاف المرئي في النظامين بشكل طبيعي - على سبيل المثال ، شريط التنقل العام في Android وافتقاره في iOS.

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

   

5. أسلوب الطباعة: لكل من النظامين الأساسيين خطوطهما الافتراضية - سان فرانسيسكو لنظام التشغيل iOS و Roboto لنظام التشغيل Android. ما لم تكن تبحث عن خط مخصص ، متطابق بإحكام مع نمط التطبيق العام الخاص بك ، يجب أن تلتزم بالإعدادات الافتراضية. ضع في اعتبارك أن المستخدمين قد يغيرون خط النظام الافتراضي الخاص بهم ولن يؤثر ذلك على أي طرق عرض قمت بتخصيصها باستخدام محرف معين.

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

   

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

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

نهج عبر الأنظمة الأساسية تم القيام به بشكل صحيح

من ناحية أخرى ، إذا كان مشروعك يعتمد على حل متعدد المنصات (مثل React Native و Flutter و Xamarin وما إلى ذلك) ، فيجب أن تفكر في النظام الأساسي الذي تريد التركيز عليه والبدء من هناك.

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

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

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

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

التصميم الجيد يحترم عادات المستخدم

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

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

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