การอัปเดต 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. จากนั้นให้เปิดโฟลเดอร์ที่มีภาพที่จะเลื่อนและลากลงบนผืนผ้าใบ พวกเขาถูกเพิ่มโดยอัตโนมัติในโครงการและคุณสามารถเห็นพวกเขาอยู่ในแต่ละชั้นถ้าคุณ คลิกแท็บเลเยอร์. จากนั้นผมเลือกเครื่องมือลูกศร (เลือก) เลือกภาพและลากไปยังตำแหน่งใหม่เพื่อเพิ่มช่องว่างระหว่างพวกเขา จากนั้นผมก็เลือกภาพทั้งหมดและ คลิกปุ่มกระจายในแนวตั้ง บนแถบเครื่องมือ นี้เว้นระยะห่างภาพ ขั้นตอนต่อไปคือการเลือกเนื้อหาทั้งหมดที่จะเลื่อนลงไปและเลือกเนื้อหาทั้งหมด คลิกปุ่ม Container หรือเลือก Create Scroll Container จากปุ่ม Group ป๊อปอัพ เมื่อคอนเทนเนอร์ถูกสร้างขึ้นแล้วคุณจะเห็นในแผงเลเยอร์ - คลิกที่คอนเทนเนอร์แล้วลากที่จับด้านล่างขึ้นไปที่ด้านล่างของผืนผ้าใบ. คลิกที่ปุ่มแสดงตัวอย่าง ที่ด้านล่างของแผงคุณสมบัติและจะเปิดหน้าต่างเบราเซอร์ ใช้ล้อเลื่อนของเมาส์เพื่อเลื่อนดูเนื้อหา เมื่อต้องการกลับไปที่โครงการของคุณ คลิกที่ปุ่มแก้ไข ที่ด้านล่างขวาของหน้าต่างเบราเซอร์ การเลื่อนแนวนอนทำได้ง่ายดายเพียงเท่านี้ ในกรณีนี้ให้ลากภาพชุดต่างๆลงบนผืนผ้าใบและลากภาพเหล่านี้เข้าหากัน เมื่อเลือกภาพแล้วฉันจะคลิกที่ปุ่มจัดตำแหน่งด้านบนเพื่อให้แน่ใจว่าทั้งหมดสอดคล้องกัน ฉันกดแป้น Shift ค้างไว้และเลือกแต่ละเลเยอร์ในแผงเลเยอร์ ด้วยภาพที่เลือกฉัน คลิกปุ่มคอนเทนเนอร์ และในแผงคุณสมบัติที่เลือกในแนวนอน ในพื้นที่พฤติกรรม จากนั้นฉันได้ทดสอบโครงการในหน้าต่างเบราเซอร์ด้วยการคลิกปุ่มแสดงตัวอย่าง แม้ว่าฉันได้แสดงวิธีการสร้างการเลื่อนแนวตั้งและแนวนอนแต่ละแบบตราบเท่าที่คุณวางเนื้อหาที่เลื่อนลงในคอนเทนเนอร์ได้คุณสามารถวางภาชนะเหล่านี้ไว้ในส่วนต่างๆของหน้าจอได้ ตัวอย่างเช่นหน้าเว็บอาจมีเนื้อหาเลื่อนแบบแนวตั้งในเมนูด้านข้างและเลื่อนเนื้อหาในแนวนอนในการนำเสนอภาพนิ่งในหน้าเดียวกัน ในความเป็นจริงคอนเทนเนอร์สามารถมีทั้งเลื่อนแนวตั้งและแนวนอนสำหรับรายการต่างๆเช่นตัวเก็บภาพที่มีขนาดเล็กหรือมากกว่าหนึ่งโหล หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับคุณลักษณะนี้ในการตรวจสอบ atomic.io: วิธีการสร้างเนื้อหาการเลื่อนแนวนอนใน Atomic
