التعويض البصري

04.05.2022
742

في بداية رحلتي في مجال التصميم كنت أعتمد فقط على Photoshop وCSS فيما يتعلق بالصدق والكذب. إذا قرّر Photoshop أن الشكلَيْن متحاذيتان فهما  كذلك إذن. وإذا قرّر أن الشكلَيْن بحجم مختلف فهما كذلك إذن. إذا كان اللونان لهما نفس كود hex فهما متماثلان ظاهرًا


هذا الأسلوب بدا لي معقولًأ , لكن اتضح لي بعد ذلك أنه خاطئ.


الحسابات التي يقوم بها البرنامج معقولة , لكن لا يمكن للبرنامج أن يأخذ في الاعتبار إدراك الإنسان للشكل واللون والحجم. بالإضافة إلى ذلك , لا يمكن للبرنامج فهم علاقات الكائنات , أو مكانها في السياق المرئي العام , أو كيف يدرك الإنسان هذا الكائن.


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


هيا ننظر إلى بعض الأمثلة التوضيحية.



المحاذاة + الوزن البصري

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


قد تمت محاذاة المثلث الموجود داخل الأيقونة وسطَ الدائرة , أليس كذلك؟هذا خطأ. إذا قمنا برسم مستطيلٍ أعلى المثلث , فسنلاحظ أنه ليس في الوسط.


الأيقونة الموجودة على اليسار تبدو في الوسط على الرغم من عدم انتصاف المثلث في الدائرة


في هذه الحالة , يُأخذ في الاعتبار الوزنُ المرئي للمثلث. جزء كبير من مساحته يكون على الجانب الأيسر , وهذا يُنشئ وهمًا بصريًا بأن المثلث ليس في الوسط.


لحل هذه المشكلة نحتاج إلى تحريك المثلث يدويًا.



اللون

التعويض البصري في الألوان أقل وضوحًا , ولكن حتى هنا يرجع الأمرُ كله إلى الوزن البصري للكائن.

إذا قمت باستخدام نفس الظل الأخضر لكل من الأيقونة والنص فسيبدو النص خافتًا قليلًا.

الأيقونة والنص الموجود على اليسار لهما نفس كود hex  , بينما الأيقونة والنص الموجود على اليمين لهما كود hex مختلف.


لتجنّب اختلاف الأوزان البصرية يمكنك إما أن تجعل الأيقونة أكثر سطوعًا أو أن تجعل النص أغمق.



المقياس

المقياس هو كيفيةُ إدراكِ أذهاننا حجمَ الأشياء بما في ذلك النص. على سبيل المثال , مساحة المربع 120x120 بكسلًا أكبر من مساحة دائرة قطرها 120 بكسلًا فلذلك لابد من تكبير الدائرة للتعويض.


كلا الشكلين على اليسار بـ 120 × 120 بكسلًا فلذلك تبدو الدائرة بشكل أصغر. والدائرة على اليمين بـ 126 × 126 بكسلًا للتعويض عن المساحة الأكبر للمربع


بالمقارنة مع التعديلات الأخرى يعتبر تعديلُ اللون ضبطًا دقيقًا. ولكن تغيير حجم كائن ولو بمقدار 1 بكسل يمكن أن يحسن تصميمك بشكل كبير.


يرجى الانتباه إلى أن الجزء العلوي والسفلي من حروف خط Didot يختلف موقفها بالنسبة إلى الحد الأساسي.



الحروف الكبيرة

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


النص المكتوب بحروف كبيرة يبدو أكبر من النص بحروف عادية. حجم النص في الأسفل تم تقليلُه بمقدار بكسلَيْن.


عند العمل مع المشروع الكامل حتى التعديلات الصغيرة تؤثّر على التصور العام للصورة. الاهتمام بالتفاصيل هو الشيء الوحيد الذي يفرّق بين التصميم الحسن والتصميم الرائع.



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