วิธีแชร์ดีไซน์ (Prototype)
เมื่อดีไซน์เสร็จแล้วก็ถึงเวลาโชว์ผลงานหรือส่งต่อให้คนในทีมหรืออื่นๆ ได้รับชม ซึ่งคนอื่นๆ นั้นไม่จำเป็นต้องลงโปรแกรมใดๆ เลย ไม่ว่าจะบนคอมพิวเตอร์หรือโทรศัพท์มือถือ เพียงแค่เราส่ง URL ให้ก็สามารถเปิดดูผลงานผ่านทาง Browser ได้ทันที โดยเว็บไซต์เองก็ถือว่าใช้เวลาในการแสดงผลไม่นาน อีกทั้งผู้เยี่ยมชมยังสามารถมีปฏิสัมพันธ์กับดีไซน์ได้ ไม่ว่าจะกดปุ่ม เปลี่ยนหน้า หรือ Scroll ขึ้นลง
ซึ่งตรงนี้เองที่ทำให้การออกแบบ UI และ UX เป็นไปอย่างรวดเร็วและมีประสิทธิภาพ เนื่องจากผู้ชมและผู้มีส่วนในการตัดสินใจได้เห็นภาพและทดลองเล่นได้ทันที หากมีข้อแก้ไขดีไซน์เนอร์สามารถแก้ไขและอัปเดตดีไซน์ให้ชมอีกครั้งได้ทันทีด้วย URL เดิม โดยที่ผู้ชมแค่กดปุ่ม Refresh บน Browser เท่านั้น
การแชร์ Prototype
การแชร์ Prototype เป็นการแชร์แบบให้ User ได้เห็นภาพและมีปฏิสัมพันธ์กับดีไซน์ ซึ่งสามารถทำได้ ดังนี้
เลือกเมนู Share
- เลือกเมนู Share ที่ด้านบนสุดของโปรแกรม
- เลือกเมนู Share for Review
ตั้งค่าและสร้าง URL
- แก้ไขชื่อดีไซน์ที่ช่อง Title ซึ่งชื่อนี้จะแสดงบน Browser
- กดปุ่ม Update เพื่ออัปเดตดีไซน์ไปที่ URL เดิมหากเคยแชร์มาก่อนแล้ว
- กดปุ่ม New Link เพื่อสร้าง URL ใหม่
- กดปุ่ม Copy Link ด้านล่างสุดเพื่อส่ง URL ต่อให้คนอื่นไปเปิดใน Browser
การแสดงผล Prototype บน Browser
เมื่อเปิด URL บน Browser ผู้ชมจะสามารถ
- กดปุ่มที่เราได้ลิ้งก์เอาไว้เพื่อเปลี่ยนหน้า
- กดลูกศรที่แป้นพิมพ์เพื่อเปลี่ยนหน้าตามการจัดเรียง Artboard
- ขยายดีไซน์เต็มหน้าจอ (Full Screen) หากดีไซน์มีขนาดใหญ่มากการขยายเต็มหน้าจอจะทำให้ดีไซน์ดูคมชัดกว่า
- พิมพ์แสดงความคิดเห็น (Comment) ต่อดีไซน์ได้
การแชร์ Design Spec
การแชร์แบบนี้เป็นการแชร์ข้อมูลของดีไซน์ให้กับฝ่ายที่มีหน้าที่เกี่ยวข้องกับการพัฒนา ซึ่งจะทำให้ Designer กับ Developer ได้รับข้อมูลเกี่ยวกับดีไซน์ตรงกันมากขึ้น เช่น ค่าสี ขนาดตัวอักษร ระยะห่างของสิ่งต่างๆ เป็นต้น
เลือกเมนู Share
- เลือกเมนู Share ที่ด้านบนสุดของโปรแกรม
- เลือกเมนู Share for Development
การแสดงผล Spec บน Browse
เมื่อเปิด URL บน Browser ผู้ชมจะสามารถเลือกดูข้อมูลของแต่ละ Artboard ได้ เมื่อเลือก Artboard แล้วเราสามารถใช้เมาส์จิ้มไปที่ Element ใดๆ ก็ได้ ซึ่งจะทำให้เราได้รับข้อมูลบางอย่างที่ Element นั้นสามารถแสดงได้ เช่น ระยะห่างระหว่างชิ้นส่วนนี้กับชิ้นส่วนใกล้เคียง รวมถึงค่าสีที่เราสามารถเลือกได้ว่าจะก๊อปปี้เป็น HEX หรือ RGB
ระบบปฏิบัติการ: macOS Mojave
Adobe XD เวอร์ชัน: 18.0.12.9