ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd

[Aoranuch Phupaloy]

ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd

แนะนำวิธีการใช้ Adobe xd (Adobe Experience Design)
ออกแบบหน้าจอหรือฟังก์ชั่นการใช้งานของเว็บแอปพลิเคชั่น
1. เลือก Template ที่เป็นเว็บ

web.1.1.png (26.16 KiB) Viewed 241 times

สามารถเลือกขนาดของหน้าจอที่้เราต้องการได้

2. ตกแต่ง

web2.2.jpg (78.81 KiB) Viewed 241 times

- เราสามารถตกแต่งพื้นหลังโดยการกดตรง Template แล้วเลือกสีหรือรูปแบบการใส่สี

3. ใส่รูปภาพ

web5.1.jpg (153.22 KiB) Viewed 241 times

- ใส่รูปภาพโดยการดึงภาพในเครื่องของเรามาใส่เลย

4. เชื่อมหน้าจอ

web3.3.jpg (99.09 KiB) Viewed 241 times

- เชื่อมหน้าจอโดยคลิกคำว่า Prototype
- จากนั้นโยงเส้นเชื่อมไปยังหน้าที่เราต้องการให้เชื่อมต่อการ

5. แสดงผล

web4.1.jpg (77.65 KiB) Viewed 241 times

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

[Duanghathai Termtem]

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

[Aoranuch Phupaloy]

ออกแบบหน้าจอเว็บแอปพลิเคชั่นโดยใช้ Adobe Xd
Adobe XD โปรแกรมออกแบบ UX UI จากค่าย Adobe เหมาะสำหรับดีไซน์ที่ต้องการออกแบบเว็บไซต์และแอปพลิเคชันรองรับการสร้างต้นแบบ Prototype
แนะนำวิธีการใช้ Adobe xd (Adobe Experience Design)
ออกแบบหน้าจอหรือฟังก์ชั่นการใช้งานของเว็บแอปพลิเคชั่น
1. เลือก Template ที่เป็นเว็บ

เลือก Template

web.1.1.png (26.16 KiB) Viewed 200 times

สามารถเลือกขนาดของหน้าจอที่้เราต้องการได้

2. ตกแต่ง

ตกแต่ง

web2.2.jpg (78.81 KiB) Viewed 200 times

- เราสามารถตกแต่งพื้นหลังโดยการกดตรง Template แล้วเลือกสีหรือรูปแบบการใส่สี

3. ใส่รูปภาพ

ใส่รูปภาพ

web5.1.jpg (153.22 KiB) Viewed 200 times

- ใส่รูปภาพโดยการดึงภาพในเครื่องของเรามาใส่เลย

4. เชื่อมหน้าจอ

เชื่อมหน้าจอ

web3.3.jpg (99.09 KiB) Viewed 200 times

- เชื่อมหน้าจอโดยคลิกคำว่า Prototype
- จากนั้นโยงเส้นเชื่อมไปยังหน้าที่เราต้องการให้เชื่อมต่อการ

5. แสดงผล

แสดงผล

web4.1.jpg (77.65 KiB) Viewed 200 times

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

Adobe XD ถูกสร้างมาเพื่อการออกแบบเว็บไซต์และ UX/UI เลยทำให้ฟังก์ชั่นและเครื่องมือต่างๆในโปรแกรมมีน้อย แต่เพียงพอที่จะออกแบบงานได้ครบถ้วน เหมาะมากสำหรับคนที่เริ่มต้นออกแบบ UI เพราะมีการที่อธิบายการทำงานของเครื่องมือที่จำเป็นอย่างครอบคลุม รวมทั้งมี Interface ที่ดูสบายตาและใช้งานง่าย

[Aoranuch Phupaloy]

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

แก้ไขแล้ว
- เพิ่มส่วนเกริ่น
- เพิ่มส่วนสรุป
- ใส่ลิงค์เชื่อมโยงในส่วนเกริ่นและส่วนสรุป

[Duanghathai Termtem]

แก้ไขของตัวเองให้ลบ Quote บนล่างทิ้งก่อน
ชื่อภาพ
ลิงค์เชื่อมมส่วนสรุปยังไม่ครบ 3 (นับที่เชื่อมของ mindphp)

[Aoranuch Phupaloy]

แก้ไขของตัวเองให้ลบ Quote บนล่างทิ้งก่อน
ชื่อภาพ
ลิงค์เชื่อมมส่วนสรุปยังไม่ครบ 3 (นับที่เชื่อมของ mindphp)

แก้ไขแล้วค่ะ

[Duanghathai Termtem]

แก้ไขของตัวเองให้ลบ Quote บนล่างทิ้งก่อน
ชื่อภาพ
ลิงค์เชื่อมมส่วนสรุปยังไม่ครบ 3 (นับที่เชื่อมของ mindphp)

แก้ไขแล้วค่ะ

มีการเชื่อมลิงค์ที่ซ้ำกันในบทความ

[Aoranuch Phupaloy]

แก้ไขของตัวเองให้ลบ Quote บนล่างทิ้งก่อน
ชื่อภาพ
ลิงค์เชื่อมมส่วนสรุปยังไม่ครบ 3 (นับที่เชื่อมของ mindphp)

แก้ไขแล้วค่ะ

มีการเชื่อมลิงค์ที่ซ้ำกันในบทความ

แก้ไขแล้วค่ะ