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