آخرین به روز رسانی Atomic.io شامل کانتینرهای رونده است

01 از 03

آخرین به روز رسانی Atomic.io شامل کانتینرهای رونده است

Atomic.io

چند ماه پیش من نشان دادم که چگونه atomic.io می تواند به حرکت نمونه اولیه مورد استفاده قرار گیرد . یکی از نکات کلیدی که در این قطعه ساخته شد، "نمایش دادن حرکت" بود، نه اینکه آن را به تصورات مشتری یا تیم مهم دانست. در واقع، این موضوع بسیار حیاتی بوده است که یک دسته کلی از ابزار UX / UI در صحنه ظاهر می شود. آنها عبارتند از - Keynote اپل، Edge Animating ادوبی، After Effects و UXPin ، برای نام چند. بچه جدید در بلوک Atomic.io است که در بتا باز زمانی که من برای اولین بار در مورد محصول نوشت.

چیزی شسته و رفته در مورد بتای باز این است که آنها تولیدکنندگان نرم افزار را برای جمع آوری بازخورد کاربر در مجموعه ویژگی، از جمله ویژگی های از دست رفته، و سپس آنها را به برنامه اضافه و آنها را قبل از آزادی تجاری تست شده است. در مورد اتمی، یکی از ویژگی های من واقعا از دست رفته بود، توانایی حرکت مطالب به صورت عمودی یا افقی بود. این می تواند شامل مواردی مانند کارت، نمایش اسلاید یا تقریبا هر چیزی باشد که کاربر کشیدن یا کشیدن در محدوده رابط برنامه یا سایت را انجام دهد.

این باید موضوع بسیاری از کاربران خواست که برای ظروف رونده فقط به برنامه در این ماه معرفی شد، و من باید اعتراف، ایجاد محتوای رونده در نمونه اولیه ساده برای فعال کردن مرده است.

در اینجا چگونگی ...

02 از 03

چگونه برای ایجاد محتوای پیمایش عمودی در اتمی

Atomic.io

ابتدا باید برای یک آزمایشی 30 روزه ثبت نام کنید و در پایان آن دوره سه برنامه قیمت گذاری ارائه خواهد شد.

اولین چیزی که باید بدانید تمام کاری است که شما انجام می دهید در مرورگر است و برنامه به شدت در Google Chrome هدف قرار می گیرد. هنگامی که وارد سیستم شوید، به صفحه پروژه ها منتقل خواهید شد. برای باز کردن برنامه، روی دکمه New Project کلیک کنید .

هنگامی که رابط کاربری ظاهر می شود، خواهید دید تعداد محدودی از ابزارها وجود دارد، توانایی اضافه کردن صفحات و لایه ها به صفحات، منو و در سمت راست پانل ویژگی های حساس به متن.
در این مثال، من با یک پیش فرض آیفون 5 که 320 × 568 است شروع کردم. سپس پوشه ای را که حاوی تصاویری است که می شود بر روی آنها بکشید و آنها را بر روی بوم بکشید، باز کنید. آنها به طور خودکار به پروژه اضافه شدند و اگر بر روی برگه لایه ها کلیک کنید می توانید ببینید که آنها در لایه های فردی هستند. سپس ابزار Arrow (Selection) را انتخاب کردم، یک تصویر را انتخاب کرد و آن را به موقعیت جدید کشید تا فاصله ای بین آنها اضافه شود. سپس تمام تصاویر را انتخاب کردم و دکمه توزیع عمودی در نوار ابزار را کلیک کردم. این تصویر ها را به طور مساوی تقسیم کرد.

گام بعدی این است که همه محتویات را که انتخاب می کنید را انتخاب کنید و یا دکمه کانتینر را کلیک کنید یا دکمه Create Scroll Container را از دکمه Group پایین بکشید . هنگامی که ظرف ایجاد شده است - شما آن را در پانل لایه ها مشاهده خواهید کرد - روی ظرف کلیک کنید و دسته پایین را به بالا به پایین بوم بکشید . روی دکمه Preview در پایین پانل Properties کلیک کنید و این یک پنجره مرورگر را راه اندازی می کند. برای مرور محتوا از چرخ اسکرول ماوس خود استفاده کنید. برای بازگشت به پروژه خود، روی دکمه ویرایش در پایین سمت راست پنجره مرورگر کلیک کنید.

03 از 03

چگونه برای ایجاد محتوای پیمایش افقی در اتمی

Atomic.io

پیمایش افقی به همان اندازه آسان است.

در این مورد، مجموعه ای از تصاویر را روی بوم بکشید و آنها را در برابر یکدیگر قرار دهید. با انتخاب تصاویر، سپس بر روی دکمه Align بالا کلیک می کنم تا اطمینان حاصل شود که همه با یکدیگر هماهنگ شده اند.

سپس کلید Shift را نگه داشتم و هر لایه را در پانل لایه ها انتخاب کردم. با انتخاب تصاویر، دکمه کانتینر را کلیک کردم و در پانل Properties، به صورت افقی در منطقه رفتارها انتخاب شد.

سپس با کلیک روی دکمه Preview، پروژه را در یک پنجره مرورگر تست کردم.

اگر چه من نشان داده است که چگونه می توان نسخه های منحصر به فردی از پیمایش عمودی و افقی را ایجاد کرد، تا زمانی که محتوا پیمایش را در یک کانتینر قرار دهید، می توانید این ظروف را در قسمت های مختلف صفحه نمایش داشته باشید. به عنوان مثال، یک صفحه وب می تواند محتوای پیمایش عمودی در یک منوی سمت چپ و محتوای پیمایش افقی را در یک نمایش اسلاید در همان صفحه داشته باشد. در حقیقت، یک کانتینر می تواند پیمایش عمودی و افقی را برای مواردی مانند جمع کننده تصویر داشته باشد که دارای ده ها یا خیلی کوچک است.

برای کسب اطلاعات بیشتر در مورد این ویژگی در atomic.io check out: