ما الفرق بين Point و DIP كوحدات تصميم موبايل معاصرة و من أين أتت؟

تشير عبارة “كثافة البكسلات Pixel Density” إلى عدد البكسلات التي من الممكن أن تكون متواجدة في مساحة فيزيائية ما ( غالباً ما تقاس بالإنش). مثال ذلك أن دقة أول جهاز ماك هي 72 بكسل/ بالإنش PPI و هي دقة منخفضة نسبياً.

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

غيرت آبل المعادلة في 2010 بتقديم مفهوم الريتينا ديسبلاي Retina Display استطاعت فيه زيادة الدقة بشكل ملحوظ و مضاعفة كم البكسلات المتاح في إنش واحد من نفس الشاشة. انتقلت الرسوم إلى مرحلة جديدة كلياً بعد ذلك.

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

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

لم يكن هناك وحدة قياس مستقلة عن كثافة البكسلات نفسها أو مايسمى بـ pixel-density-independent unit.

حل آبل لهذه المشكلة عندما ظهرت مع أول شاشة ريتينا كان تقديم وحدة جديدة تدعى بوينت أو نقطة Point أو pt كاختصار. الآن النقطة الواحدة تساوي البكسل الواحد في الشاشات قبل ريتينا، لكن النقطة تساوي 2 بكسل في شاشة ريتينا كونها مضاعفة الكثافة. يسمح هذا للمصممين القول بأن ارتفاع هذا الزر هو 44 نقطة، بحيث يمكن أن يفهم الجميع الآن أنه 88 بكسل على شاشة ريتينا و 44 بكسل على شاشة عادية و يمكن مضاعفة الرقم مع تضاعف كثافة البكسلات في الإنش في شاشات قد تتوافر في المستقبل أو على أجهزة أكبر. ( يضرب المقياس بـ 3 على أجهزة آيفون الكبيرة Plus).

يعني هذا أن على المصمم أن يقدم نسختين مختلفتين من الرسوم المستخدمة 1x و 2x أو أكثر.

مقارنة بين زرين واحد الأول مستخدم في شاشات قبل ريتينا ( ارتفاع 44 بكسل) و الثاني بعد ريتينا (ارتفاع 88 بكسل). من sketchmaster.com

ماذا عن أندرويد و الأجهزة الأخرى؟

الآن ماذا عن أندرويد؟ كيف يمكن التعامل مع هذه المشكلة على أجهزة أخرى كون الشاشات ذات الدقة العالية تحولت لمعيار قياسي في كل الأجهزة المعاصرة تقريباً؟ أضف لها أن أجهزة أندرويد تختلف في الأحجام.

حل جوجل هو تقديم وحدة مشابهة تسمى DIP أو density-independent pixels بكسل مستقل عن الكثافة (يشار لها أيضاً بـ dp). الآن واحد DP لا يساوي واحد Point بالضبط لكن الفكرة قريبة جداً. هي وحدات عالمية للقياس يمكن أن تحوّل لبكسلات عبر استخدام معاملات تضخيم (أو تصغير) 2x أو 3x و غير ذلك.

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

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

فوضى خلاقة!

نعيش اليوم في عالم مليء بالأجهزة و الشاشات المختلفة. هذا يعني أن استخدام Points و DIPs مهم جداً لتحويل الرسوم بسرعة للأحجام المطلوبة. لم يعد 1x و 2x كافياً بالضرورة. على أندوريد هناك 6 أحجام مختلفة للرسوم لكي تكون التصاميم مناسبة لجميع الشاشات (نظراً لاختلاف المصنعين) و على آبل هناك 3 تقريباً.

لحسن الحظ هناك تطبيقات و أساليب تساعد أيضاً على التعامل مع هذه التعقيدات بشكل سريع نسبياً.

العنصر الأهم هنا أن التصاميم ( كل التصاميم) يجب أن تنتج باستخدام تطبيقات Vector أو رسوم شعاعية مثل Sketch أو Figma أو XD ( أو حتى Illustrator) للأيقونات و الواجهات. يسهّل التعامل مع الرسوم الشعاعية تصديرها وفق أي دقة مطلوبة. تصميمنا الرئيسي يجب أن يكون دائماً هو التصميم المعياري 1x الذي نقوم بمضاعفته وفقاً للمنصة المطلوبة. (تتطلب منصات تطوير التطبيقات مثل XCode من آبل أو Android Studio أن يتم تأمين النسخ المختلفة من الأيقونات (أو الرسوم) كـ 1x أو 2x أو 3x.

متطلبات أحجام الأيقونات المختلفة على Xcode

تسمح جميع تطبيقات التصميم المعاصرة اليوم إنشاء لوحات رئيسية Artboards ( أو Frames) وفق معايير قياسية محددة مسبقاً لأغلب الأجهزة وفق قياس 1x و هو الذي علينا أن نبدأ التصميم به ثم ننتقل للأجهزة الأكثر دقة و الأكبر حجماً.

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

ماذا عن الويب؟

تختلف الأمور قليلاً على الويب خصوصاً عند التعامل مع CSS. سنوضح وحدات CSS بشكل مفصل و عملي لاحقاً. باختصار تعتمد CSS (وفق المعايير المدعومة على أغلب المتصفحات المعاصرة على الحواسب و الموبايل) على أسلوبين. تسمى هذه بوحدات قياس الامتداد Length و هي التي تعبر عن العرض Width أو الهامش Margin و الحاشية Padding و حجم الخط و غيرها.

هناك ما يسمى بالوحدات المطلقة Absolute Lengths والتي تظهر فيها القياسات بشكل مطلق و محدد (أمثلتها بكسل px و وإنش (تقريباً 96 بكسل) نقطة pt (تقريباً 1/72 من الإنش) و بيكا pc (البيكا تساوي 12 نقطة) و الوحدات النسبية Relative Lengths و هي التي تحدد الامتداد بشكل نسبي لامتداد عنصر آخر، و هذا أمر مفيد جداً عند التعامل مع أوساط (شاشات) مختلفة. أمثلة هذه الوحدات هي em و ex و ch و rem % وغيرها. نعمل حالياً على درس مفصل عن وحدات CSS.

مصادر للاستزادة و التوسع

شاركنا بتعليقك