بسم الله الرحمن الرحيم

وبه نستعين

التصميم الجرافيكي / أهمية دقة الشاشة في التصميم

Monitor Resolution Importance

 

التحديات المرتبطة بتصميم المطبوعات

The Challenge for the Print Designer

هناك اختلافات جوهرية بين تصميم المطبوعات design for print وتصميم الويب design for the Web. جميع منشورات الويب مصممة للعرض على الشاشة. هذا يعني أن المستخدم النهائي سيحدد النتيجة الدقيقة للتصميم بناءً على الإعدادات أو التفضيلات التي قد يختارها لجهازه. يكمن التحدي الذي يواجه مصمم الويب في التكيف وتعلم كيفية تحقيق أقصى استفادة من هذه البيئة المختلفة.

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

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

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

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

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

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

قرارات التصميم

Design Decisions

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

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

مشاكل إمكانية الوصول

Accessibility Issues

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

إحدى الطرق البسيطة للمساعدة هي التأكد من أن الأسطر والمحتوى غير النصي الآخر يحتوي على وسم "alt"، في HTML يحتوي على وصف نصي. يُعدّ التنقل مشكلةً أخرى، خاصةً عند استخدام الأزرار والقوائم المُصممة باستخدام جافا سكريبت أو فلاش، بدلاً من الروابط التشعبية.

توجد الآن إرشادات شاملة من W3C حول إمكانية الوصول، وينبغي على المواقع الالتزام بها لتجنب انتهاك تشريعات مكافحة التمييز، مثل قانون التمييز ضد ذوي الإعاقة في المملكة المتحدة.

دقة الشاشة

Monitor Resolution

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

التصميم مع الأخذ في الاعتبار اختلافات الشاشات والمتغيرات

Design With Screen Differences and Variants in Mind

كلما زاد عدد وحدات البكسل pixels في شاشة العرض (أو، بشكل أكثر تحديدًا، في نافذة المتصفح)، زادت التفاصيل التي يُمكن عرضها. يُعدّ هذا العامل وحده حاسمًا في تحديد الحجم الأمثل للصور والنصوص لصفحة الويب. كانت الشاشات القديمة قادرة على عرض 640 × 480 بكسل فقط على شاشة مقاس 14 بوصة.

أما شاشات اليوم، فهي قادرة على عرض نطاق واسع من الدقة، لا يعتمد فقط على حجم الشاشة، بل أيضًا على بطاقة الرسومات المُثبّتة في الكمبيوتر ورغبات المستخدم. لذا، من الضروري تصميم صفحات تناسب حجمًا أدنى أو حجمًا أصغر، وذلك لاستيعاب الأحجام المختلفة. يمتلك غالبية مستخدمي الكمبيوتر الآن شاشة مقاس ١٧ بوصة على الأقل بدقة ١٠٢٤ × ٧٦٨ بكسل.

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

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

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

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

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

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

وذلك في مقياس أشعة "جاما gamma" (والذي يدل على توازن الدرجات الوسطي للألوان midtone balance) بين المنصات.  وقد تكون الاختلافات بين الأجهزة الفردية بالغة الأهمية. يُعد اختبار تصميماتك على عدة أجهزة كمبيوتر مختلفة، وكذلك في متصفحات مختلفة، طريقة جيدة لضمان عدم وجود أي مشاكل محتملة دون معايير مقبولة.

أمثلة عن أهمية دقة الشاشة

Examples of the Importance of Monitor Resolution

مثال (1)

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

مثال (2)

يختلف إعداد جاما gamma الافتراضي لشاشات Apple Macintosh عن إعداد أجهزة الكمبيوتر التي تعمل بنظام Windows، لذا قد تظهر الصور التي تبدو طبيعية على جهاز Mac داكنة على جهاز الكمبيوتر الأخر. يُزود مستخدمو Mac بأدوات لضبط ومعايرة شاشاتهم، لذا قد تختلف كل شاشة عمليًا. من غير المرجح أن يُولي مستخدمو الكمبيوتر أي اهتمام لإدارة الألوان، ولكن تفاوت جودة شاشات الكمبيوتر الأساسية قد يُسبب مشاكله الخاصة.

مثال (3)

يُتيح كل من نظامي التشغيل Macintosh وWindows الآن إمكانية تغيير دقة الشاشة "فوريًا on the fly"، دون الحاجة إلى إعادة تشغيل الكمبيوتر. يعد هذا مفيدًا بشكل خاص للمصممين الذين يحتاجون إلى معرفة إعدادات شاشة المستخدم النهائي المتغيرة التي يمكن أن تؤدي إلى إخراج تخطيط صفحة الويب عن السيطرة.

 

أرجو أن تنال التدوينة إعجابكم وإلى لقاء قريب بإذن الله

 

المراجع والمصادر

الدليل الكامل للتصميم الجرافيكي الرقمي.

The Complete Guide to Digital Graphic Design

 

لمزيد من التواصل تابعونا على وسائل التواصل الاجتماعي

حساب "مدونة ألوان" على فيسبوك.

حساب "مدونة ألوان" على انستجرام.

حساب "مدونة ألوان" على تويتر.