แนะนำวิธีการใช้งานโปรแกรมออกแบบหน้าจอ InVision Studio

[Aoranuch Phupaloy]

แนะนำวิธีการใช้งานโปรแกรมออกแบบหน้าจอ InVision Studio
โปรแกรม InVision Studio เป็นโปรแกรมออกแบบ Prototype เพื่อให้คนที่ใช้(User)ใช้งานแล้วไม่งงหรือให้เห็นภาพในการใช้งาน เป็นโปรแกรมที่ใช้งานง่าย สามารถแชร์งานให้ทีมไปใช้งานทั้งตัว Desing และ ชุด API มีระบบ Design version control เพื่อควบคุมการดีไซน์งาน ไม่ว่าจะใช้เวอร์ชั่นไหนก็จะปรับให้ออกมาในทิศทางเดียวกันได้
มาดูวิธีการใช้งานในแต่ละส่วนกันเลย

หน้าแรกของโปรแกรม InVision

vision.JPG (70.56 KiB) Viewed 60 times

- ตรงนี้จะเป็นหน้าแรก ในกรณีที่เรายังไม่เข้าสู่ระบบ
- คลิกคำว่า signup free

ลงชื่อใช้งาน

vision2.JPG (54.53 KiB) Viewed 60 times

- กรอกอีเมลและรหัสผ่าน

รูปแบบโปรเจค

vision3.png (87.8 KiB) Viewed 42 times

- เมื่อกรอกรายละเอียดเรียบร้อยแล้ว
- คำว่า create ด้านบนซ้ายมือ คือการที่เราจะเพิ่มโปรเจคงาน

ปุ่มเพิ่มโปรเจค

vision4.png (38.26 KiB) Viewed 60 times

- เมื่อ create แล้ว ให้เลือกคำว่า prototype

ปุ่มโปรโตรไทป์

vision5.JPG (50.72 KiB) Viewed 60 times

- กรอกชื่อโปรเจค
- เลือกรูปแบบที่เราต้องการออกแบบ

all documents

vision6.png (71.52 KiB) Viewed 42 times

- รูปแบบหรือโปรเจคที่เราสร้างหรือการแชร์งานจะมาปรากฎตรง all documents ทั้งหมด

created by me

vision7.png (68.06 KiB) Viewed 42 times

- งานที่เราออกแบบจะมาอยู่ที่ created by me

แชร์งาน

vision8.png (48.6 KiB) Viewed 42 times

- people เพิ่มบุคคล กลุ่มที่เราแชร์งาน
ทั้งนี้ InVision Studio เหมาะสำหรับการที่ทำงานเป็นทีม Design system , design version control ตัวจัดเก็บโค้ด เก็บ Live component ที่เป็นตัวโค้ดสามารถใช้งานองค์กร, สามารถแชร์ให้กับทีมอื่นได้แต่จะมีข้อเสียอยู่อย่างหนึ่งคือ InVision Studio ต้องทำงานโดยอินเทอร์เน็ตเท่านั้น