كيفية تنفيذ تصميم واجهة مستخدم iOS بدقة بكسل

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

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

ما هو تصميم واجهة المستخدم المثالي للبكسل؟

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

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

لكن لماذا التصميم المثالي للبكسل؟

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

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

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

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

إنشاء تصميم لواجهة مستخدم iOS

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

أدوات تصميم واجهة iOS الأساسية

أعتقد أنني دقيق في القول إن Sketch أصبح المعيار الفعلي لمصممي UI / UX على الإنترنت والجوّال. بينما يعد Adobe XD بديلاً صاعدًا ، إلا أنه يتخلف عن Sketch من حيث الشعبية.

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

السؤال الحقيقي الوحيد هنا هو: كيف يجب على المصمم مشاركة المعلومات حول تكييف التصميمات مع شاشات العرض المختلفة مع المطور؟

لحسن الحظ ، ليست هناك حاجة لكتابة المواصفات لكل واحد ، حيث أن المكون الإضافي Auto Layout لـ Sketch سيتولى ذلك. يحتاج المصمم فقط إلى ضبط التخطيط التلقائي المطلوب ، والتصدير إلى أحجام شاشة مختلفة بنقرة واحدة ، وسيفهم المطور كيفية وضع قيود التخطيط والتأكد من أن كل شيء يبدو جيدًا ، سواء على iPhone X أو iPhone 5 القديم الجيد.

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

إعداد التصميم الخاص بك

هذا يبدو رائعًا ، لكننا ما زلنا لم نختار الحجم الذي سنستخدمه لإنشاء تصميمنا. وفقًا لإحصائيات David Smith's iOS ، فإن 57٪ من جميع مستخدمي iPhone يعتمدون على شاشات 4.7 بوصة ، تم تقديمها في iPhone 6 / 6s وتم استخدامها لاحقًا في iPhone 7 وحتى iPhone 8 الذي تم إطلاقه مؤخرًا.

أنا متأكد من أنك على دراية بشاشات Apple مقاس 4.7 بوصة حتى الآن ، ولكن إذا لم تكن شخصًا أرقامًا ، فنحن نتحدث عن شاشات 750 × 1334 بكسل مع 326 بكسل لكل بوصة (PPI). هذه شاشة Retina قياسية وفي الكود سيكون لدينا نصف الدقة. لذلك ، أقترح أن تبدأ بـ 375 × 667 بكسل.

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

فيما يلي مثال على مستطيل بسيط به تركيب بكسل وبدونه:

استخدام Round: Full Pixels عند تحرير الكائنات المتجهة:

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

لا تتردد في استخدام الرسوم المتحركة المتجهية المعقدة ، لأن المطور يمكنه تشغيلها بسهولة باستخدام مكتبة Lottie. يمكنك تشغيل رسوم Adobe After Effects الرسومية على جهاز محمول دون المعاناة من أي تأثيرات تحجيم. ما عليك سوى تقديم ملف JSON للمطور وهذا كل شيء.

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

كود مخصص لنتائج مثالية للبكسل

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

اختيار الأدوات الصحيحة

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

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

من الواضح أنك ستحتاج إلى الاعتماد على Xcode وبعض أدوات تطوير iOS القياسية ، لكننا سنصل إلى ذلك لاحقًا.

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

حسنًا ، يمتلك المطور أخيرًا كل ما يحتاج إليه ، فكيف ننفذ تصميمًا مثاليًا للبيكسل (عفوًا عن الكلمات)؟

إعداد ومزامنة أدواتك

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

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

للقيام بذلك بشكل صحيح ، تحتاج إلى مزامنة أدواتك:

• اضبط ملف تعريف لون الشاشة على sRGB: انتقل إلى تفضيلات النظام - شاشات العرض - اللون واختر sRGB IEC61966-2.1 .

• في Digital Color Meter ، أو أي أداة أخرى لمنتقي الألوان ، اختر العرض في sRGB .

• تحقق من ضبط ملف تعريف اللون في لوحة ألوان Xcode على Device RGB.

ملاحظة: يمكن أن تحتوي الصور على ملف تعريف ألوان مضمّن. إذا كانت هذه هي الحالة ، فستحتاج إلى تكييف أدواتك مع ملف التعريف هذا إذا كنت تريد الحصول على اللون الصحيح من هذه الصورة. لحسن الحظ ، يجب أن يكون هذا استثناءً ، ولا يجب أن تواجه مثل هذه الحالات كثيرًا.

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

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

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

إضفاء الحيوية على تصميم واجهة مستخدم iOS

عندما يتعلق الأمر بتنفيذ تصميم واجهة مستخدم iOS ، فهناك عدة طرق للاختيار من بينها: Storyboard و XIB و Custom code.

• Storyboard - تصور الشاشات والتنقل بينها ، ولكن لا توجد خيارات لوراثة تصميم من وحدة تحكم في أخرى.

• XIBs - تصور شاشة واحدة أو جزء منها ، يسهل توريثها. قبل Xcode 9 ، لم يكن هناك خيار لاستخدام أدلة التخطيط العلوية / السفلية ، بينما في Xcode 9 يمكننا استخدام المنطقة الآمنة .

• رمز - إلى حد بعيد الخيار الأكثر مرونة ، لكنه لا يوفر تصورًا فوريًا.

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

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

انظر المثال التالي للعناصر غير المجمعة والمجمعة:

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

لاستخدام الألوان في IB ، يمكنك تحضير لوحة أسفل Xcode Color Picker.

ملاحظة: إذا كان الحد الأدنى لإصدار iOS لتطبيقك هو 11 ، فيمكنك استخدام خيار "الألوان المسماة" في كتالوج الأصول.

تغليف

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

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