Faragiri
العربية

كل اللغات

تعلم تصميم واجهات المستخدمالتصميم

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

8الأقسام
5دقائق القراءة
2العمق

تسع شاشات، صف عنوان واحد

الطريق يعود إلى الشاشة الأولى، وهذا ليس خطأ فيه

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

  1. 01الشاشة الأولى باليدكل جزء فيها مستطيل. تبدو سليمة وليست قابلة للتكرار.
  2. 02الشاشة الثانية باليد أيضايرسم صف العنوان مرة ثانية، وبفرق طفيف عن الأولى
  3. 03العودة إلى الشاشة الأولىمكون واحد بدل الصفين، ويقلب اتجاهه وهو واحد. هذه الساق هي التي تترك.
  4. 04الحالات على المكونالعادية والمرور والتركيز والمعطلة، صيغا لا تعليقا
  5. 05الشاشة الثالثة، ثم التاسعةلا تكلفان شيئا، ويتبدل شكل رقم الهاتف في موضع واحد

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

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

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

ما ينتقل من الواجهة اللاتينية بلا فاتورة

قائمة طويلة ومريحة وتؤخذ كما هي. أربع حالات لكل عنصر: العادية والمرور والتركيز والمعطلة، مرسومة بوصفها صيغا لا موصوفة في تعليق. وحلقة تركيز بسمك 2 بكسل وإزاحة 2 بكسل. وهدف اللمس 44 في 44، وأرضيته 24 في 24. والرمز يسمى بما يفعل لا بلونه، حتى تبدل السمة الداكنة معنى السطح المرتفع ولا تبدل شيئا غيره.

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

الشاشة تنقلب مرة، والنصوص لا تنقلب معها

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

والعنوان هو الحالة التي تفضح الملف كله، لأنه مختلط: «شارع الزرقطوني 45، الدار البيضاء» فيه عربي ورقم في وسطه. المصمم يرسمه فيبدو سليما، ثم يكتبه المستخدم فيقفز الرقم إلى موضع لا يقابل موضعه في البيانات، ولا يبدو للناظر أن الحقل هو المخطئ.

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

القص يترك خطا معلقا

القص في الواجهة اللاتينية يقطع كلمة فيخرج نصفها، وهو قبيح ومفهوم. وفي العربية يخرج شيئا آخر: حرف قطع في وسط الكلمة يظهر بشكله الأول ويترك خطا معلقا، لأن الحرف الموصول يأخذ شكله من جاره، فإذا ذهب الجار بقي الشكل ينتظره.

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

العرض يقاس على اللغتين لا على أطولهما

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

في تطبيق التوصيل بالدار البيضاء قاس مهدي ثلاثة أزرار في اللغتين. «تأكيد الطلب» جاء أطول من Confirm order بفرق واضح، و«حفظ» جاء أقصر من Save بقليل، و«إلغاء» و Cancel تعادلا تقريبا. فلا لغة منهما هي الأطول دائما، والزر الذي ثبت عرضه على العربية وحدها انكسر في نسخة السياح، والذي ثبت على الإنجليزية وحدها ترك فراغا داخله في نسخة الأصل.

صف عنوان واحد

أربع قطع، وأولاها مكتوبة بالكلمة الخطأ في أغلب الأطقم العربية

المكون ليس رسما حفظ في مكتبة. هو رسم ومعه ثلاثة أشياء تقرر ما يحدث حين يفتح الملف بلغة أخرى.

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

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

العلامة: ثلاث سلاسل تلصق في كل مكون

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

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

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

العطل: مكون يترجم ولا يعاد بناؤه

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

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

ما يفتح في 2026، وأين تقف الطبقة المجانية

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

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

الترتيب: ترسم الشاشة مرتين قبل أن تصير مكونا

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

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

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

بجانب هذه العقدة

فوق هذه العقدة