6 พื้นฐานสำคัญในการออกแบบ Android UI Design

แม้ปัจจุบันการพัฒนา Android UI  จะมีหลายวิธีมากไม่ว่าจะเป็น การเขียนด้วย XML, เขียนด้วยภาษา Java/ Kotlin หรือการใช้ Jetpack Compose

แต่การพัฒนา Android UI ด้วยภาษา XML (eXtensible Markup Language) ก็เป็นพื้นฐานสำคัญที่จำเป็นต้องรู้ ถึงแม้ว่าจะมีวิธีการออกแบบ UI ในรูปแบบอื่นๆ เพราะสุดท้ายแล้ว XML ก็ยังเป็นวิธีพื้นฐาน ที่สามารถนำไปต่อยอดกับรูปแบบอื่นๆ ได้

ทำไม Android Developer ต้องสร้าง Android UI ให้เป็น?

การพัฒนา Android ในฝั่ง Logic หรือ Programming เบื้องหลังนั้น เป็นเพียงครึ่งเดียวในการพัฒนา Android Application

และการเป็น Android Developer ที่เก่งนั้น จะเขียนแอปพลิเคชันให้ทำงานตามที่ต้องการอย่างเดียวไม่พอ! ต้องสร้าง UI ให้ตรงตามที่ออกแบบไว้ได้ด้วย เพราะ Application ที่มี User Interface ไม่สวย อาจทำให้ผู้ใช้รู้สึกไม่น่าใช้ หรือเลิกใช้ไปเลยก็ได้

ดังนั้นการออกแบบและพัฒนา UI จึงเป็นสิ่งสำคัญ และเดี๋ยวนี้มีตัวช่วยที่เป็น Libraries หรือ Template สำเร็จรูปมากมาย แถมยังสวยและใช้ง่ายอีกด้วย

แล้วทำไมต้องเขียนด้วย XML ทำไมไม่ใช้ Libraries หรือ Template สำเร็จรูป

ในโลกการทำงานจริง เราจะเจอโจทย์การออกแบบ UI ที่แตกต่างกันมากมาย และงานที่มีคุณภาพก็ไม่ได้ออกแบบ UI เหมือนคนอื่นๆ ไปทุกอย่าง จึงทำให้ Android Developer มีโอกาสที่จะต้องเจอ UI ในหลากหลายรูปแบบที่ Libraries หรือ Template ไม่สามารถใช้ได้เลย

ดังนั้นพื้นฐานการสร้าง Android UI Design with XML จึงสำคัญ เพื่อให้สามารถปรับแก้ Libraries หรือสร้าง UI ใหม่ๆ ได้ตามต้องการ ดังนั้น Skooldio จึงรวบรวม พื้นฐานสำคัญ ที่จำเป็นต้องรู้ในการออกแบบ

UI มาฝากกันครับ

1. Margin & Padding

แทบจะไม่มี Application ไหน ที่ออกแบบมาแล้วไม่เว้นระยะห่างระหว่าง component ซึ่ง Margin และ Padding นี่แหละ ที่ใช้สำหรับการกำหนดระยะห่าง (spacing) ระหว่าง View (Component ใน Android)

ดังนั้นการเรียนรู้พื้นฐานการใช้ Margin & Padding ให้เหมาะสม (ตรงไหนควรใช้ Margin หรือ ตรงไหนควรใช้ Padding) จึงเป็นสิ่งที่จำเป็นมากๆ ในการพัฒนา Android Application

2. Color Resource

ในการทำงานจริง การออกแบบ Android Application จะประกอบด้วย UI ถึง 20-30 หน้า และการกำหนดสีในแต่ละ Component หรือในแต่ละหน้าจะต้องคุม CI ของแบรนด์

ซึ่งการกำหนดสีลงไปใน UI แต่ละหน้าโดยตรง อาจเกิดปัญหาสีไม่ตรงกัน เช่น Gradient/ Transparency ของ UI หน้านี้ไม่ตรงกับ UI หน้าอื่น หรือ หากมีการเปลี่ยนสี CI ของแอปพลิเคชัน นักพัฒนาจะต้องกำหนดค่าสีใหม่ใน UI แต่ละหน้าทั้งหมด หากมี 20 หน้าก็ต้องไปกำหนดค่าสีใหม่ทั้ง 20 หน้า ซึ่งใช้เวลาเยอะมาก และอาจตกหล่นแก้ไขไม่ครบได้

