جهّزوا تطبيق الآلة الحاسبة.

الأرقام الأعلى أفضل دائمًا، أليس كذلك؟

ليس بالضرورة.

حجم الصورة (بوحدة px وغيرها) لا يهم كثيرًا في أدوات التصميم المعتمدة على المتجهات (vector)، لأن معظم العناصر فيها لا تعتمد فعليًا على البكسل. بدلًا من ذلك، يمكنكم استخدام مقياس الدقة لحساب الدقة المرئية للصور والفيديو وضبطها، مع الحفاظ على نسبة الأبعاد عند تغيير الحجم.

حين نتحدث نحن المصممين عن الدقة، فنحن نقصد ببساطة عدد البكسلات المصطفة على الشاشة. والمزيد من البكسلات يعني صورًا أكثر حدة، أليس كذلك؟

حرب التجزئة التي لا تنتهي

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

وحدات قياس تستحق الانتباه

يمكن تقسيم مفاهيم التنفيذ مع الدقة المتغيرة والتحجيم إلى 3 مجموعات

1. المواقع المتجاوبة، وتطبيقات PWA، وتطبيقات الويب، والمنصات التي تستخدم CSS

يتواصل المطورون عادة مع المصممين باستخدام px وأشكال مختلفة من النسبة المئوية (%) كنقطة مرجعية. وقد يدور الحديث أحيانًا عن وحدات الطول النسبية مثل em أو rem.

2. Android

باستخدام dp (بكسلات مستقلة عن الكثافة، Density-independent Pixels) و sp (بكسلات مستقلة عن المقياس، Scale-independent Pixels)

3. تطبيقات iOS

توقعوا أن تحدد وحدتا points وpx علاقة العناصر المختلفة على الشاشة ببعضها. والعرض بدقة أقل قد يحسّن الأداء، لكن على حساب وضوح الواجهة.

باختصار: التزموا بإعدادات الشاشات الجاهزة

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

لكن عند العمل على أجهزة بمقاسات غير مألوفة، قد تكتشفون أن معاينة تصميمكم (على شاشة الجهاز الفعلي) مشوّهة قليلًا. والسبب أن أدوات التصميم مثل Figma تكبّر الإطار ليناسب الشاشة التي تعاينونه عليها، وهذه ليست الطريقة التي ستُنفَّذ بها هذه الأجهزة في الإنتاج. وقد يؤدي ذلك إلى ظهور الصورة ممطوطة أو مضغوطة، ما يؤثر في الجودة المرئية عمومًا.

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

نصيحة احترافية: جمّعوا الأجهزة المتشابهة معًا

لنفترض أنكم تريدون تصميم شاشة نموذجية لموقع متجاوب. ابدأوا بتصنيف الأجهزة في 3 مجموعات رئيسية:

1. عرض سطح المكتب / الحاسوب المحمول (الأكبر على الإطلاق)
2. عرض iPad (أو أي جهاز محمول يعمل باللمس)
3. عرض الجوال (أصغر هاتف مدعوم، أو الأجهزة المستهدفة وفق أبحاث السوق وما إلى ذلك)

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

كيف سيتعامل المطورون مع تصميمي؟

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

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

فروق القياس إذا تصفحتم تبويب الفحص في Figma أو في أدوات التسليم، فسترون أنه إذا كان التنفيذ صحيحًا، فإن كل هذه الوحدات المختلفة قابلة للتبادل مع px (بتحويل 1:1). والسبب أن المطور يستطيع بسهولة مضاعفة عناصر الواجهة لتتناسب مع الأجهزة المستهدفة، باستخدام معامل التحويل الذي توفره أدوات المطورين.

مفارقات المعاينة في Figma

على عكس Sketch حيث لا يتغير حجم تصميمكم أو مقياسه بأي شكل، يعدّل Figma الإطار الفعلي (تكبيرًا أو تصغيرًا) ليناسب نسبة الجهاز الذي تعاينونه عليه.

مع وضع ذلك في الاعتبار، كيف تتأكدون من أن زرًا ارتفاعه 40px في Figma Mirror يظهر بحجمه الفعلي بالبكسل كما سيظهر في تطبيق أو هاتف حقيقي؟ أمامكم خياران:

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

إذن الزر يبدو على الشاشة كما هو فعلًا، صحيح؟

الأمر ليس بهذه البساطة.

تعمل معظم الأجهزة المحمولة اليوم بصيغة المضاعِف، أي أن لديكم تصميمًا يتضاعف حجمه من 1x إلى 3x ليملأ مساحة الشاشة التي تستخدمونها.

فدقة iPhone مثلًا تعتمد صيغة المضاعِف (1x و2x و3x)، والمهم أن تضبطوا نسبة الشاشة وفق جهاز المعاينة لتتوافق مع الشاشة التي تصممون لها. إعداد إطار iPhone Max الجاهز في Figma مقاسه 414 x 896 px، بينما يُعرض فعليًا على 2688 x 1242 px. اقسموا الرقمين بالآلة الحاسبة وستجدون النتيجة 3x، لذا تذكّروا أن كل ما تصنعونه في Figma سيُكبَّر 3 أضعاف بكسلاته الفعلية. وأثناء التصميم، فكّروا في شكل العناصر بدقة أقل لضمان الوضوح والأداء.

تذكّروا أن التصميم بالدقة الفعلية غير مستحسن، لأن المطور يُدخل أرقام 1x عند تنفيذ التصميم، وستعطونه مقاسات 3x إذا كبّرتم إطار Figma الجاهز يدويًا ليطابق الدقة الفعلية لجهاز iPhone 11 Pro Max (2688 x 1242 px).

في تنفيذ الواجهات على أرض الواقع

عادة في فريق المشروع، سيقوم مطورو التطبيقات الأصلية (native) بأحد أمرين:

1. التحكم في مقدار الحشو (padding) حول الزر، وترك العرض الفعلي لخلفية الزر (أو مساحة اللمس) يتمدد مع الحاوية، أو
2. التحكم في عرض الزر، وترك الحشو يتكيف وفق الشاشة المستهدفة

وسيُدخلون أرقام 1x، وتتولى أدوات المطورين تحجيم البكسلات الفعلية نيابة عنهم. وإذا أردتم مضاعفة الدقة، فعليكم ضبط إعدادات التحجيم وفقًا لذلك (3x في سلسلة iPhone Max وهكذا).

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