يتضمن جعل المحتوى الخاص بك قابلاً للتمرير في Figma التنقل في علامة التبويب الجانبية. ولسوء الحظ، لا يظهر تلقائيًا على واجهة المستخدم الرئيسية. يعد المحتوى القابل للتمرير مفيدًا عندما تريد تقديم الكثير من المعلومات داخل إطار التصميم الخاص بك. تتضمن بعض الأمثلة الصفحات المقصودة أو واجهات التطبيقات أو النوافذ المنبثقة.
تشرح هذه المقالة كيفية جعل تصميمات Figma الخاصة بك قابلة للتمرير.
تركيب نص قابل للتمرير داخل الشكل
لنبدأ بإنشاء نص قابل للتمرير ضمن شكل بسيط. هذا هو المثال الأكثر شيوعًا للنص القابل للتمرير، ويمكنك إضافة خصائص أخرى مثل اللون والخطوط والمخططات التفصيلية بعد ذلك.
وإليك كيف يتم ذلك:
- إنشاء الشكل الأساسي. في هذا المثال، نوصي بعمل مستطيل عمودي. يمكنك القيام بذلك عن طريق تحديد أداة المستطيل على الشريط الجانبي الأيسر أو باستخدام الأمر 'R'. استمر في الضغط على اليسار، وانقر على نقطة القماش، وارسم الشكل.
- على الشريط الجانبي الأيمن، ضمن علامة تبويب التصميم، ضع علامة اختيار بجوار خيار 'محتوى المقطع'.
- حدد أداة النص لإنشاء مربع نص ووضعه داخل الإطار القابل للتمرير. اكتب أو انسخ وألصق أي محتوى تستخدمه.
- حدد الإطار وانتقل إلى علامة تبويب النموذج الأولي على الجانب الأيمن من الواجهة. ثم حدد خيار 'التمرير الفائض' والنمط الذي تفضله. سنختار هنا 'التمرير العمودي'.
بمجرد النقر فوق خيار التمرير الفائض في علامة تبويب النموذج الأولي، توجد أنماط متعددة. نختار الشكل الرأسي لأننا نستخدم مستطيلًا رأسيًا كمثال. يتيح لك ذلك قراءة النص من الأعلى إلى الأسفل. بعض الأنماط الأخرى تشمل:
- التمرير الأفقي - يمكن للمستخدمين تمرير النص من اليسار إلى اليمين في بعض الأمثلة. يُفضل هذا الخيار إذا كنت تقوم بإنشاء تصميمات بتنسيق المناظر الطبيعية.
- عدم التمرير – إذا كنت تريد قفل المحتوى الخاص بك في مكانه، فاختر خيار عدم التمرير.
- كلا الاتجاهين - قم بإنشاء تصميم يحتوي على الكثير من المحتوى وقم بالتمرير عموديًا وأفقيًا.
يجب عليك استخدام ميزات قابلة للتمرير داخل تصميمك لتقليل الجهد (النقرات) الذي يستخدمه القارئ أثناء التفاعل مع المحتوى. يمكنهم التمرير أو استخدام عجلة الماوس بدلاً من النقر أو النقر على الكثير من النصوص.
كيفية مسح ذاكرة التخزين المؤقت على kodi firestick
كيفية تصميم مكوناتك القابلة للتمرير
اعتمادًا على منتجك، ستحتاج إلى تصميم إطار المحتوى الخاص بك والمحتوى نفسه. تتضمن العملية إضافة الألوان والخطوط والمكونات الأخرى المحتملة إلى التصميم العام. يعد تغيير هذه العناصر أمرًا سهلاً، لكن اختيار المظهر الجمالي المناسب يتطلب دراسة متأنية.
كيفية تغيير خط التصميم القابل للتمرير الخاص بك
أول شيء عليك القيام به هو تغيير الخط في تصميمك القابل للتمرير. تقدم Figma مجموعة واسعة من الأنماط لتختار من بينها. إليك أبسط طريقة:
- حدد المحتوى الموجود في الإطار القابل للتمرير الذي تريد تغييره.
- انتقل إلى القائمة المنسدلة الموجودة في أعلى اليسار وحدِّدها.
- قم بالتمرير عبر الخطوط حتى تجد الخط الذي تريد استخدامه.
إذا كانت العلامة التجارية التي تصمم لها تحتوي على طباعة معينة، فمن المحتمل أن تختار نفس العلامة التجارية بحيث تكون متسقة مع صورة العلامة التجارية. إذا كان لديك مساحة أكبر للمناورة، فيجب عليك تجربة أمثلة مختلفة قبل اختيار المثال المناسب.
بعض الاعتبارات تشمل:
- نية التصميم – يجب أن يتوافق اختيار الطباعة مع نية التصميم الخاص بك. إذا كنت تريد نقل الكثير من المعلومات بوضوح، فاستهدف استخدام خطوط أقل زخرفة ولكن أنيقة.
- مكونات أخرى – الخط الخاص بك هو عنصر مرئي مثل أي عنصر آخر في التصميم الخاص بك. يجب أن يتطابق مع الإطار والمكونات الأخرى التي تقوم بتضمينها.
- الجمالية العامة والعلامة التجارية – يجب أن يؤثر المظهر العام للعلامة التجارية أيضًا على الخط الذي اخترته. على سبيل المثال، لن تتميز خدمة توصيل الزهور بنفس الخط الموجود في الصفحة المقصودة لـ SAAS.
في حين أن اختيار الخط الصحيح قد يتطلب بعض التجارب، فإن بعض أمثلة الخطوط الملموسة هي الخيارات الأكثر موثوقية:
- Roboto – إذا كنت تريد اللعب بطريقة آمنة، فاستخدم Roboto. يعتبر خطًا متعدد الاستخدامات ومحايدًا وله العديد من التطبيقات. نظرًا لأنه من السهل جدًا فهمه، يختار الكثيرون Roboto للحصول على التعليمات والصفحات المقصودة.
- بوبينز - للحصول على مظهر ودود وحديث ونظيف، اختر بوبينز. هذا الخط أكثر تقريبًا ويجعل النص جذابًا وسهل القراءة.
- Raleway – عند التصميم لعلامة تجارية فاخرة ومتطورة، قد ترغب في التفكير في Raleway. إنه نحيف بشكل عام ولكن له اختلافات مختلفة في الوزن ومظهر أنيق بشكل عام.
- Lato - الكلمات الودية والموثوقة والجادة هي الكلمات الصحيحة لوصف هذا الخط. يمكن للمصممين استخدام Lato للعناوين ونصوص الفقرات حيث تعد سهولة القراءة والوضوح من الاهتمامات الرئيسية.
ستحتاج أيضًا إلى مراعاة حجم الخط ونمط النص الذي اخترته. بشكل عام، يتم استخدام الخط الغامق للعناوين الرئيسية أو للمقاطع المميزة، بينما يتم استخدام الخط المائل لعلامات الاقتباس.
تغيير لون شكل الإطار
إلى جانب تغيير الخط، ستحتاج أيضًا إلى تغيير لون شكل الإطار. مرة أخرى، يعتمد اللون الدقيق على العلامة التجارية التي تصمم لها أو على جمالياتك. ولحسن الحظ، فإن واجهة Figma تجعل اختيار اللون أمرًا سهلاً.
إليك كيفية تغيير ألوان الإطار الخاص بك:
- حدد الإطار الذي ترغب في تحريره.
- ستظهر الطبقة على الشريط الجانبي الأيمن. انتقل إلى قسم 'الملء'.
- حدد '+' لإضافة تعبئة.
- سيتم فتح نافذة منتقي الألوان. حدد لون التعبئة والتدرج. يمكنك أيضًا كتابة رمز سداسي عشري إذا كنت تعرف اللون الدقيق.
كما هو الحال مع عناصر التصميم الأخرى، قد تحتاج إلى تجربة ألوان مختلفة وكيفية ظهورها مع الخط الذي اخترته.
الأسئلة الشائعة
هل يوجد أمر نصي قابل للتمرير في Figma؟
لسوء الحظ، لا يوجد أمر لجعل النص قابلاً للتمرير داخل Figma. ومع ذلك، يمكنك إكمال العملية ببضع نقرات فقط باستخدام الطريقة المذكورة أعلاه.
كيف أحدد خيار التجاوز الذي أريده؟
يعتمد ذلك على نوع النص الذي تستخدمه، والتصميم العام، ووظيفته. عادةً ما يكون النمط العمودي مفيدًا لتصفح النصوص الكبيرة.
ما هي واجهة الجهاز التي ستحتاج عادةً إلى تصميم نص قابل للتمرير؟
وخير مثال على ذلك هو تصميم نماذج بالحجم الطبيعي لأحد التطبيقات. يمكن للمستخدمين إنشاء هاتف كإطار عام، بينما يمكن أن يكون النص القابل للتمرير هو واجهة التطبيق.
هل Figma هو الخيار الأفضل لعمل تصميمات قابلة للتمرير؟
تعد Figma واحدة من أفضل الأدوات لإنشاء مجموعة واسعة من النماذج، بما في ذلك التصميمات القابلة للتمرير. والأفضل من ذلك أن Figma مجاني. ومع ذلك، قد يكون لديك بعض التفضيلات الشخصية. حاول تجربة بعض المنصات، مثل Adobe Illustrator، حتى تجد الأداة الأنسب لك.
اجعل تصميماتك قابلة للتمرير وسهلة الاستخدام
يعد إنشاء أي نص داخل إطار في Figma أمرًا سهلاً. ما عليك سوى تحديد الإطار ثم الانتقال إلى خيار محتوى المقطع. بمجرد الانتهاء، يمكنك اختيار خيارات التمرير الفائض الخاصة بك. وبالمثل، يجب ألا تهمل عناصر التصميم المهمة الأخرى، مثل لون الإطار وشكله وخط النص. يعد جعل تصميمك قابلاً للتمرير خيارًا ممتازًا للصفحات المقصودة وواجهات التطبيقات والنوافذ المنبثقة. فهو يجعل تصفح النصوص أسهل بدلاً من النقر عليها، مما يؤدي في النهاية إلى تحسين تجربة المستخدم.
هل وجدت أنه من السهل جعل المحتوى الخاص بك قابلاً للتمرير في Figma؟ ماذا عن اختيار الخط المناسب؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه.
