InVision Studio: ภาพรวมและการทบทวน

InVision Studio เป็นเครื่องมือสร้างต้นแบบและแอนิเมชั่นที่ให้คุณสร้างการออกแบบหน้าจอแบบเวกเตอร์ขั้นสูงได้อย่างรวดเร็วด้วยเลเยอร์ที่ยืดหยุ่นและผืนผ้าใบที่ไม่มีที่สิ้นสุด ถือเป็นหนึ่งในเครื่องมือสร้างต้นแบบที่มีความเที่ยงตรงสูงที่ดีที่สุด ด้วย InVision Studio คุณสามารถเพิ่มความเร็วเวิร์กโฟลว์ของคุณ สร้างต้นแบบเชิงโต้ตอบที่น่าสนใจ สื่อสารการออกแบบของคุณกับทีมและลูกค้า ทดสอบการออกแบบของคุณ และขจัดคำถาม ข้อกังวล และการเปลี่ยนแปลงการออกแบบก่อนขั้นตอนการพัฒนา

InVision Studio เป็นส่วนหนึ่งของชุดเครื่องมือ InVision ซึ่งรวมถึง InVision Cloud ซึ่งคุณสามารถเชื่อมต่อ จัดเก็บ และแบ่งปันเวิร์กโฟลว์การออกแบบผลิตภัณฑ์ทั้งหมดของคุณ และ InVision DSM ผู้จัดการระบบการออกแบบและไลบรารีที่คุณสามารถจัดเก็บและควบคุมทั้งหมดของคุณ ส่วนประกอบแบรนด์และ UX InVision Studio สามารถใช้ได้กับ Mac และ Windows คุณสามารถนำเข้าไฟล์ Sketch ได้เช่นกัน

คุณสมบัติของ InVision Studio

หลังจากดาวน์โหลดแอป InVision Studio แล้ว คุณจะได้รับโปรเจ็กต์ต่างๆ ให้เลือกสร้าง หลังจากเลือกสิ่งที่คุณต้องการออกแบบแล้ว คุณจะได้ทัวร์ชมอินเทอร์เฟซ

หากต้องการเพิ่มเลเยอร์หรือส่วนประกอบ ให้คลิกเครื่องหมายบวกที่ด้านบน เมื่อคุณเพิ่มส่วนประกอบ ตัวเลือกทั้งหมดของคุณจะปรากฏขึ้นทางด้านขวา

มาดูคุณสมบัติเด่นของ InVision กันดีกว่า

ปรับขนาดและครอบตัดรูปภาพโดยไม่ใช้มาสก์

คุณลักษณะนี้เรียกว่าการครอบตัดรูปภาพอัจฉริยะ การครอบตัดรูปภาพอัตโนมัติเมื่อคุณเปลี่ยนขนาด คล้ายกับการสร้างภาพเติมใน Sketch แล้วตั้งค่าเป็น "เติม" แต่มีขั้นตอนน้อยลงและใช้งานง่ายขึ้น การครอบตัดรูปภาพอัจฉริยะมีไว้สำหรับรูปภาพที่มีจุดโฟกัสใกล้ศูนย์กลาง ทางที่ดีที่สุดคือถ้าคุณต้องการครอบตัดเป็นวงกลม สี่เหลี่ยม หรือสี่เหลี่ยมมุมมน สำหรับรูปภาพที่มีจุดโฟกัสต่างกันหรือรูปร่างที่น่าสนใจกว่านั้น คุณจะต้องสร้างมาสก์เพื่อเข้าถึงตัวเลือกการปรับแต่งเพิ่มเติม

ที่มา: LearnInVisionStudio.com

แก้ไของค์ประกอบในขณะที่คุณเลื่อน