Color Resource จะเป็นการเก็บสีทั้งหมดที่ใช้ในแอปพลิเคชันไว้ในที่เดียว และหาก UI หน้าไหนต้องการใช้สี ก็ให้อ้างอิงตัวแปรที่เก็บสีนั้นมาใช้ใน UI หน้านั้นได้เลย ทำให้สีที่เราอ้างอิงจากที่เดียวกันใน UI แต่ละหน้าถูกต้องตลอด

3. String Resource

หากแอปพลิเคชั่นต้องรองรับหลายภาษา การทำ String Resource คือสิ่งที่ช่วยนักพัฒนาให้ทำงานง่ายขึ้นและประหยัดเวลามากขึ้น เพราะ String Resource จะเก็บข้อความแยกแต่ละภาษาไว้ในโฟลเดอร์เดียวกัน และอ้างอิงตัวแปรเพื่อเรียกใช้ในแต่ละหน้า UI หากมีการเปลี่ยนภาษาก็เปลี่ยนเฉพาะไฟล์ที่เก็บข้อความภาษาอื่นมาแสดงแทน ซึ่งหลักการจะเหมือนกับ Color Resource

4. Style Resource

การออกแบบ UI บน Android จะต้องมีการทำ Design System เพื่อกำหนด Style ของ Component ทั้งหมดในแอปพลิเคชันให้เหมือนกันทุกหน้า เช่น ปุ่มตกลงในแอปจะต้องเป็นสีเขียว ตัวหนังสือสีขาว ขอบมน ในทุกๆ หน้าที่มีปุ่มตกลงก็จะต้องตรงตาม Design System ที่ออกแบบไว้

การทำ Style Resource คือการสร้าง Style ของ Component (View) ต่างๆ ให้ตรงตาม Design System ไว้ในที่เดียวกัน และหาก UI หน้าไหนที่ต้องใช้ Style ตาม Design System ก็ให้ไปอ้างอิงตัวแปรใน Style Resource มาใช้ ซึ่งจะช่วยลดเวลาสร้าง Style ที่เหมือนเดิมซ้ำๆ ในทุกๆ หน้า

5. Shape Drawable และ State List Drawable

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

และหากต้องการทำให้ปุ่มสามารถเปลี่ยนสถานะต่างๆ ได้ เช่น ถ้ากดไปแล้วปุ่มจะ disable หรือ ระหว่างกดปุ่มจะมีสีเข้มขึ้น สามารถใช้ State List Drawable เพื่อเก็บสถานะต่างๆ ของปุ่ม และเรียกใช้เมื่อเกิด action ขึ้น ในการพัฒนาส่วนใหญ่มักจะใช้ Shape Drawable และ State List Drawable คู่กัน

6. การทำ UI ให้รองรับกับ Screen Size ที่แตกต่างกัน

บนโลกนี้มีอุปกรณ์ที่ใช้ระบบ Android ในหน้าจอที่แตกต่างกันมาก การทำแอปพลิเคชันให้รองรับกับหน้าจอหลากหลายขนาดจึงเป็นสิ่งสำคัญ เพื่อไม่ให้การแสดงผลในหน้า UI เพี้ยนไปจากที่ออกแบบ เช่น การกำหนด Layout ที่แสดงผลเมื่ออยู่ใน Mobile หรือ การกำหนด Layout ที่แสดงผลเมื่ออยู่ใน Tablet

ทั้งหมดนี้ก็เป็นพื้นฐานที่สำคัญ และจำเป็นต้องรู้ในการพัฒนา UI แต่ยังไม่หมดเพียงเท่านี้!! ยังมีพื้นฐานที่จำเป็นในการพัฒนา Android อื่นๆ อีกมากมาย หากอยากรู้เพิ่มเติมสามารถไปเรียนกันได้ในคอร์ส Android Series สอนโดยคุณ สมเกียรติ กิจวงศ์วัฒนะ  Staff Software Engineer, LINE MAN Thailand และ Google Developers Expoert สาขา Android

Promotion พิเศษ! ราคาเปิดตัวเพียง 5,290 บาท จากราคาเต็ม 7,970 บาท ประหยัดไปถึง 2,680 บาท! สำหรับ 100 คนแรกเท่านั้น (เฉพาะสมัครในนามบุคคล) เพียงกรอกโค้ด ANDROID_T1

สมัครเรียนเลย >> www.skooldio.com/bundles/android-series