สอนออกแบบหน้าเว็บหรือแอปพลิเคชันเองง่าย ๆ (UX/UI)
เพื่อน ๆ เคยหรือไม่
มองดูแอปที่โด่งดังในท้องตลาด เช่น Grab, Airbnb, Blockdit และอื่น ๆ
แล้วบอกกับตัวเองว่า
"นี่เป็นไอเดียแบบเดียวกับที่ฉันเคยคิดเลยนี่"
ITGirl เชื่อว่าเพื่อน ๆ ทุกคนสามารถคิดไอเดียในการทำแอปหรือเว็บเจ๋ง ๆ ที่โลดแล่นอยู่ในท้องตลาดได้ แต่ไม่ได้ลงมือทำ
ไอเดียจะเป็นสิ่งที่ไม่มีความหมายเลย ถ้าหากไม่ลงมือทำ
ดังนั้น ITGirl จะไม่ปล่อยให้ไอเดียของเพื่อน ๆ อยู่แค่ในหัวแน่นอน
แต่การที่จะมานั่งออกแบบโดยการวาดใส่กระดาษนั้นคงจะล้าหลังไปแล้ว ผู้ใช้งานไม่เห็นภาพ ทำให้ไม่ทันต่อความต้องการของผู้ใช้งาน
วันนี้ ITGirl จะมาช่วยให้ไอเดียของคุณเป็นรูปเป็นร่างมากขึ้น มีปุ่มหรือเมนูต่าง ๆ ให้ผู้ใช้ได้ลองกดลองเล่นได้จริง ได้รับ feedback จาก user มาปรับแก้ได้เลย หรือจะนำไปเสนอขอทุนทำ startup เลยก็ได้ โดยที่ยังไม่ต้องเริ่มลงมือเขียนโปรแกรมใด ๆ ทั้งสิ้น
ในการออกแบบหน้าเว็บหรือแอปพลิเคชันนั้น มีองค์ประกอบ 2 ส่วน คือ
1. ประสบการณ์ที่ผู้ใช้ได้โต้ตอบกับแอปหรือเว็บ ไม่ว่าจะเป็นแง่บวกหรือแง่ลบ เรียกว่า User experience (UX)
2. หน้าเว็บหรือแอปที่ผู้ใช้สามารถโต้ตอบกับแอปหรือเว็บได้ผ่านปุ่มและไอคอนต่าง ๆ เรียกว่า User Interface (UI)
หรือที่นิยมเรียกรวม ๆ ว่า UX/UI นั่นเอง
https://www.dailytech.in.th/
และนั่นคือสิ่งที่ ITGirl ก็จะมาสอนเพื่อน ๆ ทำในวันนี้
เริ่มต้นกันที่ UX
หลักในการทำ UX คือต้องออกแบบขั้นตอนการใช้งานให้เข้าใจได้ง่าย โดยผู้ใช้ไม่จำเป็นต้องอ่านคู่มือใด ๆ ทั้งสิ้น
ส่วนการทำ UI หรือหน้าจอที่ผู้ใช้จะเห็นนั้น จะต้องสอดคล้องกับ UX ที่ได้ออกแบบไว้แล้วนั่นเอง
เครื่องมือที่จะใช้ในการออกแบบ UI ที่ ITGirl ใช้ก็คือ Figma (free) เนื่องจากใช้งานง่ายที่สุด เหมาะสำหรับผู้เริ่มต้น
ขั้นตอนในการทำมีอยู่ 3 ข้อ
1. เลือก
2. จัด เปลี่ยน ใส่
3. โยง
เริ่มต้นจากการเข้าไปที่เว็บไซต์
sign up ให้เรียบร้อย
ทางเว็บจะมี template ซึ่งก็จะมี component ต่าง ๆ ให้ฟรี สามารถหยิบมาใช้ได้เลย โดยการกด Get this free template
กด Duplicate มุมบนขวา
มันก็จะสร้าง project ให้เราอัตโนมัติ
ที่เมนูด้านซ้าย จะเป็นหน้าต่าง ๆ ให้กดปุ่มบวกที่ด้านบนของเมนูด้านซ้าย เป็นการ Add new page เพื่อสร้างกระดานแอปของเราเอง
จากนั้นก็ตั้งชื่อแอปให้เรียบร้อย
1. "เลือก" หน้าที่ใกล้เคียงกับแอปของเรา
เริ่มต้นคือให้คลิ๊กที่ Mobile UI Kit ที่เมนูด้านซ้าย
สมมติว่าต้องการหน้า Login ก็คลิ๊กที่คำว่า Login ที่เมนูด้านซ้าย หรือที่กระดานก็ได้
จากนั้นกด ctrl+c (MacOS ใช้ cmd+c) เพื่อ copy หน้าที่เราต้องการไว้
คลิ๊กที่หน้ากระดานแอปของเรา จากนั้นกด ctrl+v (MacOS ใช้ cmd+v) เพื่อนำหน้าที่เรา copy ไว้มาใช้
2. "จัด" องค์ประกอบ "เปลี่ยน" สีหรือข้อความ "ใส่"รูป
ถ้าต้องการจัด component อะไร ให้คลิ๊กแล้วลากได้เลย
หรือต้องการเปลี่ยนสี component ใด ก็เปลี่ยนได้ที่เมนูด้านขวา
หากต้องการใส่รูปภาพของเราเอง เช่น logo บริษัท ให้ไปดูที่แถบบนสุด เลือกที่รูปสี่หลี่ยม จากนั้นกด Place image เพื่อเลือกรูปที่อยู่ในเครื่องของเรา
รูปของเราก็จะเข้ามาอยู่ในหน้าแอป
จัดให้เรียบร้อย
สำหรับหน้าอื่น ๆ ในแอปก็ทำเช่นเดียวกัน คือไปก๊อปปี้จาก Mobile UI Kit แล้วมาวางในแอปของเรา
Tips: หากต้องการจัดกระดานของเราให้แต่ละหน้าเรียงสวย ๆ ให้กดค้างที่ชื่อของแต่ละหน้า แล้วลาก จัด ให้เรียบร้อย
หากต้องการเพิ่ม component เช่น ปุ่ม Text field ฯลฯ ให้เลือกที่ Components ที่เมนูด้านซ้ายมือ
จากนั้นเลือก component ที่ต้องการ สมมติอยากได้ปุ่ม ก็คลิ๊กที่ปุ่ม แล้วทำแบบเดิม คือ ctrl+c
และมาที่กระดาน App ของเรา คลิ๊กที่หน้าที่ต้องการวางไว้ จากนั้น ctrl+v
จัดวาง เปลี่ยนขนาด และเปลี่ยนคำได้ (โดยการ double click ที่คำ)
เพียงเท่านี้ Design ของเราได้เสร็จเรียบร้อยแล้ว
3. โยงหน้าต่าง ๆ เข้าด้วยกัน
มาถึงขั้นตอนที่จะทำให้ user สามารถโต้ตอบกับแอปเรา นั่นก็คือสร้าง prototype
ให้คลิ๊กที่ปุ่มหรือ component ใด ๆ ก็ตามที่ต้องการให้คลิ๊กได้ จากนั้นกด Prototype ที่เมนูด้านขวา
จะเห็นเครื่องหมายบวกขึ้นมา ให้กดค้างที่เครื่องหมายบวก แล้วโยงไปยังหน้าที่ต้องการจะลิงก์ไป
ทำแบบนี้กับทุกปุ่ม
เท่านี้ก็เป็นอันเสร็จเรียบร้อย
เราสามารถลองเล่นได้โดยกด play ที่แถบด้านบน มุมขวา
แอปที่เราออกแบบไว้ก็สามารถคลิ๊กได้เหมือนแอปจริง ๆ
เราสามารถ Share UI ของเราให้คนอื่นมาเล่นได้
เพื่อน ๆ ก็สามารถมากดเล่นแอปที่ไอออกแบบในวันนี้ได้ที่
สามารถ export งานของเราออกเป็น png, jpg, svg หรือ pdf ได้ โดยกด + ที่ Export ที่เมนูด้านขวา จากนั้นกด Export Mobile UI kit
นอกจากนี้ยังสามารถทำงานร่วมกับเพื่อนได้แบบ real-time โดยกด Share ที่แถบด้านบน มุมขวา
แล้วเปลี่ยน Anyone with the link เป็น can edit หรือถ้ากลัว link จะรั่วไหลก็ invite เป็นบุคคลก็ได้โดยใส่อีเมลของเพื่อนเข้าไป
เพิ่มเติม ทางเว็บมี template ให้มากมาย ไม่ว่าจะเป็นแอปบนมือถือ เว็บบนหน้าจอคอม หรือ UI Kit
เพื่อน ๆ สามารถ search และเลือกได้ตามใจชอบ
ทั้งหมดนี้ก็เป็นวิธีการทำ UX/UI โดยใช้ Figma
ไม่ยากเลยใช่ไหมคะ
ITGirl ทำได้ เพื่อน ๆ ทุกคนก็ต้องทำได้
ถ้าเห็นว่าเป็นประโยชน์ อย่าลืม กดไลค์ กดแชร์ กดติดตามให้ไอด้วยนะคะ
สำหรับวันนี้ ก็ต้องขอลาไปก่อน
สวัสดีค่ะ :)
- 58
โฆษณา
- ดาวน์โหลดแอปพลิเคชัน
- © 2024 Blockdit