การแก้ไขส่วนหัวและส่วนท้ายไม่ใช่เรื่องใหม่สำหรับ InVision แต่การแก้ไของค์ประกอบอื่นๆ ตั้งค่าการเลื่อนเป็นแนวนอน แนวตั้ง หรือทั้งสองอย่าง จากนั้นเลือกองค์ประกอบที่คุณต้องการแก้ไขโดยคลิกไอคอนหมุดที่มุมขวาบน

เชื่อมโยงอาร์ตบอร์ดหลายอันเป็นแอนิเมชั่นเดียว

ตัวจับเวลาช่วยให้คุณควบคุมอาร์ตบอร์ดหลายแผ่นที่คุณต้องการเปลี่ยนเป็นแอนิเมชั่นเดียว คุณยังสามารถวนรอบแอนิเมชั่นเพื่อให้อาร์ตบอร์ดสุดท้ายชี้ไปที่อันแรกได้ หรือคุณสามารถสร้างแอนิเมชั่นหลายขั้นตอนโดยตรงไปยังส่วนอื่นของการออกแบบของคุณ แอนิเมชั่นที่ซับซ้อนเช่นนี้เหมาะอย่างยิ่งสำหรับวิดีโออินโทรและเอาท์โทร

สร้างทริกเกอร์การปัดสำหรับแอนิเมชั่นพารัลแลกซ์

ทริกเกอร์การปัดสามารถสร้างเอฟเฟกต์พารัลแลกซ์และแอนิเมชั่นประเภทอื่นๆ ที่เกิดขึ้นบนการเลื่อนได้

สร้างต้นแบบที่ตอบสนองโดยไม่ต้องเขียนโค้ด

ด้วยต้นแบบที่ตอบสนอง คุณสามารถสร้างทุกอย่างตามเปอร์เซ็นต์และปรับขนาดทุกองค์ประกอบตามขนาดอาร์ตบอร์ด จากนั้นคุณสามารถสร้างต้นแบบที่ตอบสนองต่อหน้าจอได้ทุกประเภท ทำให้ง่ายต่อการสร้างแบบจำลองขนาดต่างๆ นอกจากนี้ การตั้งค่าการออกแบบเป็น "ปรับขนาดได้" ใน Studio จะปรับขนาดโดยอัตโนมัติเมื่อดูในเบราว์เซอร์

ที่มา: LearnInVisionStudio.com

มิเรอร์ต้นแบบไปยังโทรศัพท์ของคุณ

หากคุณต้องการทดสอบแอนิเมชั่นหรือต้นแบบบนโทรศัพท์ของคุณ คุณสามารถแชร์ เลือก "กระจก" แล้วสแกนโค้ด QR ในแอพมือถือ

ใช้ทางลัดเหมือน Sketch

หากคุณใช้ Sketch อยู่ คุณจะคุ้นเคยกับทางลัดที่ InVision Studio ใช้อยู่แล้ว ซึ่งแทบทั้งหมดจะเหมือนกัน โดยเฉพาะอย่างยิ่งเมื่อพูดถึงตัวตรวจสอบ เลเยอร์ และแถบเครื่องมือ

สลับระหว่างธีมสีอ่อนและสีเข้ม

ผู้ที่ไม่ใช่นักออกแบบอาจไม่ทราบว่าคุณลักษณะนี้มีประโยชน์เพียงใด เมื่อคุณออกแบบอินเทอร์เฟซสีอ่อน คอนทราสต์ที่เพิ่มเข้ามาของธีมสีเข้มจะมีประโยชน์ (และในทางกลับกัน)

ทำงานร่วมกับทีมแบบเรียลไทม์

การทำงานร่วมกันและเวิร์กโฟลว์นั้นง่ายขึ้น และสมาชิกในทีมสามารถออกแบบและแสดงความคิดเห็นแบบเรียลไทม์ ด้วยการซิงค์ทั่วโลกและการอัปเดตตามเวลาจริงจะไม่มีใครหลุดพ้นจากวงจร

การออกแบบด้วย InVision Studio บนเบราว์เซอร์

