01-ийн 03
Хамгийн сүүлийн үеийн Atomic.io Update нь Scrollable Containers багтдаг
Хэдхэн сарын өмнө би atomic.io-г загварыг хэрхэн ашиглаж болохыг харуулсан . Энэ хэсэг дээр хийсэн голлох зүйлсийн нэг нь үйлчлүүлэгчийн эсвэл багийн төсөөлөлд чухал үүрэг гүйцэтгэхээсээ илүү "хөдөлгөөнийг харуулах" явдал байв. Үнэн хэрэгтээ, энэ нь маш чухал болсон бөгөөд UX / UI хэрэгслүүдийн бүхэл бүтэн шинэ төрлүүд гарч ирэв. Эдгээрт Apple-ийн гол анхаарлаа хандуулах , Adobe's Edge Animate, After Effects болон UXPin зэрэг багтдаг . Энэ блок дээрх шинэ хүүхэд нь би энэ талаар анх бичиж байхдаа нээлттэй бета хувилбар байсан Atomic.io юм.
Нээлттэй бооцооны талаархи цэвэрхэн зүйл бол програм хангамжийн үйлдвэрлэгчийн боломжийн багцын талаар хэрэглэгчийн санал хүсэлтийг цуглуулах, түүний дотор дутуу функцийг цуглуулж, дараа нь тэдгээрийг програмд нэмэх, тэдгээрийг арилжааны хувилбараас өмнө туршиж үзэх боломжийг олгодог. Атомын хувьд бол би үнэхээр алдсан нэг шинж чанар нь босоо эсвэл хэвтээ байдлаар гүйлгэх чадвар байв. Энэ нь карт, слайд гэх мэт зүйлс эсвэл програмын эсвэл интерфэйсийн интерфэйсийн хязгаар дотор хэрэглэгчийг шударлаад чирэх эсвэл бараг л зүйлүүдийг агуулж болно.
Энэ нь хэрэглэгчдээс асуусан зүйл их байсан тул загварыг гүйлгэх боломжтой савнууд энэ сард нэвтрүүлсэн бөгөөд би үүнийг хүлээн зөвшөөрөх ёстой бөгөөд загварт байгаа товчлуурт агуулгуудыг үүсгэх нь идэвхжүүлэхэд хялбар байсан юм.
Яаж ...
02 - 03
Атом дахь босоо гүйлгээний агуулгыг хэрхэн үүсгэх
Та эхний 30 өдрийн турш үнэгүй бүртгүүлэх шаардлагатай бөгөөд тухайн хугацааны эцэст та үнийг гурван үнийн төлөвлөгөөтэй танилцуулах болно.
Хамгийн эхний зүйл бол таны хийх ёстой бүх ажил нь хөтөч дээр байгаа бөгөөд апп нь Google Chrome-д нарийн чармайлт тавих болно. Нэвтрэх үедээ та төслийн хуудас руу очно. Аппыг нээх бол, Төслийн Шинэ товчлуур дээр дарна уу .
Интерфэйс гарч ирэхэд та хязгаарлагдмал тооны хэрэгсэл, хуудас, давхаргуудыг хуудас, artboard, баруун талд нь нэмэх чадвартай, контекст-мэдрэмтгий шинж чанарын самбар байдаг гэдгийг харах болно.
Энэ жишээнд би iPhone 5 preset бүхий 320 x 568.I дараа нь зургийг агуулах хавтсыг нээж, зураг дээр нь чирч гаргана. Тэдгээр нь автоматаар төсөл дээр нэмэгдэх бөгөөд та Layers tab-ийг дарвал эдгээр давхаргууд дээр байгаа эсэхийг харж болно. Дараа нь би Arrow tool (Selection) -ийг сонгосон, зургийг сонгож, тэдгээрийн хоорондох зайг нэмэхийн тулд шинэ байрлал руу чирч гаргав. Дараа нь би бүх зургийг сонгосон бөгөөд багажны товчлуурын товчлуур дээр дарна . Энэ нь зурагнуудаас зайлсхийж байсан.
Дараагийн алхам бол гүйлгэх бүх агуулгуудыг сонгох ба Container товчийг дарах эсвэл Group Scroll Container-ыг сонгоно . Контейнер үүссэний дараа та үүнийг Давхаргын самбарт харна. Дараа нь савыг дараад доод талын бариулыг зургийн доод талд нь чирнэ . Properties panel-ийн доод талд Урьдчилан харах товчин дээр дараад хөтөчийн цонх нээнэ. Контентыг гүйлгэхийн тулд хулганы гүйлгэх дугуйг ашигла. Төсөлдөө буцахын тулд хөтчийн цонхны баруун доод талд Edit товчийг дарна уу .
03 - 03
Ачаалал бүхий Хэвтээ Шугаман Агуулгыг хэрхэн үүсгэх
Хэвтээ галт тэрэг нь хийхэд хялбархан.
Энэ тохиолдолд зураг дээр хэд хэдэн зургийг чирч, бие биенээсээ салгалаа. Сонгогдсон зургуудаас би дараа нь бүгдээрээ хоорондоо уялдсан байхын тулд Дээд Түвдийн товчлуур дээр дарна.
Дараа нь би Shift товчийг доошоо барьж, давхарга бүрийг Layers самбарт сонгосон. Сонгосон зургуудыг ашиглан би Container товчлуурыг дарж , Properties функцууд дээр Behavioral Behavior хэсэгт сонгогдсон .
Би дараа нь Провацийн товчлуур дээр дарж Хөтчийн цонхонд төслийг туршсан.
Хэдийгээр та босоо болон хэвтээ гүйлгээний хувилбаруудыг хэрхэн бүтээхийг үзүүлсэн хэдий ч та агуулагдаж байгаа контентийг саванд хийж байхдаа эдгээр савыг тусад нь авч болно. Жишээлбэл, веб хуудсууд нь нэг цэсэнд слайд-шоунд хэвтээ гүйлгэх агуулгыг босоо гүйлгэх агуулгатай байж болно. Үнэн хэрэгтээ чингэлэг нь аравтын бутархай зургуудтай зурагчны зурагчин гэх мэт зүйлсийн хувьд босоо болон хэвтээ гүйлгэх боломжтой.
Үүнийг atomic.io-ийн талаар дэлгэрэнгүй мэдэхийг хүсвэл:
- Блог зарлал
- Шилэн савны заавар
- Савыг ашиглан далдлах
- Алдааг олж засварлах Шалгах савнууд