01 จาก 03
การอัปเดต Atomic.io ล่าสุดประกอบด้วยคอนเทนเนอร์แบบเลื่อนได้
เมื่อไม่กี่เดือนที่ผ่านมา ผมได้แสดงให้เห็นว่า atomic.io สามารถใช้ในการเคลื่อนที่ของต้นแบบ ได้อย่างไร หนึ่งในจุดสำคัญที่ฉันทำในชิ้นส่วนคือ "แสดงการเคลื่อนไหว" แทนที่จะปล่อยให้จินตนาการของลูกค้าหรือทีมเป็นสิ่งที่สำคัญ ในความเป็นจริงสิ่งนี้กลายเป็นสิ่งสำคัญมากที่จะมีการเปิดตัว UX / UI เครื่องมือใหม่ทั้งหมดในฉาก ประกอบด้วย: Apple Keynote, Edge Animate, After Effects และ UXPin ของ Adobe เด็กคนใหม่ในบล็อกคือ Atomic.io ซึ่งเป็นรุ่นเบต้าเปิดเมื่อแรกที่ฉันเขียนเกี่ยวกับผลิตภัณฑ์
สิ่งที่เป็นระเบียบเกี่ยวกับ betas แบบเปิดคือทำให้ผู้ผลิตซอฟต์แวร์สามารถรวบรวมความคิดเห็นของผู้ใช้เกี่ยวกับชุดคุณลักษณะรวมถึงคุณลักษณะที่ขาดหายไปจากนั้นเพิ่มลงในแอปพลิเคชันและทดสอบให้ได้ก่อนที่จะวางจำหน่ายในเชิงพาณิชย์ ในกรณีของอะตอมคุณลักษณะที่ฉันพลาดจริงๆคือความสามารถในการเลื่อนเนื้อหาในแนวตั้งหรือแนวนอน ซึ่งอาจรวมถึงสิ่งต่างๆเช่นการ์ดสไลด์โชว์หรืออะไรก็ตามที่ผู้ใช้สามารถกวาดหรือลากภายในส่วนติดต่อของแอปพลิเคชันหรือไซต์
นี้ต้องได้รับเรื่องผู้ใช้จำนวนมากถามเพราะภาชนะเลื่อนได้เพิ่งแนะนำให้ app ในเดือนนี้และฉันต้องยอมรับการสร้างเนื้อหาเลื่อนในต้นแบบตายง่ายเพื่อให้
นี่เป็นวิธีการ ...
02 จาก 03
วิธีการสร้างเนื้อหาการเลื่อนแนวตั้งใน Atomic
คุณจะต้องลงชื่อสมัครทดลองใช้ฟรี 30 วันก่อนและเมื่อสิ้นสุดระยะเวลาดังกล่าวคุณจะได้รับแผนการกำหนดราคาสามแบบ
สิ่งแรกที่คุณต้องรู้คืองานทั้งหมดที่คุณจะทำคือในเบราว์เซอร์และแอปมีจุดมุ่งหมายอย่างเคร่งครัดที่ Google Chrome เมื่อเข้าสู่ระบบคุณจะเข้าสู่หน้า โครงการ หากต้องการเปิดแอปให้คลิก ปุ่มโครงการใหม่
เมื่ออินเทอร์เฟซปรากฏขึ้นคุณจะเห็นมีเครื่องมือจำนวน จำกัด ความสามารถในการเพิ่มหน้าและเลเยอร์ลงในหน้าเว็บอาร์ตบอร์ดและทางด้านขวาแผงคุณสมบัติคุณสมบัติตามบริบท
ในตัวอย่างนี้ฉันเริ่มต้นด้วย iPhone 5 ที่ตั้งไว้ล่วงหน้า 320 x 568. จากนั้นให้เปิดโฟลเดอร์ที่มีภาพที่จะเลื่อนและลากลงบนผืนผ้าใบ พวกเขาถูกเพิ่มลงในโครงการโดยอัตโนมัติและคุณสามารถเห็นได้ว่าอยู่ในแต่ละเลเยอร์ถ้าคุณ คลิกแท็บเลเยอร์ จากนั้นผมเลือกเครื่องมือลูกศร (เลือก) เลือกภาพและลากไปยังตำแหน่งใหม่เพื่อเพิ่มช่องว่างระหว่างพวกเขา จากนั้นผมก็เลือกภาพทั้งหมดและ คลิกปุ่มกระจายในแนวตั้ง บนแถบเครื่องมือ นี้เว้นระยะห่างภาพ
ขั้นตอนต่อไปคือการเลือกเนื้อหาทั้งหมดที่จะเลื่อนไปมาและ คลิกที่ปุ่มคอนเทนเนอร์หรือเลือกสร้างที่เก็บเลื่อนจากปุ่มกลุ่มปุ่ม ป็อปอัพ เมื่อคอนเทนเนอร์ถูกสร้างขึ้นแล้วคุณจะเห็นในแผงเลเยอร์ - คลิกที่คอนเทนเนอร์แล้วลากที่จับด้านล่างขึ้นไปที่ด้านล่างของผืนผ้าใบ คลิกปุ่มดูตัวอย่าง ที่ด้านล่างของแผงคุณสมบัติและจะเปิดหน้าต่างเบราเซอร์ ใช้ล้อเลื่อนของเมาส์เพื่อเลื่อนดูเนื้อหา หากต้องการกลับไปที่โครงการของคุณให้ คลิกปุ่มแก้ไข ที่ด้านล่างขวาของหน้าต่างเบราเซอร์
03 จาก 03
วิธีการสร้างเนื้อหาการเลื่อนแนวนอนใน Atomic
การเลื่อนแนวนอนทำได้ง่ายดายเพียงเท่านี้
ในกรณีนี้ให้ลากภาพชุดต่างๆลงบนผืนผ้าใบและลากภาพเหล่านี้เข้าหากัน เมื่อเลือกภาพแล้วฉันจะคลิกที่ปุ่มจัดตำแหน่งด้านบนเพื่อให้แน่ใจว่าทั้งหมดสอดคล้องกัน
ฉันกดแป้น Shift ค้างไว้และเลือกแต่ละเลเยอร์ในแผงเลเยอร์ เมื่อเลือกรูปภาพแล้วฉัน คลิกปุ่มคอนเทนเนอร์ และ ในแผงคุณสมบัติจะถูกเลือกตามแนวนอน ในพื้นที่พฤติกรรม
จากนั้นฉันได้ทดสอบโครงการในหน้าต่างเบราเซอร์ด้วยการคลิกปุ่มแสดงตัวอย่าง
แม้ว่าฉันได้แสดงวิธีการสร้างการเลื่อนแนวตั้งและแนวนอนแต่ละแบบตราบเท่าที่คุณวางเนื้อหาที่เลื่อนลงในคอนเทนเนอร์ได้คุณสามารถวางภาชนะเหล่านี้ไว้ในส่วนต่างๆของหน้าจอได้ ตัวอย่างเช่นหน้าเว็บอาจมีเนื้อหาเลื่อนแบบแนวตั้งในเมนูด้านข้างและเลื่อนเนื้อหาในแนวนอนในการนำเสนอภาพนิ่งในหน้าเดียวกัน ในความเป็นจริงคอนเทนเนอร์สามารถมีทั้งเลื่อนแนวตั้งและแนวนอนสำหรับรายการต่างๆเช่นตัวเก็บภาพที่มีขนาดเล็กหรือมากกว่าหนึ่งโหล
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับคุณลักษณะนี้ในการตรวจสอบ atomic.io:
- การประกาศของบล็อก
- กวดวิชาคอนเทนเนอร์เลื่อน
- การกั้นโดยใช้คอนเทนเนอร์
- การแก้ปัญหาคอนเทนเนอร์แบบเลื่อน