ฉันต้องการแสดงให้คุณเห็นอย่างรวดเร็วว่าการทำงานกับ InVision Studio เวอร์ชันเบราว์เซอร์เป็นอย่างไร เราจะอธิบายสั้น ๆ เกี่ยวกับการออกแบบบอร์ด การสร้างต้นแบบ และการใช้โหมดมือเปล่า

การออกแบบบอร์ด

ศูนย์บัญชาการของคุณอยู่ที่ด้านบนขวาของหน้าจอ ห้าไอคอนย่อมาจาก:

• แก้ไขส่วนหัว
• ตั้งค่าประเภทเลย์เอาต์
• การตั้งค่า
• ความคิดเห็น
• แบ่งปัน

แก้ไขส่วนหัว

ฉันเล่นรอบกับส่วนหัวเล็กน้อย หลังจากคลิก "แก้ไขส่วนหัว" ตัวเลือกเหล่านี้จะปรากฏขึ้น:

ฉันแทนที่รูปภาพและข้อความ เบลอเล็กน้อย และเพิ่มการซ้อนทับเล็กน้อยเพื่อทำให้ข้อความโดดเด่น ฉันชอบตัวเลือก "ขนาด" เป็นพิเศษ คุณเพียงแค่วางเมาส์ไว้เหนือตัวเลือกนั้นแล้วเลือกจากสามขนาด

ตั้งค่าประเภทเค้าโครง

จากนั้นฉันก็เปลี่ยนประเภทเลย์เอาต์เป็น "พิถีพิถัน" ใช้สำหรับบล็อกเนื้อหาใต้ส่วนหัว ซึ่งจะปรากฏขึ้นเมื่อคุณเลื่อนลง

การแก้ไขส่วนเพิ่มเติม

หากคุณวางเมาส์ไว้ทางด้านขวาของชื่อส่วน คุณจะเห็นไอคอนสามไอคอน ลูกศรลงคือ "ย้ายส่วนลง" และ "X" คือ "ลบชื่อส่วน" หากคุณลบออกแล้วเปลี่ยนใจ คุณสามารถวางเมาส์เหนือพื้นที่เดิมได้ และคุณจะมีตัวเลือกในการเพิ่มชื่อส่วนใหม่

เมื่อคลิกเครื่องหมายบวกที่ด้านขวาของลูกศรและ "X" คุณจะได้รับเมนูใหม่ จากซ้ายไปขวา ไอคอนย่อมาจาก:

• เพิ่มสวอตช์สี
• เพิ่มหมายเหตุ
• อัพโหลดไฟล์

เมื่อวางเมาส์เหนือบล็อกเนื้อหา คุณจะเห็นตัวเลือกการปรับขนาดอีกครั้ง เช่นเดียวกับส่วนหัว การเลือกขนาดอื่นจะอัปเดตเค้าโครงที่เหลือโดยอัตโนมัติเพื่อปรับบล็อกใหม่ การคลิกบล็อกเนื้อหาจะเปิดหน้าต่างทางด้านขวา

การวางเมาส์เหนือสีใดสีหนึ่งในแถบจะแสดงรหัสสี หน้าต่างนี้ยังเป็นที่ที่สมาชิกในทีมสามารถแสดงความคิดเห็นเกี่ยวกับบล็อกการออกแบบเฉพาะนี้ได้

การสร้างต้นแบบ

ฉันลองใช้ตัวอย่างต้นแบบด้วยเพื่อแสดงให้คุณเห็นว่ามีตัวเลือกอะไรบ้าง

ที่นี่ศูนย์ควบคุมของคุณอยู่ด้านล่าง เริ่มจากไอคอนรูปตาจากซ้ายไปขวา ไอคอนต่างๆ มีดังนี้:

• โหมดดูตัวอย่าง
• โหมดสร้าง
• โหมดแสดงความคิดเห็น
• ตรวจสอบโหมด
• โหมดประวัติศาสตร์
• แบ่งปันทางสังคม
• อัพโหลดหน้าจอ
• การกำหนดค่า
• สถานะหน้าจอ

