01 من 03
يتضمن أحدث تحديث Atomic.io حاويات قابلة للتمرير
قبل بضعة أشهر ، أظهرت كيف يمكن استخدام atomic.io لنموذج الحركة . إحدى النقاط الرئيسية التي أدليت بها في هذه المقالة هي "عرض الحركة" بدلاً من تركها لخيال العميل أو فريق العمل أمر مهم. في الواقع ، لقد أصبح هذا أمرًا بالغ الأهمية بحيث تظهر فئة جديدة تمامًا من أدوات UX / UI في المشهد. وهي تشمل - Apple Keynote و Adobe's Edge Animate و After Effects و UXPin على سبيل المثال لا الحصر. الطفل الجديد على الكتلة هو Atomic.io الذي كان في مرحلة تجريبية مفتوحة عندما كتبت لأول مرة عن المنتج.
والشيء الأنيق حول Betas المفتوحة هو أنها تمنح الشركة المصنعة للبرنامج الفرصة لجمع تعليقات المستخدمين على مجموعة الميزات ، بما في ذلك الميزات المفقودة ، ثم إضافتها إلى التطبيق واختبارها قبل الإصدار التجاري. في حالة الذرات ، هناك ميزة واحدة أفتقدها حقًا وهي القدرة على تمرير المحتوى رأسيًا أو أفقيًا. يمكن أن يتضمن ذلك أشياء مثل البطاقات أو عروض الشرائح أو أي شيء من شأنه أن يقوم المستخدم بالتمرير أو السحب ضمن حدود واجهة التطبيق أو الموقع.
هذا يجب أن يكون موضوع الكثير من المستخدمين طلبوا ذلك لأن الحاويات القابلة للتمرير قد تم تقديمها فقط إلى التطبيق هذا الشهر ، ويجب أن أعترف بأن إنشاء محتوى قابل للتمرير في النموذج الأولي هو أمر بسيط للتمكين.
إليك الطريقة…
02 من 03
كيف تصنع عمودي التمرير المحتوى في الذريه
ستحتاج أولاً إلى الاشتراك للحصول على إصدار تجريبي مجاني لمدة 30 يومًا ، وفي نهاية هذه الفترة ، سيتم تقديمك مع ثلاث خطط تسعير.
أول شيء تحتاج إلى معرفته هو أن كل العمل الذي ستقوم به هو في المتصفح ويهدف التطبيق بدقة إلى Google Chrome. بمجرد تسجيل الدخول ، سيتم نقلك إلى صفحة المشاريع . لفتح التطبيق ، انقر فوق الزر New Project .
عندما تظهر الواجهة سترى أن هناك عددًا محدودًا من الأدوات ، والقدرة على إضافة صفحات وطبقات إلى الصفحات ، واللوح الفني ، وعلى الجانب الأيمن ، لوحة خصائص حساسة للسياق.
في هذا المثال ، بدأت باستخدام إعداد مسبق لجهاز iPhone 5 وهو 320 × 568.أفتح المجلد الذي يحتوي على الصور المراد تمريرها وسحبها إلى اللوحة القماشية. تمت إضافتها تلقائيًا إلى المشروع ويمكنك أن ترى أنها على طبقات فردية إذا قمت بالنقر فوق علامة التبويب الطبقات . بعد ذلك حددت أداة السهم (Selection) ، وحددت صورة وسحبتها إلى موضع جديد لإضافة مسافة ما بينها. بعد ذلك ، حددت جميع الصور ، ثم نقرت على الزر "توزيع رأسيًا" على شريط الأدوات. هذا متباعدة بشكل متساو في الصور.
الخطوة التالية هي تحديد كل المحتوى المراد تمريره والنقر فوق الزر Container أو تحديد Create Scroll Container من الزر Group . بمجرد إنشاء الحاوية ، سترى ذلك في لوحة الطبقات - انقر فوق الحاوية واسحب المقبض السفلي إلى أعلى اللوحة السفلية . انقر على زر معاينة في الجزء السفلي من لوحة الخصائص وسيؤدي هذا إلى تشغيل نافذة المتصفح. استخدم عجلة التمرير الخاصة بالماوس للتمرير إلى المحتوى. للرجوع إلى مشروعك ، انقر على الزر "تعديل" في الجزء السفلي الأيسر من نافذة المتصفح.
03 من 03
كيف تصنع أفقي التمرير المحتوى في الذريه
التمرير الأفقي هو بنفس السهولة في التنفيذ.
في هذه الحالة ، سحب سلسلة من الصور على قماش وأثارتهم ضد بعضهم البعض. عند تحديد الصور ، انقر فوق الزر Top Align لضمان توافقها مع بعضها البعض.
ثم أمسك مفتاح Shift وحدد كل طبقة في لوحة Layers. مع تحديد الصور ، قمت بالنقر فوق الزر حاوية وفي لوحة الخصائص ، حدد أفقياً في منطقة السلوكيات.
ثم اختبرت المشروع في نافذة متصفح بالنقر على زر معاينة.
على الرغم من أنني قد أظهرت كيفية إنشاء إصدارات فردية من التمرير الرأسي والأفقي ، طالما أنك وضعت المحتوى القابل للتمرير في حاوية ، يمكنك الحصول على هذه الحاويات في مناطق منفصلة من الشاشة. على سبيل المثال ، يمكن أن تحتوي صفحة الويب على محتوى يتم تمريره رأسيًا في قائمة جانبية وتمرير المحتوى أفقيًا في عرض شرائح في نفس الصفحة. في الواقع ، يمكن أن تحتوي الحاوية على التمرير الرأسي والأفقي للعناصر ، مثل منتقي الصور الذي يحتوي على 12 صورة مصغرة أو أكثر.
لمعرفة المزيد حول هذه الميزة في atomic.io تحقق من:
- إعلان المدونة
- التمرير حاوية تعليمية
- اخفاء باستخدام الحاويات
- استكشاف أخطاء حاويات التمرير