دليل المصمم إلى DPI – التحويل إلى أحجام العالم الحقيقي

إفشاء: يساعدك دعمك في الحفاظ على تشغيل الموقع! نحصل على رسوم إحالة لبعض الخدمات التي نوصي بها في هذه الصفحة.


على الويب ، يشير DPI إلى كثافة بكسل لكل بوصة. يشير PPI ببساطة إلى بكسل لكل بوصة. (على الرغم من أن DPI نشأت في صناعة الطباعة ، إلا أنها غالبًا ما تستخدم بدلاً من PPI على الويب نظرًا لتعريفها الحديث).

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

المعيار غير الرسمي للتصميم الجرافيكي للويب هو 72 نقطة لكل بوصة. كان هذا هو إعداد DPI القياسي في Photoshop في أيام أول كمبيوتر Mac ، 128K. (إليك مقارنة لطيفة بين كثافة البكسل في 128K مقابل iPad.)

باستخدام 72 نقطة لكل بوصة ، كانت الطباعة أكثر موثوقية. و 72 نقطة لكل بوصة عالقة معنا ، بشكل صحيح أو خطأ.

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

لماذا أهمية دقة الشاشة

تخيل أن لديك جهازين بنفس الحجم المادي. يحتوي الجهاز 1 على شاشة عرض 72 نقطة لكل بوصة. يحتوي الجهاز 2 على شاشة 144 نقطة لكل بوصة.

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

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

  • شاشة Apple Cinema: 99
  • سطح مايكروسوفت: 148
  • أمازون كيندل فاير 7 ″: 170
  • ابل 12 ″ ماك بوك: 226
  • جواز سفر بلاك بيري: 453
  • Samsung Galaxy S7: 576
  • سوني اكسبيريا Z5 بريميوم: 801.

(يمكنك على الفور معرفة DPI لشاشتك لمعرفة كيفية مقارنتها.)

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

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

لتطوير تصميمات متسقة ، تحتاج إلى نهج مختلف.

استخدام موانئ دبي والنقاط لتحجيم بسيط

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

بدلاً من ذلك ، يمكنك استخدام مفهوم وحدات البكسل الافتراضية ، أو وحدات بكسل CSS .:

هذا يختلف قليلاً عن Android مقابل iOS:

  • يشير dp إلى البكسل المستقل للجهاز أو البكسل المستقل عن الكثافة. يتم استخدامه على Android. واحد موانئ دبي يقيس 1/160 بوصة.
  • النقاط معادلة لنظام iOS. قياس نقطة واحدة 1/163 من البوصة.

في حين أن هناك اختلافًا طفيفًا في الكثافة ، فإن الأنظمة متشابهة جدًا.

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

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

استخدام مؤهلات كثافة شاشة Android

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

عند إنشاء صورة لنظام Android ، مثل رمز التطبيق ، هناك ست مؤهلات تحتاج إلى معرفتها عن:

  • منخفض (LDPI): أي جهاز حتى 120 نقطة في البوصة ، مضاعف 0.75
  • متوسط ​​(MDPI): بين 120 و 160 نقطة في البوصة ، مضاعف 1 (كثافة الأساس)
  • عالي (HDPI): بين 160 و 240 نقطة في البوصة ، مضاعف 1.5
  • عالية جدًا (XHDPI): 240 إلى 320 نقطة في البوصة ، مضاعف 2
  • زيادة فائقة جدًا (XXHDPI): 320 إلى 480 نقطة لكل بوصة ، مضاعف 3
  • اضافية اضافية للغاية (XXXHDPI): 480 إلى 640 نقطة في البوصة ، مضاعف 4.

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

التصميم من أجل اللمس

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

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

أهداف اللمس هي 44x44pt في iOS ، و 48 x48pt square لأجهزة Android. ستحتاج إلى جعل كل التنقل أكبر ، وزيادة التباعد حوله ، لتجنب احتمال حدوث أخطاء.

مصادر

  • تحويل DP إلى PPI: دليل من موقع Android Developer على الويب
  • Pixplicity DP إلى PPI Converter: آلة حاسبة ومحول ممتازين
  • نصائح للمصممين: تعرف على مزيد من المعلومات حول مؤهلات كثافة Android وحسابات dp
  • إرشادات الوصول إلى بي بي سي للجوال على حجم الهدف الذي يعمل باللمس: تقدم هذه المقالة نصائح ممتازة حول أفضل الممارسات لتصميم تصميمات الهواتف المحمولة التي يمكن الوصول إليها بتنسيق HTML
  • إرشادات تصميم iOS: تشمل الدقة والاختزال والرموز والطباعة ومكونات التخطيط القياسية وتأثيرات الأيقونات التلقائية.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map