โหมดมือเปล่า

โหมดอิสระเริ่มต้นด้วยการสาธิตแบบโต้ตอบเพื่อแสดงวิธีใช้งานอย่างรวดเร็ว จากนั้น คุณทำงานกับผืนผ้าใบที่ไม่มีที่สิ้นสุดเพื่อรวมโปรเจ็กต์ของคุณเข้าด้วยกัน หากคุณกำลังทำงานในแอป คุณสามารถส่งลิงก์ "Collaborate live with Freehand" ให้กับสมาชิกในทีมและพวกเขาสามารถวาดและเพิ่มข้อความลงในโครงการได้แบบเรียลไทม์

ราคา InVision Studio

แผนบริการฟรีประกอบด้วยต้นแบบหนึ่งรายการพร้อมผู้ทำงานร่วมกันและหน้าจอไม่จำกัด ถ้านั่นคือทั้งหมดที่คุณต้องการ คุณก็ไม่ต้องจ่ายเงิน การสาธิตไม่นับรวมในขีดจำกัด หากคุณออกแบบต้นแบบมากกว่าหนึ่งตัว คุณจะได้รับสิทธิ์เข้าถึงฟรีหกวันเพื่อสร้างต้นแบบแบบไม่จำกัด หลังจากนั้น คุณจะต้องอัปเกรดเพื่อสร้างและใช้ต้นแบบเพิ่มเติม หากคุณต้องการอัพเกรด นี่คือแผนของพวกเขา:

ความคิดสุดท้าย

เมื่อเทียบกับเครื่องมือออกแบบอื่นๆ คุณอาจพบว่า InVision Studio ทำงานช้าเล็กน้อยและบางครั้งก็มีบั๊ก ไม่ได้หมายความว่าโดยทั่วไปแล้วจะช้า แต่ช้ากว่า (บางครั้ง) กว่าเครื่องมืออื่นๆ ที่คล้ายกัน เช่น Adobe XD, Figma และ Sketch ฉันไม่ได้ประสบปัญหาดังกล่าวเป็นการส่วนตัว แต่มีความคิดเห็นปรากฏขึ้นมากมายในบทวิจารณ์ นอกจากนี้ InVision Studio ยังไม่รองรับปลั๊กอิน ดังนั้นหากเป็นสิ่งสำคัญสำหรับคุณ ให้พิจารณา Sketch แทน

เมื่อพูดถึงการสร้างต้นแบบ InVision Studio นั้นยากที่จะเอาชนะ โดยเฉพาะอย่างยิ่งหากคุณต้องทำงานร่วมกับทีม อาจไม่มีประสิทธิภาพเท่ากับ Adobe XD แต่ก็ยังเป็นหนึ่งในเครื่องมือสร้างต้นแบบที่ดีที่สุดที่คุณจะพบ

อินเทอร์เฟซของ InVision Studio นั้นง่ายต่อการเรียนรู้และใช้งาน และไอคอนก็เก๋ไก๋และทันสมัย มีความช่วยเหลือมากมาย เช่น บทช่วยสอน ทัวร์ และลิงก์ไปยังคำแนะนำเพิ่มเติม (ที่กล่าวว่า ฉันได้อ่านบทวิจารณ์ที่ตรงกันข้าม ดังนั้นฉันคิดว่ามันเป็นเรื่องของรสนิยม) มีการคาดเดาน้อยมากกับ InVision Studio และคุณสามารถทำสิ่งที่ถูกต้องได้: สร้าง

เมื่อออกแบบ กฎทองคือการใช้อัตราส่วนทองคำ ดูคำแนะนำขั้นสูงสุดของฉันในการใช้และทำความเข้าใจอัตราส่วนทองคำ

ภาพเด่นผ่าน Visual Generation / shutterstock.com