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

وهذا يعني أن المحتوى سيبدو أكثر حدة إذا تم تصميمه بشكل صحيح. إذن ، كيف ينبغي أن يعمل مصمم واجهة المستخدم على التعامل مع شاشات شبكية العين؟ ما هي التقنية الحالية المتوفرة وما هي أفضل طريقة للتعامل مع أكبر قاعدة للمستخدم؟ 
أرغب في تغطية الأساليب الأكثر موثوقية للتعامل مع شاشات retina / hi-DPI وإنشاء واجهات تعمل فقط. إذا تابعت مع هذا الدليل ، فستتأكد من أنك ستخرج بنصائح قابلة للتطبيق وحلول عملية لمفهوم عرض الشبكية.

معالجة أجهزة شبكية العين 
الخطوة الأولى هي فحص شاشات العرض بناءً على دقة hi-DPI. الآن وقد حصلت بعض الأجهزة على أحجام يبلغ حجمها 3x ستحتاج إلى التحقق من عدد من درجات دقة الشاشة قبل عرض الصور. يمكنك دائمًا أن تكون آمنًا مع صور بحجم 3x ، ولكنها أيضًا أكبر حجمًا وتتطلب المزيد من النطاق الترددي لتنزيلها. 
يمكن إجراء هذا التدقيق باستخدام srcset ولكن هناك العديد من الطرق المختلفة التي تستخدم JavaScript أيضًا. تحقق من هذا البرنامج التعليمي لمزيد من المعلومات. 
واحدة خدعة لطيفة للرموز استعداد شبكية العين هو استخدام iconfont مجانا بدلا من الصور النقطية. يعتبر Font Awesome خيارًا شائعًا جدًا ومجانيًا ومفتوحًا تمامًا ، ويوفر مكتبة من الرموز للاختيار من بينها.

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

تتمثل الصعوبة الوحيدة في تصميم SVG من البداية والتعلم لتصديرها بشكل صحيح ، والذي يمكن أن يكون أكثر تعقيدًا من استخدام PNGs أو JPEG فقط. بالإضافة إلى ذلك ، لا يعتبر SVG مفيدًا للصور التفصيلية مثل الصور الفوتوغرافية نظرًا لأنه في الواقع نوع ملف vector. 
ولكن تحتوي ملفات SVG على مساحة أكبر للرسوم المتحركة المخصصة التي تظهر بوضوح في جميع القرارات. 
الهدف هو تحديد أنواع الملفات وفحص المستعرضات على أساس كل حالة على حدة. بعض الصور هي أفضل مثل JPGs وبعض المواقع أفضل مع الشيكات CSS مقابل JS شبكية العين. أنا شخصياً أفضل CSS ، ولكن أوصي بمحاولة معاينة ما تفضله. 
صور الخلفية لـ CSS 
تتمثل أبسط طريقة للتعامل مع الخلفيات المخصصة في صور خلفية شبكية العين باستخدام خاصية حجم الخلفية.
غالبًا ما يكون هذا أسرع طريقة للتحقق من صور شبكية العين لأنها يمكن أن تعمل على جميع الأجهزة ، حتى الأجهزة غير الشبكية. لا يؤلمك الحصول على صورة محسّنة في CSS إذا كنت لا تمانع في أوقات التحميل الممتدة. 
ستكون الطريقة البديلة هي تحميل ملفات CSS مختلفة استنادًا إلى عمليات التحقق من جافا سكريبت أو التحقق من الخادم الخلفي. 
ولكن ربما تكون أفضل طريقة للتعامل مع CSS هي استخدام استعلام وسائط شبكية شبكية. تحقق هذه الاستعلامات من كثافة البكسل وتحميل صور خلفية مختلفة لتلك الأجهزة (أيضًا ضبط حجم الخلفية). 
تعد CSS عمومًا أبسط طريقة للتعامل مع الصور ، ولكن لا يمكن استخدامها للصور ذات المشاركة. هذه الأمور أكثر تعقيدًا ويجب تحميلها بأعلى دقة ممكنة أو تحديثها باستخدام JavaScript.
إذا لم تكن مهتمًا بأوقات التحميل ، فما عليك سوى استخدام أكبر حل لجميع صورك. إذا لم يكن الأمر كذلك ، فستحتاج إلى تحميل صورتين بحجم 2x و @ 3x يدويًا باستخدام مكتبة JavaScript مجانية مثل Retina.js. 
فحص جافا سكريبت 
إذا كنت تريد أكبر قدر من التحكم في محتوى دقة الشبكية ، فستحتاج إلى جافا سكريبت. يشغل معظم الزائرين شفرة JS وهي الطريقة الأسهل لاكتشاف القرارات باستخدام أساليب جافا سكريبت المدمجة. 
ستجد الكثير من البرامج التعليمية المجانية للكشف عن شاشات Retina الشبكية ، لكن هذا ليس سوى نصف المعركة. بمجرد معرفة دقة الشاشة ، ستحتاج عندئذ إلى تحديث الصور وفقًا لذلك.

