يبدأ تصميم البريد للهاتف بترتيب القراءة: ينبغي للعميل فهم العرض والشرط المهم والإجراء التالي من دون تكبير الشاشة. وقد يتحول جدول منتجات Shopify الذي يبدو واسعًا على الكمبيوتر إلى صور صغيرة متراصة على الهاتف. ابدأ بالمساحة الضيقة، ثم اختبر ما يحدث عندما يطول النص أو لا تظهر الصور أو تتراص الأعمدة.
أنشئ ترتيبًا واضحًا للقراءة
استخدم بنية بسيطة بعمود واحد للرسالة الرئيسية. رتّب الوعد والشرح الداعم والإجراء الأساسي بحيث يبقى التسلسل مفهومًا عند غياب الصور. وينبغي لكتل المنتجات الإضافية أن تدعم الإجراء لا أن تنافسه.
أبقِ النص المهم نصًا حيًا يمكن قراءته. فلا ينبغي للقارئ تكبير صورة ترويجية لاكتشاف العرض أو شروطه. اختر خطًا آمنًا للبريد الإلكتروني وحجمًا مريحًا للنص، ويمكن البدء بنحو 16 بكسل ثم اختبار العرض الفعلي. وقد تحتاج الترجمة الطويلة إلى مساحة رأسية إضافية لا إلى حروف أصغر.
صمّم الشاشة الأولى حول قرار واحد
ارسم النسخة الضيقة قبل ترتيب شبكة الكمبيوتر. قد يكون ترتيب القراءة عند إطلاق منتج: اسم المنتج، وجملة تشرح استخدامه، وصورة مساندة، وسياق السعر، ثم زر. ينبغي أن يفهم القارئ العرض حتى لو لم يظهر سوى الجزء الأول. ولا تدع اللافتة الزخرفية الكبيرة تدفع كل التفاصيل المفيدة إلى أسفل عدة شاشات من التمرير.
ابدأ بحجم نص يقارب 16 بكسل ومسافات أسطر مريحة، ثم افحص الرسالة المرسلة. هذه نقاط بداية للتصميم وليست قاعدة توحّد حجم كل عنوان ووسم. اجعل الفرق بين النص الأساسي والعناوين واضحًا، واترك مساحة مريحة حول الإجراء الرئيسي. غالبًا ما يكون تصغير القالب كله حلًا خاطئًا للتكدس.
في بطاقتي منتجين، أبقِ الصورة والاسم والسعر والرابط ضمن مكوّن واحد. وعندما تتراص البطاقات، ينبغي أن يرى العميل منتجًا كاملًا قبل بدء التالي. تجنب ترتيبًا يضع كل الصور أولًا ثم كل الأوصاف؛ فهذا يجبر القارئ على تخمين التفاصيل التابعة لكل صورة.
اسمح للمكوّنات بالتمدد مع محتواها
تجنب مساحات النص ذات الارتفاع الثابت وفواصل الأسطر الموضوعة فقط لموازنة عنوان واحد على الكمبيوتر. اترك حشوًا كافيًا للزر كي يتسع عنوانه إذا طال، واجعل مساحة النقر كلها مريحة للمس. واترك فراغًا بين الروابط القريبة كيلا يختار الإصبع الوجهة الخطأ.
استخدم نصًا بديلًا وصفيًا للصور ذات المعلومات، ولا تدع الصور الزخرفية تضيف ضجيجًا غير ضروري. افحص تباين النص مع الخلفية الفعلية، بما في ذلك تغييرات الوضع الداكن. فقد يصعب قراءة وسم باهت يبدو أنيقًا على شاشتك عند استخدام الهاتف في الخارج.
استخدم مصفوفة معاينة تكشف ضعف المكونات
تشمل المصفوفة المفيدة عرضًا بعرض هاتف ضيق وآخر أوسع، وحالة تعذر تحميل الصور، والوضع الداكن عند دعمه، وبيانات عملاء واقعية. وفي الترجمات، اختبر أطول نسخة بدل الاكتفاء بأقصرها. انظر إلى الرسالة كاملة ثم افحص المواضع الأكثر عرضة للمشكلات: أسماء المنتجات والأسعار والأزرار وروابط التذييل.
- إذا التف عنوان الزر إلى سطر جديد، اسمح بزيادة ارتفاعه وافحص الحشو؛ ولا تقطع كلمة الإجراء.
- إذا لامس اسم المنتج الكتلة التالية، فأزل الارتفاع الثابت واترك النص يلتف على أسطر.
- إذا اختفت معلومة مهمة عند غياب الصور، فانقلها إلى نص حي واجعل الصورة عنصرًا مساعدًا.
- إذا صعب النقر على الروابط المتقاربة كلٌّ على حدة، فزد المسافة بينها أو قلّل عدد الإجراءات المتنافسة.
اختبر حالات التعطل عمدًا
في Sendvio، اعرض معاينة القالب ببيانات عملاء فعلية وبعرض ضيق. جرّب اسمًا طويلًا وحقل تخصيص مفقودًا وسعرًا أطول وعنوان منتج غير معتاد في طوله. ثم أرسل اختبارات إلى تطبيقات البريد التي يستخدمها عملاؤك عادة.
في عرض يضم منتجين، افحص ترتيب العناصر بعد تراصها: صورة المنتج ثم اسمه وسعره وإجراءه، مع بقاء العناصر مترابطة. إذا انفصلت، فبسّط الكتلة. ليس الهدف استنساخ ترتيب الكمبيوتر بأي ثمن، بل الحفاظ على المعنى وتوضيح الإجراء التالي من دون تكبير أو تخمين أو تمرير أفقي.
افحص تباين النص مع الخلفية الفعلية. للنص العادي، تعد نسبة 4.5:1 حدًا إرشاديًا مفيدًا لإمكانية الوصول، ويمكن أن يكون الحد الأدنى 3:1 للنص الكبير بما يكفي. لا تغني هذه القيم عن مراجعة شاملة لإمكانية الوصول، لكنها تجعل قرارات الألوان أقل اعتمادًا على الذوق. واختبر الوسوم الرمادية الصغيرة مثل العنوان الرئيسي.
احفظ المكوّن الذي أصلحته ضمن القالب القابل لإعادة الاستخدام، ثم أعد اختباره بعد التغييرات الكبيرة. فالقالب الجيد للهاتف لا يكتفي بمنع التمرير الأفقي؛ بل يحافظ على ترتيب القراءة وفهم العرض ووضوح الإجراء وسهولة استخدامه عبر بيئات البريد التي تدعمها فعلًا.