أوصي باستخدام حل مبني مسبقا لتوفير الوقت والصداع أثناء العملية. 
المطورين لا يريدون ابدا اختراع العجلة. لذا إذا قام شخص آخر بحل هذه المشكلة فلماذا تزعج نفسك من البداية؟ 
السبب الوحيد لدحر الحل الخاص بك هو إذا كنت بحاجة إلى وظائف مخصصة. في هذه الحالة ، اطلع على الروابط أدناه لمعرفة كيف يمكنك تنفيذ فحص شبكية شبكية مخصص. 
وبخلاف ذلك ، استمر في التمرير والاستيلاء على إحدى مكتبات JS المجانية التي قمت بإدراجها في القسم التالي. 
5 طرق لدعم شبكية العين عالية الكثافة عرض 
صور شبكية العين 2X سهلة مع jQuery 
تخدم رسومات شبكية العين إلى موقع الويب الخاص بك 
مفتوحة المصدر شبكية العين أدوات
هناك العشرات من أدوات شبكية العين المخصصة للكشف عن صور شبكية العين وإدارتها. هذه ليست أسهل دائمًا للتنفيذ ، ولكنها قد تجعل جمهورك أكثر سعادة على المدى الطويل. 
إذن ما الذي يجب عليك اختياره للبدء؟ لا يوجد حقا إجابة خاطئة. 
أرغب في تقديم بعض الأدوات الأكثر شيوعًا وإعطائك الفرصة لاختيار أي شيء يناسب موقعك على الويب. 
Retina.js

مكتبة Retina.js عبارة عن مصدر برنامج جافاسكريبت مفتوح المصدر يقوم تلقائيًا باكتشاف دقة الشبكية وأحجام الشاشات. يقوم البرنامج النصي أيضًا بالتحقق من وجود صورة عالية الدقة موجودة بعد اتباع إرشادات التصميم الخاصة بشركة Apple ، وإذا كان الأمر كذلك ، فسيتحول إلى عرض إصدار hi-res. 
يتبع اصطلاحات التسمية لاحقة @ 2x قبل filetype. لذا إذا كان لديك my_image.jpg ، فستحتاج أيضًا إلى my_image@2x.jpg في نفس المجلد. 
هذا هو واحد من أبسط البرامج النصية لأنه حقا هو مجرد سد واللعب. ولكنه يتطلب أيضًا بعض المعرفة بمحتوى شبكية العين للحصول عليها تعمل بشكل مثالي. إذا كنت قد بدأت للتو ، فهذا في الحقيقة برنامج نصي رائع ولا يمكنك أن تخطئ في الوظيفة الافتراضية. 
jQuery شبكية العين

خيار آخر هو jQuery Retina مدعوم من مكتبة jQuery. يعمل هذا بطريقة مختلفة قليلاً لأنه يعمل على سمات بيانات HTML5. 
يمكنك ببساطة تمرير قيمة عنوان URL للصورة إلى سمة بيانات شبكية العين في كل علامة صورة تتطلب بديل صورة شبكية العين. إنه يتطلب المزيد من الترميز الثابت ولكنه أيضًا الأسهل للتراجع باستخدام الخيارات المخصصة. تحتوي صفحة GitHub على مزيد من المعلومات حول الخطوات الأساسية للتثبيت. 
الفسفور الابيض الشبكية 2X

If you’re a WordPress user then WP Retina 2x might be a great alternative to adding a JS plugin from GitHub. The WP Retina plugin works directly with WordPress to check for retina-sized images and replaces them automatically.
It’s another plug-and-play solution where you just activate the plugin and let it run. Super easy to use and definitely a clean solution for non-technical WP users.
Dense.js

What I like most about the Dense.js library is the support for varying device ratios. Not all retina displays are simply 2x the size. Other ratios can include 1.5x or 3x.
This plugin auto-detects which screen density is being used and adjusts your images accordingly. There are lots of options so customization is no problem. Check out the GitHub to get started and the online docs for more information.
If you’re looking for more retina display resources I also recommend these plugins.
CSS Media Queries for iPads & iPhones
Adaptive Images in HTML
Swipebox jQuery Lightbox
Grails Retina Images Plugin
Choosing A Responsive Image Solution
نأمل أن توفر هذه المواد أكثر من كافية لمساعدتك على التعامل مع الصور والوسائط على شاشات شبكية العين. نظرًا لأن CSS ستعمل على القياس التلقائي لجميع القرارات ، فلا داعي للقلق بشأن أشياء مثل الهوامش أو عروض الصفحة. 
ولكن ستحتاج وسائط على صفحة مثل الرموز والصور إلى تصميم مخصص لأجهزة شبكية العين. 
ستوفر لك هذه الموارد كل ما تحتاج إليه لبدء تشغيل موقع جديد تمامًا وجعله يبدو حادًا في جميع درجات الدقة على الأجهزة. 
إذا كنت تبحث عن نصائح تصميم واجهة مستخدم مشابهة ، فألق نظرة سريعة على هذه المقالات ذات الصلة. 
أركان الاندماج ونجاح 
دليل UX Ultimate Mobile لتصميم 
الويب المتجاوب دمج أفكار تصميم الويب السريع الاستجابة لسطح المكتب والمحمول